<template>
  <div>
    <!-- 整体min位置 -->
    <div class="divmin">
    <!-- 人员指标参数配置 -->
      <h2 class="table-cell">人员指标参数配置</h2>
      <el-table :data="tableData" row-key="id"  border @row-dblclick="dbclick" height="260" :cell-class-name="tableCellClassName" :row-style="{height:'40px'}">
        <!-- 子集代号 min-width="250"-->
        <el-table-column prop="SubsetCode" label="子集代号">
          <template slot-scope="scope">
            <el-input size="mini"
              v-model="scope.row.SubsetCode"
              :ref="scope.row.index + ',' + scope.column.index"  
              v-if="scope.row.index + ',' + scope.column.index == currentCell"
              @blur="hideInput"
              placeholder="请输入"/>
            <span v-else>{{scope.row.SubsetCode}}</span>
          </template>
        </el-table-column>
        <!-- 同步指标名称 -->
        <el-table-column prop="SyncName" label="同步指标名称">
          <template slot-scope="scope">
            <el-input size="mini"
              v-model="scope.row.SyncName"
              :ref="scope.row.index + ',' + scope.column.index"  
              v-if="scope.row.index + ',' + scope.column.index == currentCell"
              @blur="hideInput"
              placeholder="请输入"/>
            <span v-else>{{scope.row.SyncName}}</span>
          </template>
        </el-table-column>
        <!-- 唯一指标 -->
        <el-table-column prop="TBindexName" label="唯一指标">
          <template slot-scope="scope">
            <el-input size="mini"
              v-model="scope.row.TBindexName"
              :ref="scope.row.index + ',' + scope.column.index"  
              v-if="scope.row.index + ',' + scope.column.index == currentCell"
              @blur="hideInput"
              placeholder="请输入"/>
            <span v-else>{{scope.row.TBindexName}}</span>
          </template>
        </el-table-column>
        <!-- 查询指标 -->
        <el-table-column prop="queryIndicators" label="查询指标">
          <template slot-scope="scope">
            <el-input size="mini"
              v-model="scope.row.queryIndicators"
              :ref="scope.row.index + ',' + scope.column.index"  
              v-if="scope.row.index + ',' + scope.column.index == currentCell"
              @blur="hideInput"
              placeholder="请输入"/>
            <span v-else>{{scope.row.queryIndicators}}</span>
          </template>
        </el-table-column>
        <!-- SQL视图 -->
        <el-table-column prop="SQLview" label="SQL视图">
          <template slot-scope="scope">
            <el-input size="mini"
              v-model="scope.row.SQLview"
              :ref="scope.row.index + ',' + scope.column.index"  
              v-if="scope.row.index + ',' + scope.column.index == currentCell"
              @blur="hideInput"
              placeholder="请输入"/>
            <span v-else>{{scope.row.SQLview}}</span>
          </template>
        </el-table-column>
        <!-- 字段映射 -->
        <el-table-column prop="fieldMapping" label="字段映射">
          <template slot-scope="scope">
            <el-input size="mini"
              v-model="scope.row.fieldMapping"
              :ref="scope.row.index + ',' + scope.column.index"  
              v-if="scope.row.index + ',' + scope.column.index == currentCell"
              @blur="hideInput"
              placeholder="请输入"/>
            <span v-else>{{scope.row.fieldMapping}}</span>
          </template>
        </el-table-column>
        <!--地址接口 -->
        <el-table-column prop="AdresLnface" label="地址接口">
          <template slot-scope="scope">
            <el-input size="mini"
              v-model="scope.row.AdresLnface"
              :ref="scope.row.index + ',' + scope.column.index"  
              v-if="scope.row.index + ',' + scope.column.index == currentCell"
              @blur="hideInput"
              placeholder="请输入"/>
            <span v-else>{{scope.row.AdresLnface}}</span>
          </template>
        </el-table-column>
        <!--其它参数配置1 -->
        <el-table-column prop="ParameterOne" label="其它参数配置1">
          <template slot-scope="scope">
            <el-input size="mini"
              v-model="scope.row.ParameterOne"
              :ref="scope.row.index + ',' + scope.column.index"  
              v-if="scope.row.index + ',' + scope.column.index == currentCell"
              @blur="hideInput"
              placeholder="请输入"/>
            <span v-else>{{scope.row.ParameterOne}}</span>
          </template>
        </el-table-column>
        <!-- 其它参数配置2 -->
        <el-table-column prop="ParameterTwo" label="其它参数配置2">
          <template slot-scope="scope">
            <el-input size="mini"
              v-model="scope.row.ParameterTwo"
              :ref="scope.row.index + ',' + scope.column.index"  
              v-if="scope.row.index + ',' + scope.column.index == currentCell"
              @blur="hideInput"
              placeholder="请输入"/>
            <span v-else>{{scope.row.ParameterTwo}}</span>
          </template>
        </el-table-column>
        <!-- 操作 -->
        <el-table-column label="操作" prop="caozuo" align="center" min-width="54">
          <template slot-scope="scope">
            <el-button plain type="danger" size="mini" @click="onDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
export default {
  data() {
    return {
      currentCell: null,
      tableData: [
        { id: '1', SubsetCode:'A01', SyncName:'A01,A02,A03', TBindexName:'dad', queryIndicators:'faf', SQLview:'a', fieldMapping:'faf', AdresLnface:'gs', ParameterOne:'gs', ParameterTwo:'gs',},
        { id: '2', SubsetCode:'A01', SyncName:'A01,A02,A03', TBindexName:'dad', queryIndicators:'faf', SQLview:'a', fieldMapping:'faf', AdresLnface:'gs', ParameterOne:'gs', ParameterTwo:'gs',},
        { id: '3', SubsetCode:'A01', SyncName:'A01,A02,A03', TBindexName:'dad', queryIndicators:'faf', SQLview:'a', fieldMapping:'faf', AdresLnface:'gs', ParameterOne:'gs', ParameterTwo:'gs',},
        { id: '4', SubsetCode:'A01', SyncName:'A01,A02,A03', TBindexName:'dad', queryIndicators:'faf', SQLview:'a', fieldMapping:'faf', AdresLnface:'gs', ParameterOne:'gs', ParameterTwo:'gs',},
        { id: '5', SubsetCode:'A01', SyncName:'A01,A02,A03', TBindexName:'dad', queryIndicators:'faf', SQLview:'a', fieldMapping:'faf', AdresLnface:'gs', ParameterOne:'gs', ParameterTwo:'gs',},
      ],
    }
  },
  methods: {
    // 给单元格绑定横向和竖向的index，这样就能确定是哪一个单元格
    tableCellClassName({row, column, rowIndex, columnIndex}){
        row.index=rowIndex;
        column.index=columnIndex;
    },
    // 获得当前双击的单元格的横竖index，然后拼接成一个唯一字符串用于判断，并赋给currentCell  // 拼接后类似这样："1,0","1,1",
    dbclick(row,column) {
        this.currentCell = row.index + ',' + column.index;
        // 这里必须要setTimeout，因为在点击的时候，input才刚被v-if显示出来，不然拿不到dom
        setTimeout(() => {
            // 双击后自动获得焦点
            this.$refs[row.index + ',' + column.index].focus();
        })
    },
    // 当input失去焦点的时候，隐藏input
    hideInput(){
        this.currentCell = null;
    },
    // 删除
    onDelete(row) {
      const index = this.tableData.indexOf(row);
      if (index !== -1) {
        this.tableData.splice(index, 1);
      }
    },
  },
}
</script>

<style scoped lang="less">
.divmin {
  max-width: 1130px;
  margin: auto;
  border: 1px solid #e0dede; /* 添加外部边框 */
  padding: 16px;
}
/* 下边框线 */
.table-cell {
  color: #8c8b8b;
  padding-bottom:6px;
  margin-bottom:20px;
  border-bottom: 1px solid #e5e2e2;
}
/* 每行高度 */
::v-deep .el-table .el-table__cell {
  padding: 5px 0;
  text-align: center;
}
</style>