<template>
  <el-dialog
    title="详情"
    :visible.sync="dialogVisible"
    width="1400px"
    :before-close="handleClose"
  >
    <Com-search :search="searchObj" @handleSearch="handleSearch" v-if="reload">
      <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>
    <div>
      <div style="display: flex; align-items: center; margin-bottom: 10px">
        <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>
    </div>
    <div class="table">
      <Com-table :tableFormat="tableFormat" :tableData="tableData">
        <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>
      </Com-table>
    </div>
    <pagination
      :total="pages.total"
      :page.sync="pages.pageNo"
      :limit.sync="pages.pageSize"
      @pagination="
        type === '全市常用物料储备定额'
          ? findForeMtrlPage()
          : adsHyxtMatMtrlForeDpageOrgRationCount()
      "
    />
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
    </span>
  </el-dialog>
</template>

<script>
import {
  findForeMtrlPage,
  matMtrlForeDpage,
  adsHyxtMatMtrlForeDpageOrgRationCount,
} from "@/api/home";
import { deptTreeSelect } from "@/api/system/user";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
  components: { Treeselect },
  data() {
    return {
      reload: true,
      tableData: [],
      dialogVisible: false,
      searchObj: [
        {
          type: "input",
          value: "mtrlNo",
          label: "物料编码",
          col: 4,
          default: null,
          placeholder: "请输入物料编码",
          labelWidth: "80px",
        },
        {
          type: "input",
          value: "mtrlDes",
          label: "物料名称",
          col: 4,
          default: null,
          placeholder: "请输入物料名称",
          labelWidth: "80px",
        },
        {
          type: "selectTree",
          value: "orgNo",
          label: "所属单位",
          col: 5,
          default: null,
          placeholder: "请输入所属单位",
          labelWidth: "80px",
        },
        {
          type: "select",
          value: "identify",
          label: "储备标识",
          placeholder: "按库存搜索",
          col: 4,
          default: null,
          options: [
            {
              label: "库存较少",
              value: 1,
            },
            {
              label: "库存偏多",
              value: 2,
            },
            {
              label: "正常",
              value: 3,
            },
          ],
          labelWidth: "80px",
          itemLabel: "label",
          itemValue: "value",
        },
        {
          type: "searchBtn",
          col: 0.5,
          labelWidth: "15px",
          isShowSearch: true,
          isShowReset: false,
        },
      ],
      tableFormat: [
        {
          label: "序号",
          prop: "index",
          maxWidth: 80,
        },
        {
          prop: "orgName",
          label: "所属单位",
          maxWidth: 170,
        },
        {
          prop: "mtrlNo",
          label: "物料编码",
          maxWidth: 120,
        },
        {
          prop: "mtrlDes",
          label: "物料名称",
          maxWidth: 350,
        },
        {
          prop: "mtrlUnit",
          label: "计量单位",
        },
        // {
        //   prop: "rationNumber",
        //   label: "推荐定额值",
        //   maxWidth: 120,
        // },
        {
          prop: "rationUpper",
          label: "定额上限",
        },
        {
          prop: "ratioLower",
          label: "定额下限",
        },
        {
          prop: "commodityStockNum",
          label: "库存数",
        },
        {
          prop: "identify",
          label: "标识",
          align: "center",
        },
        {
          prop: "remark",
          label: "备注",
          maxWidth: 300,
        },
        // {
        //   label: "序号",
        //   prop: "index",
        //   maxWidth: 80,
        // },
        // {
        //   prop: "mtrlNo",
        //   label: "物料编码",
        //   labelWidth: "120px",
        // },
        // {
        //   prop: "mtrlDes",
        //   label: "物料名称",
        // },
        // {
        //   prop: "weekUseNum",
        //   label: "本周用量",
        // },
        // {
        //   prop: "weekUseForeNum",
        //   label: "预测下周定值",
        // },
        // {
        //   prop: "monthUseNum",
        //   label: "本月度用量",
        // },
        // {
        //   prop: "monthUseForeNum",
        //   label: "预测下月度定值",
        // },
        // {
        //   prop: "quartUseNum",
        //   label: "本季用量",
        // },
        // {
        //   prop: "quartUseForeNum",
        //   label: "预测下一季度定值",
        // },
        // {
        //   prop: "deptName",
        //   label: "单位名称",
        // },
      ],
      pages: {
        pageNo: 1,
        pageSize: 50,
        total: 0,
      },
      orgNo: undefined,
      searchData: {
        mtrlNo: "",
        mtrlDes: "",
        orgNo: "",
        identify: "",
      },
      deptOptions: [],
      flag: "",
      identify: "",
      type: "",
    };
  },
  methods: {
    resetForm(obj) {
      for (const key in obj) {
        if (Object.hasOwnProperty.call(obj, key)) {
          obj[key] = null;
        }
      }
      return 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;
      if (this.type === "全市常用物料储备定额") {
        this.findForeMtrlPage();
      } else {
        this.adsHyxtMatMtrlForeDpageOrgRationCount();
      }
    },
    handleInit({ type, orgNo, flag, identify }) {
      this.pages.pageNo = 1;
      this.pages.total = 0;
      this.orgNo = orgNo || undefined;
      this.type = type;
      this.flag = flag;
      this.searchData = this.resetForm(this.searchData);
      this.reload = false;
      this.$nextTick(() => {
        this.reload = true;
        let temp = this.searchObj.find((o) => o.value === "identify");
        temp.default = identify;
        this.searchData.identify = identify;

        this.getDeptTree();
        if (type === "全市常用物料储备定额") {
          this.findForeMtrlPage();
        } else {
          this.adsHyxtMatMtrlForeDpageOrgRationCount();
        }
        this.dialogVisible = true;
      });
    },
    findForeMtrlPage() {
      this.searchData.orgNo = this.orgNo;
      let params = {
        ...this.pages,
        ...this.searchData,
        flag: this.flag,
      };
      matMtrlForeDpage(params).then((res) => {
        if (res && res.code === 200) {
          this.tableData = res.data.records || [];
          this.pages.total = res.data.total;
        } else {
          this.$message.warning(res.msg || "加载失败");
        }
      });
    },
    adsHyxtMatMtrlForeDpageOrgRationCount() {
      this.searchData.orgNo = this.orgNo;
      let params = {
        ...this.pages,
        ...this.searchData,
        flag: this.flag,
      };
      adsHyxtMatMtrlForeDpageOrgRationCount(params).then((res) => {
        if (res && res.code === 200) {
          this.tableData = res.data.records || [];
          this.pages.total = res.data.total;
        } else {
          this.$message.warning(res.msg || "加载失败");
        }
      });
    },
    handleClose() {
      this.dialogVisible = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.table {
  height: 600px;
}
.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%;
}
::v-deep {
  .el-dialog__footer {
    text-align: center;
  }
}
</style>
