<template>
  <div class="curve-import">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <div class="top">
        <div class="mg-r-30">
          <span class="mg-r-5"><span class="require">*</span>数据集</span>
          <el-select v-model="dataSet" placeholder="">
            <el-option v-for="item in datasetOptions" :key="item.value" :label="item.text" :value="item.value"></el-option>
          </el-select>
        </div>
        <div class="mg-r-30">
          <span class="mg-r-5"><span class="require">*</span>价格日期</span>
          <el-date-picker v-model="priceDate" type="date" placeholder="" value-format="yyyy-MM-dd" ></el-date-picker>
        </div>
        <div class="mg-r-20">
          <span class="mg-r-5">关键字</span>
          <el-input v-model="searchWord" placeholder="" style="width: 200px"></el-input>
        </div>
        <div>
          <el-button-group>
            <el-button size="small" type="primary" @click="query" :loading="btnLoading" style="margin-right: 8px">查询</el-button>
            <el-button size="small" type="default" @click="reset">重置</el-button>
          </el-button-group>
        </div>
      </div>
      <el-tab-pane label="市场价格" name="marketData" >
        <market-data ref="marketData" :dataSet="dataSet" :searchWord="searchWord" :priceDate="priceDate" :bondTypeOptions="bondTypeOptions" :rateType="rateType" :tableHeight="tableHeight"></market-data>
      </el-tab-pane>
      <el-tab-pane label="收益率曲线" name="profitCurve" lazy>收益率曲线</el-tab-pane>
      <el-tab-pane label="远期曲线" name="fwdCurve" lazy>远期曲线</el-tab-pane>
      <el-tab-pane label="波动率曲线" name="volatilityCurve" lazy>波动率曲线</el-tab-pane>
      <el-tab-pane label="债券曲线" name="bondCurve" lazy>债券曲线</el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import request from '@/http/request.js'
import {formateDate} from '@/utils'
export default {
  components: {
    marketData: () => import('./marketData.vue')
  },
  data() {
    return {
      activeName: 'marketData',
      dataSet: '',
      datasetOptions: [],
      priceDate: '',
      sysDate: '',
      searchWord: '',
      btnLoading: false,
      bondTypeOptions: [],
      rateType: []
    }
  },
  created() {
    this.handleResize()
    Promise.all([this.getSysDate(), this.queryComboxData()]).then(res => {
      if (res[0].success) {
        this.priceDate = formateDate(res[0].data.result)
        this.sysDate = formateDate(res[0].data.result)
      }
      if (res[1].success) {
        this.datasetOptions = res[1].data.result.dataSet
        this.dataSet = this.datasetOptions.length > 0 ? this.datasetOptions[0].value : ''
        this.bondTypeOptions = res[1].data.result.BondImportType
        this.rateType = res[1].data.result.RatingType
        console.log(this.rateType);
        
      }
    }).catch(e => {
      console.log(e);
    })
  },
  methods: {
    // 查询系统日期
    getSysDate() {
      return new Promise((resolve, reject) => {
        request({
          url: 'mds/baseRcs/getSystemDate.action',
          method: 'post'
        }).then(res => {
          resolve(res)
        }).catch(e => reject(e))
      })
    },
    
    queryComboxData() {
      return new Promise((resolve, reject) => {
        const param = {
          'codifierGrpCodes': 'static_cacheType,DataType,static_bondPriceType,BondImportType,BondPriceType,static_curveSurfaceList,static_siteUser,static_dataSet,static_curveSurfaceUnderlyingType,RatingType,RatingTermType,updateType,PmsVtype,PubInstrument,productList'
        }
        request({
          url: 'mds/baseRcs/queryComboxData.action',
          method: 'post',
          data: param
        }).then(res => {
          resolve(res)
        }).catch(e => reject(e))
      })
    },

    query() {
      console.log(this.$refs[this.activeName]);
      
      this.$refs[this.activeName].query()
    },
    reset() {
      this.searchWord = ''
      this.dataSet = this.datasetOptions[0].value
      this.priceDate = this.sysDate
    },
    handleResize () {
      const h1 = document.documentElement.clientHeight
      const height = h1 - 350
      this.tableHeight = height
    },
  }
}
</script>
<style lang="scss" scoped>
.curve-import {
  height: 100%;
  .top {
    background-color:var(--bg-color-2);
    color: var(--table-text-color);
    font-size: var(--font-size-mini);
    padding-left: 16px;
    height: 58px;
    align-items: center;
    display: flex;
  }
  .mg-r-20 {
    margin-right: 20px;
  }
  .mg-r-30 {
    margin-right: 40px;
  }
  .mg-r-5 {
    margin-right: 8px;

  }
  .require {
    color: var(--red-60);
  }
}
</style>