<template>
  <el-dialog
    title="流程复制配置"
    :visible.sync="dialogVisible"
    width="70%"
    :append-to-body="true"
    @opened="opened"
    @closed="closed"
    :destory-on-close="true"
  >
    <el-container>
      <el-main>
        <el-row>
          <el-cascader
            :options="options"
            clearable
            filterable
            :show-all-levels="false"
            :props="props"
            @change="handleSelectNode"
            v-model="selectVal"
            ref="cascader"
            popper-class="train-tree-cascader"
          >
          </el-cascader>
        </el-row>
        <el-row v-for="(ent, index) in copyConfig" :key="index">
          <el-card
            shadow="always"
            :body-style="{padding: '20px'}"
            style="margin-top: 10px"
          >
            <div slot="header">
              <span>{{ ent.desc }}</span>
              <el-button
                type="text"
                size="default"
                icon="el-icon-close"
                @click="deleteConf(index, ent)"
                style="float: right; padding: 3px 0"
              ></el-button>
              <el-tooltip placement="top" effect="dark">
                <div slot="content">
                  黑名单模式下，复制时忽略选中的字段<br />
                  白名单模式下，只会复制选中的字段<br />
                  注意：复制之后生成的数据都会被初始赋值所覆盖
                </div>
                <el-select
                  v-model="ent.model"
                  style="float: right; width: 90px; padding-right: 20px"
                  size="mini"
                  @change="changeModel(ent)"
                >
                  <el-option value="b" label="黑名单"></el-option>
                  <el-option value="w" label="白名单"></el-option>
                </el-select>
              </el-tooltip>
              <el-tooltip placement="top" effect="dark">
                <div slot="content">
                  未设置时默认启用<br />
                  选择停用，复制时将忽略该子表的数据<br />
                  停用子表时，孙表的数据也将会丢弃<br />
                </div>
                <el-select
                  v-model="ent.enable"
                  v-if="ent.type != 'main'"
                  style="float: right; padding-right: 20px; width: 105px"
                  size="mini"
                >
                  <el-option :value="true" label="启用复制"></el-option>
                  <el-option :value="false" label="停用复制"></el-option>
                </el-select>
              </el-tooltip>
            </div>
            <div v-if="ent.enable">
              <el-select
                :multiple="true"
                v-model="ent.value"
                style="width: 100%"
              >
                <el-option
                  v-for="(attr, index2) in optionsMap[ent.name]"
                  :key="index2"
                  :label="attr.label"
                  :value="attr.value"
                ></el-option>
              </el-select>
            </div>
          </el-card>
        </el-row>
      </el-main>
    </el-container>
    <span slot="footer">
      <el-button type="default" @click="cancel">取消</el-button>
      <el-button type="primary" @click="confirm">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      options: [],
      props: {
        lazy: true,
        expandTrigger: 'click',
        multiple: false,
        checkStrictly: false,
        lazyLoad: this.lazyLoad
      },
      boDefList: [],
      boEntList: [],
      copyConfig: [],
      optionsMap: {},
      formKey: '',
      selectVal: ''
    }
  },
  props: ['defId'],
  methods: {
    confirm() {
      this.$emit('confirm', this.copyConfig)
      this.dialogVisible = false
    },
    cancel() {
      this.dialogVisible = false
    },
    showDialog(copySetting) {
      if (copySetting) {
        this.copyConfig = JSON.parse(copySetting)
      }
      //通过流程定义ID获取全局表单
      this.$http
        .get(
          `${window.context.bpmModel}/flow/node/v1/getGlobalForm?defId=${this.defId}&type=pc`
        )
        .then(resp => {
          this.formKey = resp.data.formKey
          this.dialogVisible = true
        })
    },
    handleSelectNode(param) {
      if (
        this.copyConfig.some(conf => {
          return conf.id == param[1]
        })
      ) {
        this.$message.warning(`该实体已存在`)
        return
      }
      let ent = this.boEntList.filter(item => {
        return item.id == param[1]
      })[0]
      if (!ent) {
        return
      }
      let configItem = {
        desc: ent.desc,
        name: ent.name,
        id: ent.id,
        value: [],
        model: 'b',
        enable: true,
        defId: param[0],
        type: ent.type
      }
      this.$http
        .get(
          `${window.context.form}/bo/def/v1/getBoAttrByEntId?boEntId=${param[1]}`
        )
        .then(resp => {
          if (this.optionsMap[ent.name]) {
            this.optionsMap[ent.name].splice(0)
          } else {
            this.$set(this.optionsMap, ent.name, new Array())
          }
          resp.data.forEach(item => {
            this.optionsMap[ent.name].push({
              label: item.desc,
              value: item.name
            })
          })
          this.copyConfig.push(configItem)
        })
    },
    opened() {
      this.selectVal = ''
      this.copyConfig.forEach(conf => {
        this.$http
          .get(
            `${window.context.form}/bo/def/v1/getBoAttrByEntId?boEntId=${conf.id}`
          )
          .then(resp => {
            if (this.optionsMap[conf.name]) {
              this.optionsMap[conf.name].splice(0)
            } else {
              this.$set(this.optionsMap, conf.name, new Array())
            }
            resp.data.forEach(attr => {
              this.optionsMap[conf.name].push({
                label: attr.desc,
                value: attr.name
              })
            })
          })
      })
    },
    closed() {
      this.options.splice(0)
    },
    lazyLoad(node, resolve) {
      let this_ = this
      if (node.level == 0) {
        let formKey = this.formKey
        this_.$http
          .get(
            `${window.context.form}/form/formServiceController/v1/getFormBoLists?formKey=${formKey}`
          )
          .then(resp => {
            let nodes = []
            resp.data.forEach(boDef => {
              if (
                !this_.boDefList.some(item => {
                  return item.id == boDef.id
                })
              ) {
                this_.boDefList.push(boDef)
              }
              nodes.push({
                label: boDef.description,
                value: boDef.id
              })
            })
            resolve(nodes)
          })
      } else if (node.level == 1) {
        //获取boEnt列表
        let boDefId = node.data.value
        this_.$http
          .get(
            `${window.context.form}/bo/def/v1/getEntListByDefId?boDefId=${boDefId}`
          )
          .then(resp => {
            let nodes = []
            resp.data.forEach(item => {
              if (
                !this_.boEntList.some(ent => {
                  return ent.id == item.id
                })
              ) {
                this_.boEntList.push(item)
              }
              let desc = item.desc
              if (item.type == 'main') {
                desc += '(主表)'
              }
              nodes.push({
                label: desc,
                value: item.id,
                leaf: true
              })
            })
            resolve(nodes)
          })
      } else {
        resolve(null)
      }
    },
    deleteConf(index, ent) {
      delete this.optionsMap[ent.name]
      this.copyConfig.splice(index, 1)
    },
    changeModel(ent) {
      if (ent.value) {
        ent.value = []
      }
    }
  }
}
</script>

<style lang="scss" scoped></style>

<style lang="scss">
.train-tree-cascader {
  .el-cascader-menu__wrap {
    height: auto;
  }
}
</style>