<template>
  <el-dialog
    width="930px"
    title="配置复用"
    v-if="dialogVisibleSetting"
    :visible.sync="dialogVisibleSetting"
    :before-close="close"
    :close-on-click-modal="false"
    append-to-body
    :destroy-on-close="true"
    custom-class="flow-node-reuse-dialog"
  >
    <el-form data-vv-scope="resuseSettingSave" v-form ref="Setingform">
      <ht-form-item label="来源节点" label-width="100px" align="left">
        <ht-select
          v-model="sourceNode"
          :options="nodes"
          filterable
          :props="{key: 'nodeId', value: 'label'}"
          :validate="{required: true}"
        ></ht-select>
        <span style="color: #e55555; margin-left: 20px"
          >注意：请先保存源节点的配置，再进行复用操作。
        </span>
      </ht-form-item>
      <ht-form-item label="复用节点" label-width="100px" align="left">
        <ht-select
          :multiple="true"
          collapse-tags
          v-model="targetNodes"
          :options="nodes"
          filterable
          :props="{key: 'nodeId', value: 'label'}"
          :validate="{required: true}"
        ></ht-select>
        <span style="color: #e55555; margin-left: 20px"
          >注意：节点原有的配置将会被覆盖!
        </span>
      </ht-form-item>
      <ht-form-item label="复用配置" label-width="100px" align="left">
        <ht-checkbox
          v-model="type"
          :options="typeOptions"
          :validate="{required: true}"
          class="type-checkbox"
          @change="typeChange"
        ></ht-checkbox>
      </ht-form-item>
      <ht-form-item label="功能说明" label-width="100px" align="left">
        <span class="item-explain">
          当流程节点配置信息基本相似时，可以使用配置复用功能快速复用其他节点的配置信息。
        </span>
      </ht-form-item>
    </el-form>
    <div class="bottom-btn">
      <el-button @click="close()">取消</el-button>
      <el-button type="primary" @click="save()">马上生效</el-button>
    </div>
  </el-dialog>
</template>

<script>
import flow from '@/api/flow.js'
import utils from '@/hotent-ui-util.js'
export default {
  name: 'FlowNodeReuseDialog',
  components: {},
  props: {
    defConfigData: {
      type: Object,
    },
    topDefKey: {
      type: String,
    },
  },
  data() {
    return {
      dialogVisibleSetting: false,
      sourceNode: null,
      targetNodes: null,
      type: '',
      typeOptions: [
        {key: 'nodeForm', value: '节点表单', disabled: false},
        {key: 'nodeUser', value: '节点审批人', disabled: false},
        {key: 'nodeReadUser', value: '节点传阅人', disabled: false},
        {key: 'nodeProperties', value: '节点属性', disabled: false},
        {key: 'nodeBtn', value: '节点按钮', disabled: false},
        {key: 'all', value: '全部配置信息'},
      ],
    }
  },
  computed: {
    nodes: function () {
      let arr = []
      this.defConfigData &&
        this.defConfigData.nodeSetData &&
        this.defConfigData.nodeSetData.nodes &&
        this.defConfigData.nodeSetData.nodes.forEach((node) => {
          node.label = `${node.name}(${node.nodeId})`
          if (node.type !== 'start') {
            arr.push(node)
          }
        })
      return arr
    },
    targetNodeArr: function () {
      return this.targetNodes ? this.targetNodes.split(',') : []
    },
  },
  methods: {
    showDialog() {
      //重新初始化全部的 data数据
      Object.assign(this.$data, this.$options.data())
      this.dialogVisibleSetting = true
    },
    close() {
      this.dialogVisibleSetting = false
    },
    typeChange(m, n) {
      let type = this.type
      if (this.type.indexOf('all') != -1) {
        this.type = 'all'
        this.switchOptsDisabled(true)
      } else {
        this.switchOptsDisabled(false)
      }
    },
    switchOptsDisabled(value = false) {
      this.typeOptions.forEach((e) => {
        if (e.hasOwnProperty('disabled')) {
          e.disabled = value
        }
      })
    },
    save() {
      utils
        .validateForm(this, 'resuseSettingSave')
        .then((r) => {
          this.$confirm(`将覆盖更新所有目标节点，确定进行此操作吗 ?`, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          })
            .then(() => {
              this.doSave()
              this.type = ''
              this.sourceNode = null
            })
            .catch(() => {})
        })
        .catch(() => {})
    },
    doSave() {
      let pcForm = this.defConfigData.nodeSetData.bpmDefSetting.nodeForms.find(
        (obj) => obj.nodeId == this.sourceNode && obj.formType == 'pc'
      )
      let param = {
        sourceNodeId: this.sourceNode,
        defId: this.defConfigData.initData.bpmDefLayout.defId, //流程定义ID
        defKey: this.defConfigData.initData.bpmDefinition.defKey, //流程定义key
        targetNodeIds: this.targetNodeArr,
        scope: this.type.split(','),
      }
      // 入参中如果定义了topDefKey（top不为LOCAL_)则不会复制信息 去掉：topDefKey: this.topDefKey,
      if (pcForm.formValue) {
        param.pcFormKey = pcForm.formValue
      }
      flow.copyNodeConf(param).then((resp) => {
        if (resp.state) {
          this.$message.success(resp.message || '复制成功')
          this.$emit('confirm', null)
          this.dialogVisibleSetting = false
        }
      })
      // //节点表单
      // if (this.type.indexOf('nodeForm') != -1) {
      //   this.copyNodeForm()
      // }
      // //节点审批人
      // if (this.type.indexOf('nodeUser') != -1) {
      //   this.copyNodeUser()
      // }
      // //节点传阅人
      // if (this.type.indexOf('nodeReadUser') != -1) {
      //   this.copyNodeReadUser()
      // }
      // //节点属性
      // if (this.type.indexOf('nodeProperties') != -1) {
      //   this.copyNodeProperties()
      // }
      // //节点按钮
      // if (this.type.indexOf('nodeBtn') != -1) {
      //   this.copyNodeBtn()
      // }
    },
    //节点表单复制
    copyNodeForm() {
      this.targetNodeArr.forEach((nodeId) => {
        let newObj = JSON.parse(
          JSON.stringify(
            this.defConfigData.nodeSetData.bpmDefSetting.formMap[
              this.sourceNode
            ]
          )
        )
        newObj.nodeId = nodeId
        //pc表单
        let pcForm = {['nodeSetData.bpmDefSetting.formMap.' + nodeId]: newObj}
        this.$store.dispatch('flow/updateConfig', pcForm)
        //手机表单
        newObj = JSON.parse(
          JSON.stringify(
            this.defConfigData.nodeSetData.bpmDefSetting.mobileFormMap[
              this.sourceNode
            ]
          )
        )
        newObj.nodeId = nodeId
        let mbForm = {
          ['nodeSetData.bpmDefSetting.mobileFormMap.' + nodeId]: newObj,
        }
        this.$store.dispatch('flow/updateConfig', mbForm)
      })
    },
    copyNodeUser() {
      this.targetNodeArr.forEach((nodeId) => {
        let newObj = JSON.parse(
          JSON.stringify(
            this.defConfigData.nodeSetData.nodeUserMap[this.sourceNode]
          )
        )
        let path = 'nodeSetData.nodeUserMap.' + nodeId
        this.$store.dispatch('flow/updateConfig', {[path]: newObj})
      })
    },
    copyNodeReadUser() {
      this.targetNodeArr.forEach((nodeId) => {
        let newObj = JSON.parse(
          JSON.stringify(
            this.defConfigData.nodeSetData.nodeReadUserMap[this.sourceNode]
          )
        )
        let path = 'nodeSetData.nodeReadUserMap.' + nodeId
        this.$store.dispatch('flow/updateConfig', {[path]: newObj})
      })
    },
    copyNodeProperties() {
      this.targetNodeArr.forEach((nodeId) => {
        let path = 'nodeSetData.bpmDefSetting.nodePropertieMap.' + nodeId
        let newObj = JSON.parse(
          JSON.stringify(
            this.defConfigData.nodeSetData.bpmDefSetting.nodePropertieMap[
              this.sourceNode
            ]
          )
        )
        newObj.nodeId = nodeId
        this.$store.dispatch('flow/updateConfig', {[path]: newObj})
      })
    },
    copyNodeBtn() {
      this.targetNodeArr.forEach((nodeId) => {})
    },
  },
  mounted() {
    this.$validator = this.$root.$validator
  },
}
</script>

<style lang="scss" scoped>
::v-deep .flow-node-reuse-dialog {
  .el-dialog__body {
    padding: 30px 48px;
  }
  .bottom-btn {
    margin-top: 40px;
    text-align: right;
  }
  .item-explain {
    color: #333;
  }
}
.type-checkbox {
  width: 100% !important;
}
</style>