<template>
  <div v-loading="dataLoading">
    <!-- 判断是否选中任务来显示工具栏  -->
    <el-toolbar v-if="ID >0">
      <el-button @click="saveFieldMappingClick">
        <i class="fa fa-save"></i>保存</el-button>
    </el-toolbar>
    <div>
    <div class="explain-div">
      原字段输入框，可以自己填写，也可以点击选择按钮使用，可以一个值，也可以是多值，多值规则必须使用$[字段名]的方式引用数据表中的字段，采集任务执行时，会将 $[字段名]中的字段名 替换成字段的实际值进行合并。
    </div>
    <!-- 字段映射表格 -->
    <el-table :data="fieldMappingData" tooltip-effect="dark" highlight-current-row class="field-table">
      <el-table-column type="index" width="80" label="序号"></el-table-column>
      <el-table-column show-overflow-tooltip prop="code" label="映射到" min-width="30%"></el-table-column>
      <el-table-column label="原字段名" min-width="60%">
        <template slot-scope="scope">
          <el-input v-model="scope.row.mapping" class="table-input"></el-input>
          <el-button @click="selectCode(scope.row.code)">选　择</el-button>
        </template>
      </el-table-column>
    </el-table>
    </div>
    <!-- 选择字段弹框 -->
    <fromDBSelect-dialog :show.sync="selectCodeModal" :props-object="propsObject" @callback="fromDBSelectCallback"></fromDBSelect-dialog>
    </div>
</template>

<script>
import util from '@src/common/util.js'
import FromDBSelectDialog from './components/FromDBSelectDialog.vue'

export default {
  components: {
    'fromDBSelect-dialog': FromDBSelectDialog
  },
  props: {
    ID: [String, Number],
    copyID: [String, Number],
    databaseID: [String, Number],
    catalogID: [String, Number],
    tableName: [String]
  },
  data() {
    return {
      selectedCode: '',
      fieldMappingData: [],
      selectCodeModal: false,
      dataLoading: false,
      propsObject: {}
    }
  },
  watch: {
    fieldMappingData: {
      handler: function() {
        this.$emit('callback', this.fieldMappingData)
      },
      deep: true
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    async init() {
      this.dataLoading = true
      this.propsObject = {
        ID: this.ID,
        copyID: this.copyID,
        databaseID: this.databaseID,
        tableName: this.tableName,
        catalogID: this.catalogID
      }
      let mappingToColumn = await axios.get('/ui/fromdb/mappingtocolumn', {
        params: this.propsObject
      })
      this.fieldMappingData = mappingToColumn.data.data
      if (!this.ID) {
        this.fieldMappingData.forEach(o => {
          Vue.set(o, 'mapping', '')
        })
      }
      this.dataLoading = false
    },
    async saveFieldMappingClick() {
      let obj = {
        ID: this.ID,
        saveType: 'Column',
        dataTable: JSON.stringify(this.fieldMappingData)
      }
      let res = await axios.put(`/ui/fromdb/${obj.ID}`, obj)
      util.showResponseMessage(res.data)
    },
    selectCode(code) {
      this.selectedCode = code
      this.selectCodeModal = true
    },
    // 选择字段弹框底部确认按钮
    fromDBSelectCallback(codes) {
      this.fieldMappingData.forEach(field => {
        if (field.code === this.selectedCode) {
          Vue.set(field, 'mapping', '')
          codes.forEach(code => {
            Vue.set(field, 'mapping', field.mapping + '${' + code + '}')
          })
        }
      })
    }
  }
}
</script>
<style>
.field-table .el-button{
  padding: 9px 12px;
}
</style>

<style scoped>
.explain-div {
  padding:20px 0 20px 0;
  color: gray;
}

.table-input {
  width:80%;
  max-width: 300px;
}

</style>
