<template>
  <div class="settingForm">
    <baseNewForm
      ref="typeOptionForm"
      :spanNumber="18"
      :isFunBtn="false"
      :formRow="formRow"
      :ruleForm="ruleForm"
      :labelPosition="'top'"
      @onSelect="typeSelectChangeHanlde"
      @onSubmit="typeOptionOnSubmit"
    >
    </baseNewForm>
  </div>
</template>
<script>
import baseNewForm from '../compoments/baseNewForm'
import BaseTable from '@/views/intergrationTask/compoments/baseTable.vue'
import { authApi } from '@/api/apis/auth'
import { getApiModuleApi } from '@/api/apiChunks'
import { retrieveRawAttr } from 'echarts/lib/data/helper/dataProvider'

export default {
  name: 'settingForm',
  data() {
    return {
      formRow: [
        {
          elCol: [
            {
              type: 'select',
              title: '来源类型',
              id: 'sourceType',
              row: 24,
              disabled: false,
              required: true,
              fontSize: 16,
              options: [
                {
                  label: '插件',
                  id: '1'
                },
                {
                  label: 'api',
                  id: '2'
                }
              ]
            }
          ]
        },
        {
          elCol: [
            {
              type: 'select',
              title: '来源应用',
              id: 'sourceName',
              row: 24,
              disabled: false,
              required: true,
              fontSize: 16,
              options: []
            }
          ]
        },
        {
          elCol: [
            {
              type: 'select',
              title: '来源编码',
              id: 'sourceCode',
              row: 24,
              disabled: false,
              required: true,
              fontSize: 16,
              options: []
            }
          ]
        },
        {
          elCol: [
            {
              type: 'select',
              title: '触发类型',
              id: 'triggerType',
              row: 24,
              disabled: false,
              required: true,
              fontSize: 16,
              options: [
                {
                  label: '手动',
                  id: '0'
                },
                {
                  label: '自动',
                  id: '1'
                }
              ]
            }
          ]
        },
        {
          elCol: [
            {
              type: 'select',
              title: '新增接口',
              id: 'addApi',
              row: 24,
              disabled: false,
              required: true,
              fontSize: 16,
              options: []
            }
          ]
        },
        {
          elCol: [
            {
              type: 'select',
              title: '修改接口',
              id: 'updateApi',
              row: 24,
              disabled: false,
              required: true,
              fontSize: 16,
              options: []
            }
          ]
        },
        {
          elCol: [
            {
              type: 'select',
              title: '删除接口',
              id: 'deleteApi',
              row: 24,
              disabled: false,
              required: true,
              fontSize: 16,
              options: []
            }
          ]
        },
        {
          elCol: [
            {
              type: 'switch',
              title: '启用/停用',
              id: 'enabledState',
              row: 24,
              disabled: false,
              required: true,
              fontSize: 16,
              activeValue: '1',
              inactiveValue: '0'
            }
          ]
        }
      ],
      ruleForm: {},
      tableId: '',//数据源主表名称
      mainLoading: false,
      tabLoading: false,
      serviceOptions: [],//主表
      labelOptions: [],//字段名称下啦
      labelDist: {}//字段名称字典
    }
  },
  methods: {
    //字段名称修改事件 需要存filedName
    filedIdChangHandle(val, row) {
      row.filedName = this.labelDist[val]
    },
    //表字段字段类型下啦初始化
    async initSelect() {
      //服务名下拉
      this.serviceOptions = []
      const service = await getApiModuleApi({
        tl: 'mdmModuleService',
        as: '',
        dj: 'queryMdmService'
      }, { remark: '' })
      service.attribute.forEach(item => {
        console.log(item.dbName, 'item')
        this.serviceOptions.push({
          id: item.id,
          label: item.remark,
          dbId: item.id,
          mdmId: item.mdmId
        })
      })
      console.log(this.serviceOptions, 'this.serviceOptions')
    },
    async typeSelectChangeHanlde(val, index, indexRow, row, flag = true) {
      if (flag && (row.id === 'sourceName' || row.id === 'sourceType')) {
        if (row.id === 'sourceType') {
          this.formRow[2].elCol[0].options = []
          this.$set(this.ruleForm, 'sourceCode', '')
        } else {
          this.formRow[2].elCol[0].options = []
          this.formRow[4].elCol[0].options = []
          this.formRow[5].elCol[0].options = []
          this.formRow[6].elCol[0].options = []
          this.$set(this.ruleForm, 'addApi', '')
          this.$set(this.ruleForm, 'updateApi', '')
          this.$set(this.ruleForm, 'deleteApi', '')
          this.$set(this.ruleForm, 'sourceCode', '')
        }

      }
      //当下啦是appid时条用接口查询该app下的所有接口用在新增、修改、删除上
      if ((row.id === 'sourceName' || row.id === 'sourceType') && this.ruleForm.sourceName) {
        const res = await authApi('sysApplicationApiService', '', 'queryEntity', '', {
          appId: this.ruleForm.sourceName
        })
        res.attribute.forEach((item) => {
          this.formRow[4].elCol[0].options.push({
            id: item.id,
            label: item.apiName
          })
          this.formRow[5].elCol[0].options.push({
            id: item.id,
            label: item.apiName
          })
          this.formRow[6].elCol[0].options.push({
            id: item.id,
            label: item.apiName
          })
          if (this.ruleForm.sourceType == 2) {
            this.formRow[2].elCol[0].options.push({
              id: item.id,
              label: item.apiName
            })
          }
        })
        //如果是插件则来源编号要走插件接口
        if (this.ruleForm.sourceType == 1) {
          const res = await authApi('sysApplicationPluginService', '', 'queryEntity', '', {
            appId: this.ruleForm.sourceName
          })
          res.attribute.forEach((item) => {
            this.formRow[2].elCol[0].options.push({
              id: item.id,
              label: item.pluginName
            })
          })
        }
      }

    },
    //测试通过
    async typeOptionOnSubmit() {
      let params = {
        ...this.ruleForm,
        dbId: this.tableId,
        mdmId: this.$route.query.id
      }
      if (params.id) {
        this.openLoading('submit')
        const res = await authApi('mdmModuleService', '', 'updateMdmSource', '', params)
        this.$vmNews('保存成功', 'success')
        this.$emit('saveSuccessHandle')
      } else {
        this.openLoading('submit')
        const res = await authApi('mdmModuleService', '', 'saveMdmSource', '', params)
        this.$vmNews('保存成功', 'success')
        this.$emit('saveSuccessHandle')
      }
    },
    //获取应用下啦
    async getAppList() {
      const res = await authApi('sysApplicationService', '', 'queryEntity', '', {})
      this.formRow[1].elCol[0].options = []
      res.attribute.forEach(item => {
        this.formRow[1].elCol[0].options.push({
          id: item.id,
          label: item.name
        })
      })

    },
    //编辑获取数据
    async getrowDetails(id) {
      const res = await authApi('mdmModuleService', '', 'getMdmSource', '', {
        id
      })
      this.ruleForm = res.attribute
      this.typeSelectChangeHanlde(this.ruleForm.appId, 0, 0, { id: 'sourceName' }, false)
    }
  },
  created() {
    this.getAppList()
    this.initSelect()
  },
  components: {
    BaseTable,
    baseNewForm
  }
}
</script>


<style scoped lang="scss">
.bigTitle {
  border-top: 1px solid #EBEBEB;
  padding-top: 20px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 600;
  font-size: 16px;
  color: #333333;
  line-height: 22px;
  text-align: left;
  font-style: normal;
}

.tableName {
  display: flex;
  align-items: center;
  margin: 30px 0;

  .title {
    margin-right: 20px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 14px;
    color: #333333;
    line-height: 20px;
    text-align: left;
    font-style: normal;
  }
}

.receiptsAddRow {
  margin-top: 30px;
  border: 1px dotted #ccc;
  text-align: center;
  height: 50px;
  line-height: 50px;
}

.btnList {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;

  .deleBtn {
    cursor: pointer;
    margin-left: 10px;
    width: 24px;
    height: 24px;
    background: #EBEBED;
    border-radius: 6px;
    display: flex;
    justify-content: center;
    align-items: center;

    > img {
      width: 10px;
      height: 10px;
    }
  }
}
</style>
