export default {
  data() {
    return {
      pic95: require('@/assets/produit/95.png'),
      pic99: require('@/assets/produit/99.png'),
      varTable: {
        cloumns: [
          {
            title: '置信度',
            dataIndex: 'confidence ',
            class: 'confidence',
            customRender: (value, row, index) => {
              let obj = {
               children: '',
               attrs: {}
              }
              if (index === 0) {
               obj = {
                children: <div class="risk-pic"><img src={this.pic95} /></div>,
                attrs: { rowSpan: 4 }
               }
              }
              if (index === 4) {
                obj = {
                children: <div class="risk-pic"><img src={this.pic99} /></div>,
                attrs: { rowSpan: 4 }
                }
              }
              if ([1, 2, 3, 5, 6, 7].indexOf(index) !== -1) {
               obj.attrs.colSpan = 0
              }
              return obj
            }
          },
          {
           title: '天數(shù)',
           dataIndex: 'window_length',
           width: '25%',
           customRender: (text) => text + '日'
          },
          {
           title: 'VaR(萬元)',
           dataIndex: 'var',
           width: '25%'
          },
          {
           title: 'VaR/凈資產(chǎn)',
           dataIndex: 'var_rate',
           width: '25%',
           customRender: (text) => fmtRatio(text, 2)
          }
        ],
        data: [
          {window_length: 1, var: 151.69, var_rate: 0.01858},
          {window_length: 5, var: 298.94, var_rate: 0.03661},
          {window_length: 10, var: 416.70, var_rate: 0.05104},
          {window_length: 20, var: 576.04, var_rate: 0.07055},
          {window_length: 1, var: 370.64, var_rate: 0.045398},
          {window_length: 5, var: 463.33, var_rate: 0.056751},
          {window_length: 10, var: 632.91, var_rate: 0.077523},
          {window_length: 20, var: 1233.95, var_rate: 0.15114}
        ]
      }
    }
  },
  methods:{
    // 百分?jǐn)?shù)設(shè)置
    fmtRatio(val, index, def) {
      // index默認(rèn)值為2
      var index = arguments[1] ? arguments[1] : 2
      if (val == null || isNaN(val) || typeof (val) === 'string' && val === '') {
        return def || '--'
      }
      var ratio = (val * 100).toFixed(index)
      return ratio + '%'
    }
  }
}

<script>
/**
 * 該組件為實(shí)現(xiàn)table可選列。
 * 具體操作見下方注釋。
 * 全部集成原a-table功能，使用方式與原a-table完全相同，擴(kuò)展增加了可選列功能
 * 該組件已注冊(cè)至全局，使用方式只需將a-table變?yōu)閦yx-table即可，等等一系列原寫法不變，即可增加該功能.
 * 采用rander函數(shù)模式寫，為了實(shí)現(xiàn)a-table中slot可動(dòng)態(tài)。
 */
export default {
 name: 'Table',
 data () {
  return {
   modalVisible: false, // 彈窗
   columns: [], // 表格的列，根據(jù)條件來操作該字段
   selectList: [], // 已選擇的列
   temporarySelectData: [], // 暫時(shí)選擇的列，點(diǎn)擊checkbox暫存到該字段，點(diǎn)確定同步到selectList
   checkboxList: []// checkbox的list，也做總數(shù)據(jù)來使用
  }
 },
 mounted () {
  /**
   * 掛載后，將原columns復(fù)制到本頁(yè)columns，checkboxList
   *     將selectList賦值全選狀態(tài)
   */
  this.columns = this.deepClone(this.$attrs.columns)
  this.checkboxList = this.deepClone(this.$attrs.columns)
  this.selectList = this.columns.map(ele => ele.dataIndex)
 },
 methods: {
  /**
   * 打開modal，將checkbox默認(rèn)值或者是選擇值（暫存）重新賦值
   */
  handelOpenSelect () {
   this.temporarySelectData = this.deepClone(this.selectList)
   this.modalVisible = true
  },
  /**
   * 點(diǎn)擊確定，將暫存值賦值（temporarySelectData）給已選擇的列（selectList）
   * 將列（columns）根據(jù)已選擇的列（selectList）篩選出來
   */
  handleOk () {
   this.selectList = this.deepClone(this.temporarySelectData)
   this.modalVisible = false
   this.columns = this.checkboxList.filter(ele => this.selectList.includes(ele.dataIndex))
  },
  handleCancel () {
   this.modalVisible = false
  },
  handelChange (e) {
   this.temporarySelectData = this.deepClone(e)
  },
  deepClone (target) {
   let result
   if (typeof target === 'object') {
    if (Array.isArray(target)) {
     result = []
     for (const i in target) {
      result.push(this.deepClone(target[i]))
     }
    } else if (target === null) {
     result = null
    } else if (target.constructor === RegExp) {
     result = target
    } else {
     result = {}
     for (const i in target) {
      result[i] = this.deepClone(target[i])
     }
    }
   } else {
    result = target
   }
   return result
  }
 },
 render () {
  const props = { ...this.$attrs, ...this.$props, ...{ columns: this.columns } }
  const on = { ...this.$listeners }

  const slots = Object.keys(this.$slots).map(slot => {
   return (
    <template slot={slot}>{ this.$slots[slot] }</template>
   )
  })

  const table = (
   <a-table props={props} scopedSlots={ this.$scopedSlots } on={on} ref="zyxTable">
    {slots}
   </a-table>
  )

  const changeDiv = (
   <a-button class="select-columns" size="small" onClick={this.handelOpenSelect}>列</a-button>
  )

  const checkboxArr = []
  for (let i = 0; i < this.checkboxList.length; i++) {
   checkboxArr.push(<a-col span={8}><a-checkbox value={this.checkboxList[i].dataIndex}>{this.checkboxList[i].title}</a-checkbox></a-col>)
  }
  const modal = (
   <a-modal
    title="設(shè)置列"
    visible={this.modalVisible}
    onOk={this.handleOk}
    onCancel={this.handleCancel}>
    <a-checkbox-group value={this.temporarySelectData} onChange={this.handelChange}>
     <a-row>
      {checkboxArr}
     </a-row>
    </a-checkbox-group>
   </a-modal>
  )

  return (
   <div class="zyx-table">
    { table }
    { changeDiv }
    { modal }
   </div>
  )
 }
}
</script>
<style lang="less" scoped>
.zyx-table{
 position: relative;
 margin-top: 20px;

 .select-columns{
  position: absolute;
  right: 0;
  top: -30px;
 }
}

.ant-row{
 width: 100%;

 .ant-col-8{
  margin-bottom: 10px;
 }
}

.ant-checkbox-group{
 width: 100%;
}
</style>