<template>
  <div>
    <el-form
      ref="form"
      label-width="80px"
      style="width: 100%"
      v-form
      data-vv-scope="form"
    >
      <el-button
        icon="el-icon-plus"
        size="small"
        type="primary"
        style="margin-bottom: 10px"
        @click="addRemindSetting"
        >添加
      </el-button>
      <el-table
        ref="remindSettingTable"
        border
        class="dt-manage__table"
        :max-height="tabHeight"
        :data="remindSettingList"
        tooltip-effect="dark"
      >
        <el-table-column label="提醒对象" width="280px">
          <template scope="scope">
            <el-row :gutter="2">
              <el-col :span="8">
                <ht-select
                  @change="changeTypeObj($event, scope.row)"
                  name="提醒对象"
                  :validate="{required: true}"
                  style="display: inline-block"
                  v-model="scope.row.typeObj"
                  :options="userPluginList"
                />
              </el-col>
              <el-col :span="16">
                <template v-if="scope.row.typeObj == 'user'">
                  <ht-user-selector-input
                    name="用户"
                    :validate="{required: true}"
                    :appendToBody="true"
                    v-model="scope.row.objName"
                    :config="{
                      id: 'remindSettingList[' + scope.$index + '].objId'
                    }"
                  />
                </template>
                <template v-else-if="scope.row.typeObj == 'org'">
                  <ht-org-selector-input
                    name="组织"
                    :validate="{required: true}"
                    style="display: inline-block"
                    :appendToBody="true"
                    v-model="scope.row.objName"
                    :config="{
                      id: 'remindSettingList[' + scope.$index + '].objId'
                    }"
                  />
                </template>
                <template v-else-if="scope.row.typeObj == 'position'">
                  <ht-post-selector-input
                    name="岗位"
                    :validate="{required: true}"
                    style="display: inline-block"
                    :appendToBody="true"
                    v-model="scope.row.objName"
                    :config="{
                      id: 'remindSettingList[' + scope.$index + '].objId'
                    }"
                  />
                </template>
                <template v-else-if="scope.row.typeObj == 'role'">
                  <ht-role-selector-input
                    name="角色"
                    :validate="{required: true}"
                    style="display: inline-block"
                    :appendToBody="true"
                    v-model="scope.row.objName"
                    :config="{
                      id: 'remindSettingList[' + scope.$index + '].objId'
                    }"
                  />
                </template>
                <template v-else-if="scope.row.typeObj == 'job'">
                  <ht-job-selector-input
                    name="职务"
                    :validate="{required: true}"
                    style="display: inline-block"
                    :appendToBody="true"
                    v-model="scope.row.objName"
                    :config="{
                      id: 'remindSettingList[' + scope.$index + '].objId'
                    }"
                  />
                </template>
                <template v-else-if="scope.row.typeObj == 'script'">
                  <ht-select
                    name="变量"
                    style="display: inline-block"
                    v-model="scope.row.objId"
                    :validate="{required: true}"
                    :options="displaySettingFields"
                    :props="{key: 'name', value: 'desc'}"
                  />
                </template>
              </el-col>
            </el-row>
          </template>
        </el-table-column>
        <el-table-column label="提醒内容">
          <template scope="scope">
            <el-container>
              <el-main :id="'mainHeight' + scope.$index">
                <el-container>
                  <el-header height="30px">
                    <div>主题:<span v-text="scope.row.subject"></span></div>
                  </el-header>
                  <el-main>
                    <div>内容:<span v-html="scope.row.content"></span></div>
                  </el-main>
                </el-container>
              </el-main>
              <el-aside
                width="80px"
                :style="'line-height:' + scope.row.mainHeight + 'px'"
              >
                <ht-input
                  v-model="scope.row.content"
                  placeholder="请输入主题"
                  autocomplete="off"
                  :validate="{required: true}"
                  v-show="false"
                  name="主题"
                ></ht-input>

                <el-button
                  type="primary"
                  icon="el-icon-edit"
                  size="small"
                  @click="setContent(scope.row, scope.$index)"
                  >设置
                </el-button>
              </el-aside>
            </el-container>
          </template>
        </el-table-column>
        <el-table-column label="提醒条件" width="100px">
          <template scope="scope">
            <el-button
              type="primary"
              icon="el-icon-edit"
              size="small"
              @click="setRule(scope.row.rule, scope.$index)"
              >设置
            </el-button>
          </template>
        </el-table-column>
        <el-table-column label="提醒次数" width="250px">
          <template scope="scope">
            <ht-radio
              :validate="{required: true}"
              v-model="scope.row.count"
              :options="[
                {key: '0', value: '一直提醒'},
                {key: '1', value: '一次'}
              ]"
            />
          </template>
        </el-table-column>
        <el-table-column label="操作" width="80px">
          <template scope="scope">
            <el-button
              @click="remindSettingList.remove(scope.row)"
              type="danger"
              size="small"
              icon="el-icon-delete"
              plain
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-form>

    <div>
      <el-dialog
        title="字段提示"
        :visible.sync="dialogContentVisible"
        append-to-body
        class="urgent-text"
        :close-on-click-modal="false"
        :destroy-on-close="true"
      >
        <el-form :model="dialogContentData" data-vv-scope="contentForm" v-form>
          <el-form-item label="主题" label-width="80px">
            <ht-input
              v-model="dialogContentData.subject"
              placeholder="请输入主题"
              autocomplete="off"
              :validate="{required: true}"
              style="width: 100%"
              name="主题"
              :maxlength="50"
              :showWordLimit="true"
            ></ht-input>
          </el-form-item>
          <el-form-item label="详情" label-width="80px">
            <htEditor
              v-model="dialogContentData.content"
              :config="myConfig"
            ></htEditor>
            <ht-input
              v-model="dialogContentData.content"
              name="详情"
              :validate="{required: true}"
              placeholder="请输入详情"
              v-show="false"
            ></ht-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button
            @click="
              dialogContentVisible = false
              dialogContentData = {}
            "
            >取 消</el-button
          >
          <el-button type="primary" @click="contentOk">确定</el-button>
        </div>
      </el-dialog>

      <el-dialog
        title="设置提醒规则"
        v-if="dialogMethodVisible"
        :visible.sync="dialogMethodVisible"
        append-to-body
        class="urgent-text"
        :close-on-click-modal="false"
        :destroy-on-close="true"
      >
        <table class="form-table" cellspacing="0" cellpadding="0" border="0">
          <tbody>
            <tr>
              <td colspan="6">
                <el-container>
                  <el-main style="width: 100%">
                    <div
                      style="
                        position: relative;
                        height: 360px;
                        overflow: auto;
                        width: 100%;
                      "
                    >
                      <div style="position: absolute; z-index: 2">
                        <form data-vv-scope="form1" v-form>
                          <table
                            class="table-list custom_condition_tab table"
                            :style="tab.style"
                            v-for="tab in tabList"
                            :key="tab.indexStr"
                          >
                            <tbody>
                              <tr>
                                <td style="width: 220px">
                                  <el-select
                                    v-model="tab.property"
                                    v-validate="{required: true}"
                                    @change="setFieldOtherInfo(this, tab, 1)"
                                    style="width: 200px"
                                    size="mini"
                                  >
                                    <el-option
                                      :value="m.name"
                                      :label="m.desc"
                                      v-for="m in displaySettingFields"
                                      :key="m.pathStr"
                                    ></el-option>
                                  </el-select>
                                </td>
                                <td style="width: 100px">
                                  <el-select
                                    v-model="tab.operator"
                                    style="width: 100px"
                                    size="mini"
                                  >
                                    <el-option
                                      label="等于"
                                      value="1"
                                    ></el-option>
                                    <el-option
                                      label="不等于"
                                      value="2"
                                    ></el-option>
                                    <el-option
                                      label="大于"
                                      v-if="
                                        tab.dataType == 'date' ||
                                          tab.dataType == 'number'
                                      "
                                      value="3"
                                    ></el-option>
                                    <el-option
                                      label="大于等于"
                                      v-if="
                                        tab.dataType == 'date' ||
                                          tab.dataType == 'number'
                                      "
                                      value="7"
                                      >大于等于
                                    </el-option>
                                    <el-option
                                      label="小于"
                                      v-if="
                                        tab.dataType == 'date' ||
                                          tab.dataType == 'number'
                                      "
                                      value="4"
                                    ></el-option>
                                    <el-option
                                      label="小于等于"
                                      v-if="
                                        tab.dataType == 'date' ||
                                          tab.dataType == 'number'
                                      "
                                      value="8"
                                      >小于等于
                                    </el-option>
                                    <el-option
                                      label="包含"
                                      v-if="tab.dataType == 'varchar'"
                                      value="5"
                                      >包含
                                    </el-option>
                                    <el-option
                                      label="不包含"
                                      v-if="tab.dataType == 'varchar'"
                                      value="6"
                                      >不包含
                                    </el-option>
                                    <el-option label="属于" value="9"
                                      >属于</el-option
                                    >
                                  </el-select>
                                </td>
                                <td>
                                  <el-select
                                    v-model="tab.type"
                                    style="width: 100px"
                                    size="mini"
                                  >
                                    <el-option label="固定值" value="1"
                                      >固定值</el-option
                                    >
                                    <el-option label="脚本" value="2"
                                      >脚本</el-option
                                    >
                                  </el-select>
                                </td>
                                <td
                                  v-if="
                                    tab.compType != '2' &&
                                      tab.dataType == 'date' &&
                                      tab.operator != 7 &&
                                      tab.operator != 8 &&
                                      tab.type == 1
                                  "
                                  style="width: 220px"
                                >
                                  <ht-date
                                    v-if="tab.type == 1"
                                    v-model="tab.value"
                                    style="width: 215px"
                                    :validate="{required: true}"
                                    :format="tab.format"
                                    :showDate="true"
                                    :day="-3"
                                  />
                                </td>

                                <td
                                  v-if="tab.dataType != 'date' && tab.type == 1"
                                  style="width: 220px"
                                >
                                  <ht-input
                                    v-if="tab.type == 1"
                                    style="width: 203px"
                                    v-model="tab.value"
                                    :validate="{required: true}"
                                    :maxlength="50"
                                    :showWordLimit="true"
                                  />
                                </td>
                                <td v-if="tab.type == 2">
                                  <el-select
                                    v-model="tab.value"
                                    filterable
                                    placeholder="请选择脚本"
                                  >
                                    <el-option
                                      v-for="item in scripts"
                                      :key="item.id"
                                      :label="item.name"
                                      :value="item.script"
                                    >
                                    </el-option>
                                  </el-select>
                                </td>
                                <td style="width: 60px">
                                  <el-button
                                    @click="removeCondition(tab.indexStr)"
                                    size="mini"
                                    icon="el-icon-delete"
                                  ></el-button>
                                </td>
                              </tr>
                            </tbody>
                          </table>
                        </form>
                        <div
                          class="labelrag"
                          :style="branch.style + ';height: 24px'"
                          v-for="(branch, $index) in branchList"
                          :key="branch.indexStr"
                        >
                          <el-select
                            v-model="branch.newjunction"
                            class="selected_search"
                            @change="changecondition($index)"
                          >
                            <el-option label="并且" value="and"></el-option>
                            <el-option label="或者" value="or"></el-option>
                            <el-option label="添加条件" value="3"></el-option>
                            <el-option
                              label="添加联合条件"
                              value="4"
                              v-if="branch.condition != 'noAdd'"
                            ></el-option>
                            <el-option
                              label="删除"
                              value="5"
                              v-if="branch.condition != 'noDel'"
                            ></el-option>
                          </el-select>
                        </div>
                      </div>
                      <div
                        v-html="svgHtml"
                        style="
                          position: absolute;
                          z-index: 1;
                          width: 100%;
                          height: 100%;
                        "
                      ></div>
                    </div>
                  </el-main>
                  <el-footer>
                    <div v-text="dialogRuleData"></div>
                  </el-footer>
                </el-container>
              </td>
            </tr>
          </tbody>
        </table>

        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogMethodVisible = false">取 消</el-button>
          <el-button type="primary" @click="previewCondition(false)"
            >预览表达式</el-button
          >
          <el-button type="primary" @click="previewCondition(true)"
            >确定</el-button
          >
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {Base64} from 'js-base64'
import htEditor from '@/components/common/HtEditor.vue'
import utils from '@/hotent-ui-util.js'
import flow from '@/api/flow.js'
export default {
  name: 'RemindSetting',
  components: {
    htEditor
  },
  props: ['data'],
  data() {
    return {
      myConfig: {
        initialFrameHeight: 240,
        UEDITOR_HOME_URL:
          window.location.origin +
          '/' +
          window.location.pathname.split('/')[1] +
          '/static/ueditor/',
        toolbars: [
          [
            // 'source', //源代码
            'undo', //撤销
            'bold', //加粗
            'indent', //首行缩进
            'italic', //斜体
            'underline', //下划线
            'strikethrough', //删除线
            'subscript', //下标
            'fontborder', //字符边框
            'superscript', //上标
            'formatmatch', //格式刷
            'forecolor', //字体颜色
            'justifyleft', //居左对齐
            'justifycenter', //居中对齐
            'justifyright', //居右对齐
            'justifyjustify', //两端对齐
            'fontfamily', //字体
            'fontsize', //字号
            'insertorderedlist', //有序列表
            'insertunorderedlist', //无序列表
            'lineheight', //行间距
            'inserttable' //插入表格
          ]
        ],
        // 初始容器宽度
        initialFrameWidth: '100%',
        zIndex: 9999,
        enableAutoSave: false,
        readonly: false
      },
      tabHeight: `${document.documentElement.clientHeight}` - 280,
      dialogContentData: {content: '', subject: ''},
      dialogRuleData: '',
      index: '',
      dialogMethodVisible: false,
      dialogContentVisible: false,
      dataTemplate: {},
      userPluginList: [
        {key: 'user', value: '用户'},
        {key: 'org', value: '组织'},
        {
          key: 'position',
          value: '岗位'
        },
        {key: 'role', value: '角色'},
        {key: 'job', value: '职位'},
        {key: 'script', value: '变量'}
      ],
      remindSettingList: [],
      diyScript: '',
      conditionObj: {},
      tabList: [],
      branchList: [],
      svgHtml: '',
      svgHeight: '400px',
      defaultCondition: {
        property: '',
        operator: '1',
        dataType: '',
        value: '',
        compType: '1'
      },
      Mleft: 50, //初始左边距50
      Mtop: 20, //初始上边距40
      XIncase: 100, //x轴递增数值70
      YIncase: 50, //y轴递增数据50
      varTree: [],
      filedsObj: {},
      displaySettingFields: [],
      scripts: [] // 常用脚本列表
    }
  },
  updated() {
    this.remindSettingList.forEach((v, i) => {
      v.mainHeight = document.getElementById('mainHeight' + i).offsetHeight
    })
  },
  mounted() {
    this.getAllScript()
    this.dataTemplate = this.data.bpmDataTemplate
    this.remindSettingList = !this.dataTemplate.remindSettingList
      ? []
      : JSON.parse(this.dataTemplate.remindSettingList)
    if (this.data.displaySettingFields) {
      this.displaySettingFields = JSON.parse(
        this.data.displaySettingFields
      ).filter(item => {
        return item.isFlowField != true
      })
      this.displaySettingFields.forEach(item => {
        this.filedsObj[item.name] = item
      })
    }
  },
  methods: {
    //切换对象 清除之前已选择的对象
    changeTypeObj(name, row) {
      row.objId = ''
      row.objName = ''
    },
    getAllScript() {
      // 查询所有的常用脚本
      const _this = this
      flow.getAllScript().then(resp => {
        for (let index = 0; index < resp.length; index++) {
          const script = resp[index].script
          script = script.replace('return ', '')
          script = script.replace(';', '')
          resp[index].script = script
        }
        _this.scripts = resp
      })
    },
    previewCondition(isConfirm) {
      const me_ = this
      utils
        .validateForm(this, 'form1')
        .then(r => {
          if (!this.conditionObj) return
          var data = this.getConditionStr(this.conditionObj)
          data.conditionObj = JSON.stringify(this.conditionObj)
          if (!isConfirm) {
            this.dialogRuleData = data.conditionString
          } else {
            this.remindSettingList[this.index].rule = JSON.stringify({
              scriptStr: Base64.encode(
                'import com.hotent.base.util.StringUtil;import com.hotent.base.util.time.DateUtil;' +
                  data.conditionString
              ),
              conditionObj: data.conditionObj
            })
            this.dialogMethodVisible = false
          }
        })
        .catch(items => {
          this.$message.error(`还有内容未填写，无法生成表表达式。`)
        })
    },
    getConditionStr(obj) {
      if (!obj || !obj.condition) return
      var returnData = {}
      var data = obj.condition
      var res = ''
      var desString = ''
      for (var i = 0; i < data.length; i++) {
        //第一节点的表达式
        var curcondStr1 = ''
        var curcondDes1 = ''
        //如果第一节点有分支则计算
        if (data[i].condition && data[i].condition.length > 0) {
          curcondStr1 += '('
          curcondDes1 += '('
          for (var j = 0; j < data[i].condition.length; j++) {
            //第二节点的表达式
            var curcondStr2 = ''
            var curcondDes2 = ''
            //如果第三级节点有分支，则计算分支
            if (
              data[i].condition[j].condition &&
              data[i].condition[j].condition.length > 0
            ) {
              curcondStr2 += '('
              curcondDes2 += '('
              var curcondStr3 = ''
              var curcondDes3 = ''
              for (var z = 0; z < data[i].condition[j].condition.length; z++) {
                curcondStr3 = this.getConditionStrByObj(
                  data[i].condition[j].condition[z]
                )
                curcondDes3 = this.getConditionStrByObj(
                  data[i].condition[j].condition[z],
                  'des'
                )
                if (curcondStr3 != '') {
                  //循环拼接第三节点的条件
                  if (z == 0) {
                    //第一个不拼接运算符
                    curcondStr2 += curcondStr3
                    curcondDes2 += curcondDes3
                  } else {
                    curcondStr2 +=
                      this.getjunction(data[i].condition[j].junction) +
                      curcondStr3
                    curcondDes2 +=
                      this.getjunction(data[i].condition[j].junction) +
                      curcondDes3
                  }
                }
              }
              curcondStr2 += ')'
              curcondDes2 += ')'
            } else if (data[i].condition[j].property) {
              //第二节点没有分只
              curcondStr2 = this.getConditionStrByObj(data[i].condition[j])
              curcondDes2 = this.getConditionStrByObj(
                data[i].condition[j],
                'des'
              )
            }
            if (curcondStr2 != '') {
              //循环拼接第二节点的条件
              if (j == 0) {
                //第一个不拼接运算符
                curcondStr1 += curcondStr2
                curcondDes1 += curcondDes2
              } else {
                curcondStr1 += this.getjunction(data[i].junction) + curcondStr2
                curcondDes1 += this.getjunction(data[i].junction) + curcondDes2
              }
            }
          }
          curcondStr1 += ')'
          curcondDes1 += ')'
        } else if (data[i].property) {
          //第一节点没有分只
          curcondStr1 = this.getConditionStrByObj(data[i])
          curcondDes1 = this.getConditionStrByObj(data[i], 'des')
        }
        if (curcondStr1 != '') {
          //循环拼接第一节点的条件
          if (i == 0) {
            //第一个不拼接运算符
            res += curcondStr1
            desString += curcondDes1
          } else {
            res += this.getjunction(obj.junction) + curcondStr1
            desString += this.getjunction(obj.junction) + curcondDes1
          }
        }
      }
      returnData.conditionString = res
      returnData.conditionDes = desString
      return returnData
    },
    getjunction(str) {
      var res = ''
      switch (str) {
        case 'and':
          res = ' && '
          break
        case 'or':
          res = ' || '
          break
      }
      return res
    },
    getConditionStrByObj(obj, type) {
      var res = ''
      switch (obj.dataType) {
        case 'varchar':
          res = this.buildStringCondition(obj, type)
          break
        case 'date':
          res = this.buildDateCondition(obj, type)
          break
        case 'number':
          res = this.buildIntCondition(obj, type)
          break
      }
      return res
    },
    buildDateCondition(obj, type) {
      var value = obj.value
      var valueDes = ''
      var property = obj.property
      let res = ''
      if (obj.compType == 1) {
        value = '"' + obj.value + '"'
        valueDes = value
      } else {
        valueDes = obj.changeDesc
      }
      if (type == 'des') {
        property = obj.chooseDesc
        value = valueDes
        switch (obj.operator) {
          case '1':
            res = property + '==' + value
            break
          case '2':
            res = property + '!=' + value
            break
          case '3':
            res = property + '>' + value
            break
          case '4':
            res = property + '<' + value
            break
        }
      } else {
        switch (obj.operator) {
          case '1':
            res = 'scriptImpl.isDateEquals(' + property + ',' + value + ')'
            break
          case '2':
            res = '!scriptImpl.isDateEquals(' + property + ',' + value + ')'
            break
          case '3':
            res = 'scriptImpl.isDateLarge(' + property + ',' + value + ')'
            break
          case '4':
            res = 'scriptImpl.isDateLittle(' + property + ',' + value + ')'
            break
          case '7':
            res = 'scriptImpl.isDateLargeEquals(' + property + ',' + value + ')'
            break
          case '8':
            res =
              'scriptImpl.isDateLittleEquals(' + property + ',' + value + ')'
            break
          case '9':
            res = 'scriptImpl.isDateBelongTo(' + property + ',' + value + ')'
            break
        }
      }

      return res
    },
    buildStringCondition(obj, type) {
      var value = obj.value
      var valueDes = ''
      var property = obj.property
      let res = ''
      if (obj.compType == 1 && obj.type == 1) {
        value = '"' + obj.value + '"'
        valueDes = value
      } else if (obj.type == 2) {
        value = obj.value
        valueDes = value
      } else {
        valueDes = obj.changeDesc
      }
      if (type == 'des') {
        property = obj.chooseDesc
        value = valueDes
        switch (obj.operator) {
          case '1':
            res = property + '==' + value
            break
          case '2':
            res = property + '!=' + value
            break
          case '3':
            res = property + '>' + value
            break
          case '4':
            res = property + '<' + value
            break
          case '5':
            res = property + 'contains' + value
            break
          case '6':
            res = property + '! contains' + value
            break
        }
      } else {
        switch (obj.operator) {
          case '1':
            res = 'StringUtil.equals(' + property + ',' + value + ')'
            break
          case '2':
            res = '!StringUtil.equals(' + property + ',' + value + ')'
            break
          case '3':
            res = 'StringUtil.LargeThen(' + property + ',' + value + ')'
            break
          case '4':
            res = 'StringUtil.littleThen(' + property + ',' + value + ')'
            break
          case '5':
            res = 'StringUtil.contains(' + property + ',' + value + ')'
            break
          case '6':
            res = '!StringUtil.contains(' + property + ',' + value + ')'
            break
          case '9':
            res = 'StringUtil.isStringBelongTo(' + property + ',' + value + ')'
            break
        }
      }

      return res
    },
    buildIntCondition(obj, type) {
      var value = obj.value
      var valueDes = ''
      var property = obj.property
      if (obj.compType == 1) {
        value = obj.value
        valueDes = value
      } else {
        valueDes = obj.changeDesc
      }
      if (type == 'des') {
        property = obj.chooseDesc
        value = valueDes
      }
      var res = ''
      switch (obj.operator) {
        case '1':
          res = property + '==' + value
          break
        case '2':
          res = property + '!=' + value
          break
        case '3':
          res = property + '>' + value
          break
        case '4':
          res = property + '<' + value
          break
        case '7':
          res = property + '>=' + value
          break
        case '8':
          res = property + '<=' + value
          break
        case '9':
          // res = "scriptImpl.isNumberBelongTo(" + property + ",\"" + value + "\")";
          let valueArr = value.split(',')
          res = `(${property}>=${valueArr[0]} && ${property}<=${valueArr[1]})`
          break
        case '11':
          res = 'scriptImpl.equals(' + property + ',' + '""' +')'
          break
        case '12':
          res = '!scriptImpl.equals(' + property + ',' + '""' +')'
          break
      }
      return res
    },
    buildDateCondition(obj, type) {
      var value = obj.value
      var valueDes = ''
      var property = obj.property
      let res = ''
      if (obj.compType == 1) {
        value = '"' + obj.value + '"'
        valueDes = value
      } else {
        valueDes = obj.changeDesc
      }
      if (type == 'des') {
        property = obj.chooseDesc
        value = valueDes
        switch (obj.operator) {
          case '1':
            res = property + '==' + value
            break
          case '2':
            res = property + '!=' + value
            break
          case '3':
            res = property + '>' + value
            break
          case '4':
            res = property + '<' + value
            break
        }
      } else {
        switch (obj.operator) {
          case '1':
            res = 'DateUtil.isDateEquals(' + property + ',' + value + ')'
            break
          case '2':
            res = '!DateUtil.isDateEquals(' + property + ',' + value + ')'
            break
          case '3':
            res = 'DateUtil.isDateLarge(' + property + ',' + value + ')'
            break
          case '4':
            res = 'DateUtil.isDateLittle(' + property + ',' + value + ')'
            break
          case '7':
            res = 'DateUtil.isDateLargeEquals(' + property + ',' + value + ')'
            break
          case '8':
            res = 'DateUtil.isDateLittleEquals(' + property + ',' + value + ')'
            break
          case '9':
            res = 'DateUtil.isDateBelongTo(' + property + ',' + value + ')'
            break
        }
      }

      return res
    },

    setRule(rule, index) {
      if (rule) {
        this.conditionObj = JSON.parse(JSON.parse(rule).conditionObj)
      } else {
        this.conditionObj = {junction: 'and', condition: []}
      }
      this.dialogMethodVisible = true
      this.buildConditionTree(this.conditionObj)
      /*if (rule != undefined) {
  				this.dialogRuleData = Base64.decode(rule)
  			}*/
      this.index = index
    },
    setContent(row, index) {
      this.dialogContentVisible = true
      let dialogContentData = {content: row.content, subject: row.subject}
      this.dialogContentData = dialogContentData
      this.index = index
    },
    contentOk() {
      utils
        .validateForm(this, 'contentForm')
        .then(result => {
          this.remindSettingList[
            this.index
          ].content = this.dialogContentData.content
          this.remindSettingList[
            this.index
          ].subject = this.dialogContentData.subject
          this.dialogContentVisible = false
          setTimeout(() => {
            this.remindSettingList[
              this.index
            ].mainHeight = document.getElementById(
              'mainHeight' + this.index
            ).offsetHeight
          }, 200)
        })
        .catch(items => {
          this.$message.error(`还有内容未填写。`)
        })
    },
    changecondition(index) {
      var oldVal = this.branchList[index].oldjunction
      var newVal = this.branchList[index].newjunction
      if (newVal == '3' || newVal == '4' || newVal == '5') {
        this.branchList[index].newjunction = this.branchList[index].oldjunction
        var indexStr = this.branchList[index].indexStr
        if (newVal == '3') {
          this.addCondition(indexStr)
        } else if (newVal == '4') {
          this.addUnionCondition(indexStr)
        } else {
          this.$confirm(
            '确定要删除此联合条件及其下属的所有子条件吗？',
            '提示',
            {
              cancelButtonText: '取消',
              confirmButtonText: '确定',
              type: 'warning',
              closeOnClickModal: false
            }
          ).then(() => {
            this.removeCondition(indexStr)
          })
        }
      } else {
        this.branchList[index].oldjunction = this.branchList[index].newjunction
        var indexStr = this.branchList[index].indexStr
        var indexArr = indexStr.split(',')
        if (indexStr == 'root') {
          this.conditionObj.junction = newVal
        } else if (indexArr.length == 1) {
          this.conditionObj.condition[indexStr].junction = newVal
        } else if (indexArr.length == 2) {
          this.conditionObj.condition[indexArr[0]].condition[
            indexArr[1]
          ].junction = newVal
        }
      }
    },
    setFieldOtherInfo(ele, tab, type) {
      let selectFiled = this.filedsObj[tab.property]
      if (type == 1) {
        tab.dataType = selectFiled.type
        tab.format = selectFiled.format
        tab.chooseDesc = selectFiled.desc
        tab.value = ''
      } else {
        tab.changeDesc = selectFiled.desc
      }
    },
    addRemindSetting() {
      let rule = JSON.stringify({
        scriptStr: Base64.encode('true'),
        conditionObj: JSON.stringify({junction: 'and', condition: []})
      })
      this.remindSettingList.push({
        content: '',
        count: '1',
        objId: '',
        rule: rule,
        mainHeight: '133'
      })
    },
    saveRemindSettingList() {
      return new Promise((resolve, reject) => {
        utils
          .validateForm(this, 'form')
          .then(result => {
            this.dataTemplate.remindSettingList = this.remindSettingList
              ? JSON.stringify(this.remindSettingList)
              : null
            resolve(true)
          })
          .catch(errors => {
            errors.forEach(item => {
              setTimeout(() => {
                this.$notify.error({
                  title: '错误',
                  message: item.field + item.msg
                })
              }, 500)
            })
            resolve(false)
          })
      })
    },

    buildData(conditionData, pathArr, tableArr, branchArr) {
      let curYIndex = 0
      let data = conditionData.condition
      //算三级节点总共分支个数
      let yIncaseNum =
        this.getyIncaseNum(conditionData.condition) > 1
          ? this.getyIncaseNum(conditionData.condition)
          : 1
      //第一个节点 this.Mtop 最后一个节点Mtop+this.YIncase*（yIncaseNum-1）
      let startY1 = (this.Mtop * 2 + this.YIncase * (yIncaseNum - 1)) / 2

      branchArr.push({
        newjunction: conditionData.junction,
        oldjunction: conditionData.junction,
        style: 'left:' + (this.Mleft - 35) + 'px; top:' + (startY1 - 15) + 'px',
        indexStr: 'root',
        condition: 'noDel'
      })
      for (var i = 0; i < data.length; i++) {
        if (data[i].condition) {
          var curchildNum = this.getyIncaseNum(data[i].condition)
          //如果该节点，没有分支条件，则保留节点
          var isEmpty0 = false
          if (curchildNum < 1) {
            curchildNum = 1
            isEmpty0 = true
          }
          //计算一级节点和该节点的连线
          var startY2 =
            (this.Mtop * 2 + this.YIncase * (2 * curYIndex + curchildNum - 1)) /
            2
          var path =
            'M' +
            this.Mleft +
            ',' +
            startY1 +
            'C' +
            this.Mleft +
            ',' +
            startY2 +
            ',' +
            this.Mleft +
            ',' +
            startY2 +
            ',' +
            (this.Mleft + this.XIncase) +
            ',' +
            startY2
          pathArr.push(path)
          branchArr.push({
            newjunction: data[i].junction,
            oldjunction: data[i].junction,
            style:
              'left:' +
              (this.Mleft + this.XIncase - 35) +
              'px; top:' +
              (startY2 - 15) +
              'px',
            indexStr: '' + i
          })
          if (isEmpty0) curYIndex++

          for (var j = 0; j < data[i].condition.length; j++) {
            //如果第三级节点有分支，则计算分支
            if (data[i].condition[j].condition) {
              //计算改节点分支个数
              let curchildNum2 = this.getyIncaseNum(
                data[i].condition[j].condition
              )
              //如果该节点，没有分支条件，则保留节点,默认其占一行
              let isEmpty = false
              if (curchildNum2 < 1) {
                curchildNum2 = 1
                isEmpty = true
              }
              // 改分支第一个节点纵坐标= this.Mtop+this.YIncase*curYIndex  上一个节点纵坐标加上递增值
              // 改分支最后节点纵坐标=改分支第一个节点纵坐标 +计算改节点分支个数*y递增值 this.Mtop+this.YIncase*curYIndex+this.YIncase*(curchildNum2-1)
              // 计算改节点的纵坐标。（改分支第一个节点纵坐标+该分支的最后一个纵坐标）/2
              // 该节点起始点纵坐标=  this.Mtop+this.YIncase*curYIndex+ this.Mtop+this.YIncase*curYIndex+this.YIncase*(curchildNum2-1)
              let startY3 =
                (this.Mtop * 2 +
                  this.YIncase * (2 * curYIndex + curchildNum2 - 1)) /
                2
              //改分支指引线的终点的纵坐标等于startY2
              let path =
                'M' +
                (this.Mleft + this.XIncase) +
                ',' +
                startY2 +
                'C' +
                (this.Mleft + this.XIncase) +
                ',' +
                startY3 +
                ',' +
                (this.Mleft + this.XIncase) +
                ',' +
                startY3 +
                ',' +
                (this.Mleft + this.XIncase * 2) +
                ',' +
                startY3
              pathArr.push(path)
              branchArr.push({
                newjunction: data[i].condition[j].junction,
                oldjunction: data[i].condition[j].junction,
                style:
                  'left:' +
                  (this.Mleft + this.XIncase * 2 - 35) +
                  'px; top:' +
                  (startY3 - 15) +
                  'px',
                indexStr: i + ',' + j,
                condition: 'noAdd'
              })
              if (isEmpty) {
                curYIndex++
              }
              for (let z = 0; z < data[i].condition[j].condition.length; z++) {
                let obj = data[i].condition[j].condition[z]
                obj.style =
                  'left:' +
                  (this.Mleft + this.XIncase * 3) +
                  'px; top:' +
                  (this.Mtop + this.YIncase * curYIndex - 19) +
                  'px'
                obj.indexStr = i + ',' + j + ',' + z
                tableArr.push(obj)
                //改分支下所有节点的起始纵坐标为startY3，终点纵坐标根据该节点位置决定
                let path =
                  'M' +
                  (this.Mleft + this.XIncase * 2) +
                  ',' +
                  startY3 +
                  'C' +
                  (this.Mleft + this.XIncase * 2) +
                  ',' +
                  (this.Mtop + this.YIncase * curYIndex) +
                  ',' +
                  (this.Mleft + this.XIncase * 2) +
                  ',' +
                  (this.Mtop + this.YIncase * curYIndex) +
                  ',' +
                  (this.Mleft + this.XIncase * 3) +
                  ',' +
                  (this.Mtop + this.YIncase * curYIndex)
                pathArr.push(path)
                curYIndex++
              }
            } else {
              //第二级节点没有分支
              let obj = data[i].condition[j]
              obj.style =
                'left:' +
                (this.Mleft + this.XIncase * 2) +
                'px; top:' +
                (this.Mtop + this.YIncase * curYIndex - 19) +
                'px'
              obj.indexStr = i + ',' + j
              tableArr.push(obj)
              //计算改分支的路径。因为是第二节点。startY2
              let path =
                'M' +
                (this.Mleft + this.XIncase) +
                ',' +
                startY2 +
                'C' +
                (this.Mleft + this.XIncase) +
                ',' +
                (this.Mtop + this.YIncase * curYIndex) +
                ',' +
                (this.Mleft + this.XIncase) +
                ',' +
                (this.Mtop + this.YIncase * curYIndex) +
                ',' +
                (this.Mleft + this.XIncase * 2) +
                ',' +
                (this.Mtop + this.YIncase * curYIndex)
              pathArr.push(path)
              curYIndex++
            }
          }
        } else {
          let obj = data[i]
          obj.style =
            'left:' +
            (this.Mleft + this.XIncase) +
            'px; top:' +
            (this.Mtop + this.YIncase * curYIndex - 19) +
            'px'
          obj.indexStr = '' + i
          tableArr.push(obj)
          let path =
            'M' +
            this.Mleft +
            ',' +
            startY1 +
            'C' +
            this.Mleft +
            ',' +
            (this.Mtop + this.YIncase * curYIndex) +
            ',' +
            this.Mleft +
            ',' +
            (this.Mtop + this.YIncase * curYIndex) +
            ',' +
            (this.Mleft + this.XIncase) +
            ',' +
            (this.Mtop + this.YIncase * curYIndex)
          pathArr.push(path)
          curYIndex++
        }
      }
    },
    //获取条件总数
    getyIncaseNum(data) {
      var sum = 0
      for (var i = 0; i < data.length; i++) {
        if (data[i].condition && data[i].condition.length > 0) {
          for (var j = 0; j < data[i].condition.length; j++) {
            if (
              data[i].condition[j].condition &&
              data[i].condition[j].condition.length > 0
            ) {
              for (var z = 0; z < data[i].condition[j].condition.length; z++) {
                sum++
              }
            } else {
              sum++
            }
          }
        } else {
          sum++
        }
      }
      return sum
    },
    //根据条件数组构建条件分支界面
    buildConditionTree(data) {
      let pathArr = []
      let tableArr = []
      let branchArr = []
      this.buildData(data, pathArr, tableArr, branchArr)
      this.pathList = pathArr
      this.branchList = branchArr
      this.tabList = tableArr
      //取路径最后一条数据，因为该条数据的高度距离顶部最大
      let lastPath = pathArr[pathArr.length - 1]
      let lastIndexArr = []
      if (lastPath) lastIndexArr = lastPath.split(',')
      //取最后一个坐标点。终点纵坐标为整个svg中最大的纵坐标
      let lastYIndex = lastIndexArr[lastIndexArr.length - 1]
      //设置svg的高度为最大纵坐标+100，从而实现svg页面高度自适应
      if (lastYIndex) {
        this.svgHeight = parseInt(lastYIndex) + 50 + 'px'
      }
      this.createSvgHtml(pathArr)
    },
    //构建svg图形页面
    createSvgHtml(pathArr) {
      this.svgHtml = ''
      var html =
        '<svg height="' +
        this.svgHeight +
        '" version="1.1" width="692" xmlns="http://www.w3.org/2000/svg" style="overflow: hidden; position: relative;">'
      for (var i = 0; i < pathArr.length; i++) {
        html +=
          '<path fill="none" stroke="#787878"' +
          'd="' +
          this.pathList[i] +
          '" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path>'
      }
      html += '</svg>'
      this.svgHtml = html
    },
    addCondition(indexStr) {
      var data = this.conditionObj.condition
      if (indexStr == 'root') {
        data.push(JSON.parse(JSON.stringify(this.defaultCondition)))
      } else {
        var indexArr = []
        if (indexStr) indexArr = indexStr.split(',')
        for (var i = 0; i < data.length; i++) {
          if (indexArr.length > 0 && i == indexArr[0]) {
            if (indexArr.length > 1) {
              for (var j = 0; j < data[i].condition.length; j++) {
                if (j == indexArr[1]) {
                  data[i].condition[j].condition.push(
                    JSON.parse(JSON.stringify(this.defaultCondition))
                  )
                  break
                }
              }
            } else {
              data[i].condition.push(
                JSON.parse(JSON.stringify(this.defaultCondition))
              )
            }
            break
          }
        }
      }
      this.conditionObj.condition = data
      this.buildConditionTree(this.conditionObj)
    },
    removeCondition(indexStr) {
      var indexArr = []
      if (indexStr) indexArr = indexStr.split(',')
      if (indexArr.length > 0) {
        var data = this.conditionObj.condition
        for (var i = 0; i < data.length; i++) {
          if (i == indexArr[0]) {
            if (indexArr.length > 1) {
              for (var j = 0; j < data[i].condition.length; j++) {
                if (j == indexArr[1]) {
                  if (indexArr.length > 2) {
                    for (
                      var z = 0;
                      z < data[i].condition[j].condition.length;
                      z++
                    ) {
                      if (z == indexArr[2]) {
                        data[i].condition[j].condition.splice(z, 1)
                        break
                      }
                    }
                  } else {
                    data[i].condition.splice(j, 1)
                  }
                  break
                }
              }
            } else {
              data.splice(i, 1)
            }
            break
          }
        }
        this.conditionObj.condition = data
        this.buildConditionTree(this.conditionObj)
      }
    },
    //添加一个联合条件条件
    addUnionCondition(indexStr) {
      var data = this.conditionObj.condition
      if (indexStr == 'root') {
        data.push({junction: 'or', condition: []})
      } else {
        var indexArr = []
        if (indexStr) indexArr = indexStr.split(',')
        for (var i = 0; i < data.length; i++) {
          if (indexArr.length > 0 && i == indexArr[0]) {
            if (indexArr.length > 1) {
              for (var j = 0; j < data[i].condition.length; j++) {
                if (j == indexArr[1]) {
                  data[i].condition[j].condition.push({
                    junction: 'or',
                    condition: []
                  })
                  break
                }
              }
            } else {
              data[i].condition.push({junction: 'or', condition: []})
            }
            break
          }
        }
      }
      this.conditionObj.condition = data
      this.buildConditionTree(this.conditionObj)
    }
  }
}
</script>
<style scoped>
div >>> .el-dialog__body {
  padding: 10px;
}

.table > thead > tr > th,
.table > thead > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td {
  border-top: 1px solid #e7eaec;
  border-left: 1px solid #e7eaec;
  line-height: 1.42857;
  vertical-align: middle;
  padding: 4px;
}

.table > tbody > tr > td {
  text-align: center;
}

.table {
  border-bottom: 1px solid #e7eaec;
  border-right: 1px solid #e7eaec;
  border-spacing: 0;
}

.table >>> .el-button {
  padding: 6px 8px;
}

div >>> .el-tabs__content {
  height: 450px;
  overflow: auto;
}

.labelrag {
  padding: 0.2em 0.2em 0.3em;
  font-size: 75%;
  font-weight: 700;
  line-height: 1;
  background-color: #fff;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 12px;
  width: 70px;
  line-height: 20px;
  border: solid 1px;
  position: absolute;
  z-index: 3;
}

div >>> .labelrag > .selected_search {
  width: 60px;
  border: none;
  outline: none;
  height: 22px;
}

div >>> .labelrag > .el-select > .el-input > .el-input__inner {
  padding: 0px;
  border: none;
  height: 26px;
}

.custom_condition_tab {
  width: 700px;
  position: absolute;
}

.inputs >>> .el-form-item__error {
  display: none;
}

div >>> [aria-invalid='true'] .el-input .el-input__inner {
  border-color: #f56c6c;
}

.el-tag + .el-tag {
  margin-left: 5px;
  margin-right: 5px;
}
</style>
