<template>
  <el-dialog
    title="配置动态规则"
    width="1280px"
    append-to-body
    top="8vh"
    :visible.sync="selectQueryDialog"
    v-if="selectQueryDialog"
    :close-on-click-modal="false"
    custom-class="dynamic-control-dia"
  >
    <el-button
      icon="el-icon-plus"
      style="margin-bottom: 5px;"
      @click="addNewItem"
      >添加规则</el-button
    >
    <table class="form-table" cellspacing="0" cellpadding="0" border="0">
      <tbody>
        <tr class="linkageTable-tr">
          <td width="200px;">监听值</td>
          <td width="170">条件</td>
          <td width="170">字段类型</td>
          <td width="170">具体值</td>
          <td width="170">变换字段</td>
          <td width="170">影响策略</td>
          <td width="100px">操作</td>
        </tr>
        <tr v-for="(column, index) in tableList" :key="index">
          <td width="200px;">
            <ht-select
              :filterable="true"
              clearable
              v-model="column.watchPath"
              :options="mainBoFields"
              :props="{key: 'name', value: 'desc'}"
              style="width: 100%;"
            >
              <template slot-scope="{options}">
                <el-option-group
                  v-for="(group, idenxOptions) in options"
                  :key="idenxOptions"
                  :label="group.desc"
                >
                  <el-option
                    v-for="item in group.children"
                    :key="item.id"
                    :label="item.desc"
                    :value="'data.' + item.path + '.' + item.name"
                  ></el-option>
                </el-option-group>
              </template>
            </ht-select>
          </td>
          <td colspan="5">
            <table
              cellspacing="0"
              cellpadding="0"
              border="0"
              style="width: 100%"
            >
              <tr v-for="(effects, index1) in column.effect" :key="index1">
                <!-- 条件 -->
                <td
                  width="150"
                  style="padding-right: 10px;padding-bottom: 10px;"
                >
                  <ht-select
                    v-model="effects.condition"
                    :options="conditionOption"
                    clearable
                    style="width: 100%"
                  />
                </td>
                <!-- 字段类型 -->
                <td
                  width="160"
                  style="padding-right: 10px;padding-bottom: 10px;"
                >
                  <ht-select
                    v-model="effects.fieldType"
                    :options="typeOption"
                    clearable
                    style="width: 100%"
                  />
                </td>
                <!-- 具体值 -->
                <td
                  width="160"
                  style="padding-right: 10px;padding-bottom: 10px;"
                >
                  <!-- 固定值时自己输入 -->
                  <ht-input
                    v-if="effects.fieldType == 'fixed'"
                    v-model="effects.fixedValue"
                    style="width: 100%"
                  ></ht-input>
                  <ht-select
                    v-else
                    :filterable="true"
                    clearable
                    v-model="effects.varValue"
                    :options="mainBoFields"
                    :props="{key: 'name', value: 'desc'}"
                    style="width: 100%;"
                  >
                    <template slot-scope="{options}">
                      <el-option-group
                        v-for="(group, idenxOptions) in options"
                        :key="idenxOptions"
                        :label="group.desc"
                      >
                        <el-option
                          v-for="item in group.children"
                          :key="item.id"
                          :label="item.desc"
                          :value="'data.' + item.path + '.' + item.name"
                        ></el-option>
                      </el-option-group>
                    </template>
                  </ht-select>
                </td>
                <!-- 变换字段 -->
                <td
                  width="160"
                  style="padding-right: 10px;padding-bottom: 10px;"
                >
                  <ht-select
                    v-model="effects.changeField"
                    :options="mainBoFields"
                    clearable
                    :filterable="true"
                    :props="{key: 'name', value: 'desc'}"
                    style="width: 100%;"
                  >
                    <template slot-scope="{options}">
                      <el-option-group
                        v-for="(group, idenxOptions) in options"
                        :key="idenxOptions"
                        :label="group.desc"
                      >
                        <el-option
                          v-for="item in group.children"
                          :key="item.id"
                          :label="item.desc"
                          :value="getEffectsTarget(group, item)"
                        ></el-option>
                      </el-option-group>
                    </template>
                  </ht-select>
                </td>
                <!-- 影响策略 -->
                <td style="padding-bottom: 10px;">
                  <ht-select
                    v-model="effects.effectResult"
                    :options="effectsOption"
                    style="width: 100%;"
                  />
                </td>
                <td
                  width="40px"
                  style="text-align: center;padding-bottom: 10px;"
                >
                  <el-button
                    type="text"
                    icon="el-icon-delete"
                    @click="column.effect.splice(index1, 1)"
                  ></el-button>
                </td>
              </tr>
            </table>
          </td>
          <td width="100px">
            <div style="display: flex; justify-content: center">
              <el-button
                class="btn-padding"
                style="margin-left: 5px"
                icon="el-icon-plus"
                @click="addEffectObj(column.effect)"
              ></el-button>
              <el-button
                icon="el-icon-document-copy"
                class="btn-padding"
                @click="copyEffect(column)"
              ></el-button>
              <el-button
                icon="el-icon-delete"
                class="btn-padding"
                @click="tableList.remove(column)"
              ></el-button>
            </div>
          </td>
        </tr>
      </tbody>
    </table>

    <div slot="footer" class="dialog-footer">
      <el-button @click="selectQueryDialog = false">取消</el-button>
      <el-button type="primary" @click="confirm" size="small">确定</el-button>
    </div>
  </el-dialog>
</template>
<script>
export default {
  name: 'DynamicControlDialog',
  components: {},
  data() {
    return {
      effectsOption: [
        // {key: 'w', value: '显示'},
        {key: 'n', value: '隐藏'},
        {key: 'b', value: '必填'},
        {key: 'r', value: '只读'}
      ],
      conditionOption: [
        {key: '==', value: '等于'},
        {key: '!=', value: '不等于'},
        {key: '>', value: '大于'},
        {key: '<', value: '小于'},
        {key: '>=', value: '大于等于'},
        {key: '<=', value: '小于等于'}
      ],
      typeOption: [
        {key: 'fixed', value: '固定值'},
        {key: 'variable', value: '变量'}
      ],
      effectObj: {
        condition: '==', // 条件
        fieldType: 'fixed', // 固定值fixed 变量variable
        changeField: '', // 变换字段
        fixedValue: '', // 固定值
        varValue: '', // 动态值时要取值的字段
        effectResult: 'n' // 变换策略
      },
      tableList: [], // 规则数据
      selectQueryDialog: false
    }
  },
  props: ['mainBoFields', 'formData'],
  methods: {
    getEffectsTarget(group, item) {
      let groupName = group.name === 'noAttrField' ? item.tableName : group.name
      return groupName + '.' + item.name
    },
    copyEffect(column) {
      this.tableList.push(JSON.parse(JSON.stringify(column)))
    },
    addEffectObj(effect) {
      let cloneObj = JSON.parse(JSON.stringify(this.effectObj))
      effect.push(cloneObj)
    },
    addNewItem() {
      this.tableList.push({
        watchPath: '',
        effect: [
          {
            condition: '==', // 条件
            fieldType: 'fixed', // 固定值fixed 变量variable
            fixedValue: '', // 固定值
            varValue: '', // 动态值时要取值的字段
            changeField: '', // 变换字段
            effectResult: 'n' // 变换策略
          }
        ]
      })
    },
    showDialog(data) {
      if (data && data.globalDynamicControl) {
        this.tableList = JSON.parse(data.globalDynamicControl)
      } else {
        this.tableList = []
      }
      this.selectQueryDialog = true
    },
    confirm() {
      this.$emit('confirm-dynamic', JSON.stringify(this.tableList))
      // let formSetting = JSON.parse(this.formData.formSetting)
      // formSetting.dynamicControl = this.tableList
      // this.formData.formSetting = JSON.stringify(formSetting)
      this.selectQueryDialog = false
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep .dynamic-control-dia {
  .el-dialog__body {
    max-height: 600px;
    overflow-y: auto;
  }
}
</style>