<script>
import { getOperators } from "./operators";
import { Columns } from "../colums";
import { getDicts as getDicts } from "@/api/system/dict/data";
export default {
  name: "Sizer",
  props: {
    value: {
      type: [Array],
      require: true,
    },
    candidate: {
      type: [Array],
      require: true,
    },
  },
  components: {
    ElDraggable: () => import("@/components/draggable/index.vue"),
    ElFileUpload: () => import("@/components/FileUpload/index.vue"),
    ElPopoverSelectV2: () => import("@/components/popover-select-v2/index.vue"),
    ElPopoverMultipleSelectV2: () =>
      import("@/components/popover-select-v2/multiple.vue"),
    ElPopoverTreeSelect: () =>
      import("@/components/popover-tree-select/index.vue"),
    ElPopoverMultipleTreeSelect: () =>
      import("@/components/popover-tree-select/multiple.vue"),
    ElDateWrapper: () => import("@/components/date-wrapper/index.vue"),
  },
  computed: {
    innerValue: {
      get() {
        return this.$props.value;
      },
      set(value) {
        this.$emit("input", value);
      },
    },
  },
  data() {
    return {
      showColumns: Columns,
    };
  },
  methods: {
    // 增
    onRowAdd() {
      this.innerValue.push({
        ...this.$init.params([...this.showColumns]),
        attr: {
          is: "el-input",
        },
      });
    },
    // 删
    onRowRemove(prop) {
      console.log(prop, "prop");
      const { $index, row } = prop;
      this.innerValue.splice($index, 1);
    },
    // 条件选择
    canidateChange(prop) {
      let { $index, row } = prop;

      let selectValue = this.candidate.filter(
        ({ item }) => item.key === row.candidate
      )[0];

      let operators = selectValue
        ? getOperators(this.judgeOperatorType(selectValue.attr))
        : [];

      let attr = selectValue.attr ? selectValue.attr : { is: "el-input" };
      console.log(attr.is, "attr");

      // 方案存储
      this.innerValue = this.innerValue.map((tableItem, index) => {
        if (row.candidate === tableItem.candidate && $index === index) {
          tableItem.options = "";

          tableItem.value = "";

          tableItem.operators = operators;

          tableItem.attr = attr;
        }

        return tableItem;
      });

      // 值框的选择
      // this.showColumns = this.showColumns
    },
    // 操作选择
    optionChange(prop) {
      console.log(prop, "prop");
      // this.$emit("update:value",this.innerValue);
    },
    judgeOperatorType(type) {
      switch (type.is) {
        case "el-popover-multiple-select-v2":
          return "array";

        case "el-popover-multiple-tree-select":
          return "array";

        case "el-input-number":
          return "number";

        case "el-date-picker":
          return "datetime";

        case "el-select":
          let dictName = type.dictName;
          if (
            dictName === "sys_number_yes_no" ||
            dictName === "sys_yes_no" ||
            dictName === "sys_true_false"
          ) {
            return "boolean";
          }
          return "string";

        default:
          return "string";
      }
    },
  },
  created() {},
};
</script>

<template>
  <el-main>
    <el-table
      :data="innerValue"
      style="width: 100%"
      :show-header="false"
      :height="320"
      empty-text=" "
      v-bind="$attrs"
      v-on="$listeners"
    >
      <el-table-column
        v-for="({ item, attr }, index) in showColumns"
        :key="item.key + index"
        :prop="item.key"
        :label="item.title"
        :fixed="item.fixed"
        :width="item.width || 200"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <el-select
            v-if="item.key === 'candidate'"
            v-model="scope.row[item.key]"
            :size="$attrs.size"
            filterable
            placeholder="请选择"
            @change="canidateChange(scope)"
          >
            <el-option
              v-for="(c, index) in candidate"
              :key="index + c.item.key"
              :label="c.item.title"
              :value="c.item.key"
            ></el-option>
          </el-select>

          <el-select
            v-if="item.key === 'options'"
            v-model="scope.row[item.key]"
            :size="$attrs.size"
            placeholder="请选择"
            @change="optionChange"
          >
            <el-option
              v-for="op in scope.row['operators']"
              :key="op.value"
              :label="op.label"
              :value="op.value"
            >
            </el-option>
          </el-select>

          <template v-if="item.key === 'value'">
            <component
              v-if="scope.row.attr.is === 'el-select'"
              v-bind="scope.row.attr"
              :size="$attrs.size"
              v-model="scope.row[item.key]"
            >
              <template>
                <el-option
                  v-for="item in dict.type[attr.dictName]"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </template>
            </component>

            <component
              v-if="scope.row.attr.is === 'el-popover-select-v2'"
              v-bind="scope.row.attr"
              v-model="scope.row[item.key]"
              :title="item.title"
              :size="$attrs.size"
              :source.sync="scope.row"
              style="width: 100%"
            ></component>

            <component
              v-if="scope.row.attr.is === 'el-popover-multiple-select-v2'"
              v-bind="scope.row.attr"
              v-model="scope.row[item.key]"
              :title="item.title"
              :size="$attrs.size"
              :source.sync="scope.row"
              style="width: 100%"
            ></component>

            <component
              v-if="scope.row.attr.is === 'el-popover-tree-select'"
              v-bind="scope.row.attr"
              v-model="scope.row[item.key]"
              :size="$attrs.size"
              :source.sync="scope.row"
              @change="$emit('submit')"
              style="width: 100%"
            >
            </component>

            <component
              v-if="scope.row.attr.is === 'el-popover-multiple-tree-select'"
              v-bind="scope.row.attr"
              v-model="scope.row[item.key]"
              :size="$attrs.size"
              :source.sync="scope.row"
              style="width: 100%"
            >
            </component>

            <component
              v-if="scope.row.attr.is === 'el-date-wrapper'"
              v-bind="scope.row.attr"
              v-model="scope.row[item.key]"
              :size="$attrs.size"
              :source.sync="scope.row"
              style="width: 100%"
            >
            </component>

            <component
              v-if="scope.row.attr.is === 'el-input'"
              v-bind="scope.row.attr"
              :size="$attrs.size"
              v-model="scope.row[item.key]"
              style="width: 100%"
            >
            </component>
          </template>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="50">
        <template slot-scope="scope">
          <i
            class="el-icon-delete"
            @click.prevent="onRowRemove(scope)"
            style="cursor: pointer"
          ></i>
        </template>
      </el-table-column>
    </el-table>
    <el-row>
      <el-col style="padding-left: 10px">
        <el-button type="text" @click.native.prevent="onRowAdd">
          <i class="el-icon-plus"></i>
          新增筛选条件
        </el-button>
      </el-col>
    </el-row>
  </el-main>
</template>

<style lang="scss" scoped>
::v-deep.el-table::before {
  display: none;
}

::v-deep.el-table {
  th,
  td,
  th.is-leaf {
    border: none;
  }

  .el-table__cell {
    padding: 2px 0;
  }
  .popover-select-v2 .popover-select-v2_tags,
  .popover-tree-select .popover-tree-select_tags {
    left: 15px;
  }
  .el-scrollbar__view {
    padding: 6px 0 0 3px !important;
  }

  .el-scrollbar__wrap {
    overflow-x: hidden;
    margin-right: -2px !important;
  }
}
</style>
