<template>
  <div class="page">
    <div class="contaiber">
      <div class="tip-box flex" v-if="tradeState == '盘中' && (!activeMarket || !activeMarket.id)">
        <img class="icon" src="/img/product/info1.png" alt="极度证券">
        <div class="text">
          <!-- 市场目前开放,将在{{ sign }} (GMT+8) 关闭 -->
          {{ $t('product.l68').replace('{p}', sign) }}
        </div>
      </div>
      <div class="section">
        <div class="col">
          <div>
            <!-- 小数位 -->
            {{ $t('product.l69') }}
          </div>
          <div>{{ symbolInfo.digits }}</div>
        </div>
      </div>
      <div class="section">
        <div class="col">
          <div class="flex left">
            <div class="lab">
              <!-- 合约量 -->
              {{ $t('product.l70') }}
            </div>
            <!-- 合约量说明：合约量是指在交易中，每手合约的数量。 -->
            <img class="icon" @click="descriptionPopShow($t('account.l115'), $t('account.l116'))" src="/img/product/info1.png" alt="极度证券">
          </div>
          <div>{{ symbolInfo.contract_size }}</div>
        </div>
      </div>
      <div class="section">
        <div class="col">
          <div class="flex left">
            <div class="lab">
              <!-- 杠杆倍数 -->
              {{ $t('product.l71') }}
            </div>
            <!-- 杠杆倍数说明：杠杆倍数是指客户在交易中可用的融资比例。 -->
            <img class="icon" @click="descriptionPopShow($t('account.l117'), $t('account.l118'))" src="/img/product/info1.png" alt="极度证券">
          </div>
          <div>{{ (symbolInfo.margin_divider1 || symbolCopy.margin_divider).toFixed(0) }}</div>
        </div>
      </div>
      <div class="section">
        <div class="col">
          <div>
            <!-- 单笔交易手数 -->
            {{ $t('product.l72') }}
          </div>
        </div>
        <div class="box">
          <div class="row flex">
            <div class="flex">
              <!-- 最小 -->
              {{ $t('product.l73') }}
            </div>
            <div v-if="config.lot_min">{{ config.lot_min / 100 }}</div>
          </div>
          <div class="row flex">
            <div class="flex">
              <!-- 最大 -->
              {{ $t('product.l74') }}
            </div>
            <div v-if="config.lot_max">{{ config.lot_max / 100 }}</div>
          </div>
        </div>
      </div>
      <div class="section">
        <div class="col">
          <div class="flex left">
            <div class="lab">
              <!-- 点差 -->
              {{ $t('product.l75') }}
            </div>
            <!-- 点差说明：点差是指交易品种的买价和卖价之差。 -->
            <img class="icon" @click="descriptionPopShow($t('account.l119'), $t('account.l120'))" src="/img/product/info1.png" alt="极度证券">
          </div>
          <div>{{ product.spread }}</div>
        </div>
      </div>
      <div class="section">
        <div class="col">
          <div>
            <!-- 隔夜利息 -->
            {{ $t('product.l76') }}
          </div>
        </div>
        <div class="box">
          <div class="row flex">
            <div class="flex">
              <!-- 做多 -->
              {{ $t('product.l77') }}
            </div>
            <div>{{ product.buy_positions }}</div>
          </div>
          <div class="row flex">
            <div class="flex">
              <!-- 做空 -->
              {{ $t('product.l78') }}
            </div>
            <div>{{ product.sell_positions }}</div>
          </div>
        </div>
      </div>
      <div class="section">
        <div class="col">
          <div class="flex">
            <!-- 最大持仓金额 -->
            {{ $t('product.l79') }}
          </div>
          <div v-if="symbolCopy.max_amount == -1">
            <!-- 无限制 -->
            {{ $t('product.l80') }}
          </div>
          <div v-else>
            {{ $numToThousand(symbolCopy.max_amount) }}
          </div>
        </div>
      </div>
      <div class="section">
        <div class="col">
          <div class="flex">
            <!-- 报价货币 -->
            {{ $t('product.l81') }}
          </div>
          <div>{{ symbolInfo.margin_currency }}</div>
        </div>
      </div>
      <div class="section">
        <div class="col1">
          <div class="flex">
            <!-- 交易时间 -->
            {{ $t('product.l82') }}(GMT+8)
          </div>
          <div class="time-box">
            <div class="item flex" v-for="(item, index) in timeList" :key="index">
              <div class="week">{{ weekText[item.week] }}</div>
              <div>{{ item.time.join(',') }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="bottom">
        <!-- 证券交易服务由极度证券提供 -->
        {{ $t('common.l43') }}
      </div>
    </div>
    <van-popup get-container="body" v-model="textDescriptionPop" round position="bottom">
      <textDescription :title="title" :text="text"/>
    </van-popup>
  </div>
</template>
<script>
import { getProductConfigList } from "@/api/product";
import { mapGetters } from "vuex";
import { getSystemDatetime } from '@/api/app'
import textDescription from "@/components/textDescription";
export default {
  props: ['symbolInfo', 'tradeState', 'activeMarket', 'symbolCopy'],
  components: {
    textDescription
  },
  data () {
    return {
      textDescriptionPop: false,
      title: '',
      text: '',
      config: {},
      product: {},
      timeList: [],
      sign: '',
      // weekText: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
      weekText: [this.$t('product.l83'), this.$t('product.l84'), this.$t('product.l85'), this.$t('product.l86'), this.$t('product.l87'), this.$t('product.l88'), this.$t('product.l89')],
    }
  },
  computed: {
    ...mapGetters(['accountList']),
    accountInfo() {
      var info = {}
      this.accountList.forEach(item => {
        if(item.server == this.symbolInfo.market) {
          info = item
        }
      })
      return info
    }
  },
  created () {
    this.getProductTimeList()
    this.getProductConfigList()
    this.getSystemDatetime()
  },
  methods: {
    getProductConfigList() {
      var data = {
        symbol: this.symbolInfo.symbol
      }
      if (this.isLogin) {
        data.account = this.accountInfo.account
        data.server = this.accountInfo.server
      }
      getProductConfigList(data).then(res => {
        this.config = res.config || {}
        this.product = res.product || {}
      }).catch(() => {

      })
    },
    getProductTimeList() {
      var timeList = this.symbolInfo.timeList || []
      var sign = {}
      var timeList1 = []
      timeList.forEach((item, index) => {
        if (sign[item.week] !== undefined) {
          timeList1[sign[item.week]].time.push(item.start_time + '-' + item.end_time)
        } else {
          timeList1.push({
            week: item.week,
            time: [item.start_time + '-' + item.end_time]
          })
          sign[item.week] = timeList1.length - 1
        }
      })
      this.timeList = timeList1
    },
    getSystemDatetime() {
      getSystemDatetime().then(res => {
        this.getTradeState(res.timestamp)
      }).catch(() => {})
    },
    getTradeState(timestamp) {
      var nowTime = new Date(timestamp);
      var offset = nowTime.getTimezoneOffset()/60;
      var beijingDate = new Date(timestamp + ((offset + 8) * 60 * 60 * 1000));
      var year = beijingDate.getFullYear()
      var m = beijingDate.getMonth() + 1
      if (m < 10) {
        m = '0' + m
      }
      var d = beijingDate.getDate()
      if (d < 10) {
        d = '0' + d
      }
      var week = beijingDate.getDay()
      // 获取北京时间的时间戳
      var beijingTimestamp = timestamp;
      var sign = '';
      (this.symbolInfo.timeList || []).forEach(item => {
        if (item.week == week) {
          if (new Date(`${year}-${m}-${d}T${item.start_time}:00+08:00`).getTime() < beijingTimestamp && beijingTimestamp < new Date(`${year}-${m}-${d}T${item.end_time}:00+08:00`).getTime()) {
            sign = `${year}-${m}-${d} ${item.end_time}`
          }
        }
      })
      this.sign = sign
    },
    descriptionPopShow(title, text) {
      this.title = title
      this.text = text
      this.textDescriptionPop = true
    }
  }
}
</script>
<style lang="less" scoped>
.page {
  max-height: calc(100vh - 120px);
  padding-top: 5px;
  background-color: #F6FAFE;
  overflow-y: auto;
}
.contaiber {
  padding: 11px 17px 0;
  background-color: #fff;
}
.tip-box {
  background: #F6FAFE;
  border-radius: 4px;
  padding: 10px 9px;
  font-size: 12px;
  color: #676767;
  column-gap: 3px;
  .text {
    flex: 1;
    min-width: 10%;
    max-width: 100%;
  }
  .icon {
    width: 12px;
  }
}
.section {
  padding: 19px 0;
  &+.section {
    border-top: 1px solid #EDEDED;
  }
}
.col {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-1-);
  line-height: 20px;
  justify-content: space-between;
  display: flex;
  align-items: center;
  column-gap: 16px;
  .icon {
    width: 14px;
  }
  .left,.lab {
    min-width: 0px;
    max-width: 100%;
  }
  .left {
    column-gap: 5px;
  }
}
.col1 {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-1-);
  line-height: 20px;
}
.box {
  margin-top: 20px;
  .row {
    justify-content: space-between;
    font-size: 16px;
    font-weight: 600;
    color: var(--color-1-);
    &+.row {
      margin-top: 15px;
    }
    >.flex {
      color: #808080;
      font-size: 14px;
      font-weight: 400;
    }
    .icon {
      width: 14px;
      margin-left: 4px;
    }
  }
}
.time-box {
  font-size: 12px;
  font-weight: 400;
  color: #505050;
  line-height: 20px;
  margin-top: 12px;
  .item {
    justify-content: space-between;
  }
}
.bottom {
  text-align: center;
  padding-top: 19px;
  padding-bottom: 5px;
  font-size: 12px;
  color: #AEAEAE;
}
</style>