<template>
  <div class="app-container">
    <Com-search :search="searchObj" @handleSearch="handleSearch">
      <template #btn>
        <div style="display: flex; align-items: center">
          <el-button
            style="margin-right: 15px"
            type="primary"
            @click="handleExport"
            >导出</el-button
          >
          <div style="display: flex; align-items: center; font-weight: bold">
            <div class="red" style="margin-right: 5px"></div>
            库存较少
            <div
              class="orange"
              style="margin-left: 15px; margin-right: 5px"
            ></div>
            库存偏多
            <div
              class="green"
              style="margin-left: 15px; margin-right: 5px"
            ></div>
            正常
          </div>
        </div>
      </template>
      <template #selectTree>
        <treeselect
          v-model="orgNo"
          :options="deptOptions"
          :show-count="true"
          placeholder="请选择所属单位"
          :normalizer="unitNamenormalizer"
        />
      </template>
    </Com-search>
    <Com-table
      :tableFormat="tableFormat"
      :tableData="tableData"
      :loading="loading"
    >
      <template #identify="scope">
        <span v-if="scope.row.identify == 1" class="red"></span>
        <span v-if="scope.row.identify == 2" class="orange"></span>
        <span v-if="scope.row.identify == 3" class="green"></span>
      </template>
      <template #commodityStockNum="scope">
        <el-link
          type="success"
          :underline="false"
          @click.stop="handleDetail(scope.row)"
          >{{ scope.row.commodityStockNum }}</el-link
        >
      </template>
    </Com-table>
    <pagination
      :total="pages.total"
      :page.sync="pages.pageNo"
      :limit.sync="pages.pageSize"
      @pagination="getPageData"
    />
    <detail ref="detail"></detail>
  </div>
</template>

<script>
import Treeselect from "@riophae/vue-treeselect";
import { deptTreeSelect } from "@/api/system/user";
import { matMtrlForeDpage } from "@/api/home";
import { tableFormat, searchObj } from "./utils/index.json";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import Detail from "./components/detail";
export default {
  components: { Treeselect, Detail },
  data() {
    return {
      orgNo: undefined,
      loading: false,
      tableData: [],
      tableFormat: tableFormat,
      pages: {
        pageNo: 1,
        pageSize: 50,
        total: 0,
      },
      searchObj: searchObj,
      searchData: {
        mtrlNo: "",
        mtrlDes: "",
        orgNo: "",
        identify: "",
        // deptName: "",
      },
      deptOptions: [],
    };
  },
  mounted() {
    this.getDeptTree();
    this.getPageData();
  },
  methods: {
    handleDetail(row) {
      let obj = {
        data: row,
      };
      this.$refs.detail.handleInit(obj);
    },
    unitNamenormalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.orgNo,
        label: node.label,
      };
    },
    /** 查询部门下拉树结构 */
    getDeptTree() {
      deptTreeSelect().then((response) => {
        this.deptOptions = response.data;
      });
    },
    // 导出
    handleExport() {
      this.download(
        "adsHyxtMatMtrlForeD/exportMaterialOrgRation",
        {
          ...this.searchData,
        },
        `${new Date().getTime()}.xlsx`
      );
    },
    // 搜索
    handleSearch(obj) {
      this.searchData = obj;
      this.pages.pageNo = 1;
      this.getPageData();
    },
    // 分页查询
    getPageData() {
      this.searchData.orgNo = this.orgNo;
      let params = {
        ...this.pages,
        ...this.searchData,
      };
      this.loading = true;
      matMtrlForeDpage(params).then((res) => {
        if (res && res.code === 200) {
          this.tableData = res.data.records || [];
          this.pages.total = res.data.total;
          this.loading = false;
        } else {
          this.loading = false;
          this.$message.warning(res.msg || "加载失败");
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.app-container {
  position: absolute;
  width: 100%;
  height: calc(100% - 60px - 60px);
}
.red {
  height: 20px;
  width: 20px;
  display: inline-block;
  background: red;
  border-radius: 50%;
}
.orange {
  height: 20px;
  width: 20px;
  display: inline-block;
  background: orange;
  border-radius: 50%;
}
.green {
  height: 20px;
  width: 20px;
  display: inline-block;
  background: green;
  border-radius: 50%;
}
</style>
