<template>
  <div class="hasrightaside-box position-analysis-detail-page">
    <div class="detail-top">
      <span></span>
      <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"/>
    </div>
   
  </div>
</template>

<script>
import chartDetail from './components/chartDetail.vue'
export default {
  components: { chartDetail },
  data() {
    return {
    }
  },

  methods: {
    // 操作选项
    handleOpt(type){
        let obj={}
        if(type==='date'){
            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()  
      }
    }
  },

  mounted() {
  }
}

</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;
        }

    }
</style>

<style lang="scss" scoped>
@import '~@/styles/theme-vars.scss';
.position-analysis-detail-page{
  min-height: calc(100vh - 410px);
  .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 {
    padding: 20px;
    background: #fff;
    border-right: 2px solid #F2F2F2;
  }
}
</style>