<template>
  <div class="layout-no-flex right-detail-tabs">
      <el-toolbar>
        <el-button @click="goBack" type="primary" size="medium" round class="shadow-primary">
          <i class="fa fa-chevron-left"></i> 返回上页
        </el-button>
        <span class="button-separator"></span>
        <el-button @click="confirm" v-show="isAdd">
          <i class="fa fa-save"></i>保存
        </el-button>
      </el-toolbar>

      <el-tabs class="tabs-wrap" v-model="tmpTabActiveName" @tab-click="onDialogTabClick">
        <!-- 数据列表面板选择栏 -->
        <el-tab-pane name="basicInformation">
          <span slot="label">
            <i class="fa fa-list-alt"></i> 基础信息</span>
          <fromDB-taskInfo ref="basicInformation" :ID="taskID" :copyID="copyTaskID" :is-add="isAdd" @callback="taskInfoCallback"></fromDB-taskInfo>
        </el-tab-pane>
        <!-- 配置信息面板选择栏 -->
        <el-tab-pane name="fieldMapping">
          <span slot="label">
            <i class="fa fa-th-list"></i> 字段映射</span>
          <fromDB-mapping ref="fieldMapping" :ID="taskID" :copyID="copyTaskID" :databaseID="tmpDBTask.databaseID" :tableName="tmpDBTask.tableName"
            :catalogID="tmpDBTask.catalogID" @callback="fieldMappingCallback"></fromDB-mapping>
        </el-tab-pane>
      </el-tabs>
  </div>
</template>

<script>
import util from '@src/common/util.js'
import fromDBMapping from './fromDBMapping.vue'
import fromDBTaskInfo from './fromDBTaskInfo.vue'

export default {
  components: {
    'fromDB-mapping': fromDBMapping,
    'fromDB-taskInfo': fromDBTaskInfo
  },
  props: {
    ID: {
      type: [String, Number]
    },
    copyID: {
      type: [String, Number]
    }
  },
  data() {
    return {
      isAdd: false,
      formTitle: '',
      taskID: null,
      copyTaskID: null,
      tmpDBTask: { contentType: '' }, // 弹框数据库采集任务表单数据
      tmpTabActiveName: 'basicInformation', // 弹框默认激活的标签页
      fieldMappingData: []
    }
  },
  created() {
    this.isAdd = this.ID === 'new'
    this.taskID = this.ID === 'new' ? null : this.ID
    this.formTitle = this.ID === 'new' ? (this.copyID ? '类似创建任务' : '新建任务') : '任务详情'
    this.copyTaskID = this.copyID
  },
  methods: {
    goBack() {
      this.$router.back()
    },
    onDialogTabClick(tab) {
      if (tab.name === 'fieldMapping') {
        this.$refs.fieldMapping.init()
      }
    },
    taskInfoCallback(task) {
      this.tmpDBTask = Object.assign({}, task)
    },
    fieldMappingCallback(mapping) {
      this.fieldMappingData = mapping
    },
    // 新建/类似创建数据库采集任务弹框底部确认按钮
    async confirm() {
      try {
        await this.$refs['basicInformation'].validateForm()
      } catch (e) {
        util.showErrorMessageBox(e)
        return
      }
      let valid = true
      let message = ''
      this.fieldMappingData.forEach(o => {
        if (o.is_nullable === 'no' && o.mapping === '') {
          valid = false
          if (message !== '') {
            message = message + ',' + o.code
          } else {
            message = o.code
          }
        }
      })
      if (!valid) {
        this.$alert(message + '字段必须被指定', '提示')
        return
      }
      let obj = Object.assign({}, this.tmpDBTask)
      Vue.set(obj, 'dataTable', JSON.stringify(this.fieldMappingData))
      let res = await axios.post('/ui/fromdb', obj)
      util.showResponseMessage(res.data)
      if (res.data.status === 1) {
        this.isAdd = false
        this.taskID = res.data.ID
        this.copyTaskID = null
        this.formTitle = '任务详情'
        this.$router.replace(`/datachannel/fromDB/${this.taskID}`)
      }
    }
  }
}
</script>
<style scoped>
</style>
