<template>
  <div>
    <a-tabs default-active-key="1" @change="callback">

      <a-tab-pane key="1" tab="基础信息">
        <BasicInformation ref="basicModel"/>
      </a-tab-pane>

      <a-tab-pane key="2" tab="分发字段" :forceRender="true">
        <DistributionField ref="distributionModel"/>
      </a-tab-pane>

      <a-tab-pane key="3" tab="定时任务">
        <ScheduledTasks ref="tasksModel"/>
      </a-tab-pane>
    </a-tabs>

    <div class="btn-list" v-if="key==='3'">
      <a-button type="stop" style="margin-right: 20px;" @click="handleOk">
        取消
      </a-button>
      <a-button type="add" @click="onSubmit">
        确定
      </a-button>
    </div>

  </div>
</template>
<script>
import BasicInformation from './BasicInformation'
import DistributionField from './DistributionField'
import ScheduledTasks from './ScheduledTasks'
import { getDetail, addFile, updateFile, getModellist } from '@/api/interfaceManager/interfaceManager'

export default {
  data() {
    return {
      key: null,
			submitType: null,
      form: {},
      basicForm: {
        interfaceName: '',
        targetName: '',
        targetId: '',
        distributionWay: '',
        distributionMode: 'POST',
        targetAddress: '',
        distributionNum: '200',
        distributionType: '0',
        encryptionMode: ''
      },
      distributionForm: {
        modelId: '',
        distributionDatatype: '0', // 分发数据类型
        servicesysAttributeList: [], // 字段配置
        headers: [],
        params: [],
        modelList: []
      },
      taskForm: {
        taskType: '',
        taskCycle: '',
        taskCron: '',
        taskTypeBool: false
      },
      servicesysDistribution: {},
      servicesysAttributeList: [],
      headers: {},
      params: {}
    }
  },
	components: {
		BasicInformation,
		DistributionField,
    ScheduledTasks
	},
  mounted() {
  },
  methods: {
    callback(key) {
      this.key = key
      if (key === '2') {
        setTimeout(() => {
          // 分发字段
          this.$refs.distributionModel.distributionForm = Object.assign({}, this.distributionForm)
          // console.log('分发字段:', this.$refs.distributionModel.distributionForm)
        }, 0)
      }
      if (key === '3') {
        setTimeout(() => {
          // 定时任务
          this.$refs.tasksModel.taskForm = Object.assign({}, this.taskForm)
          // console.log('定时任务:', this.$refs.tasksModel.taskForm)
        }, 0)
      }
    },
    handleOk() {
      this.$emit('handleOk')
    },
    // 分发管理查看详情
    getDetailArr(id) {
      getDetail(id).then((res) => {
        if (res.code === 200) {
          console.log(`res.data: `, res.data)
          this.$refs.basicModel.basicForm = Object.assign({}, res.data.servicesysDistribution)
          this.basicForm = this.$refs.basicModel.basicForm
          this.$refs.basicModel.disWay(res.data.servicesysDistribution.distributionWay)
          // console.log(`this.basicForm: `, res.data.servicesysDistribution)

          // 分发字段
          this.distributionForm.distributionDatatype = res.data.servicesysDistribution.distributionDatatype
          this.distributionForm.modelId = res.data.servicesysDistribution.modelId
          this.distributionForm.servicesysAttributeList = res.data.servicesysAttributeList
          this.distributionForm.headers = res.data.headers.distributionHeadersList
          this.distributionForm.params = res.data.params.distributionParamsList

          this.distributionForm.servicesysAttributeList.forEach((item, index) => {
            item.status = '0'
            item.key = index
          })
          // console.log(`分发字段: `, this.distributionForm.servicesysAttributeList)

          // console.log(`this.distributionForm: `, this.distributionForm.servicesysAttributeList)

          // 定时任务
          this.taskForm.taskType = res.data.servicesysDistribution.taskType
          this.taskForm.taskCron = res.data.servicesysDistribution.taskCron
          if (res.data.servicesysDistribution.taskType === '0') {
             this.taskForm.taskTypeBool = true
          } else if (res.data.servicesysDistribution.taskType === '1') {
             this.taskForm.taskTypeBool = false
          }

          this.taskForm.taskCycle = res.data.servicesysDistribution.taskCycle// 执行周期
          // console.log(`this.taskForm: `, this.taskForm)

          this.servicesysDistribution = res.data.servicesysDistribution
          this.getModellist()
       }
      })
    },
    // 分发字段——模型属性
    getModellist() {
      getModellist({ modelId: this.distributionForm.modelId }).then((res) => {
        this.distributionForm.modelList = []
        const resRows = res.rows
        resRows.forEach((item) => {
          this.distributionForm.modelList.push(item.attrCode)
        })
      })
    },
    anewData() {
      const basicForm = this.$refs.basicModel.basicForm
      const taskForm = this.$refs.tasksModel.taskForm
      const distributionForm = this.$refs.distributionModel.distributionForm
      const _distributionForm = distributionForm.distributionDatatype
      const _modelId = distributionForm.modelId

      this.servicesysDistribution = { ...basicForm, ...taskForm }
      this.servicesysDistribution.distributionDatatype = _distributionForm
      this.servicesysDistribution.modelId = _modelId
      // console.log('servicesysDistribution:', this.servicesysDistribution)

      // this.$refs.distributionModel.deleteFun()
      this.$refs.distributionModel.addDataSource()
      // console.log(`--校验`, this.$refs.distributionModel.arr)

      this.servicesysAttributeList = [ ...this.$refs.distributionModel.arr ]
      this.headers.distributionHeadersList = distributionForm.headers
      this.params.distributionParamsList = distributionForm.params

      this.form.servicesysDistribution = this.servicesysDistribution
      this.form.servicesysAttributeList = this.servicesysAttributeList
      this.form.headers = this.headers
      this.form.params = this.params
    },

    onSubmit() {
      this.anewData()
      // 父组件调用子组件方法进行校验

      if (this.$refs.basicModel.validataBasicForm() && this.$refs.distributionModel.validataDistributionForm()) {
        // console.log(`校验`, this.$refs.distributionModel.arr)

        if (this.submitType === 'add') {
          addFile(this.form).then((res) => {
            // console.log(`res--add`, this.form)
            this.handleOk()
          })
          console.log(`add--Form: `, this.form)
        } else if (this.submitType === 'edit') {
          updateFile(this.form).then((res) => {
            console.log(`res--edit`, this.form)
            this.handleOk()
          })
        }
      } else {
        this.$confirm({
          title: '请检查表单',
          onCancel() {}
        })
      }
    }
  }
}
</script>
<style lang='less' scoped>
.btn-list{
  text-align: center;
}
</style>
