<template>
  <a-form-model
    ref="ruleDistributionForm"
    :model="distributionForm"
    :rules="rules"
    :label-col="labelCol"
    :wrapper-col="wrapperCol">
    <a-form-model-item ref="modelId" label="模型选择:" prop="modelId">
      <a-tree-select
        v-model="distributionForm.modelId"
        :replaceFields="{
          title:'catalogName',
          key: 'catalogCode',
          children:'children',
          value:'catalogCode'
        }"
        style="width: 100%"
        :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
        :tree-data="deptOptions"
        placeholder="请选择"
        tree-default-expand-all
        @change="getModellist"
      >
      </a-tree-select>

    </a-form-model-item>
    <!-- <a-form-model-item ref="distributionDatatype" label="分发数据类型:" prop="distributionDatatype">
      <a-radio-group v-model="distributionForm.distributionDatatype">
        <a-radio value="0">
          JSON
        </a-radio>
        <a-radio value="1">
          XML
        </a-radio>
      </a-radio-group>
    </a-form-model-item> -->

    <a-form-model-item ref="servicesysAttributeList" label="字段配置:" prop="servicesysAttributeList">
      <FormTable
        ref="table"
        :columns="servicesysAttributeListColumns"
        :dataSource="distributionForm.servicesysAttributeList"
        :modelList="distributionForm.modelList"
        :total="total"
        :logotype="0"
        @addDataSource="addDataSource"
        @delectDataSource="delectDataSource"
        @changeDataSource="changeDataSource"/>

    </a-form-model-item>

    <a-form-model-item ref="headers" label="请求头:" prop="headers">
      <FormTable
        ref="table"
        :columns="headersColumns"
        :dataSource="distributionForm.headers"
        :total="total"
        :logotype="1"
        @addDataSource="addDataSource"
        @delectDataSource="delectDataSource"
        @changeDataSource="headersChangeDataSource"/>
    </a-form-model-item>

    <a-form-model-item ref="params" label="请求参数:" prop="params">
      <FormTable
        ref="table"
        :columns="headersColumns"
        :dataSource="distributionForm.params"
        :total="total"
        :logotype="1"
        @delectDataSource="delectDataSource"
        @changeDataSource="paramsChangeDataSource"/>
    </a-form-model-item>

  </a-form-model>
</template>

<script type="text/ecmascript-6">
import FormTable from './FormTable'

import { getModelTree, getModellist } from '@/api/interfaceManager/interfaceManager'

const _servicesysAttributeListColumns = [
  {
    title: '分发字段',
    align: 'center',
    dataIndex: 'distributionField',
    scopedSlots: { customRender: 'distributionField' }
  },
  {
    title: '	映射字段',
    align: 'center',
    dataIndex: 'mappingField',
    scopedSlots: { customRender: 'mappingField' }
  }
]
const _headersColumns = [
  {
    title: 'key',
    align: 'center',
    dataIndex: 'key', // first line
    scopedSlots: { customRender: 'key' }
  },
  {
    title: 'value',
    align: 'center',
    dataIndex: 'value',
    scopedSlots: { customRender: 'value' }
  }
]
export default {
  components: {
    FormTable
  },
  data() {
    return {
      replaceFields: { children: 'children', title: 'label', key: 'id', value: 'id' },
      deptOptions: [],

      total: 0,
      isSelected: false,
      labelCol: { span: 8 },
      wrapperCol: { span: 12 },
      other: '',
      distributionForm: {
        modelId: '',
        distributionDatatype: '0', // 分发数据类型
        servicesysAttributeList: [], // 字段配置
        headers: [],
        params: [],
        modelList: []
      },
      rules: {
        modelId: [{ required: true, message: '请选择模型', trigger: 'change' }],
        servicesysAttributeList: [{ required: true, message: '请添加字段配置', trigger: 'change' }]
      },
      arr: [],
      servicesysAttributeListColumns: _servicesysAttributeListColumns,
      headersColumns: _headersColumns,
      params: {
        pageSize: 10,
        pageNum: 1
      }
    }
  },
  mounted() {
    this.getModelTree()
    this.deleteFun()
  },
  methods: {
    handleOk() {
      this.$emit('handleOk')
    },
    // changeParams(key, value) {
    //   console.log(`key`, key)
    //   console.log(`value`, value)

    //   this.$set(this.params, key, value)
    // },
    // 改变行
    changeDataSource(key, dataIndex, value) {
      // console.log('改变行text: ', e)
      const dataSource = [...this.distributionForm.servicesysAttributeList]
      const target = dataSource.find(item => item.key === key)
      if (target) {
        // console.log('target:', target)
        if (target.status === '0') {
          target.status = '2'
        }
        target[dataIndex] = value
        this.distributionForm.servicesysAttributeList = dataSource
      }
      // console.log('this.distributionForm.servicesysAttributeList: ', this.distributionForm.servicesysAttributeList)
    },
    // 请求头改变行
    headersChangeDataSource(key, dataIndex, value) {
      const dataSource = [...this.distributionForm.headers]
      const target = dataSource.find(item => item.key === key)
      if (target) {
        target[dataIndex] = value
        this.distributionForm.headers = dataSource
      }
      // console.log('this.distributionForm.headers: ', this.distributionForm.headers)
    },
    // 请求体改变行
    paramsChangeDataSource(key, dataIndex, value) {
      const dataSource = [...this.distributionForm.params]
      const target = dataSource.find(item => item.key === key)
      if (target) {
        target[dataIndex] = value
        this.distributionForm.params = dataSource
      }
      // console.log('this.distributionForm.params: ', this.distributionForm.params)
    },
    deleteFun() {
      const _arr = []
      this.arr = this.distributionForm.servicesysAttributeList

      this.distributionForm.servicesysAttributeList.forEach((item, index) => {
        if (item.status === '3') {
          _arr.push(this.distributionForm.servicesysAttributeList[index])
          if (this.arr.length === 1) {
            this.distributionForm.servicesysAttributeList = this.distributionForm.servicesysAttributeList.splice(index, 0)
          } else {
            this.distributionForm.servicesysAttributeList = this.distributionForm.servicesysAttributeList.splice(index, 1)
          }
          console.log('jjjj:', this.distributionForm.servicesysAttributeList)
        }
      })

      this.arr = [...this.arr, ..._arr]
    },
    addDataSource() {
      this.arr = this.distributionForm.servicesysAttributeList
    },
    delectDataSource(data) {
      var last = data.slice(-1)[0]
      last.status = '3'
      if (data[0].distributionField) {
        this.deleteFun()
        // console.log('data:', data)
      } else {
        data.pop()
        // console.log('22data:', data)
      }
    },
    getModellist() {
      getModellist({ modelId: this.distributionForm.modelId }).then((res) => {
        this.distributionForm.modelList = []
        const resRows = res.rows
        resRows.forEach((item) => {
          this.distributionForm.modelList.push(item.attrCode)
        })
        // console.log('item.attrName:', this.distributionForm.modelList)
      })
    },
    getModelTree() {
      getModelTree().then((res) => {
        this.deptOptions = res.data.rows
      })
    },
    // 子组件校验表单
    validataDistributionForm() {
      var flag = false
      this.$refs.ruleDistributionForm.validate(valid => {
        if (valid) {
          // console.log('成功！！')
          flag = true
        } else {
          console.log('error submit!!')
          flag = false
        }
      })
      return flag
    }

  }

}
</script>

<style lang='less'>
</style>
