<template>
  <dee-form
    label-width="80px"
    :form="form.propForm"
    :rules="rules"
    :form-data="propFormData"
    :form-buttons="formButtons"
    form-btn-position="center"
    @on-submit="submit"
    @on-cancel="cancel"
  >
    <dee-table
      slot="table"
      :data="tableData"
      :columns="columns"
      :options="{maxHeight:300}"
    />
  </dee-form>
</template>

<script>
import { addLinks, showMessage } from '@/utils/util'
export default {
  name: 'AllocatedToIm',
  componentName: '分配至IM',
  props: {
    selectedData: {
      type: Array,
      default: () => []
    },
    parentTableData: {
      type: [Array, Object],
      default: () => {}
    }
  },
  data() {
    return {
      objState: [],
      type: {
        '管理部件': 0,
        '实物部件': 1,
        '文档': 2
      },
      rules: {
        allocatedToIm: [
          { required: true, message: '请选择IM', trigger: 'change' }
        ]
      },
      form: {
        propForm: {
          number: '',
          name: ''
        }
      },
      formButtons: [
        {
          'text': '确定',
          'type': 'submit',
          'component': {
            'type': 'primary'
          }
        },
        {
          'text': '取消',
          'type': 'cancel',
          'component': {
          }
        }
      ],
      tableData: [],
      columns: [
        { title: '编号', key: 'displayNumber' },
        { title: '名称', key: 'displayName' },
        { title: '视图', key: 'target.dxView.name', formatter(row) {
          if (row.target) { return row.target.dxView && row.target.dxView.name || '' }
          return row.draftDxViewName || ''
        } },
        { title: '版本', key: 'target.displayVersion' },
        { title: '状态', key: 'displayState' },
        {
          title: '规划类型', key: 'planning',
          component: {
            name: 'dictionaryOptions',
            props: {
              params: 'ChangePlanningType',
              filed: 'planning',
              type: 'table',
              size: 'small'
            },
            handler: {
              change: (data) => {
                this.$set(this.tableData[data.index], 'planningType', this.type[data.val])
              }
            }
          }
        }
      ],
      imOptions: []
    }
  },
  computed: {
    propFormData() {
      const propFormData = [
        {
          title: '',
          split: 2,
          data: [
            {
              key: 'allocatedToIm',
              title: '选择IM ',
              component: {
                name: 'el-select',
                options: this.parentTableData.IMoptionsData.map((el) => {
                  return {
                    value: el.target.id,
                    label: el.target.number
                  }
                })
              }
            }
          ]
        },
        {
          title: '',
          data: [
            {
              title: '',
              key: 'search',
              component: {
                name: 'custom'
              }
            }
          ]
        },
        {
          title: '',
          data: [
            {
              title: '',
              key: 'table',
              component: {
                name: 'custom'
              }
            }
          ]
        }
      ]
      return propFormData
    }

  },
  watch: {
    dialogShow: {
      immediate: true,
      handler: function(flag) {
        if (flag) {
          this.getImOptions()
          this.getContextList()
        } else {
          this.tableData = []
        }
      } }
  },
  created() {
    // this.getImOptions()
    this.getContextList()
  },
  methods: {
    async getContextList() {
      const arr = this.$store.state.dictionaries && this.$store.state.dictionaries.ObjStatus ? this.$store.state.dictionaries.ObjStatus.default : await this.$utils.getDicListByCode('ObjStatus')
      this.objState = arr
      this.tableData = JSON.parse(JSON.stringify(this.selectedData)).map(x => {
        if (x.pboType === 'DxPart') {
          x.IMtype = '0'
          x.planning = ''
        } else {
          x.IMtype = '1'
          x.planning = '文档'
          x.planningType = 2
        }
        x.show = true
        x.displayState = x.displayState ? this.objState.find(s => {
          return s.value === x.displayState
        }).label : ''
        return x
      })
    },
    getImOptions() {
      this.imOptions = this.$store.state.configuration.imTableData.map(item => {
        return {
          label: item.target.number,
          value: item.target.id
        }
      })
      this.$set(this.form.propFormData[0].data[0].component, 'options', this.imOptions)
    },
    submit() {
      if (this.tableData.some(x => x.planningType === '')) {
        showMessage('请选择规划类型!', 'warning')
        return
      }
      const data = this.tableData.map(item => { // if  target   {ori} else  {obj}
        if (item.target) {
          return {
            recordType: item.planningType,
            target: {
              operator: 'ADD',
              oriNumber: item.displayNumber,
              oriName: item.displayName,
              oriVersion: item.displayVersion || '',
              oriType: item.displayType,
              recordType: item.planningType + 1,
              changeMode: '',
              pboType: item.pboType,
              isOriginal: '1',
              dxView: item.target.dxView,
              objType: item.target.subTypeName
            }
          }
        } else {
          return {
            recordType: item.planningType,
            target: {
              operator: 'ADD',
              objNumber: item.displayNumber,
              objName: item.displayName,
              objVersion: item.displayVersion || '',
              oriType: item.displayType,
              recordType: item.planningType + 1,
              changeMode: '新增',
              pboType: item.pboType,
              isOriginal: '1',
              dxViewId: item.draftDxViewId,
              objType: item.displayType
            }
          }
        }
      })
      addLinks('DxChangeIM', this.form.propForm.allocatedToIm, 'imRecordLinks', data).then(res => {
        showMessage('操作成功!', 'success')
        this.$emit('completeEven', 'im')
        // this.cancel()
      })
    },
    cancel() {
      this.$emit('cancel')
    }
  }
}
</script>