<template>
  <view class="trade-index">
    <uni-nav-bar :fixed="true" color="#ffffff" background-color="#ffffff" :status-bar="true">
      <view class="left-title">
        <view v-if="mainKey === '0'" class="text-view"><text class="title">交易大厅</text></view>
        <view v-if="mainKey === '1'">
          <view class="bar-contant">
            <view class="check-control title-left36" :class="current === '0' ? 'check-title' : 'oncheck-title'" @click="controlChange('0')">
              <text>报价</text>
            </view>
            <view class="check-control title-left" :class="current === '1' ? 'check-title' : 'oncheck-title'" @click="controlChange('1')">
              <text>订单</text>
            </view>
          </view>
        </view>
      </view>
    </uni-nav-bar>
    <!-- <view class="top-bar">
			<view v-if="mainKey === '0'" class="text-view"><text class="title">交易大厅</text></view>
			<view v-if="mainKey === '1'">
				<view class="bar-contant">
					<view class="check-control title-left36" :class="current === '0' ? 'check-title' : 'oncheck-title'" @click="controlChange('0')"><text>报价</text></view>
					<view class="check-control title-left" :class="current === '1' ? 'check-title' : 'oncheck-title'" @click="controlChange('1')"><text>订单</text></view>
				</view>
			</view>
		</view> -->
    <view class="" v-if="mainKey === '0'"><not-logged @loginChange="loginChange()"></not-logged></view>
    <view class="" v-if="mainKey === '1'">
      <view class="content">
        <view v-if="current === '0'">
          <quotationList :refresh="refresh"></quotationList>
        </view>
        <view v-if="current === '1'">
          <orderList :refresh="refresh"></orderList>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import notLogged from '@/components/not-logged/not-logged.vue'
import scrollList from '@/components/scroll-list/scroll-list.vue'
import quotationList from './quotationList.vue'
import orderList from './orderList.vue'
export default {
  components: { notLogged, scrollList, quotationList, orderList },
  data() {
    return {
      key: '',
      mainKey: '1',
      current: '0',
      items: ['报价', '订单'],
      refresh: false
    }
  },
  onShow() {
    this.refresh = !this.refresh
  },
  methods: {
    loginChange() {
      this.mainKey === '0' ? '1' : '0'
    },
    // 标题选项卡点击事件
    controlChange(value) {
      this.current = value
    }
  }
}
</script>

<style lang="scss">
.trade-index {
  .left-title {
    position: relative;
    left: -100rpx;
  }
  .top-bar {
    background-color: rgb(255, 255, 255);
    border-bottom-width: 2rpx;
    border-bottom-style: solid;
    border-bottom-color: #eee;
    z-index: 998;
    height: 88rpx;
  }
  .title {
    font-size: 40rpx;
    color: #000000;
    letter-spacing: 0;
    font-weight: 500;
  }
  .text-view {
    padding: 20rpx;
  }
  .bar-contant {
    display: flex;
  }
  .check-title {
    font-size: 40rpx;
    color: #000000;
    // letter-spacing: 0;
    font-weight: 550;
    border-bottom: 4rpx solid #007aff;
  }
  .oncheck-title {
    font-size: 32rpx;
    color: #555555;
    font-weight: 550;
  }
  .check-control {
    line-height: 70rpx;
    width: 80rpx;
    text-align: center;
  }
  .title-left {
    margin-left: 24rpx;
  }
  .title-left36 {
    // margin-left: 36rpx;
  }
}
</style>
