<template>
  <div>
    <el-row v-for="(subTab, index) in tabs" :key="index" style="display: flex; ">
      <el-col style="padding-right:15px">
        <el-tabs v-model="subTab.defaultValue" type="card">
          <el-tab-pane v-for="(tab, ind) in subTab.tab" :key="ind" :label="tab.code" :name="tab[subTab.tabKey]">
            <el-table :data="tab.tableData"  border stripe :height="tableHeight" class="table-cell" :header-cell-style="{'text-align': 'center'}"
              :row-class-name="tableRowClassName" @cell-dblclick="(row, column) => cellDblclick(row, column,index, ind)">
              <el-table-column width="1" />
              <div v-for="(col, idx) in tab.columns" :key="idx">
                <el-table-column :label="col.label" :prop="col.key" :align="col.align || 'center'">
                  <template slot-scope="scope">
                    <!-- <template v-if="col.key !== 'swapStr' && col.key !== 'rateStr'"> -->
                    <template v-if="col.isLink">
                      <span>{{scope.row[col.key]}}</span>
                    </template>
                    <template v-if="col.isEdit && scope.row.valueType !== 'FXSWAP'">
                      <el-input v-if="scope.row.canEdit" type="number" :ref="'input' + scope.row.index" v-model="scope.row[col.key]" @blur="inputBlur(index, ind, scope)"></el-input>
                      <span v-else>{{scope.row[col.key]}}</span>
                    </template>
                    <template  v-else>
                      <span>{{scope.row[col.key]}}</span>
                    </template>
                  </template>
                </el-table-column>
              </div>
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  props: {
    tabs: {
      type: Array,
      default: () => []
      // { defaultValue: 'usdcad', dataType: 'FWD',tabKey: 'txt',(tabkey: 'txt'为默认选中tab)
      //   tab: [
      //     {text: 'fwd', code: 'usdcad', dataType: 'FWD',tableData: [], columns: [{label:'', key: '', isEdit: false}]},
      //   ],
      // },
    },
    tableHeight: {
      type: Number,
      default: () => 0
    }
  },
  methods: {
    // 将行索引加入到row中返回
    tableRowClassName({row, rowIndex}) {
      row.index = rowIndex
    },
    cellDblclick(row, column, firstInd, secondInd) {
      // console.log('Cell double-clicked:', row, column);
      const key = column.property
      const index = row.index
      if ((key === 'swapStr' || key === 'rateStr') && row.valueType !== 'FXSWAP') {
        this.$set(this.tabs[firstInd].tab[secondInd].tableData[index], 'canEdit', true)
        this.$nextTick(() => {
          const input = this.$refs['input' + index][0]
          if (input) input.focus()
        })
      }
    },
    inputBlur(firstInd, secondInd, scope) {
      // console.log('Input blurred:', scope);
      const index = scope.row.index
      const key = scope.column.property
      const curveCode = scope.row.curveCode
      const value = scope.row[key]
      this.$set(this.tabs[firstInd].tab[secondInd].tableData[index], 'canEdit', false)
      this.$emit('cellCick',index, key, value, curveCode)
    },
  }
}
</script>
<style lang="scss" scoped>
.table-cell {
  margin-bottom: 20px;
}
::v-deep.el-tabs.el-tabs--card{
                .el-tabs__header{
                    border-bottom: none;
                    margin-bottom: 5px;
                    .el-tabs__nav{
                        border: none;
                    }
                    .el-tabs__nav-wrap .el-tabs__item{
                        padding: 0 10px;
                        height: 26px;
                        line-height: 26px;
                        margin-right: 4px;
                        border: 1px solid var(--scrollBar);
                        &.is-active{
                            color: var(--blue-50);
                            border-color: var(--blue-50);
                        }
                    }
                }
                
            }
</style>