<template>
  <el-container>
    <el-row style="width: 100%">
      <el-col :span="7">
        <el-table
          ref="conditionSettingTable"
          border
          :max-height="tabHeight"
          :data="conditionSettingFields"
          tooltip-effect="dark"
          @row-dblclick="fillToCondition"
          default-expand-all
          :tree-props="{children: 'fields'}"
          row-key="tempId"
          @select="selectChange"
          @select-all="selectAllChange"
          @selection-change="selectionChangeHandler"
        >
          >
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column
            prop="name"
            label="列名"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="desc"
            label="注释"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="type"
            label="类型"
            width="80"
          ></el-table-column>
        </el-table>
      </el-col>
      <el-col :span="1" style="text-align:center">
        <el-button
          type="primary"
          circle
          icon="icon-hide"
          title="将所选字段添加为查询条件"
          style="-webkit-transform: rotate(270deg); transform: rotate(270deg)"
          @click="allfillToCondition()"
        />
      </el-col>
      <el-col :span="16">
        <div class="tablebox">
          <el-table
            ref="conditionTable"
            border
            :max-height="tabHeight"
            :data="conditionFields"
            tooltip-effect="dark"
            style="width: 100%"
          >
            <el-table-column
              label="序号"
              type="index"
              width="50"
              fixed="left"
            ></el-table-column>
            <el-table-column
              prop="na"
              label="列名"
              width="120"
              fixed="left"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column prop="cm" label="显示名" width="240">
              <template scope="scope">
                <el-input
                  v-model="scope.row.cm"
                  placeholder="请输入显示名称"
                  maxlength="50"
                  show-word-limit
                >
                  <el-button
                    icon="icon-guojihua"
                    slot="append"
                    style="width: 50px"
                    @click="editI18nMessage(scope.row.name)"
                  >
                  </el-button>
                </el-input>
              </template>
            </el-table-column>
            <el-table-column prop="ct" label="控件类型" width="140">
              <template scope="scope">
                <div v-if="scope.row.ty != 'date'">
                  <ht-select
                    :clearable="false"
                    v-model="scope.row.ct"
                    :options="controlTypes.filter(item => item.key != 'date')"
                    @change="controlTypeChange(scope.$index, scope.row)"
                    :validate="{required: true}"
                    style="width: 100%"
                  />
                </div>
                <div v-if="scope.row.ty == 'date'">
                  <ht-select
                    :clearable="false"
                    v-model="scope.row.ct"
                    :options="controlTypes.filter(item => item.key == 'date')"
                    @change="controlTypeChange(scope.$index, scope.row)"
                    :validate="{required: true}"
                    style="width: 100%"
                  />
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="op" label="条件" width="120">
              <template scope="scope">
                <ht-select
                  v-model="scope.row.op"
                  :clearable="false"
                  @change="changeQt(scope.row, scope.$index)"
                  :options="getOpOptions(scope.row.ty, scope.row.op)"
                  :validate="{required: true}"
                  style="width: 100%"
                />
              </template>
            </el-table-column>
            <el-table-column
              prop="mg"
              align="center"
              label="合并查询"
              width="80"
            >
              <template scope="scope">
                <el-checkbox
                  v-model="scope.row.mg"
                  v-if="scope.row.ty !== 'date'"
                />
              </template>
            </el-table-column>
            <el-table-column label="默认值" width="330">
              <template slot-scope="scope">
                <el-input-number
                  v-if="scope.row.ty === 'number'"
                  v-model="scope.row.defaultValue"
                  placeholder="请输入默认值"
                  controls-position="right"
                  style="width: 100%"
                ></el-input-number>
                <div
                  v-if="
                    scope.row.ty === 'date' &&
                      scope.row.ct === 'date' &&
                      scope.row.op != '6'
                  "
                >
                  <el-date-picker
                    style="width: 100%"
                    v-model="scope.row.defaultValue"
                    :type="
                      scope.row.format == 'yyyy-MM-dd HH:mm:ss'
                        ? 'datetime'
                        : 'date'
                    "
                    key="date"
                    :value-format="
                      scope.row.format ? scope.row.format : 'yyyy-MM-dd'
                    "
                    placeholder="选择日期"
                  >
                  </el-date-picker>
                </div>
                <div
                  v-if="
                    scope.row.ty === 'date' &&
                      scope.row.ct === 'date' &&
                      scope.row.op == '6'
                  "
                >
                  <el-date-picker
                    style="width: 315px"
                    v-model="scope.row.defaultValue"
                    :type="
                      scope.row.format == 'yyyy-MM-dd HH:mm:ss'
                        ? 'datetimerange'
                        : 'daterange'
                    "
                    :value-format="
                      scope.row.format ? scope.row.format : 'yyyy-MM-dd'
                    "
                    size="mini"
                    key="range"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    @input="changeTime(scope.row, scope.$index, $event)"
                  >
                  </el-date-picker>
                </div>
                <el-input
                  v-if="scope.row.ty === 'varchar' || scope.row.ty === 'clob'"
                  v-model="scope.row.defaultValue"
                  placeholder="请输入默认值"
                  style="width: 100%"
                  clearable
                  show-word-limit
                  :maxlength="50"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column label="管理" width="300" fixed="right">
              <template slot="header" slot-scope="scope">
                <span style="margin-right:10px">管理</span>
                <el-button
                  @click="handleClearSelected"
                  v-show="conditionFields && conditionFields.length > 0"
                  >清空</el-button
                >
              </template>
              <template slot-scope="scope">
                <el-button
                  @click="sort(scope.$index, 'down')"
                  size="mini"
                  title="下降"
                  icon="el-icon-arrow-down"
                  plain
                ></el-button>
                <el-button
                  @click="sort(scope.$index, 'up')"
                  size="mini"
                  title="上升"
                  icon="el-icon-arrow-up"
                  plain
                ></el-button>
                <el-button
                  :plain="!scope.row.isShow"
                  class="mobile-btn"
                  size="mini"
                  :title="scope.row.isShow ? '隐藏' : '显示'"
                  :icon="
                    scope.row.isShow
                      ? 'icon-application-display'
                      : 'icon-application-hide'
                  "
                  :class="{
                    'is-active__btn': scope.row.isShow
                  }"
                  @click="isShow(scope.row)"
                ></el-button>
                <el-button
                  :plain="scope.row.mpDisplay === btnType.notShow"
                  class="mobile-btn"
                  size="mini"
                  title="移动端查询"
                  icon="icon-shoujiduanxianshi"
                  :class="{
                    'is-active__btn': scope.row.mpDisplay === btnType.isShow
                  }"
                  v-show="
                    scope.row.mpDisplay
                      ? (scope.row.mpDisplay = scope.row.mpDisplay)
                      : initMpDisplay(scope.row)
                  "
                  @click="btnChange(scope.row)"
                ></el-button>
                <el-button
                  plain
                  class="mobile-btn"
                  size="mini"
                  title="校验"
                  icon="icon-xiaoyan"
                  :class="{
                    'is-active__btn':
                      scope.row.validateList &&
                      scope.row.validateList.length > 0
                  }"
                  :disabled="scope.row.isShow"
                  @click="validateChange(scope.$index, scope.row)"
                ></el-button>
                <el-button
                  @click="remove(scope.$index, scope.row)"
                  size="mini"
                  title="删除"
                  icon="el-icon-delete"
                  plain
                ></el-button>
                <el-button
                  @click="
                    addCtrlField(scope.$index, scope.row, conditionFields)
                  "
                  type="info"
                  size="mini"
                  v-if="
                    scope.row.ct == 'select' ||
                      scope.row.ct == 'radio' ||
                      scope.row.ct == 'customDialog'
                  "
                  :plain="
                    !(
                      (scope.row.controlContent &&
                        scope.row.controlContent.length > 0) ||
                      (scope.row.controlContent &&
                        scope.row.controlContent.alias) ||
                      (scope.row.dateFormat && scope.row.dateFormat != '')||
                      (scope.row.option && scope.row.option.choiceType == 'dynamic'&& 
                      scope.row.option.bind && scope.row.option.bind.length)

                    )
                  "
                  >控</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-col>
    </el-row>
    <!-- 添加查询控件对话框  -->
    <template-ctrl-field-dialog
      ref="templateCtrlFieldDialog"
      name="templateCtrlFieldDialog"
      :controlTypes="controlTypes"
      @onConfirm="ctrlFieldDialogOnConfirm"
      append-to-body
    />
    <!--表单对话框 -->
    <validate-dialog
      ref="ValidateDialog"
      :boData="conditionFields"
      @onConfirm="formSubmitVerificationOk"
    />
    <i18n-message-edit
      ref="i18nMessageEdit"
      :messageKey="i18nMessageKey"
      @after-save="afterSaveI18n"
    />
  </el-container>
</template>

<script>
import deepmerge from 'deepmerge'
const templateCtrlFieldDialog = () =>
  import('@/components/form/dataTemplate/TemplateCtrlFieldDialog.vue')
const ValidateDialog = () =>
  import('@/components/form/dataTemplate/ValidateDialog.vue')
import i18nMessageEdit from '@/components/system/I18nMessageEdit.vue'
const BTN_TYPE = {
  isShow: '1',
  notShow: '2'
}
export default {
  name: 'condition-setting',
  components: {
    templateCtrlFieldDialog,
    ValidateDialog,
    i18nMessageEdit
  },
  props: ['data'],
  data() {
    return {
      btnType: BTN_TYPE, //移动端显示隐藏按钮
      dataTemplate: {},
      // conditionSettingFields: [],
      conditionFields: [],
      tabHeight: `${document.documentElement.clientHeight}` - 245,
      controlTypes: [
        {
          key: 'onetext',
          value: '单行文本框',
          options: {
            dataType: 'string|number',
            validateList: [],
            validateType:
              'confirmed|email|regex|id_card|min|max|min_value|max_value|isAfter|isBefore|isStart|isEnd|numeric|between|is|digits|mobile|required|row_unique|alpha_spaces|alpha_dash|alpha_num|alpha|frontJSValidate|backendValidate|decimal'
          }
        },
        {
          key: 'date',
          value: '日期控件',
          options: {
            validateType:
              'isAfter|isBefore|isStart|isEnd|required|row_unique|frontJSValidate',
            validateList: []
          }
        },
        {
          key: 'select',
          value: '下拉选项',
          options: {
            validateType: 'required|row_unique|frontJSValidate',
            validateList: [],
            dataType: 'string|number'
          }
        },
        {
          key: 'radio',
          value: '单选按钮',
          options: {
            dataType: 'string|number',
            validateType: 'required|row_unique|frontJSValidate',
            validateList: []
          }
        },
        {
          key: 'customDialog',
          value: '自定义对话框',
          options: {
            validateType: 'required|row_unique|frontJSValidate',
            validateList: []
          }
        }
      ],
      editField: {},
      editFieldIndex: -1,
      option: {
        choiceType: 'static',
        customQuery: {}
      },
      i18nMessageKey: '',
      selections: []
    }
  },
  computed: {
    conditionSettingFields() {
      // 去掉流程字段
      let conditionSettingFields = JSON.parse(
        JSON.stringify(this.$store.getters['form/conditionFormListCommonVar'])
      )
      if (conditionSettingFields.length) {
        conditionSettingFields[0].fields = conditionSettingFields[0].fields.filter(
          item => !item.flowField
        )
      }
      //处理字段列表，添加相应的字段
      let tempId = 0
      conditionSettingFields.forEach(p => {
        p['tempId'] = tempId = tempId + 1
        p['isParent'] = true
        p.fields &&
          p.fields.forEach(s => {
            s['tempId'] = tempId = tempId + 1
            s['isParent'] = false
          })
      })
      return conditionSettingFields
    }
  },
  mounted() {
    this.dataTemplate = this.data.bpmDataTemplate
    if (this.data.fields) {
      let fields = deepmerge({}, this.data.fields, {clone: true})
      if (fields.length && fields[0] && fields[0].fields) {
        fields[0].fields = fields[0].fields.filter(item => {
          return !item.flowField
        })
      }
      // fields=fields.filter(item=>!item.flowField);
      this.conditionSettingFields = fields.filter(item => !item.flowField)
      // 处理字段列表，添加相应的字段
      let tempId = 0
      this.conditionSettingFields.forEach(p => {
        p['tempId'] = tempId = tempId + 1
        p['isParent'] = true
        p.fields &&
          p.fields.forEach(s => {
            s['tempId'] = tempId = tempId + 1
            s['isParent'] = false
          })
      })
    }
    this.templates = this.data.templates
    this.initData()
  },
  methods: {
    getDataId(data) {
      return data['tempId']
    },
    selectChange(selection, row) {
      // 如果selection中存在row代表是选中，否则是取消选中
      if (
        selection.find(val => {
          return this.getDataId(val) === this.getDataId(row)
        })
      ) {
        if (row.fields) {
          //注意这里的children是后台返回数据的children字段
          row.fields.forEach(val => {
            this.$refs.conditionSettingTable.toggleRowSelection(val, true)
            // selection.push(val)
            if (val.fields) {
              this.selectChange(selection, val)
            }
          })
        }
      } else {
        this.toggleRowSelection(selection, row)
      }
    },

    /**
     * 用于树形表格多选, 选中所有
     * @param selection
     */
    selectAllChange(selection) {
      // 如果选中的数目与请求到的数目相同就选中子节点，否则就清空选中
      if (
        selection &&
        selection.length === this.conditionSettingFields.length
      ) {
        selection.forEach(val => {
          this.selectChange(selection, val)
        })
      } else {
        this.$refs.conditionSettingTable.clearSelection()
      }
    },

    // 选择改变
    selectionChangeHandler(val) {
      this.selections = val
      // this.unique(this.selections,'id')//这里有一个问题就是这样点选完之后，数据有重复，所以根据id手动去重，期待优化
    },

    /**
     * 切换选中状态
     * @param selection
     * @param data
     */
    toggleRowSelection(selection, data) {
      if (data.children) {
        //注意这里的children也是后台返回数据的children字段
        data.children.forEach(val => {
          this.$refs.conditionSettingTable.toggleRowSelection(val, false)
          if (val.children) {
            this.toggleRowSelection(selection, val)
          }
        })
      }
    },
    isShow(row) {
      this.$set(row, 'isShow', !row.isShow)
    },
    btnChange(row) {
      this.$set(row, 'mpDisplay', row.mpDisplay === '1' ? '2' : '1')
    },
    //保存查询条件数据
    saveConditionField() {
      let unPassCondtionArr = []
      let errorArr = []
      let fieldOpErrorArr = []
      this.conditionFields.forEach(c => {
        //合并查询只能用like查询比较符
        if (c.mg && c.qt.indexOf('LIKE') < 0) {
          errorArr.push(c.cm)
        }
        //没有配置控件类型
        if (
          (c.ct == 'select' || c.ct == 'radio' || c.ct == 'customDialog') &&
          !c.controlContent
        ) {
          unPassCondtionArr.push(c.cm)
        }
        //查询条件的op必须是数字，否则就是异常的数据
        if (c.op && !parseInt(c.op) > 0) {
          fieldOpErrorArr.push(c.cm)
        }
      })
      if (errorArr.length > 0) {
        this.$message.error(
          '查询字段【' +
            errorArr.join(',') +
            '】,在使用了合并查询后,不可再使用非like条件,无法保存'
        )
        return 'false'
      }
      if (unPassCondtionArr.length > 0) {
        this.$message.error(
          '查询字段【' +
            unPassCondtionArr.join(',') +
            '】尚未配置控件，无法保存'
        )
        return 'false'
      }
      if (fieldOpErrorArr.length > 0) {
        this.$message.error(
          '查询字段【' +
            fieldOpErrorArr.join(',') +
            '】的条件配置有异常，请删除该查询字段后重新配置。'
        )
        return 'false'
      }
      this.dataTemplate.conditionField = this.conditionFields
        ? JSON.stringify(this.conditionFields)
        : null
    },
    //初始化处理
    initData() {
      if (this.dataTemplate.conditionField) {
        this.conditionFields = JSON.parse(this.dataTemplate.conditionField)
      }
      if (this.conditionFields) {
        this.conditionFields.forEach(item => {
          if (
            item.ct != 'onetext' &&
            item.ct != 'date' &&
            item.ct != 'select' &&
            item.ct != 'radio' &&
            item.ct != 'customDialog'
          ) {
            item.ct = 'onetext'
          }
        })
      }
    }, //查询字段控件设置
    addCtrlField(index, row, conditionFields) {
      if ((row.ct == 'select' || row.ct == 'radio') && !row.option) {
        row.option = {
          choiceType: 'static',
          customQuery: {}
        }
      }
      this.editFieldIndex = index
      this.editField = row
      this.$refs.templateCtrlFieldDialog.showDialog(row, conditionFields)
    },

    //回填查询字段控件设置
    ctrlFieldDialogOnConfirm(field) {
      // this.editField = field
      this.conditionFields.splice(this.editFieldIndex, 1, field)
    },
    //双击字段列表中的字段时将该字段加入到显示字段
    fillToCondition(row, event, column) {
      if (row.isParent) {
        // this.$message.warning('请选择字段')
        return
      }
      let isIn = this.isInConditionFields(row.name)
      if (!isIn) {
        let field = this.getConditionField(row)
        this.conditionFields.push(field)
      }
      this.doLayoutTable()
    },
    //将字段列表中的已选字段加入到显示字段列表
    allfillToCondition() {
      let selectrows = this.$refs.conditionSettingTable.store.states.selection
      selectrows = selectrows.filter(item => !item.isParent)
      if (!selectrows || selectrows.length < 1) {
        this.$message({
          message: '请在左侧列表中选择要作为条件的字段',
          type: 'warning'
        })
      }
      selectrows.forEach(obj => {
        let ctrlType = obj.ctrlType
        if (ctrlType == 'dialog') {
          ctrlType = 'customDialog'
        } else if (ctrlType == 'input') {
          ctrlType = 'onetext'
        }
        if (obj.type === 'date') {
          ctrlType = 'date'
        }
        let isTrue = false
        for (let i = 0; i < this.controlTypes.length; i++) {
          if (ctrlType == this.controlTypes[i].key) {
            isTrue = true
            break
          }
        }
        if (!isTrue) {
          ctrlType = 'onetext'
        }
        this.$set(obj, 'ctrlType', ctrlType)
        if (!this.isInConditionFields(obj.name)) {
          let field = this.getConditionField(obj)
          this.conditionFields.push(field)
        }
      })
      this.doLayoutTable()
    },
    doLayoutTable() {
      this.$nextTick(() => {
        this.$refs.conditionTable.doLayout()
      })
    },
    //显示字段排序
    sort(index, type) {
      if ('up' == type) {
        if (index === 0) {
          this.$message({
            message: '已经是列表中第一位',
            type: 'warning'
          })
        } else {
          let temp = this.conditionFields[index - 1]
          this.$set(
            this.conditionFields,
            index - 1,
            this.conditionFields[index]
          )
          this.$set(this.conditionFields, index, temp)
        }
      } else {
        if (index === this.conditionFields.length - 1) {
          this.$message({
            message: '已经是列表中最后一位',
            type: 'warning'
          })
        } else {
          let i = this.conditionFields[index + 1]
          this.$set(
            this.conditionFields,
            index + 1,
            this.conditionFields[index]
          )
          this.$set(this.conditionFields, index, i)
        }
      }
    },
    //删除显示字段(其他查询字段校验验绑定该字段的也需要删除)
    remove(index, row) {
      this.$confirm(
        '删除此数据,其他查询字段校验如绑定该字段的也同时清除, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      )
        .then(() => {
          this.conditionFields.forEach(item => {
            if (item.validateList && item.validateList.length > 0) {
              for (var i = 0; i < item.validateList.length; i++) {
                if (
                  item.validateList[i].value &&
                  item.validateList[i].value.includes(row.name)
                ) {
                  item.validateList.splice(i, 1)
                  i--
                }
              }
            }
          })
          this.conditionFields.splice(index, 1)
        })
        .catch(() => {})
    },
    handleClearSelected() {
      this.$confirm('确认清空所有查询字段？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.conditionFields = []
          this.$refs.conditionSettingTable.clearSelection()
        })
        .catch(() => {})
    },
    //判断字段是否已在显示字段列表中
    isInConditionFields(name) {
      let isIn = false
      if (this.conditionFields && this.conditionFields.length > 0) {
        this.conditionFields.forEach(obj => {
          if (obj.name == name) {
            isIn = true
            return
          }
        })
      }
      return isIn
    },
    getConditionField(field) {
      let option = field.option ? JSON.parse(field.option) : null
      let ctrlType = field.ctrlType
      let resultField
      ctrlType = ctrlType == 'multiselect' ? 'select' : ctrlType //下拉框多选也为下拉框
      if (ctrlType == 'selector' && option) {
        ctrlType = this.getSelectorOptions(option.selector.type.alias)
        for (var bind in option.bind) {
          if (
            option.bind[bind].json &&
            option.bind[bind].json.name == field.name
          ) {
            resultField = option.bind[bind].key
            break
          }
        }
        if (!resultField) {
          resultField = option.bind[0].key
        }
      }
      if ('text' == ctrlType || 'checkbox' == ctrlType) {
        ctrlType = 'onetext'
      }
      if (field.type == 'date') {
        ctrlType = 'date'
      }
      var colPrefix = this.data.colPrefix
      const tableName = this.getTableNameByField(field)
      let opInt = field.type == 'varchar' || field.type == 'clob' ? '3' : '1'
      let format = field.format
      return {
        queryPre: field.queryPre || '',
        colPrefix: field.colPrefix || '',
        tableName,
        name: field.name,
        na: field.name,
        ty: field.type,
        op: opInt,
        cm: field.desc,
        format: format,
        va: '',
        vf: (option && option.choiceType) || 'static',
        ct: ctrlType || 'onetext',
        qt: this.getQueryType(field.fieldType || field.type, opInt),
        option: option,
        defaultValue: field.type=='number'? undefined: field.defaultValue || '',
        validateList: field.validateList || [],
        validate: field.validate || '',
        controlContent:
          resultField ||
          (option && option.choice) ||
          (option && option[ctrlType]) ||
          ''
      }
    },
    getQueryType(type, op) {
      let qt = 'equal'
      op = parseInt(op)
      switch (type) {
        case 'varchar':
        case 'clob':
          if (op) {
            switch (op) {
              case 1:
                qt = 'EQUAL'
                break
              case 2:
                qt = 'NOT_EQUAL'
                break
              case 3:
                qt = 'LIKE'
                break
              case 4:
                qt = 'RIGHT_LIKE'
                break
              case 5:
                qt = 'LEFT_LIKE'
                break
              case 6:
                qt = 'IN'
                break
              default:
                qt = 'LIKE'
                break
            }
          }
          break
        case 'int':
        case 'number':
          if (op) {
            switch (op) {
              case 1:
                qt = 'EQUAL'
                break
              case 2:
                qt = 'GREAT'
                break
              case 3:
                qt = 'LESS'
                break
              case 4:
                qt = 'GREAT_EQUAL'
                break
              case 5:
                qt = 'LESS_EQUAL'
                break
              default:
                qt = 'EQUAL'
                break
            }
          }
          break
        case 'date':
          if (op) {
            switch (op) {
              case 1:
                qt = 'EQUAL'
                break
              case 2:
                qt = 'GREAT'
                break
              case 3:
                qt = 'LESS'
                break
              case 4:
                qt = 'GREAT_EQUAL'
                break
              case 5:
                qt = 'LESS_EQUAL'
                break
              case 6:
                qt = 'between'
                break
              default:
                qt = 'EQUAL'
                break
            }
          }
          break
        default:
          qt = 'equal'
          break
      }
      return qt
    },
    getSelectorOptions(type) {
      let selector = 'userSelector'
      switch (type) {
        case 'RoleDialog':
          selector = 'roleSelector'
          break
        case 'PostDialog':
          selector = 'postSelector'
          break
        case 'OrgDialog':
          selector = 'orgSelector'
          break
        default:
          selector = 'userSelector'
          break
      }
      return selector
    },
    getOpOptions(type, _case) {
      let options = {
        varchar: [
          {key:  _case && _case === 'equal' ? 'equal' : '1', value: '='},
          {key: '2', value: '!='},
          {key: '3', value: 'like'},
          {key: '4', value: 'left_like'},
          {key: '5', value: 'right_like'},
          {key: '6', value: 'in'}
        ],
        clob: [
          {key:  _case && _case === 'equal' ? 'equal' : '1', value: '='},
          {key: '2', value: '!='},
          {key: '3', value: 'like'},
          {key: '4', value: 'left_like'},
          {key: '5', value: 'right_like'},
          {key: '6', value: 'in'}
        ],
        number: [
          {key:  _case && _case === 'equal' ? 'equal' : '1', value: '='},
          {key: '2', value: '>'},
          {key: '3', value: '<'},
          {key: '4', value: '>='},
          {key: '5', value: '<='}
        ],
        int: [
          {key:  _case && _case === 'equal' ? 'equal' : '1', value: '='},
          {key: '2', value: '>'},
          {key: '3', value: '<'},
          {key: '4', value: '>='},
          {key: '5', value: '<='}
        ],
        date: [
          {key:  _case && _case === 'equal' ? 'equal' : '1', value: '='},
          {key: '2', value: '>'},
          {key: '3', value: '<'},
          {key: '4', value: '>='},
          {key: '5', value: '<='},
          {key: '6', value: '日期范围'}
        ]
      }
      let otherOption = [
        {key:  _case && _case === 'equal' ? 'equal' : '1', value: '='},
        {key: '2', value: '>'},
        {key: '3', value: '<'},
        {key: '4', value: '>='},
        {key: '5', value: '<='}
      ]
      if (options[type]) {
        return options[type]
      } else {
        return otherOption
      }
    },
    changeQt(row, index) {
      let qt = this.getQueryType(row.ty, row.op)
      this.conditionFields[index].qt = qt
      this.conditionFields[index].defaultValue = null
    },
    initMpDisplay(row) {
      this.$set(row, 'mpDisplay', '2')
    },
    controlTypeChange(index, row) {
      this.conditionFields[index].controlContent = ''
      this.$set(row, 'ty', row.ty)
      this.$set(row, 'validateList', [])
      this.$set(row, 'validate', '')
      if (this.conditionFields[index].ct == 'select') {
        this.$set(this.conditionFields[index], 'option', this.option)
      }
    },
    // 通过字段获取字段所属表名
    getTableNameByField(field) {
      // 解构字段的属性
      const {joinTableField, colPrefix, desc, name} = field
      // 非关联表时直接返回主表的表名缩写
      if (!joinTableField) {
        return 't'
      }
      // 默认获取当前表单列表的主表
      let tableName = this.data.tableName
      // 当前表单列表的所有表数组
      const fieldArrs = this.data.fields
      fieldArrs.forEach(arr => {
        arr.fields.forEach(f => {
          // 如果该表下面的字段的以下三个属性和传入字段的一致，认为该字段属于该表
          if (f.colPrefix == colPrefix && f.desc == desc && f.name == name) {
            // 获取到表名
            tableName = arr.name
          }
        })
      })
      return tableName
    },
    //查询字段校验设置
    validateChange(index, row) {
      this.controlTypes &&
        this.controlTypes.filter(item => {
          if (item.key == row.ct) {
            row.validateType = item.options.validateType
          }
        })
      //数字类型的校验规则
      if (row.ty == 'number' && row.ct == 'onetext') {
        row.validateType =
          'min_value|max_value|confirmed|numeric|between|digits|required|row_unique|frontJSValidate|mobile'
      }
      this.$refs.ValidateDialog.handleOpen(row)
    },
    //保存表单提交校验配置信息
    formSubmitVerificationOk(verification) {
      this.conditionFields.forEach(item => {
        if (item.name == verification.name) {
          item.validateList = verification.validateList
          item.validate = verification.validate
        }
      })
    },
    changeTime(row, index, e) {
      this.$forceUpdate()
      this.$set(row, 'defaultValue', e)
    },
    /**
     * 国际化配置
     */
    editI18nMessage(columnName) {
      this.i18nMessageKey = `formTemplate.${this.dataTemplate.alias}.search.${columnName}`
      this.$refs.i18nMessageEdit.handleOpen()
    },
    afterSaveI18n(data) {
      //保存后做一些数据处理
      data.key = data.key.replace('$', '#')
      this.dataTemplate.desc = data.key
      this.dataTemplate.desc_zh = data.desc
    }
  }
}
</script>
<style lang="scss" scoped>
.el-table >>> .el-radio-group {
  margin-left: 10px;
  margin-right: 10px;
}

.mobile-btn {
  &:focus {
    border: 1px solid #dcdfe6;
    color: #606266;
  }
}

.is-active__btn {
  border: 1px solid #409eff;
  background: #409eff;
  color: #fff;

  &:focus {
    color: #fff;
  }
}

/deep/.default-row > .cell {
  overflow: visible !important;
}

/deep/.el-button--mini {
  padding: 7px;
}

.tablebox {
  /deep/ .el-table--scrollable-x .el-table__body-wrapper {
    overflow: auto !important;
  }

  /deep/.el-table__fixed-right-patch {
    background-color: #f5f7fa !important;
  }
}
</style>