<template>
  <div name="AddaPolicy">
    <el-dialog
      title="生效环节"
      :visible.sync="dialogAddaPolicy"
      append-to-body
      v-if="dialogAddaPolicy"
      class="urgent-text"
      :close-on-click-modal="false"
    >
      <el-form :model="form" :rules="rules" ref="ruleForm" label-width="100px">
        <el-form-item prop="validNode">
          <el-tooltip slot="label" class="item" effect="dark" placement="top">
            <div slot="content">
              <p>
                执行前审后跳规则，跳过节点以已审批过的节点为准
              </p>
              <p>列如：A-->B-->C-->D生效环节与指定节点B做对比配置才会生效</p>
            </div>
            <i class="icon-notes">生效环节</i>
          </el-tooltip>
          <el-select
            v-model="form.validNode"
            placeholder="请选择"
            filterable
            :disabled="disabled"
          >
            <el-option
              v-for="(item, i) of optionsSx"
              :key="i"
              :label="item.name + '(' + item.nodeId + ')'"
              :value="item.nodeId"
              :disabled="item.disabled"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-divider></el-divider>

        <div>
          <div>
            <h4><i class="icon-canhuiren"></i> 审批人重复处理策略</h4>
          </div>
          <div>
            <el-radio v-model="form.policyType" label="1">指定节点</el-radio>
            <el-radio v-model="form.policyType" label="2">编辑表达式</el-radio>
          </div>
          <div class="two" v-if="showAside">
            <el-row>
              <el-col :span="24" v-for="(item, i) of form.policyList" :key="i">
                和
                <el-form-item
                  :prop="`policyList.${i}.policyNode`"
                  :rules="rules.validNode"
                  label-width="0px"
                >
                  <el-select v-model="item.policyNode" placeholder="请选择" filterable>
                    <el-option
                      v-for="(item, i) of opinionList"
                      :key="i"
                      :label="item.name + '(' + item.nodeId + ')'"
                      :value="item.nodeId"
                      :disabled="item.nodeId===form.validNode"
                    ></el-option>
                  </el-select> </el-form-item
                >重复时
                <el-form-item
                  :prop="`policyList.${i}.policyType`"
                  :rules="rules.validNode"
                  label-width="0px"
                >
                  <el-select v-model="item.policyType" placeholder="请选择">
                    <el-option
                      v-for="(item, i) of optionsRep"
                      :key="i"
                      :label="item.label"
                      :value="item.value"
                    ></el-option> </el-select
                ></el-form-item>

                <span @click="changeClick(i, 'add')">
                  <i class="el-icon-plus"></i
                ></span>
                <span @click="changeClick(i, 'del')">
                  <i class="el-icon-minus"></i
                ></span>
              </el-col>
            </el-row>
          </div>
          <div v-else>
            <table
              class="table table-bordered"
              style=" border-spacing: 0;
              width: 100%;
              max-height: 400px;
              overflow: initial;"
              v-if="form.policyType == 2"
            >
              <tr class="tr-position">
                <th style="width:4%">条件表达式</th>
                <td>
                  <div style="margin: 8px 0">
                    <el-button @click="showConditionBuild" size="small"
                      >条件脚本</el-button
                    >
                    <FlowVarSelector
                      :defId="defId"
                      @node-click="varTreeOnConfirm"
                    />
                  </div>
                  <div>
                    <codemirror
                      ref="mycode"
                      v-model="form.policyScript"
                      :options="cmOptions2"
                      class="code"
                      style="width: 98%;"
                    ></codemirror>
                    <el-form-item
                      :prop="`policyScript`"
                      :rules="rules.inputNode"
                      label-width="0px"
                    >
                      <el-input
                        v-model="form.policyScript"
                        placeholder=""
                        style="display:none"
                      ></el-input>
                    </el-form-item>
                  </div>
                </td>
              </tr>
            </table>
          </div>
        </div>
        <div class="three">
          <h4>自动执行记录是否在审批记录显示</h4>
          <el-row>
            <el-col :span="24">
              <el-radio v-model="form.showOpinion" label="1">显示</el-radio>
              <span>默认审批意见： </span>
              <el-input
                v-model="form.opinion"
                placeholder="请输入内容"
              ></el-input>
            </el-col>
            <el-col :span="24">
              <el-radio v-model="form.showOpinion" label="0">不显示</el-radio>
            </el-col>
          </el-row>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeClick">取 消</el-button>
        <el-button type="primary" @click="savedialogautomatiPer"
          >确 定</el-button
        >
      </div>
      <FlowConditionBuildDialog
        @onConfirm="conditionDialogConfirm"
        :defId="defId"
        ref="flowConditionBuildDialog"
      />
    </el-dialog>
  </div>
</template>

<script>
import FlowVarSelector from '@/components/flow/FlowVarSelector.vue'
import FlowConditionBuildDialog from '@/components/flow/FlowConditionBuildDialog.vue'
import {Base64} from 'js-base64'
import req from '@/request.js'

export default {
  components: {FlowVarSelector, FlowConditionBuildDialog},
  name: 'AddaPolicy',
  props: {
    defId: {},
    daList: {},
    dautomatiPerSignItem: {}
  },
  data() {
    return {
      showAside: true,
      disabled: true,
      form: {
        validNode: '',
        policyList: [{id: 1}],
        showOpinion: '1',
        opinion: '同意',
        policyType: '1',
        policyScript: ''
      },
      dialogAddaPolicy: false,
      opinionList: [],
      optionsSx: [],
      optionsRep: [
        {label: '自动执行通过', value: '1'},
        {label: '保持人工审批', value: '2'}
      ],

      rules: {
        validNode: [{required: true, message: '请选择', trigger: 'change'}],
        inputNode: [{required: true, message: '请输入', trigger: 'input'}]
      },
      cmOptions2: {
        value: '',
        mode: 'groovy',
        readOnly: false,
        smartIndent: true,
        tabSize: 1,
        theme: 'base16-light',
        lineNumbers: true,
        line: true,
        lineWrapping: true,
        autoRefresh: true
      }
    }
  },
  watch: {
    'form.policyType': {
      handler(val) {
        if (val) {
          if (val == 1) {
            this.showAside = true
          } else {
            this.showAside = false
          }
        }
      },
      immediate: true
    },
    daList: {
      handler(val) {
        if (val.length > 0) {
          this.optionsSx.forEach(i => {
            i.disabled = false
            val.forEach(item => {
              if (i.nodeId == item) {
                i.disabled = true
              }
            })
          })
        } else {
          this.optionsSx.forEach(i => {
            i.disabled = false
          })
        }
      },
      deep: true
    },
    dautomatiPerSignItem: {
      handler(val) {
        if (Object.keys(val).length > 0) {
          this.form = val
          this.form.policyScript = this.form.policyScript.replace(/\\"/g, '"')
          if (val.policyList.length == 0) {
            this.form.policyList = [{id: 1}]
          }
        } else {
          this.form = {
            validNode: '',
            policyList: [{id: 1}],
            showOpinion: '1',
            opinion: '同意',
            policyType: '1',
            policyScript: ''
          }
        }
      },
      deep: true
    }
  },

  mounted() {
    const this_ = this
    let url =
      '${bpmModel}/flow/def/v1/nodeBos?defId=' + this.defId + '&topDefKey='
    req.get(url).then(function(res) {
      res.data.nodeDefList.forEach((item, i) => {
        if (item.name == '开始') {
          res.data.nodeDefList.splice(i, 1)
        }
      })
      this_.opinionList.push(
        {name: '任意已执行节点', nodeId: 'already'},
        {name: '上一执行节点', nodeId: 'pre'},
        ...res.data.nodeDefList
      )
      this_.optionsSx.push(
        {name: '所有节点', nodeId: 'base'},
        ...res.data.nodeDefList
      )
    })
  },
  methods: {
    showDailog() {
      this.disabled = false

      this.dialogAddaPolicy = true
    },
    savedialogautomatiPer() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          let da = _.cloneDeep(this.form)

          if (this.form.policyType == '2') {
            da.policyScriptPre = da.policyScript
            da.policyScript = da.policyScript.replace(/\"/g, '\\"')

            da.policyList.length = 0
          } else if (this.form.policyType == '1') {
            da.policyScriptPre = ''
            da.policyScript = ''
          }

          this.$emit('automatiPer', da)
          this.dialogAddaPolicy = false
        } else {
          return false
        }
      })
    },
    //新增删除
    changeClick(index, type) {
      if (type == 'add') {
        this.form.policyList.splice(index + 1, 0, {
          id: new Date().getTime() + this.form.policyList.length
        })
      }
      if (type == 'del') {
        if (this.form.policyList.length == 1) {
          this.$message({
            message: '至少保留一条数据',
            type: 'warning'
          })
          return
        }
        this.form.policyList.splice(index, 1)
      }
    },
    showConditionBuild() {
      //   if (!this.curEditNodeId) {
      //     this.$message.warning('请先选择要设置表达式的节点')
      //     return
      //   }
      this.$refs.flowConditionBuildDialog.showDialog()
    },
    conditionDialogConfirm(data) {
      this.form.policyScript = data
    },
    //选择变量
    varTreeOnConfirm(data) {
      this.form.policyScript += data.pathValue
    },
    closeClick() {
      this.dialogAddaPolicy = false
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep {
  .el-select {
    margin: 0 10px;
  }
}
.three {
  .el-input {
    margin-left: 20px;
    width: 215px;
  }
}
.two {
  .el-col {
    margin-top: 5px;
    display: flex;
    height: 51px;
    line-height: 29px;
  }
  span {
    vertical-align: middle;
    font-size: 21px;
    margin-right: 10px;
    cursor: pointer;
    color: $--color-primary;
  }
  .el-row {
    max-height: 28vh;
    overflow-y: auto;
  }
}
.table > thead > tr > th,
.table > thead > th,
.table > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tr > td,
.table > tfoot > tr > td {
  border-top: 1px solid #e7eaec;
  border-left: 1px solid #e7eaec;
  line-height: 1.42857;
  padding: 8px;
  vertical-align: middle;
}
.table {
  margin: 10px 0;
  border-bottom: 1px solid #e7eaec;
  border-right: 1px solid #e7eaec;
}
/deep/ .CodeMirror {
  height: 180px;
  .CodeMirror-scroll {
    overflow: auto !important;
    margin-right: 0;
  }
}
</style>
