<script>
import { list, item, remove } from "@/api/material/label";
export default {
  name: "MaterialLabelTable",
  // props: ["columns"],
  data() {
    const initColumns = () => [
      {
        type: "text",
        prop: "name",
        label: "名称",
        required: true,
        showOverflowTooltip: true,
      },
      {
        type: "select",
        prop: "status",
        label: "状态",
        required: true,
        showOverflowTooltip: true,
      },
      {
        type: "text",
        prop: "description",
        label: "说明",
        required: false,
        showOverflowTooltip: true,
      },
    ];
    const initForm = () => {
      let form = {};
      initColumns().forEach((item) => (form[item.prop] = ""));
      return form;
    };
    const initOptions = () =>
      initColumns().map((item) => ({ label: item.label, value: item.prop }));
    return {
      loading: false,
      form: initForm(),
      options: initOptions(),
      currentOption: { prop: "", type: "" },
      columns: initColumns(),
      tableData: [],
      page: { pageNum: 1, pageSize: 25, total: 0 },
    };
  },

  methods: {
    sleep(delay = 1000) {
      let start = +new Date();
      while (+new Date() - start < delay) {}
    },

    fetchList() {
      this.loading = true;
      let data = this.form;
      let { pageNum, pageSize } = this.page;
      list(data, { pageNum, pageSize })
        .then((res) => {
          let { code, rows, total } = res;
          if (code === 200) {
            this.tableData = [];
            this.tableData = rows.map((item) => ({
              ...item,
              hasChildrens: item.childrens.length ? true : false,
            }));
            this.page.total = total;
            this.$message.success("success");
          }
        })
        .finally(() => {
          this.loading = false;
        });
    },

    fetchRemove(prop) {
      let { id } = prop;
      this.loading = true;
      remove({ id })
        .then((res) => {
          let { code } = res;
          if (code === 200) {
            this.$message.success("success");
          }
        })
        .finally(() => {
          this.fetchList();
          this.loading = false;
        });
    },

    onChange(prop) {
      let { prop: _prop, type: _type } = this.columns.find(
        (item) => item.prop === prop
      );
      this.currentOption.prop = _prop;
      this.currentOption.type = _type;
    },

    onSearch() {
      this.page.pageNum = 1;
      this.fetchList();
    },

    onSizeChange(prop) {
      this.page.pageSize = prop;
      this.fetchList();
    },

    onNumberChange(prop) {
      this.page.pageNum = prop;
      this.fetchList();
    },

    onBindLabel(prop) {
      this.$parent.$children
        .find((el) => el.$vnode.tag.indexOf("BindDialog") > -1)
        .fetchItem(prop);
    },

    onAddLabel() {
      this.$parent.$children
        .find((el) => el.$vnode.tag.indexOf("AddDialog") > -1)
        .fetchItem();
    },

    onEditLabel(prop) {
      this.$parent.$children
        .find((el) => el.$vnode.tag.indexOf("EditDialog") > -1)
        .fetchItem(prop);
    },

    onLoad(tree, treeNode, resolve) {
      setTimeout(() => {
        resolve(tree.childrens);
      }, 200);
    },
  },
  created() {
    this.fetchList();
  },
};
</script>

<template>
  <el-container class="material-label-table">
    <el-header>
      <div class="table-header-top">
        <span>查询条件</span>
        <div>
          <div class="left">
            <el-select
              v-model="currentOption.prop"
              size="small"
              placeholder="请选择"
              @change="onChange"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <div class="center">
            <el-select
              v-if="currentOption.type === 'select'"
              v-model="form[currentOption.prop]"
              size="small"
              placeholder="请选择"
              @change="onChange"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
            <el-input
              v-else
              v-model="form[currentOption.prop]"
              size="small"
              placeholder="请输入内容"
              suffix-icon="el-icon-search"
              @change="onSearch"
            >
            </el-input>
          </div>
          <div class="right">
            <el-button size="small">搜索</el-button>
            <el-button size="small">重置</el-button>
          </div>
        </div>
      </div>
      <div class="table-header-bottom">
        <el-button size="small" @click="onAddLabel">新增</el-button>
        <el-button size="small">导入</el-button>
        <!-- <el-button size="small">导出</el-button> -->
      </div>
    </el-header>
    <el-main>
      <el-table
        v-loading="loading"
        lazy
        border
        row-key="id"
        :data="tableData"
        :load="onLoad"
        :tree-props="{ children: 'childrens', hasChildren: 'hasChildrens' }"
      >
        <el-table-column
          v-for="column in columns"
          :key="column.prop"
          :prop="column.prop"
          :label="column.label"
          :show-overflow-tooltip="column.showOverflowTooltip"
        >
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="225">
          <template slot-scope="scope">
            <el-button
              v-if="scope.row.labelType === 2"
              @click.native.prevent="onBindLabel(scope.row)"
              size="small"
            >
              绑定
            </el-button>
            <el-button
              v-if="scope.row.labelType === 2"
              @click.native.prevent="onEditLabel(scope.row)"
              size="small"
            >
              修改
            </el-button>
            <el-button
              @click.native.prevent="fetchRemove(scope.row)"
              size="small"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-main>
    <el-footer>
      <el-pagination
        @size-change="onSizeChange"
        @current-change="onNumberChange"
        :current-page="page.pageNum"
        :page-sizes="[25, 50, 100]"
        :page-size="page.pageSize"
        layout="total, prev, pager, next, sizes, jumper"
        :total="page.total"
      >
      </el-pagination>
    </el-footer>
  </el-container>
</template>

<style scoped>
.material-label-table .el-header {
  height: fit-content !important;
  padding-top: var(--padding);
  padding-bottom: var(--padding);
  border-bottom: 1px solid #dcdfe6;
}
.material-label-table .table-header-top {
  margin-bottom: var(--margin);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.material-label-table .table-header-top > div {
  display: flex;
}
.material-label-table .table-header-top .left {
  width: 150px;
  margin-right: var(--margin);
}
.material-label-table .table-header-top .center {
  width: 250px;
  margin-right: var(--margin);
}
.material-label-table .table-header-top .center > .el-input,
.material-label-table .table-header-top .center > .el-select {
  width: 100%;
}
.material-label-table .el-main {
  padding: 0;
}
.material-label-table .el-main .el-table {
  width: 100%;
  height: 100%;
}
.material-label-table .el-footer {
  display: flex;
  justify-content: end;
  align-items: center;
}
</style>
