<template>
  <div>
    <el-row :gutter="0" justify="space-around" style="background: #f6f6f6;padding-top: 18px">
      <el-form :model="xmindConfig" ref="xmindConfig" :inline="true" label-width="130px" class="form-container" :rules="xmindConfigRules">
        <el-col :span="8">
          <el-form-item label="主题字段" prop="topicField">
            <el-select
                style="width: calc((100vw - 600px) / 3)"
                value-key="name"
                clearable
                v-model="xmindConfig.topicField"
            >
              <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>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="上下级关系外键" label-width="130px" prop="pidField">
            <el-select
                clearable
                style="width: calc((100vw - 600px) / 3)"
                value-key="name"
                v-model="xmindConfig.pidField"
            >
              <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>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="上下级关系主键" label-width="140px" prop="pkField">
            <template slot="label">
              <el-tooltip
                  content="配合上下级关系外键，确定上下级关系。不配则取主键，配置了需要保证唯一。"
                  placement="top"
              >
                <i class="el-icon-info"></i>
              </el-tooltip>
              <span>上下级关系主键</span>
            </template>

            <el-select
                clearable
                style="width: calc((100vw - 600px) / 3)"
                value-key="name"
                v-model="xmindConfig.pkField"
            >
              <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>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="主题颜色" prop="themeColor">
            <div class="config_theme">
              <el-input v-model="xmindConfig.themeColor" readonly></el-input>
              <el-color-picker
                v-model="xmindConfig.themeColor"
                :predefine="predefineColors"
                @change="changeTheme">
              </el-color-picker>
            </div>
          </el-form-item>
        </el-col>
      </el-form>
    </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',
}

const themeList = [{name:'primary',color:'#428bca'},{name:'warning',color:'#f0ad4e'},{name:'danger',color:'#d9534f'},
{name:'success',color:'#5cb85c'},{name:'info',color:'#5dc0de'},{name:'greensea',color:'#1abc9c'},{name:'nephrite',color:'#2ecc71'},
{name:'belizehole',color:'#3498db'},{name:'wisteria',color:'#9b59b6'},{name:'asphalt',color:'#34495e'},{name:'orange',color:'#f1c40f'},
{name:'pumpkin',color:'#e67e22'},{name:'pomegranate',color:'#e74c3c'},{name:'clouds',color:'#ecf0f1'},{name:'asbestos',color:'#95a5a6'}]

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: [],
      xmindConfig: {},
      themeList: themeList,
      predefineColors: themeList.map(i => i.color), // 颜色选择器预设颜色
      xmindConfigRules: {
        topicField: [{ required: true, message: '必填', trigger: 'change' }],
        pidField: [{ required: true, message: '必填', trigger: 'change' }],
        //pkField: [{ required: true, message: '必填', trigger: 'change' }],
        themeColor: [{ 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: {
    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')
    },
    //保存思维导图配置
    saveXmindConfig() {
      let flag = false
      this.$refs.xmindConfig.validate(validate => {
        let requiredArr = []
        if (!this.xmindConfig.topicField) {
          requiredArr.push('主题字段')
        }

        if (!this.xmindConfig.pidField) {
          requiredArr.push('上下级关系外键')
        }
        // if (!this.xmindConfig.pkField) {
        //   requiredArr.push('上下级关系主键')
        // }
        if (!this.xmindConfig.theme) {
          requiredArr.push('主题颜色')
        }

        if (requiredArr.length > 0) {
          this.$message.error(
            '思维导图：【' +
              requiredArr.join(',') +
              '】,不能为空'
          )
          return false
        }
        if(!validate) return
        this.xmindConfig.tipFields = this.conditionFields
          ? JSON.stringify(this.conditionFields)
          : null
        this.dataTemplate.xmindConfig = Base64.encode(JSON.stringify(this.xmindConfig))
        flag = true
      })
      return flag
    },
    //初始化处理
    initData() {
      if (!this.dataTemplate.xmindConfig) {
        this.xmindConfig = {}
      } else {
        this.xmindConfig = JSON.parse(Base64.decode(JSON.stringify(this.dataTemplate.xmindConfig)))
      }
      if (this.xmindConfig && this.xmindConfig.tipFields) {
        this.conditionFields = JSON.parse(this.xmindConfig.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)
          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}.search.${columnName}`
      this.$refs.i18nMessageEdit.handleOpen()
    },
    afterSaveI18n(data) {
      //保存后做一些数据处理
      data.key = data.key.replace('$', '#')
      this.dataTemplate.desc = data.key
      this.dataTemplate.desc_zh = data.desc
    },
    changeTheme(val) {
      const currentTheme = themeList.find(i => i.color.toUpperCase() === val)
      if(currentTheme) {
        this.xmindConfig.theme = currentTheme.name
      } else {
        // 除了预选15种以外的颜色，即为自定义主题
        this.xmindConfig.theme = 'customTheme'
      }
    }
  },
}
</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;
  }
}

.form-container {
  //margin-right: 30px;
}

/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;
  }
}
.config_theme {
  display: flex;
  align-items: center;
}
</style>