<template>
  <div class="hasrightaside-box position-analysis-detail-page">
    <div class="detail">
        <div class="detail-top">
            <div>
                <!-- <el-button type="primary" @click="refreshData" plain>一键刷新</el-button> -->
                <el-button type="primary" @click="handleOpt('beforeClassifyType')">上一个合约</el-button>
                <el-button type="primary" @click="handleOpt('nextClassifyType')">下一个合约</el-button>
            </div>
        </div>
        <div class="content-box detail-content">
            <chartDetail ref="chartDetailRef" 
                :disabledNextBtn="disabledNextBtn"
                :selectDate="selectDate"
                :pickerOption="pickerOption"
                @setInfo="e => { selectDate=e.date;}"
                @handleOpt="handleOpt"
            />
        </div>
    </div>
    <div class="list" :class="{'expand-list':isSlide}">
        <div class="header">
            <span>持仓列表</span>
            <div>历史合约
                <el-switch
                    v-model="isHistory"
                    size="large"
                />
            </div>
        </div>
        <el-tabs 
            class="tabs-wrap"
            v-model="activeType"
        >
            <el-tab-pane 
                v-for="item in list"
                :key="item.Exchange"
                :label="item.Exchange" 
                :name="item.Exchange"
            >
                <indexContent 
                  :list="item.Items" 
                  :num="item.Num" 
                  :time="item.DataTime" 
                  :exchange="item.Exchange"
                  :now="item.CurrDate"
                  :isHistory="isHistory"
                />
            </el-tab-pane>
        </el-tabs>
        <span class="slide-icon" @click="isSlide = !isSlide">
            <i :class="{'el-icon-d-arrow-left':!isSlide,'el-icon-d-arrow-right':isSlide}"></i>
        </span>
    </div>
  </div>
</template>

<script>
import chartDetail from './components/chartDetail.vue'
import indexContent from './components/indexContent.vue'
import {apiPositionAnalysisList} from '@/api/modules/positionAnalysis'
export default {
  components: { chartDetail , indexContent },
  data() {
    return {
      selectDate: '',

      /* list */
      activeType: '',
      list: [],
      loading: false,
      isHistory:false,
      isSlide:false,
    }
  },
  computed: {
    pickerOption() {
      let that = this;
      let obj = {
        // 周六日禁用
        disabledDate(t) {
          if ([5, 6].includes(that.$moment(t).weekday())) {
            return true;
          } else {
            return false;
          }
        },
      };
      return obj;
    },

    disabledNextBtn() {
      if(this.selectDate) {
        return new Date(this.selectDate).getTime() >= new Date(this.$refs.chartDetailRef.latestDate).getTime()
      }else {
        return true
      }
    }
  },
  methods: {
    // 操作选项
    handleOpt(type){
        let obj={}
        if(type==='date'){
            this.selectDate = this.$refs.chartDetailRef.selectDate
            obj={
                opt:type,
                val:this.selectDate
            }
        }else if(type==='beforeDate'){
            obj={
                opt:type
            }
        }else if(type==='nextDate'){
            obj={
                opt:type
            }
        }else if(type==='beforeClassifyType'){
            obj={
                opt:type
            }
        }else if(type==='nextClassifyType'){
            obj={
                opt:type
            }
        }
        this.$refs.chartDetailRef&&this.$refs.chartDetailRef.getHandles(obj);
    },

    refreshData() {
      if(this.$refs.chartDetailRef) {
        this.$refs.chartDetailRef.selectDate=''
        this.$refs.chartDetailRef.getInfo()  
      }
    },

    getList(){
      this.loading=true
      apiPositionAnalysisList().then(res=>{
          this.loading=false
          if(res.Ret!==200) return
          this.list=res.Data||[]
          this.activeType= this.$route.query.exchange||res.Data[0]&&res.Data[0].Exchange
          this.isHistory = Boolean(this.$route.query.isHistory)
      })
    }
  },

  mounted() {
    this.getList()
  }
}

</script>

<style lang="scss">
    .el-date-editor--date{
        width: 180px !important;
        .el-input__wrapper{
            background: #F6F6F6;
            border: 1px solid #EBEBEB;
            border-radius: 20px;
            height: 40px;
            box-shadow: none;
        }
    }
    .position-analysis-detail-page-dialog{
        .el-dialog__header{
            border-bottom: 1px solid #E9E9E9;
            margin-right: 0;
        }

    }
    .position-analysis-detail-page{
        .list{
            .tabs-wrap{
                .el-tabs__nav{
                    display: flex;
                    width: 100%;
                }
                .el-tabs__item{
                    text-align: center;
                    flex: 1;
                    padding:0;
                }
                .el-tabs__header{
                    margin-bottom: 0;
                }
            }
            
        }
    }
</style>

<style lang="scss" scoped>
@import '~@/styles/theme-vars.scss';
.position-analysis-detail-page{
  min-height: calc(100vh - 410px);
  display: flex;
  position: relative;
  .list{
      width:379px;
      margin-left:20px;
      position: relative;
      background: #fff;
      border: 1px solid #F2F2F2;
      border-radius: 4px;
      /* box-shadow: 0 3px 6px rgba(0,0,0,.05); */
      .header{
          padding:30px;
          display: flex;
          justify-content: space-between;
          box-sizing: border-box;
          span{
              font-size: 16px;
              font-weight: 500;
          }
      }
      .tabs-wrap{
          flex: 1;
          border-top: 1px solid #DCDFE6;
      }
      .slide-icon{
        position:absolute;
        left: -10px;
        padding: 20px 0;
        box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.3);
        border-radius: 5px;
        cursor: pointer;
        top: 50%;
        transform: translateY(-50%);
        z-index: 99;
        background-color: #fff;
      }
  }
  .expand-list{
      position:absolute;
      right:0;
      width:50%;
  }
  .detail{
      flex:1;
      display: flex;
      flex-direction: column;
      max-width: calc(100% - 379px - 20px);
  }
  .detail-top {
    padding: 20px;
    margin-bottom: 20px;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 4px;
    box-shadow: 0 3px 6px rgba(0,0,0,.05);
    display: flex;
    justify-content: space-between;
  }
  .detail-content {
      flex: 1;
    padding: 20px;
    background: #fff;
    border-right: 2px solid #F2F2F2;
  }
}
</style>