<template>
  <div>
    <el-form
      label-position="right"
      :label-width="labelWidth"
      :model="bpmForm"
      size="mini"
    >
      <ht-form-item :label="title">
        <el-select
          v-model="bpmForm.pc.type"
          placeholder="请选择表单类型"
          @change="formTypeChange"
          :disabled="handleType == 'simple'"
        >
          <el-option label="在线表单" value="INNER"></el-option>
          <el-option label="URL表单" value="FRAME"></el-option>
        </el-select>
      </ht-form-item>
      <ht-form-item label="PC端" v-show="bpmForm.pc.type == 'INNER'">
        <el-tag v-if="bpmForm.pc.name">{{ bpmForm.pc.name }}</el-tag>
        <span v-if="!bpmForm.pc.name" class="operation_text">请选择</span>
        <el-button
          v-if="handleType != 'simple'"
          icon="el-icon-search"
          @click="selectForm(bpmForm.pc)"
        ></el-button>
        <el-button
          v-if="bpmForm.pc.name && handleType != 'simple'"
          @click="clearForm(bpmForm.pc)"
          icon="el-icon-refresh-left"
        ></el-button>
      </ht-form-item>
      <ht-form-item v-show="bpmForm.pc.type == 'INNER'" label="手机端">
        <el-tag v-if="bpmForm.mb.name">{{ bpmForm.mb.name }}</el-tag>
        <span v-if="!bpmForm.mb.name" class="operation_text">请选择</span>
        <el-button
          v-if="handleType != 'simple'"
          icon="el-icon-search"
          @click="selectForm(bpmForm.mb)"
        ></el-button>
        <el-button
          v-if="bpmForm.mb.name && handleType != 'simple'"
          @click="clearForm(bpmForm.mb)"
          icon="el-icon-refresh-left"
        ></el-button>
      </ht-form-item>

      <ht-form-item v-show="bpmForm.pc.type == 'FRAME'" label="PC端">
        <el-tag v-if="bpmForm.pc.name">{{ bpmForm.pc.name }}</el-tag>
        <span v-if="!bpmForm.pc.name" class="operation_text">请选择</span>
        <el-button
          v-if="handleType != 'simple'"
          icon="el-icon-search"
          @click="selectUrlForm(bpmForm.pc)"
        ></el-button>
        <el-button
          v-if="bpmForm.pc.name && handleType != 'simple'"
          @click="clearUrlForm(bpmForm.pc)"
          icon="el-icon-refresh-left"
        ></el-button>
      </ht-form-item>
      <ht-form-item v-show="bpmForm.pc.type == 'FRAME'" label="手机端">
        <el-tag v-if="bpmForm.mb.name">{{ bpmForm.mb.name }}</el-tag>
        <span v-if="!bpmForm.mb.name" class="operation_text">请选择</span>
        <el-button
          v-if="handleType != 'simple'"
          icon="el-icon-search"
          @click="selectUrlForm(bpmForm.mb)"
        ></el-button>
        <el-button
          v-if="bpmForm.mb.name && handleType != 'simple'"
          @click="clearUrlForm(bpmForm.mb)"
          icon="el-icon-refresh-left"
        ></el-button>
      </ht-form-item>

      <ht-form-item label="设置" v-if="type != '2' || bpmForm.pc.name">
        <el-button
          v-if="bpmForm.pc.name && bpmForm.pc.type == 'INNER'"
          size="mini"
          @click="formAuth()"
          icon="icon-permission"
          >授权</el-button
        >
        <el-button
          v-if="showAuthorizeSubData"
          size="mini"
          @click="clearSubFormRight()"
          icon="el-icon-refresh-left"
          >清除子表权限</el-button
        >
        <el-button
          v-if="type != '2' && bpmForm.pc.name && bpmForm.pc.type == 'INNER'"
          size="mini"
          @click="setFormExtraConf"
          icon="icon-feedback"
          >扩展映射字段</el-button
        >
        <el-upload
          v-if="type != '2'"
          class="upload-demo"
          :action="actionUrl"
          :on-remove="handleRemove"
          :file-list="files"
          :headers="header"
          :on-success="success"
          ref="fileUp"
          :limit="1"
        >
          <el-button
            style="margin-top: 8px"
            size="mini"
            v-if="!bpmForm.pc.helpFile"
            icon="icon-query"
            >审批帮助</el-button
          >
        </el-upload>
      </ht-form-item>
    </el-form>

    <EipFormDialog
      ref="eipFormDialog"
      :single="true"
      @onConfirm="dialogConfirm"
      :formType="curSelectForm.formType"
      :pcFormKey="bpmForm.pc.formValue"
      appendToBody
    />
    <EipUrlFormDialog
      ref="eipUrlFormDialog"
      :single="true"
      @onConfirm="dialogUrlConfirm"
      :formType="curUrlForm.formType"
      appendToBody
    />
    <FlowFormAuth ref="flowFormAuth" />
    <FlowFormExtraPropSet
      @formPropSetConfirm="formPropSetConfirm"
      ref="flowFormExtraPropSet"
    />
    <!-- 子表数据授权设置 -->
    <FlowFormRightSubSetting
      ref="flowFormRightSubSetting"
      :nodeId="nodeId"
      :defId="defId"
      parentDefKey="local_"
      :flowKey="defkey"
    />
  </div>
</template>

<script>
  import flow from '@/api/flow.js'
  import req from '@/request.js'
  import {mapState, mapActions} from 'vuex'
  const FlowFormAuth = () => import('@/components/flow/FlowFormAuth.vue')
  const FlowFormRightSubSetting = () =>
    import('@/components/flow/FlowFormRightSubSetting.vue')
  const FlowFormExtraPropSet = () =>
    import('@/components/flow/FlowFormExtraPropSet.vue')
  const EipFormDialog = () => import('@/components/dialog/EipFormDialog.vue')
  const EipUrlFormDialog = () =>
    import('@/components/dialog/EipUrlFormDialog.vue')

  export default {
    props: {
      labelWidth: {
        type: String,
        default: '100px',
      },
      defId: String,
      title: String,
      type: String,
      nodeId: String,
      defkey: String,
      nodeType: String,
      handleType: String,
      handleType: String,
    },
    components: {
      FlowFormAuth,
      FlowFormExtraPropSet,
      EipFormDialog,
      EipUrlFormDialog,
      FlowFormRightSubSetting,
    },
    data() {
      return {
        tempSettting: {},
        bpmForm: {},
        showAuthorizeSubData: false,
        formDialogVisible: false,
        formListData: [],
        tableColumns: [
          {prop: 'formKey', label: '表单key'},
          {prop: 'name', label: '表单名称', width: '300'},
          {prop: 'version', label: '版本号'},
        ],
        pageResult: {
          page: 1,
          pageSize: 50,
          total: 0,
        },
        curSelectForm: {},
        curUrlForm: {},
        files: [],
      }
    },
    computed: mapState({
      defConfigData: (state) => state.flow.defConfigData,
      header: (state) => {
        return {Authorization: `Bearer ${state.login.currentUser.token}`}
      },
      actionUrl: function () {
        return window.context.portal + '/system/file/v1/upload'
      },
    }),
    watch: {
      bpmForm: {
        handler(newValue, oldValue) {
          this.updateForm()
        },
        deep: true,
      },
    },
    mounted() {
      const this_ = this
      //监听保存流程配置的点击事件
      this.$root.$on('nodeSetUpdate', function (value) {
        if (this_.nodeType) {
          this_.bpmForm.pc.formValue = this_.bpmForm.pc.formValue || ''
          //判断是否显示子表数据授权按钮
          if (
            (this_.nodeType == 'userTask' || this_.nodeType == 'signTask') &&
            this_.bpmForm.pc.formValue != ''
          ) {
            this_.showAuthorizeSubData = true
          } else {
            this_.showAuthorizeSubData = false
          }
        }
      })
      //打开配件节点表单时，判断是否显示子表数据授权按钮
      if (
        this_.bpmForm.pc.formValue &&
        (this_.nodeType == 'userTask' || this_.nodeType == 'signTask')
      ) {
        this_.showAuthorizeSubData = true
      }
    },
    methods: {
      //清除子表数据授权
      clearSubFormRight() {
        const this_ = this
        this.$confirm('确定清除所有子表授权？', '提示', {
          cancelButtonText: '取消',
          confirmButtonText: '确定',
          type: 'warning',
          closeOnClickModal: false,
        }).then(() => {
          req
            .post(
              window.context.bpmModel +
                '/flow/node/v1/saveSub?defId=' +
                this_.defId +
                '&nodeId=' +
                this_.nodeId +
                '&parentDefKey=local_',
              {}
            )
            .then(function (data) {
              data = data.data
              if (data.state) {
                this_.$message.success({
                  duration: 3000,
                  message: '清除成功',
                })
              } else {
                this_.$message.error(data.message)
              }
            })
        })

        //this.$refs.flowFormRightSubSetting.showDialog()
      },
      formTypeChange(change) {
        if (change && change != '') {
          if (change == 'INNER') {
            this.curUrlForm = {}
          } else {
            this.curSelectForm = {}
          }
          this.$set(this.bpmForm.pc, 'name', '')
          this.$set(this.bpmForm.pc, 'formValue', '')
          this.$set(this.bpmForm.mb, 'name', '')
          this.$set(this.bpmForm.mb, 'formValue', '')
        }
      },
      dialogCancel() {},
      formPropSetConfirm(conf) {
        this.bpmForm.pc.formExtraConf = JSON.stringify(conf)
      },
      setFormExtraConf() {
        let param = {
          formkey: this.bpmForm.pc.formValue,
          propConf: this.bpmForm.pc.formExtraConf,
        }
        this.$refs.flowFormExtraPropSet.showDialog(param)
      },
      dialogConfirm(data) {
        if (data && data.length > 0) {
          data = data[0]
          if (
            this.curSelectForm.formValue &&
            this.curSelectForm.formValue != data.formKey &&
            this.curSelectForm.formType == 'pc'
          ) {
            let this_ = this
            this.$confirm(
              '更换表单将会清除之前表单权限配置和手机表单，是否确认更换？',
              '提示',
              {
                cancelButtonText: '取消',
                confirmButtonText: '确定',
                type: 'warning',
                closeOnClickModal: false,
              }
            ).then(() => {
              if (this_.bpmForm.mb.formValue) {
                this_.doClearForm(this_.bpmForm.mb)
              }
              this.doClearForm(this_.curSelectForm, function () {
                this_.curSelectForm.formValue = data.formKey
                this_.curSelectForm.name = data.name
                this_.formDialogVisible = false
                this_.$message.success('表单设置已清除')
              })
            })
          } else {
            this.curSelectForm.formValue = data.formKey
            this.curSelectForm.name = data.name
            this.formDialogVisible = false
          }
        }
      },
      selectForm(form) {
        if (form.formType == 'mobile' && !this.bpmForm.pc.formValue) {
          this.$message.warning(
            '请先选择pc表单，才能根据pc表单的数据建模筛选手机表单'
          )
          return
        }
        this.curSelectForm = form
        this.$refs.eipFormDialog.showDialog()
      },
      dialogUrlConfirm(data) {
        if (data && data.length > 0) {
          data = data[0]
          this.curUrlForm.formValue = data.formKey
          this.curUrlForm.name = data.formName
        }
      },
      selectUrlForm(form) {
        this.curUrlForm = form
        this.$refs.eipUrlFormDialog.showDialog()
      },
      clearUrlForm(form) {
        this.$set(form, 'name', '')
        this.$set(form, 'formValue', '')
      },
      formAuth() {
        let param = {
          flowKey: this.defConfigData.initData.bpmDefinition.defKey,
          formKey: this.bpmForm.pc.formValue,
          nodeId: this.nodeId,
          parentflowKey: this.defkey == undefined ? '' : this.defkey,
          type: this.type,
          bpmnDefId:this.defConfigData.initData.bpmDefinition.bpmnDefId
        }
        this.$refs.flowFormAuth.showDialog(param)
      },
      clearForm(form, callBack) {
        if (form.formType == 'pc') {
          this.$confirm(
            '此操作清除之前表单权限配置和手机表单，是否确认操作？',
            '提示',
            {
              cancelButtonText: '取消',
              confirmButtonText: '确定',
              type: 'warning',
              closeOnClickModal: false,
            }
          ).then(() => {
            this.doClearForm(form)
            if (this.bpmForm.mb.formValue) {
              this.doClearForm(this.bpmForm.mb)
            }
          })
        } else {
          this.doClearForm(form)
        }
      },
      doClearForm(form, callBack) {
        let nodeId = form.nodeId || ''
        let this_ = this
        let parentFlowKey = this.defkey == undefined ? '' : this.defkey
        req
          .get(
            '${form}/form/rights/v1/remove?flowKey=' +
              this.defConfigData.initData.bpmDefinition.defKey +
              '&nodeId=' +
              nodeId +
              '&parentFlowKey=' +
              parentFlowKey
          )
          .then(function (resp) {
            let data = resp.data
            if (data.state) {
              this_.$set(form, 'name', '')
              this_.$set(form, 'formValue', '')
              this_.showAuthorizeSubData = false
              if (callBack) {
                callBack()
              } else {
                this_.$message.success('表单设置已清除')
              }
            } else {
              this_.$message.fail(data.message)
            }
          })
      },
      success(response, file, fileList) {
        this.files = []
        for (let i = 0; i < fileList.length; i++) {
          if (fileList[i].response) {
            let value = fileList[i].response
            let arrarFile = {}
            arrarFile.id = value.fileId
            arrarFile.name = value.fileName
            arrarFile.size = value.size
            this.files.push(arrarFile)
          }
        }
        this.bpmForm.pc.helpFile = JSON.stringify(this.files)
      },
      handleRemove(file, fileList) {
        this.$set(this.bpmForm.pc, 'helpFile', '')
      },
      updateForm() {
        //保持pc端和移动端表单的类型一致
        this.bpmForm.mb.type = this.bpmForm.pc.type

        if (this.type == '1') {
          this.$store.dispatch('flow/updateConfig', {
            'nodeSetData.bpmDefSetting.globalForm': this.bpmForm.pc,
          })
          this.$store.dispatch('flow/updateConfig', {
            'nodeSetData.bpmDefSetting.globalMobileForm': this.bpmForm.mb,
          })
        } else if (this.type == '2') {
          this.$store.dispatch('flow/updateConfig', {
            'nodeSetData.bpmDefSetting.instForm': this.bpmForm.pc,
          })
          this.$store.dispatch('flow/updateConfig', {
            'nodeSetData.bpmDefSetting.instMobileForm': this.bpmForm.mb,
          })
        } else {
          let pcPath = 'nodeSetData.bpmDefSetting.formMap.' + this.nodeId
          let mbPath = 'nodeSetData.bpmDefSetting.mobileFormMap.' + this.nodeId
          let pcForm = {}
          pcForm[pcPath] = this.bpmForm.pc
          let mbForm = {}
          mbForm[mbPath] = this.bpmForm.mb
          this.$store.dispatch('flow/updateConfig', pcForm)
          this.$store.dispatch('flow/updateConfig', mbForm)
        }
      },
    },
    created() {
      if (this.defConfigData.nodeSetData.bpmDefSetting) {
        this.tempSettting = JSON.parse(
          JSON.stringify(this.defConfigData.nodeSetData.bpmDefSetting)
        )
        if (this.type == '1') {
          this.bpmForm = {
            pc: this.tempSettting.globalForm,
            mb: this.tempSettting.globalMobileForm,
          }
        } else if (this.type == '2') {
          this.bpmForm = {
            pc: this.tempSettting.instForm,
            mb: this.tempSettting.instMobileForm,
          }
        } else {
          this.bpmForm = {
            pc: this.tempSettting.formMap[this.nodeId],
            mb: this.tempSettting.mobileFormMap[this.nodeId],
          }
        }
        if (this.bpmForm.pc && this.bpmForm.pc.helpFile) {
          this.files = JSON.parse(this.bpmForm.pc.helpFile)
        }
      }
    },
  }
</script>

<style  scoped>
  div >>> .box-card {
    margin-bottom: 20px;
  }

  div >>> .box-card .clearfix {
    padding-top: 20px;
  }

  div >>> .el-collapse-item__header {
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    font-weight: bold;
  }

  div >>> .el-button {
    padding: 7px;
    margin-left: 10px;
  }
  .upload-demo {
    display: inline-block;
  }

  .upload-demo >>> .el-upload {
    display: inline;
  }
  .upload-demo >>> .el-upload-list__item {
    margin-top: 5px !important;
  }
  .upload-demo >>> .el-upload-list__item-name {
    white-space: normal;
  }
</style>