<template>
  <el-dialog
    title="模板规则设置"
    :visible.sync="dialogVisible"
    appendToBody
    :close-on-click-modal="false"
    :before-close="handleClose"
    top="6vh"
    custom-class="dialog__content"
  >
    <el-form v-model="filter" data-vv-scope="filterForm">
      <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: 400px;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.pathStr"
                                    :label="m.desc"
                                    v-for="m in varTree"
                                    :key="m.pathStr"
                                  ></el-option>
                                </el-select>
                              </td>
                              <td style="width:100px;">
                                <el-select
                                  v-model="tab.operator"
                                  v-if="tab.dataType == 'number'"
                                  style="width:90px;"
                                  size="mini"
                                >
                                  <el-option label="等于" value="1"></el-option>
                                  <el-option
                                    label="不等于"
                                    value="2"
                                  ></el-option>
                                  <el-option label="大于" value="3"></el-option>
                                  <el-option
                                    label="大于等于"
                                    value="4"
                                  ></el-option>
                                  <el-option label="小于" value="5"></el-option>
                                  <el-option
                                    label="小于等于"
                                    value="6"
                                  ></el-option>
                                  <el-option
                                    label="等于变量"
                                    value="7"
                                  ></el-option>
                                  <el-option
                                    label="不等于变量"
                                    value="8"
                                  ></el-option>
                                </el-select>
                                <el-select
                                  v-model="tab.operator"
                                  v-if="tab.dataType != 'number'"
                                  style="width:90px;"
                                  size="mini"
                                >
                                  <el-option label="等于" value="1"></el-option>
                                  <el-option
                                    label="等于(忽略大小写)"
                                    value="3"
                                  ></el-option>
                                  <el-option label="like" value="4"></el-option>
                                  <el-option
                                    label="like左"
                                    value="5"
                                  ></el-option>
                                  <el-option
                                    label="like右"
                                    value="6"
                                  ></el-option>
                                  <el-option
                                    label="等于变量"
                                    value="7"
                                  ></el-option>
                                  <el-option
                                    label="不等于变量"
                                    value="8"
                                  ></el-option>
                                </el-select>
                              </td>
                              <td
                                v-if="
                                  tab.compType != '2' &&
                                    tab.dataType == 'date' &&
                                    tab.operator != 7 && tab.operator != 8
                                "
                                style="width:220px;"
                              >
                                <ht-date
                                  v-model="tab.value"
                                  style="width:215px;"
                                  :validate="{required: true}"
                                  :format="tab.format"
                                  :showDate="true"
                                  :day="-3"
                                />
                              </td>

                              <td
                                v-if="
                                  tab.compType != 2 &&
                                    tab.dataType != 'date' &&
                                    tab.operator != 7 && tab.operator != 8
                                "
                                style="width:220px;"
                              >
                                <ht-input
                                  style="width:203px;"
                                  v-model="tab.value"
                                  :validate="{required: true}"
                                  :maxlength="50"
                                  :showWordLimit="true"
                                />
                              </td>
                              <td
                                v-if="tab.operator == 7 || tab.operator == 8"
                                style="width:220px;"
                              >
                                <el-select
                                  v-model="tab.value"
                                  v-if="tab.dataType != 'number'"
                                  size="mini"
                                >
                                  <el-option
                                    :value="cvar.alias"
                                    :label="cvar.title"
                                    v-for="cvar in comVarList"
                                    :key="cvar.alias"
                                  ></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-container>
            </td>
          </tr>
        </tbody>
      </table>
    </el-form>

    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="onConfirm">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
import form from '@/api/form.js'
import {codemirror} from 'vue-codemirror'
import 'codemirror/theme/ambiance.css'
import req from '@/request.js'
require('codemirror/mode/javascript/javascript')
const eipOrgDialog = () => import('@/components/dialog/EipOrgDialog.vue')

export default {
  name: 'template-filter-dialog',
  components: {
    codemirror,
    eipOrgDialog
  },
  props: {
    metafields: Array
  },
  data() {
    return {
      comVarList: [],
      filter: {filterType: 1, name: ''},
      isEditabled: true,
      ruleJson: {},
      orgSelectedArray: [],
      sqlOption: [],
      dialogVisible: false,
      varList: [],
      selectVar: '',
      curCode: '',
      cmOptions: {
        value: '',
        mode: 'text/javascript',
        lineNumbers: true,
        line: true,
        lineWiseCopyCut: true,
        showCursorWhenSelecting: true
      },

      conditionObj: {},
      conditionName: '',
      pathList: [],
      data: {},
      branchList: [],
      tabList: [],
      Tree: [],
      svgHeight: '400px',
      defaultCondition: {
        property: '',
        operator: '1',
        dataType: '',
        value: '',
        compType: '1'
      },
      Mleft: 50, //初始左边距50
      Mtop: 20, //初始上边距40
      XIncase: 100, //x轴递增数值70
      YIncase: 50, //y轴递增数据50
      svgHtml: '',
      varTree: [],
      filedsObj: {},
      scriptStr: '',
      localDsType: ''
    }
  },
  computed: {
    codemirror() {
      return this.$refs.mycode.codemirror
    }
  },
  mounted() {},
  methods: {
    initData() {
      this.varList = []
      this.filter = {filterType: 1, name: '', key: ''}
      this.sqlOption = {label: 'SQL字段', options: []}
      let varOption = {label: '常用变量', options: []}
      let confOption = {label: '条件字段', options: []}
      //获取变量
      form.getDataTemplateVarList().then(response => {
        this.comVarList = response
        if (response && response.length > 0) {
          response.forEach(obj => {
            if (obj.alias == 'curUserAccount') {
              obj.alias = "'[curUserAccount]'"
            } else if (obj.alias == 'curUserId') {
              obj.alias = "'[curUserId]'"
            }
            varOption.options.push({key: obj.alias, value: obj.title})
          })
        }
      })
      //获取字段
      if (this.metafields && this.metafields.length > 0) {
        this.metafields.forEach(field => {
          if (field.type && field.type != 'null') {
            if (field.type == 'clob' && this.localDsType == 'oracle') {
              this.sqlOption.options.push({
                key: 'TO_CHAR(' + this.colPrefix + field.name + ')',
                value: field.desc
              })
            } else {
              this.sqlOption.options.push({
                key: this.colPrefix + field.name,
                value: field.desc
              })
            }
          }
        })
      }
      //条件字段
      if (this.conditionFields) {
        let conditions = JSON.parse(this.conditionFields)
        if (conditions.length > 0) {
          conditions.forEach(obj => {
            confOption.options.push({
              key: this.colPrefix + obj.na,
              value: obj.cm
            })
          })
        }
      }
      this.varList.push(this.sqlOption)
      this.varList.push(varOption)
      this.varList.push(confOption)
      if (this.ruleJson && JSON.stringify(this.ruleJson) != '{}') {
        this.isEditabled = false
        let tempFilter = {}
        tempFilter.filter = this.ruleJson.condition
        this.filter = tempFilter
        let conditionJson = JSON.parse(this.ruleJson.filter)
        this.conditionObj = conditionJson
        this.buildConditionTree(conditionJson)
        this.buildVarTree(this.metafields)
        this.$set(this.filter, 'filterType', this.ruleJson.type)
        // this.filter.filterType = this.ruleJson.type;
      } else {
        this.isEditabled = true
        if (this.filter.filterType == 2 || this.filter.filterType == 3) {
          this.codemirror.setValue(' ')
        } else if (this.filter.filterType == 1) {
          this.conditionObj = {junction: 'and', condition: []}
          this.buildConditionTree(this.conditionObj)
          this.buildVarTree(this.metafields)
        }
      }
    },
    showDialog(ruleJson) {
      this.tabList = []
      if (ruleJson) {
        this.ruleJson = JSON.parse(ruleJson)
      } else {
        this.ruleJson = {}
      }
      this.dialogVisible = true
      this.initData()
    },
    changeFilterType() {
      if (
        (this.filter.filterType == 2 || this.filter.filterType == 3) &&
        this.filter.filterType != this.ruleJson.type
      ) {
        this.filter.filter = ' '
        this.codemirror.setValue(' ')
      }
    },
    clickVar() {
      this.codemirror.replaceSelection(' ' + this.selectVar + ' ')
    },
    saveFormValid() {
      // 处理过滤条件
      if (this.filter.filterType == 1) {
        if (!this.tabList || this.tabList.length < 1) {
          this.filter.filter = '[]'
        } else {
          this.filter.filter = JSON.stringify(this.conditionObj)
        }
      }
      return true
    },
    isNotZeroEmpty(val) {
      if (!val || val === '0') {
        return false
      }
      return true
    },
    getPermissionData() {
      let resultData = []
      if (
        !this.isNotZeroEmpty(this.filter.loginUser) &&
        !this.isNotZeroEmpty(this.filter.loginUserOrgs) &&
        !this.isNotZeroEmpty(this.filter.loginUserSubOrgs) &&
        !this.isNotZeroEmpty(this.filter.customOrgsField)
      ) {
        this.$message.error('请选择权限类型！')
        throw new Error('请选择权限类型.')
      }
      if (this.filter.loginUser && this.filter.loginUser !== '0') {
        if (!this.filter.loginUserField) {
          this.$message.error('请选择当前登录用户对应字段！')
          throw new Error('请选择当前登录用户对应字段.')
        }
        resultData.push({
          type: 'loginUser',
          name: '当前登录用户数据',
          field: this.filter.loginUserField
        })
      }

      if (this.filter.loginUserOrgs && this.filter.loginUserOrgs !== '0') {
        if (!this.filter.loginUserOrgsField) {
          this.$message.error('请选择当前登录用户所属组织对应字段！')
          throw new Error('请选择当前登录用户所属组织对应字段.')
        }
        resultData.push({
          type: 'loginUserOrgs',
          name: '当前登录用户所属组织',
          field: this.filter.loginUserOrgsField
        })
      }

      if (
        this.filter.loginUserSubOrgs &&
        this.filter.loginUserSubOrgs !== '0'
      ) {
        if (!this.filter.loginUserSubOrgsField) {
          this.$message.error('请选择当前登录用户所属组织及下属组织对应字段！')
          throw new Error('请选择当前登录用户所属组织及下属组织对应字段.')
        }
        resultData.push({
          type: 'loginUserSubOrgs',
          name: '当前登录用户所属组织及下属组织',
          field: this.filter.loginUserSubOrgsField
        })
      }

      if (this.orgSelectedArray) {
        if (this.filter.customOrgsField) {
          //this.$message.error("请选择自定义选择组织对应字段！");
          //throw new Error("请选择自定义选择组织对应字段.");
          let customOrgs = {
            type: 'customOrgs',
            name: '自定义选择组织',
            orgs: [],
            field: this.filter.customOrgsField
          }
          for (let int = 0; int < this.orgSelectedArray.length; int++) {
            let selectOrg = this.orgSelectedArray[int]
            let orgObj = {}
            orgObj.id = selectOrg.id
            orgObj.name = selectOrg.name
            customOrgs.orgs.push(orgObj)
          }
          resultData.push(customOrgs)
        }
      }
      return JSON.stringify(resultData)
    },
    orgSelector() {
      this.$refs.eipOrgDialog.showDialog({})
    },
    handleTagClose(tag) {
      if (this.orgSelectedArray && this.orgSelectedArray.length > 0) {
        for (let i = 0; i < this.orgSelectedArray.length; i++) {
          if (this.orgSelectedArray[i].id == tag.id) {
            this.orgSelectedArray.splice(i, 1)
            return
          }
        }
      }
    },
    dialogOnConfirm(data) {
      if (data && data.length > 0) {
        this.orgSelectedArray = data
      } else {
        this.orgSelectedArray = []
      }
    },
    onConfirm(selection) {
      if (this.saveFormValid()) {
        this.dialogVisible = false
        this.$emit('onConfirm', JSON.stringify(this.filter))
      }
    },
    handleClose() {
      this.dialogVisible = false
    },
    //根据条件数组构建条件分支界面
    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
    },
    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
        }
      }
    },
    //添加一个联合
    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)
    },
    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
    },
    buildVarTree(treeData) {
      var treeArr = []
      this.varTree = []
      this.filedsObj = {}
      if (treeData.length > 0) {
        treeData.forEach(field => {
          if (field.type && field.type != 'null') {
            let obj = {
              pathStr: field.name,
              desc: field.comment,
              dataType: field.type
            }
            treeArr.push(obj)
            this.filedsObj[obj.pathStr] = obj
          }
        })
        this.varTree = treeArr
      }
    },
    setFieldOtherInfo(ele, tab, type) {
      let selectFiled = this.filedsObj[tab.property]
      if (type == 1) {
        tab.dataType = selectFiled.dataType
        tab.format = selectFiled.format
        tab.chooseDesc = selectFiled.desc
        tab.value = ''
      } else {
        tab.changeDesc = selectFiled.desc
      }
    },
    getDataSource() {
      req.get('${portal}/sys/sysDataSource/v1/getDataSources').then(resp => {
        if (resp.data && resp.data.length > 0) {
          resp.data.forEach(item => {
            if (item.alias == 'LOCAL') {
              this.localDsType = item.dbType
            }
          })
        }
      })
    }
  }
}
</script>
<style lang="scss" 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;
}
/deep/ .CodeMirror-sizer {
  min-width: unset !important;
  width: 1000px !important;
}
/deep/.el-dialog__wrapper {
  overflow: unset !important;
  &::-webkit-scrollbar {
    width: 0;
    background-color: transparent;
  }
}
/deep/ .dialog__content {
  width: 70%;
  height: 65%;
  min-height: 400px;
  .el-dialog__body {
    padding-top: 10px;
    padding-bottom: 10px;
    height: calc(100% - 140px);
    overflow-y: auto;
  }
}
@media (max-width: 1280px) {
  /deep/ .el-dialog {
    width: 80%;
    .CodeMirror-sizer {
      width: 830px !important;
    }
  }
}
@media (max-height: 960px) {
  /deep/ .el-dialog__body {
    .el-container {
      height: 100%;
    }
  }
}
</style>
