<template>
  <div>
    <el-row style="background: #f6f6f6;padding-top: 18px">
      <el-form
        :model="ganttConfig"
        ref="ganttConfig"
        :rules="ganttConfigRules"
        :inline="true"
        label-width="140px"
      >
        <el-col :span="8">
          <el-form-item label="开始时间字段" prop="startTimeField">
            <template slot="label">
              <el-tooltip content="绑定的时间字段值不能为空" placement="top">
                <i class="icon-my-todo-comment" style="margin-right:4px"></i>
              </el-tooltip>
              <span>开始时间字段</span>
            </template>
            <el-select
              clearable
              style="width: calc((100vw - 600px) / 3)"
              value-key="name"
              v-model="ganttConfig.startTimeField"
            >
              <el-option-group
                v-for="group in displaySettingFields"
                :key="group.name"
                :label="group.desc"
              >
                <el-option
                  v-for="item in group.fields.filter(f => f.type == 'date')"
                  :key="item.name"
                  :label="item.desc"
                  :value="item"
                >
                  <span style="float: left">
                    {{
                      item.desc + '(' + item.name + ')' + '(' + item.type + ')'
                    }}
                  </span>
                </el-option>
              </el-option-group>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="完成时间字段" prop="completeTimeField">
            <template slot="label">
              <el-tooltip content="绑定的时间字段值不能为空" placement="top">
                <i class="icon-my-todo-comment" style="margin-right:4px"></i>
              </el-tooltip>
              <span>完成时间字段</span>
            </template>
            <el-select
              clearable
              style="width: calc((100vw - 600px) / 3)"
              value-key="name"
              v-model="ganttConfig.completeTimeField"
            >
              <el-option-group
                v-for="group in displaySettingFields"
                :key="group.name"
                :label="group.desc"
              >
                <el-option
                  v-for="item in group.fields.filter(f => f.type == 'date')"
                  :key="item.name"
                  :label="item.desc"
                  :value="item"
                >
                  <span style="float: left">
                    {{
                      item.desc + '(' + item.name + ')' + '(' + item.type + ')'
                    }}
                  </span>
                </el-option>
              </el-option-group>
            </el-select>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="8">
          <ht-form-item label="任务条字段">
            <el-select
              clearable
              style="width: calc((100vw - 600px) / 3)"
              value-key="name"
              v-model="ganttConfig.taskField"
            >
              <el-option-group
                v-for="group in displaySettingFields"
                :key="group.name"
                :label="group.desc"
              >
                <el-option
                  v-for="item in group.fields"
                  :key="item.name"
                  :label="item.desc"
                  :value="item"
                >
                  <span style="float: left">
                    {{
                      item.desc + '(' + item.name + ')' + '(' + item.type + ')'
                    }}
                  </span>
                </el-option>
              </el-option-group>
            </el-select>
          </ht-form-item>
        </el-col> -->

        <el-col :span="8">
          <ht-form-item label="前置任务字段">
            <el-select
              clearable
              style="width: calc((100vw - 600px) / 3);margin-right: 16px"
              value-key="name"
              v-model="ganttConfig.preTaskField"
            >
              <el-option-group
                v-for="group in displaySettingFields"
                :key="group.name"
                :label="group.desc"
              >
                <el-option
                  v-for="item in group.fields"
                  :key="item.name"
                  :label="item.desc"
                  :value="item"
                >
                  <span style="float: left">
                    {{
                      item.desc + '(' + item.name + ')' + '(' + item.type + ')'
                    }}
                  </span>
                </el-option>
              </el-option-group>
            </el-select>
          </ht-form-item>
        </el-col>

        <!--         <ht-form-item label="前置任务关联字段" label-width="160px">-->
        <!--          <template slot="label">-->
        <!--            <span>前置任务关联字段</span>-->
        <!--          </template>-->
        <!--          <el-select-->
        <!--            value-key="name"-->
        <!--            v-model="ganttConfig.preTaskField"-->
        <!--            clearable-->
        <!--          >-->
        <!--            <el-option-group-->
        <!--              v-for="group in displaySettingFields"-->
        <!--              :key="group.name"-->
        <!--              :label="group.desc"-->
        <!--            >-->
        <!--              <el-option-->
        <!--                v-for="item in group.fields"-->
        <!--                :key="item.name"-->
        <!--                :label="item.desc"-->
        <!--                :value="item"-->
        <!--              >-->
        <!--                <span style="float: left">-->
        <!--                  {{-->
        <!--                    item.desc + '(' + item.name + ')' + '(' + item.type + ')'-->
        <!--                  }}-->
        <!--                </span>-->
        <!--              </el-option>-->
        <!--            </el-option-group>-->
        <!--          </el-select>-->
        <!--        </ht-form-item>-->
        <el-col :span="16">
          <ht-form-item label="进度字段">
            <!--            <template slot="label">-->
            <!--              <el-tooltip-->
            <!--                  content="需要绑定数字类型字段"-->
            <!--                  placement="top"-->
            <!--              >-->
            <!--                <i class="el-icon-info"></i>-->
            <!--              </el-tooltip>-->
            <!--              <span>进度字段</span>-->
            <!--            </template>-->

            <el-select
              style="width: calc((100vw - 600px) / 3);margin-right: 16px"
              value-key="name"
              v-model="ganttConfig.processField"
              clearable
            >
              <el-option-group
                v-for="group in displaySettingFields"
                :key="group.name"
                :label="group.desc"
              >
                <el-option
                  v-for="item in group.fields.filter(
                    f => f.type == 'number' && !f.disableUpdate
                  )"
                  :key="item.name"
                  :label="item.desc"
                  :value="item"
                >
                  <span style="float: left">
                    {{
                      item.desc + '(' + item.name + ')' + '(' + item.type + ')'
                    }}
                  </span>
                </el-option>
              </el-option-group>
            </el-select>
            <el-checkbox v-model="ganttConfig.process100" label="true"
              >进度乘以100显示</el-checkbox
            >
            <!-- <el-radio v-model="ganttConfig.process100" label="false">进度百分号显示</el-radio> -->
            <!--            <el-switch-->
            <!--                v-if="ganttConfig.processField"-->
            <!--                v-model="ganttConfig.process100"-->
            <!--                inactive-text="进度乘以100展示">-->
            <!--            </el-switch>-->

            <!-- <el-switch
              v-if="ganttConfig.processField"
              v-model="ganttConfig.addPercentSign"
              inactive-text="进度添加百分号">
            </el-switch> -->
          </ht-form-item>
        </el-col>
      </el-form>

      <!--      <el-form  style="margin: 0;" :inline="true" class="filter-tree__form">-->
      <!--        <ht-form-item label="进度字段" label-width="160px">-->
      <!--          <template slot="label">-->
      <!--            <el-tooltip-->
      <!--                content="需要绑定数字类型字段"-->
      <!--                placement="top"-->
      <!--              >-->
      <!--              <i class="el-icon-info"></i>-->
      <!--            </el-tooltip>-->
      <!--&lt;!&ndash;            <span>进度字段</span>&ndash;&gt;-->
      <!--          </template>-->

      <!--          <el-select-->
      <!--            value-key="name"-->
      <!--            v-model="ganttConfig.processField"-->
      <!--            clearable-->
      <!--          >-->
      <!--            <el-option-group-->
      <!--              v-for="group in displaySettingFields"-->
      <!--              :key="group.name"-->
      <!--              :label="group.desc"-->
      <!--            >-->
      <!--              <el-option-->
      <!--                v-for="item in group.fields.filter((f)=> f.type =='number')"-->
      <!--                :key="item.name"-->
      <!--                :label="item.desc"-->
      <!--                :value="item"-->
      <!--              >-->
      <!--                <span style="float: left">-->
      <!--                  {{-->
      <!--                    item.desc + '(' + item.name + ')' + '(' + item.type + ')'-->
      <!--                  }}-->
      <!--                </span>-->
      <!--              </el-option>-->
      <!--            </el-option-group>-->
      <!--          </el-select>-->

      <!--          <el-switch-->
      <!--            v-if="ganttConfig.processField"-->
      <!--            v-model="ganttConfig.process100"-->
      <!--            inactive-text="进度乘以100展示">-->
      <!--          </el-switch>-->

      <!--          &lt;!&ndash; <el-switch-->
      <!--            v-if="ganttConfig.processField"-->
      <!--            v-model="ganttConfig.addPercentSign"-->
      <!--            inactive-text="进度添加百分号">-->
      <!--          </el-switch> &ndash;&gt;-->

      <!--        </ht-form-item>-->

      <!--      </el-form>-->
    </el-row>
    <el-row style="width: 100%">
      <h3>配置显示字段</h3>
      <el-col :span="7">
        <div class="tablebox">
          <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>
        </div>
      </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="显示名"
              cell-class-name="requireCell"
            >
              <template slot="header">
                <span style="color:#E55555;margin-right: 4px;">*</span>
                <span class="tableHeader">显示名</span>
              </template>
              <template scope="scope">
                <ht-input
                  style="width: 100%;"
                  v-model="scope.row.cm"
                  placeholder="请输入显示名称"
                  maxlength="50"
                  show-word-limit
                  validate="required"
                >
                  <el-button
                    icon="icon-guojihua"
                    slot="append"
                    style="width: 50px"
                    @click="editI18nMessage(scope.row.name)"
                  >
                  </el-button>
                </ht-input>
              </template>
            </el-table-column>

            <el-table-column
              prop="cp"
              label="显示位置"
              cell-class-name="requireCell"
            >
              <template slot="header">
                <span style="color:#E55555;margin-right: 4px;">*</span>
                <span class="tableHeader">显示位置</span>
              </template>
              <template scope="scope">
                <ht-select
                  v-model="scope.row.cp"
                  multiple
                  permission="b"
                  :options="[
                    {key: '1', value: '左侧列表'},
                    {key: '2', value: '悬浮框'}
                  ]"
                  validate="required"
                ></ht-select>
              </template>
            </el-table-column>

            <el-table-column prop="width" label="列宽" width="270">
              <template slot-scope="{row}">
                <div v-if="row.cp && row.cp.indexOf('1') > -1">
                  <el-input
                    style="width: calc(100% - 20px)"
                    v-model="row.width"
                    onkeyup="value = value.replace(/^(0+)|[^\d]+/g,'')"
                    maxlength="8"
                    placeholder="默认120px"
                  />&nbsp;px
                </div>
                <!--                @input="handleInput(row)"-->
              </template>
            </el-table-column>

            <el-table-column label="管理" width="240" fixed="right">
              <template slot="header" slot-scope="scope">
                <span style="margin-right: 10px">管理</span>
                <el-button
                  @click="handleClearSelected"
                  type="primary"
                  size="small"
                  style="padding: 5px"
                  v-show="conditionFields && conditionFields.length > 0"
                  >清空</el-button
                >
              </template>
              <template slot-scope="scope">
                <el-button
                  @click="sort(scope.$index, 'up')"
                  size="mini"
                  title="上移"
                  type="text"
                  :disabled="scope.$index === 0"
                  >上移</el-button
                >
                <el-button
                  @click="sort(scope.$index, 'down')"
                  title="下移"
                  type="text"
                  :disabled="scope.$index === conditionFields.length - 1"
                  >下移</el-button
                >
                <el-button
                  @click="remove(scope.$index, scope.row)"
                  title="删除"
                  type="text"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-col>
    </el-row>

    <i18n-message-edit
      ref="i18nMessageEdit"
      :messageKey="i18nMessageKey"
      @after-save="afterSaveI18n"
    />
  </div>
</template>

<script>
import {mapGetters} from 'vuex'
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: 'gantt-config',
  components: {
    templateCtrlFieldDialog,
    ValidateDialog,
    i18nMessageEdit
  },
  props: ['data'],
  data() {
    return {
      btnType: BTN_TYPE, //移动端显示隐藏按钮
      dataTemplate: {},
      conditionSettingFields: [],
      conditionFields: [],
      tabHeight: `${document.documentElement.clientHeight}` - 245,
      editField: {},
      editFieldIndex: -1,
      option: {
        choiceType: 'static',
        customQuery: {}
      },
      i18nMessageKey: '',
      selections: [],
      ganttConfig: {},
      ganttConfigRules: {
        startTimeField: [{required: true, message: '必填', trigger: 'change'}],
        completeTimeField: [
          {required: true, message: '必填', trigger: 'change'}
        ]
      }
    }
  },
  computed: {
    ...mapGetters('form', {
      displaySettingFields: 'displayFormListCommonVar'
    }),
    calOptions: function() {
      return [
        {key: 100, value: '按100计算'},
        {key: 10, value: '按10计算'},
        {key: 1, value: '按1计算'},
        {key: this.selectedRow.diyProRule, value: '输入统计总数'}
      ]
    },
    formVariables() {
      return this.displaySettingFields.map(item => {
        return {
          ...item,
          fields: item.fields.map(it => {
            const fieldName = it.oldTableField
              ? `${it.tableName}${it.oldTableField}`
              : it.name
            return {
              ...it,
              name: it.oldTableField
                ? fieldName.toLowerCase().replaceAll('_', '')
                : fieldName
            }
          })
        }
      })
    }
  },
  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: {
    async handleInput(row) {
      await this.$nextTick()
      if (row && row.width && typeof row.width == 'string') {
        const regex = /^[1-9]\d*$/
        // 使用正则表达式匹配并过滤非数字字符
        const width = row.width.replace(/[^\d]|^(0+)/g, '')
        // 如果输入合法，则将过滤后的值设置到 data 中
        if (regex.test(width)) {
          row.width = parseInt(width)
        }
        // 否则将原先的值恢复
        else {
          row.width = row.width
        }
      }
    },
    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')
    },
    //保存甘特图配置
    saveGanttConfig() {
      let requiredArr = []
      let flag = false
      this.$refs.ganttConfig.validate(validate => {
        console.log(validate, 'validate')
        if (!this.ganttConfig.startTimeField) {
          requiredArr.push('开始时间字段')
        }

        if (!this.ganttConfig.completeTimeField) {
          requiredArr.push('完成时间字段')
        }
        this.conditionFields.forEach(c => {
          if (!c.cm) {
            requiredArr.push('显示名')
          }

          if (!c.cp) {
            requiredArr.push('显示位置')
          }
        })
        if (requiredArr.length > 0) {
          this.$message.error(
            '甘特图配置：【' + requiredArr.join(',') + '】,不能为空'
          )
          return false
        }
        if (
          this.ganttConfig.startTimeField.name ==
          this.ganttConfig.completeTimeField.name
        ) {
          this.$message.error('甘特图配置：开始时间字段和完成时间字段不能相同')
          return false
        }
        if (!validate) return
        this.ganttConfig.tipFields = this.conditionFields
          ? JSON.stringify(this.conditionFields)
          : null
        this.dataTemplate.ganttConfig = Base64.encode(
          JSON.stringify(this.ganttConfig)
        )
        flag = true
      })

      return flag
    },
    //初始化处理
    initData() {
      if (!this.dataTemplate.ganttConfig) {
        this.ganttConfig = {}
      } else {
        this.ganttConfig = JSON.parse(
          Base64.decode(JSON.stringify(this.dataTemplate.ganttConfig))
        )
      }
      if (this.ganttConfig && this.ganttConfig.tipFields) {
        this.conditionFields = JSON.parse(this.ganttConfig.tipFields)
      }
      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'
        }
        if (!this.isInConditionFields(obj.name)) {
          let field = this.getConditionField(obj)
          field.width = field.width || 120
          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.conditionFields.splice(index, 1)
    },
    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.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
    },

    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}.gantt.${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;
  }
}
::v-deep {
  .el-table,
  .el-table .cell,
  .el-table__body-wrapper {
    overflow: visible;
  }
  .el-form-item__error {
    z-index: 10;
    padding-top: 0;
  }
}
::v-deep .el-table--scrollable-y .el-table__body-wrapper {
  overflow: auto !important;
}
::v-deep .el-table th.gutter {
  display: none !important;
  width: 0 !important;
}
::v-deep .el-table colgroup col[name='gutter'] {
  display: none !important;
  width: 0 !important;
}
::v-deep .el-table__body {
  width: 100% !important;
}
::v-deep .el-table .cell {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
::v-deep .el-table .cell:has(.el-form-item__error) {
  overflow: unset !important;
}
</style>
