<template>
  <div>
    <el-form v-form data-vv-scope="baseConfigForm">
      <div class="title-bar">
        <label class="title-label">{{ node.name }}({{ node.nodeId }})</label>
        <el-button
          style="margin-left: 20px"
          size="mini"
          type="primary"
          v-if="
            (propertie.jumpType == 'free' ||
              propertie.jumpType == 'select' ||
              propertie.jumpType == 'free,select' ||
              propertie.jumpType == 'select,free') &&
            nodeAttr.jumpType == '' &&
            node.type != 'signTask'
          "
          @click="helpClick(node.nodeId, propertie.help)"
          >帮助</el-button
        >
      </div>
      <div v-if="node.type == 'signTask'">
        <!-- 允许参考意见 -->
        <div class="form-inline">
          <el-tooltip
            class="item"
            effect="dark"
            content="选择否，则审批时不允许参考同环节其他会签人员的意见"
            placement="left"
          >
            <div class="control-label left-label">
              <i class="el-icon-warning"></i>允许参考意见
            </div>
          </el-tooltip>
          <div>
            <ht-radio
              :options="[
                {key: true, value: '是'},
                {key: false, value: '否'},
              ]"
              v-model="propertie.referOpinion"
            />
          </div>
        </div>
      </div>
      <!-- 是否支持前跳后审 -->
      <!-- <div class="form-inline">
        <div class="control-label left-label">前跳后审预演</div>
        <div>
          <ht-radio
            :options="[
              {key: true, value: '是'},
              {key: false, value: '否'}
            ]"
            v-model="propertie.preSkipAfterApprovePreview"
          />
        </div>
      </div> -->
      <!-- 允许发起人撤回 -->
      <div class="form-inline">
        <div class="control-label left-label">允许发起人撤回</div>
        <div>
          <ht-radio
            :options="[
              {key: true, value: '是'},
              {key: false, value: '否'},
            ]"
            v-model="propertie.sponsorRevoke"
          />
        </div>
      </div>
      <!-- 允许本环节撤回 -->
      <div class="form-inline">
        <div class="control-label left-label">允许本环节撤回</div>
        <div>
          <ht-radio
            :options="[
              {key: true, value: '是'},
              {key: false, value: '否'},
            ]"
            v-model="propertie.previousRevoke"
          />
        </div>
      </div>
      <!-- 允许批量处理 -->
      <div class="form-inline">
        <div class="control-label left-label">允许批量处理</div>
        <div>
          <ht-radio
            :options="[
              {key: true, value: '是'},
              {key: false, value: '否'},
            ]"
            v-model="propertie.batchHandleRevoke"
          />
        </div>
      </div>
      <div v-if="node.type != 'signTask'">
        <!-- 跳转类型 -->
        <div class="form-inline">
          <el-tooltip
            class="item"
            effect="dark"
            content="自由跳转优先级高于选择路径跳转"
            placement="left"
          >
            <div class="control-label left-label">
              <i class="el-icon-warning"></i>跳转类型
            </div>
          </el-tooltip>
          <ht-checkbox
            :options="[
              {key: 'free', value: '自由跳转'},
              {key: 'select', value: '选择路径跳转'},
            ]"
            v-model="propertie.jumpType"
          />
        </div>
        <!-- 选择处理人 -->
        <div class="form-inline">
          <el-tooltip
            class="item"
            effect="dark"
            content="自由选择优先级高于选择候选人"
            placement="left"
          >
            <div class="control-label left-label">
              <i class="el-icon-warning"></i>选择处理人
            </div>
          </el-tooltip>
          <ht-checkbox
            :options="[
              {key: 'free', value: '自由选择'},
              {key: 'candidate', value: '选择候选人'},
            ]"
            v-model="propertie.choiceExcutor"
          />
        </div>
      </div>
      <!-- 通知类型 -->
      <div class="form-inline">
        <div class="control-label left-label">通知类型</div>
        <ht-checkbox
          style="width: 55%"
          :options="defConfigData.nodeSetData.notifyType"
          v-model="propertie.notifyType"
        />
      </div>
      <!-- 节点通知 -->
      <div class="form-inline">
        <div class="control-label left-label">邮件消息通知</div>
        <el-button size="small" @click="$refs.flowMsgSendConfig.showDailog()">{{
          propertie.msgConfig ? '编辑' : '新增'
        }}</el-button>
        <el-button
          type="danger"
          size="small"
          v-if="propertie.msgConfig"
          @click="handleDelMsgConfig"
          >清除</el-button
        >
      </div>
      <div class="form-inline">
        <div class="control-label left-label">套打模板</div>
        <el-button
          :type="
            !propertie.printTemplate || propertie.printTemplate == '[]'
              ? ''
              : 'primary'
          "
          size="small"
          @click="setFillTemplate(propertie)"
          ><i class="el-icon-setting"></i>设置套打模板</el-button
        >
      </div>
      <!-- 执行人为空时 -->
      <div class="form-inline">
        <el-tooltip
          class="item"
          effect="dark"
          content="当前节点为会签节点并且审批人设置为指定范围时,请设置为抽取"
          placement="left"
        >
          <div class="control-label left-label">
            <i class="el-icon-warning"></i>执行人为空时
          </div>
        </el-tooltip>
        <ht-select
          clearable
          v-model="propertie.executorIsEmpty"
          :options="executorIsEmptyPolicy"
          @change="selectExecutorIsEmpty"
          :props="{key: 'key', value: 'val'}"
        />
      </div>
      <div
        class="form-inline specify-approver"
        v-if="propertie.executorIsEmpty && propertie.executorIsEmpty == 'turn'"
      >
        <el-tooltip
          class="item"
          effect="dark"
          content="执行人为空时由指定用户作为审批人"
          placement="left"
        >
          <div class="control-label left-label">
            <i class="el-icon-warning"></i>指定审批人
          </div>
        </el-tooltip>
        <ht-user-selector-input
          v-model="propertie.executorUserName"
          permission="b"
          append-to-body
          single
          :config="{account: 'propertie.executorUserAccount'}"
        />
      </div>
      <!-- 属性设置 -->
      <div
        class="form-inline"
        v-if="defConfigData.initData.bpmDefinition.showUrgentState == 1"
      >
        <div class="control-label left-label">属性设置</div>
        <div>
          <!-- <el-checkbox
            v-if="node.type != 'signTask'"
            v-model="propertie.skipExecutorEmpty"
            >执行人为空跳过</el-checkbox
          >
          <el-checkbox v-model="propertie.allowSmsApproval"
            >允许短信审批</el-checkbox
          > -->
          <el-checkbox v-model="propertie.allowEditUrgentState"
            >允许编辑紧急状态</el-checkbox
          >
        </div>
        <!-- <ht-radio v-model="propertie.backMode"  :options='[{key: "normal", value: "驳回后按流程图执行" }]'/>
      <ht-radio v-model="propertie.backMode"  :options='[{key: "direct", value: "驳回后直接返回" }]' :readonly="node.type=='signTask'?true:false"/>-->
      </div>
      <!-- 短信审批 -->
      <div class="form-inline">
        <div class="control-label left-label">填报属性</div>
        <div>
          <el-checkbox v-model="propertie.initFillData">初始化填报数据</el-checkbox>
        </div>
      </div>
      <!-- 填报属性 -->
      <div class="form-inline">
        <div class="control-label left-label">短信审批</div>
        <div>
          <ht-radio
            :options="[
              {key: true, value: '是'},
              {key: false, value: '否'},
            ]"
            v-model="propertie.allowSmsApproval"
          />
          <!-- <el-radio-group v-model="propertie.tbsx">
            <el-radio :label="1">允许</el-radio>
            <el-radio :label="0">不允许</el-radio>
          </el-radio-group> -->
        </div>
      </div>

      <!-- 驳回处理人模式 -->
      <div class="form-inline">
        <div class="control-label left-label">驳回后处理人</div>
        <div>
          <ht-radio
            v-model="propertie.backUserMode"
            :options="backUserModeList"
          />
        </div>
      </div>

      <!-- 驳回节点-->
      <div class="form-inline">
        <el-tooltip
          class="item"
          effect="dark"
          content="不为空时只能驳回到此节点(设置的节点必须是可支持驳回的，不支持驳回的话，后台会自动过滤)"
          placement="left"
        >
          <div class="control-label left-label">
            <i class="el-icon-warning"></i>驳回节点
          </div>
        </el-tooltip>
        <ht-select
          multiple
          v-model="propertie.backNode"
          :options="nodeOptions"
          :props="{key: 'nodeId', value: 'label'}"
        />
      </div>

      <!-- 前置处理器 -->
      <div class="form-inline">
        <el-tooltip
          class="item"
          effect="dark"
          content="流程任务前置处理器，eg：userService.add"
          placement="left"
        >
          <div class="control-label left-label">
            <i class="el-icon-warning"></i>前置处理器
          </div>
        </el-tooltip>
        <ht-input
          v-model="propertie.prevHandler"
          @blur="checkHandler(propertie.prevHandler)"
          class="ht"
          placeholder="请输入前置处理器"
          autocomplete="off"
        ></ht-input>
      </div>
      <!-- 后置处理器 -->
      <div class="form-inline">
        <el-tooltip
          class="item"
          effect="dark"
          content="流程任务后置处理器，eg：myService.sendMessage"
          placement="left"
        >
          <div class="control-label left-label">
            <i class="el-icon-warning"></i>后置处理器
          </div>
        </el-tooltip>
        <ht-input
          v-model="propertie.postHandler"
          @blur="checkHandler(propertie.postHandler)"
          class="ht"
          placeholder="请输入后置处理器"
          autocomplete="off"
        ></ht-input>
      </div>

      <div class="form-inline" v-if="boDefJson.length > 0">
        <el-tooltip
          class="item"
          effect="dark"
          content="每个节点都可以配置 字段反填字段，可以从全局表单中选择一个字段作为反填对象"
          placement="left"
        >
          <div class="control-label left-label">
            <i class="el-icon-warning"></i>意见反填字段
          </div>
        </el-tooltip>
        <el-select
          desc="属性名称"
          v-model="propertie.opinionField"
          filterable
          clearable
        >
          <el-option-group
            :label="fields.desc"
            v-for="fields in boDefJson"
            :key="fields.desc"
          >
            <el-option
              v-show="!m.sub"
              :value="m.path + '.' + m.name"
              v-for="m in fields.children"
              :key="m.id"
              :label="m.desc"
            ></el-option>
          </el-option-group>
        </el-select>
      </div>

      <div v-if="boDefJson.length > 0" style="margin-bottom: 20px;">
        <el-tooltip
          class="item"
          effect="dark"
          content="是否覆盖原来的值"
          placement="left"
        >
          <div class="control-label left-label">
            <i class="el-icon-warning"></i>审批意见覆盖
          </div>
        </el-tooltip>
      </div>
      <el-switch style="margin-bottom: 20px;" v-model="propertie.appendOpinion"> </el-switch>
      <div class="form-inline" v-if="boDefJson.length > 0">
        <el-tooltip
          class="item"
          effect="dark"
          content="每个节点都可以配置签章反填字段（前提是所选字段在表单中必须是签章控件），可以从全局表单中选择一个字段作为反填对象（仅同意按钮生效）。"
          placement="left"
        >
          <div class="control-label left-label">
            <i class="el-icon-warning"></i>自动签章字段
          </div>
        </el-tooltip>
        <el-select
          desc="属性名称"
          v-model="propertie.signatureField"
          filterable
          clearable
        >
          <el-option-group
            :label="fields.desc"
            v-for="fields in boDefJson"
            :key="fields.desc"
          >
            <el-option
              v-show="!m.sub"
              :value="m.path + '.' + m.name"
              v-for="m in fields.children"
              :key="m.id"
              :label="m.desc"
            ></el-option>
          </el-option-group>
        </el-select>
      </div>

      <!-- 自动签章覆盖 -->
      <template v-if="boDefJson.length > 0 && propertie.signatureField">
      <div
        style="margin-bottom: 20px"
      >
        <el-tooltip
          class="item"
          effect="dark"
          content="是否覆盖原来的值"
          placement="left"
        >
          <div class="control-label left-label">
            <i class="el-icon-warning"></i>自动签章覆盖
          </div>
        </el-tooltip>
      </div>
      <el-switch style="margin-bottom: 20px" v-model="propertie.signatureCover"> </el-switch>
      <!-- 自动签章免密 -->
      <div>
        <el-tooltip
          class="item"
          effect="dark"
          content="自动签章时不需要密码验证"
          placement="left"
        >
          <div class="control-label left-label">
            <i class="el-icon-warning"></i>自动签章免密
          </div>
        </el-tooltip>
      </div>
      <el-switch style="margin-bottom: 20px" v-model="propertie.secretFree"> </el-switch>
      </template>
    </el-form>

    <FlowMsgSendConfig
      :defId="defConfigData.initData.bpmDefLayout.defId"
      :nodeId="node.nodeId"
      v-model="propertie.msgConfig"
      ref="flowMsgSendConfig"
    />

    <!-- 任务帮助提示 -->
    <FlowNodeHelp
      ref="flowNodeHelp"
      :nodeId="node.nodeId"
      :title="title"
      :value="value"
      @handle-save="handleHelpSave"
    ></FlowNodeHelp>
    <el-dialog
      :visible="messageVisible"
      title="节点通知设置"
      append-to-body
      :close-on-click-modal="false"
      :before-close="handleClose"
    >
      <el-form v-form>
        <ht-form-item label="发送方式">
          <ht-input v-model="propertie.template" type="textarea" />
          <el-button @click="$refs.eipMsgTemplateDialog.showDialog()"
            >选择模板</el-button
          >
        </ht-form-item>
        <ht-form-item label="发送对象">
          <div>
            <span style="font-size: 14px">手机号码：</span>
            <eip-bo-attr-selector
              append-to-body
              v-model="propertie.phone"
              :defId="defConfigData.curEditNode.defId"
              :prop="{children: 'children', label: 'comment'}"
            />
          </div>
          <div style="margin: 10px 0 0 0">
            <span style="font-size: 14px">邮箱地址：</span>
            <eip-bo-attr-selector
              append-to-body
              v-model="propertie.email"
              :defId="defConfigData.curEditNode.defId"
              :prop="{children: 'children', label: 'comment'}"
            />
          </div>

          <!--          <el-checkbox v-model="checked">系统用户</el-checkbox><br>-->
        </ht-form-item>
        <ht-form-item label="发送时机">
          <el-radio-group v-model="propertie.sendType">
            <el-radio label="complete">任务完成时</el-radio>
            <el-radio label="create">任务产生时</el-radio>
            <!--            <el-radio label="timing">定时发送</el-radio>-->
          </el-radio-group>
        </ht-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="messageVisible = false" size="medium"
          >取 消</el-button
        >
        <el-button type="primary" @click="handleCommit" size="medium"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <eip-msg-template-dialog
      ref="eipMsgTemplateDialog"
      @onConfirm="templateConfirm"
      append-to-body
    />
    <print-template-setting
      ref="printTemplateSetting"
      :def-config-data="defConfigData"
      @confirm="printTemplateDialogConfigm"
    ></print-template-setting>
  </div>
</template>

<script>
import req from '@/request.js'
import {Message} from 'element-ui'
const FlowNodeHelp = () => import('@/components/flow/FlowNodeHelp.vue')
const EipMsgTemplateDialog = () =>
  import('@/components/dialog/EipMsgTemplateDialog.vue')
const EipBoAttrSelector = () =>
  import('@/components/selector/EipBoAttrSelector.vue')
const FlowMsgSendConfig = () =>
  import('@/components/flow/FlowMsgSendConfig.vue')
const PrintTemplateSetting = () =>
  import('@/components/flow/PrintTemplateSetting.vue')
export default {
  name: 'FlowNodeAttributes',
  components: {
    FlowNodeHelp,
    EipMsgTemplateDialog,
    EipBoAttrSelector,
    FlowMsgSendConfig,
    PrintTemplateSetting,
  },
  props: {
    //任务节点信息
    node: {
      type: Object,
      required: true,
    },
    //节点属性批量勾选配置
    nodeAttr: {
      type: Object,
      required: true,
    },
    //流程配置信息
    defConfigData: {
      type: Object,
      required: true,
    },
    //全局表单bo字段
    boDefJson: {
      type: Array,
      default: () => {
        return {}
      },
    },
  },
  watch: {
    propertie: {
      handler(newValue, oldValue) {
        let path =
          'nodeSetData.bpmDefSetting.nodePropertieMap.' + this.node.nodeId
        let obj = {}
        obj[path] = newValue
        //更新vuex里面defConfigData配置数据
        this.$store.dispatch('flow/updateConfig', obj)
      },
      deep: true,
    },
    nodePropertieMap: {
      handler(newValue, oldValue) {
        //更新vuex里面defConfigData配置数据
        this.$store.dispatch('flow/updateConfig', {
          'nodeSetData.bpmDefSetting.nodePropertieMap': newValue,
        })
      },
      deep: true,
    },
    nodeAttr: {
      handler(newValue, oldValue) {
        this.propertie.jumpType = newValue.jumpType //批量勾选跳转类型
        this.propertie.notifyType = newValue.notify //批量勾选通知类型
        if (newValue.backMode_all != '' && this.node.type != 'signTask') {
          this.propertie.backMode = 'direct' //批量勾选驳回后返回
        } else {
          this.propertie.backMode = 'normal'
        }
        if (newValue.skipExecutorEmpty_all != '') {
          this.propertie.skipExecutorEmpty = true //批量勾选执行人为空时跳过
        } else {
          this.propertie.skipExecutorEmpty = false
        }
      },
      deep: true,
    },
  },
  data() {
    return {
      executorIsEmptyList: [
        {key: 'turn', val: '指定审批人'},
        {key: 'assign', val: '由上一环节指定'},
        {key: 'jump', val: '自动跳过'},
      ],
      value: '', //帮助内容
      title: '', //帮助弹框标题
      approvalArea: [
        // { key: "approvalOpinion", value: "审批意见" },
        // { key: "zFile", value: "正文" },
        // { key: "file", value: "附件" },
        {key: 'processRecord', value: '处理记录'},
        // { key: "imageBpm", value: "流程图" }
      ], //审批区域显示
      propertie: {}, //单个节点的配置信息
      selectNodeList: [], //可驳回的节点
      nodePropertieMap: {},
      messageVisible: false,
      checked: false,
    }
  },
  computed: {
    executorIsEmptyPolicy: function () {
      return this.executorIsEmptyList.filter((m) => {
        if (this.node.type == 'signTask') {
          // 会签节点不支持 上一环节指定处理人
          return m.key !== 'assign'
        } else {
          return true
        }
      })
    },
    backUserModeList: function () {
      let list = [
        {key: 'normal', value: '节点配置人'},
        {key: 'history', value: '历史处理人'},
      ]
      if (this.node.type == 'signTask') {
        list.push({key: 'assignHistory', value: '指定历史处理人'})
      }
      return list
    },
    nodeOptions() {
      if (!this.selectNodeList) {
        return []
      }
      return this.selectNodeList.map((node) => {
        node.label = `${node.name}(${node.nodeId})`
        return node
      })
    },
  },
  methods: {
    handleDelMsgConfig() {
      this.propertie.msgConfig = ''
    },
    selectExecutorIsEmpty() {
      if (
        this.propertie.executorIsEmpty &&
        this.propertie.executorIsEmpty == 'assign'
      ) {
        this.propertie.executorUserAccount = ''
        this.propertie.executorUserName = ''
      }
    },
    //选择所属用户
    selectUser() {
      this.$refs['eipUserDialog'].showDialog()
    },
    //选择用户确认事件
    eipUserDialogOk(data) {
      if (data[0]) {
        this.propertie.executorUserAccount = data[0].account
        this.propertie.executorUserName = data[0].fullname
      } else {
        this.propertie.executorUserAccount = ''
        this.propertie.executorUserName = ''
      }
    },
    //监听任务帮助对话框确认事件
    handleHelpSave(data) {
      if (this.title == '【全局任务节点】帮助提示') {
        this.nodePropertieMap = JSON.parse(
          JSON.stringify(
            this.defConfigData.nodeSetData.bpmDefSetting.nodePropertieMap
          )
        )
        for (let key in this.nodePropertieMap) {
          this.nodePropertieMap[key].helpGlobal = data //获取全局任务节点任务帮助提示
        }
      } else {
        this.propertie.help = data //获取单个任务节点任务帮助提示
      }
    },
    //点击帮助事件
    helpClick(nodeId, val) {
      let Base64 = require('js-base64').Base64
      let name = '全局任务节点'
      if (nodeId != '') {
        name = '单个任务节点'
      }
      this.title = '【' + name + '】帮助提示'
      if (val != '') {
        this.value = Base64.decode(val, 'utf-8') //单个任务节点帮助内容
      } else {
        this.value = Base64.decode(this.propertie.helpGlobal) //全局任务节点帮助内容
      }
      setTimeout(() => {
        this.$refs.flowNodeHelp.showDialog() //显示帮助富文本框
      })
    },
    //判断前置后置处理器是否存在
    checkHandler(handler) {
      if (!handler) return
      req
        .get('${bpmModel}/flow/node/v1/validHandler?handler=' + handler)
        .then(function (data) {
          data = data.data
          if (data.result != '0') {
            Message.warning('接口' + handler + '有误，原因：' + data.msg)
          }
        })
    },
    handleClose() {
      this.messageVisible = false
    },
    templateConfirm(data) {
      this.$set(this.propertie, 'template', data)
    },
    handleCommit() {
      this.messageVisible = false
    },
    setFillTemplate(obj) {
      this.$refs['printTemplateSetting'].showDialog(obj)
    },
    printTemplateDialogConfigm(config) {
      this.$set(this.propertie, 'printTemplate', config)
    },
  },
  mounted() {
    console.log(this.defConfigData.nodeSetData.bpmDefSetting.nodePropertieMap);
    //获取单个节点的配置信息
    this.propertie =
      this.defConfigData.nodeSetData.bpmDefSetting.nodePropertieMap[
        this.node.nodeId
      ]
    // if (!this.propertie.tbsx) {
    //   this.propertie.tbsx = 0
    // }
    //获取可驳回节点
    for (let i = 0; i < this.defConfigData.nodeSetData.nodes.length; i++) {
      if (
        this.defConfigData.nodeSetData.nodes[i].type == 'signTask' ||
        this.defConfigData.nodeSetData.nodes[i].type == 'userTask' ||
        this.defConfigData.nodeSetData.nodes[i].type == 'callActivity'
      ) {
        this.selectNodeList.push(this.defConfigData.nodeSetData.nodes[i])
      }
    }
  },
}
</script>

<style lang="scss" scoped>
.title-bar {
  margin-bottom: 20px;
  .title-label {
    color: #333;
    font-weight: bold;
    font-size: 14px;
    color: #888;
    margin-right: 12px;
  }
  div ::v-deep .box-card {
    margin-bottom: 20px;
  }
}

::v-deep label.el-radio-horizontal {
  margin: 5px 10px 0 0;
}
::v-deep label.el-checkbox {
  margin: 5px 10px 0 0;
}
.form-inline {
  width: 100%;
  display: flex;
  margin-bottom: 20px;
  > div:not(.control-label) {
    flex: 1;
    overflow: hidden;
  }
}
.left-label {
  width: 100px;
  float: left;
}
.control-label {
  word-break: break-all;
  text-align: left;
  font-size: 14px;
  color: #888;
  margin-right: 15px;
}
div ::v-deep .box-card {
  margin-bottom: 20px;
}

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

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

div ::v-deep .el-button {
  padding: 7px;
  margin-right: 10px;
  margin-left: 0px !important;
}
div ::v-deep .el-radio__label {
  display: inline-block;
}
.specify-approver {
  ::v-deep {
    .field-tail__wrap {
      .el-form-item__error {
        position: unset;
      }
    }
  }
}
</style>