<template>
  <div class="url-and-field">
    <div class="rule-component-item">
      <span class="itemLabel">
        <span v-if="true" class="label-tip">*</span>
        扩展字段:
      </span>
      <div class="itemComponent">
        <Input v-model="item.handleValue" />
      </div>
    </div>
    <div class="rule-component-item">
      <span class="itemLabel">字段名称:</span>
      <div class="itemComponent">
        <DropMultiSelectFilter
          :single="false"
          :data="dropSelectConfig.data"
          :totalRowCount="dropSelectConfig.totalRowCount"
          :pageSize="dropSelectConfig.pageSize"
          :dataEmptyMessage="dropSelectConfig.dataEmptyMessage"
          :columns="dropSelectConfig.columns"
          :AutoData="dropSelectConfig.AutoData"
          :defaultSelected="dropSelectConfig.defaultSelected"
          :isBackRowItem="true"
          @on-fkrp-selected="fkrpSelected"
          @on-page-change="pageChange"
          @on-input-value-change="inputValueChange"
          @on-popper-show="fkrpSelectedPopperShow"
          @on-clear="fkrpSelectedClear"
        ></DropMultiSelectFilter>
          <span
            class="controlTip"
            style="color:#5B85E4;cursor:pointer"
            v-if="item.fornt_presentation_value&&item.fornt_presentation_value.length > 0"
            @click="controlTable"
          >{{selectDetail?'关闭修改':'更改权限'}}</span>
          <span
            class="controlTip"
            style="color:#ccc;cursor:pointer"
            v-if="!item.fornt_presentation_value||item.fornt_presentation_value&&item.fornt_presentation_value.length === 0"
          >更改权限</span>
      </div>
    </div>
    <Table
      v-if="selectDetail"
      border
      :columns="table.columns"
      :data="table.data"
      class="showDetail"
    ></Table>
  </div>
</template>
<script>
export default {
  props: {
    item: {
      type: Object,
      default: () => {
        return {};
      }
    },
    tableConfig: {
      type: Object,
      default: () => {
        return {
          tableId: "14443",
          tableName: "AD_SUBSYSTEM"
        };
      }
    }
  },
  data() {
    return {
      controlMessage: "修改规则",
      dropSelectConfig: {
        data: {},
        totalRowCount: 1,
        pageSize: 10,
        dataEmptyMessage: "数据为空",
        AutoData: [],
        columnsKey: ["value"], //input显示的字段
        columns: ["id"], //模糊搜索隐藏的列
        defaultSelected: []
      },
      selectDetail: false, //控制表格是否显示
      table: {
        columns: [
          {
            title: "常量名",
            key: "keyName"
          },
          {
            title: "常量值",
            key: "keyValue",
            render: (h, params) => {
              return h(
                "Input",
                {
                  class: "isNone",
                  style: {
                    width: "100%",
                    height: "100%"
                  },
                  props: {
                    value: params.row.keyValue,
                    autosize: true
                  },
                  on: {
                    input: val => {
                      if (!this.item.fornt_data) {
                        this.item.fornt_data = {};
                      }
                      this.item.fornt_data[params.row.name] = val;
                    }
                  }
                },
                params.row.keyValue
              );
            }
          },
          {
            title: "操作",
            render: (h, params) => {
              return h(
                "span",
                {
                  style: {
                    color: "rgba(91,133,228,1)"
                  },
                  on: {
                    click: () => {
                      this.table.data.splice(params.index, 1);
                      let findIndex = this.item.fornt_presentation_value.findIndex(
                        itemE => {
                          return params.row.ID === itemE.ID;
                        }
                      );
                      if (findIndex !== -1) {
                        this.item.fornt_presentation_value.splice(findIndex, 1);
                      }
                      this.dropSelectConfig.defaultSelected = this.item.fornt_presentation_value;
                    }
                  }
                },
                "删除"
              );
            }
          }
        ],
        data: []
      }
    };
  },
  methods: {
    fkrpSelected(selected) {
      this.item.fornt_presentation_value = selected;
      this.table.data = this.item.fornt_presentation_value.map(value => {
        let keyValue = "";
        return {
          ID: value.rowItem.ID.val,
          name: value.rowItem.NAME.val,
          keyName: value.rowItem.DESCRIPTION.val,
          keyValue: keyValue
        };
      });
    },
    inputValueChange(value) {
      this.findField({
        DESCRIPTION: value,
        AD_TABLE_ID: this.tableConfig.tableId
      });
    },
    fkrpSelectedClear() {
      this.item.fornt_presentation_value = [];
      this.table.data = [];
      this.selectDetail=false;
    }, //下拉多选清除事件
    pageChange(value) {
      this.findField({
        pageSize: this.dropSelectConfig.pageSize,
        page: value,
        AD_TABLE_ID: this.tableConfig.tableId
      });
    },

    fkrpSelectedPopperShow() {
      this.findField({ AD_TABLE_ID: this.tableConfig.tableId });
    },
    //获取字段名
    findField(param) {
      this.$network.post("/p/c/meta/column/list", param).then(res => {
        if (res.data.code === 0) {
          if (param.hasOwnProperty("DESCRIPTION")) {
            this.dropSelectConfig.AutoData = [];
            this.dropSelectConfig.AutoData = res.data.data.row.reduce(
              (arr, item) => {
                arr.push({
                  value: item.DESCRIPTION.val,
                  id: item.ID.val
                });
                return arr;
              },
              []
            );
          }
          res.data.data.tabth.map(item => {
            if (item.colname === "DESCRIPTION") {
              item.isak = true;
            } else {
              item.isak = false;
            }
            return item;
          });
          this.dropSelectConfig.data = res.data.data;
          this.dropSelectConfig.totalRowCount = res.data.data.totalRowCount;
        }
      });
    },
    controlTable() {
      this.selectDetail = !this.selectDetail;
    } //控制表格是否显示
  },
  created() {
    if (
      this.item.fornt_presentation_value &&
      this.item.fornt_presentation_value.lenth > 0 &&
      this.item.fornt_data &&
      Object.keys(this.item.fornt_data).length > 0
    ) {
      this.dropSelectConfig.defaultSelected = this.item.fornt_presentation_value;
      this.table.data = this.item.fornt_presentation_value.map(value => {
        let keyValue = "";
        Object.keys(this.item.fornt_data).forEach(inner => {
          if (inner === value.rowItem.Name.val) {
            keyValue = this.item.fornt_data[inner];
          }
        });
        return {
          ID: value.rowItem.ID.val,
          name: value.rowItem.NAME.val,
          keyName: value.rowItem.DESCRIPTION.val,
          keyValue: keyValue
        };
      });
      this.selectDetail = true;
    }
  }
};
</script>
<style lang="scss">
.url-and-field {
  width: 100%;
  .rule-component-item {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 8px;

    .itemLabel {
      width: 100px;
      margin-right: 8px;
      text-align: right;
      text-overflow: ellipsis;
      white-space: nowrap;
      display: inline-block;
    }

    .itemComponent {
      flex: 1;
      overflow: hidden;
      &:last-child {
        display: flex;
      }
      #dropDownSelectFilter {
        flex: 1;
      }
      .controlTip {
        width: 49px;
        // color: rgba(91, 133, 228, 1);
        margin-left: 10px;
        line-height: 32px;
      }
    }
    .label-tip {
      color: red;
      font-size: 16px;
      vertical-align: middle;
      position: relative;
      top: -1px;
      right: 3px;
    }
  }
  .showDetail {
    margin-top: 10px;
  }
}
</style>