<template>
  <div>
    <div class="back" v-if="states1">
      <div class="top">
        <div class="left" id="box">
          <el-card class="box-card" style="margin-right: 0">
            <el-tabs v-model="activeName" @tab-click="handleClick">
              <el-tab-pane label="待办事项" name="first">
                <el-table
                  :height="tableHeight"
                  v-loading="Loading1"
                  :data="tableData1"
                  row-key="id"
                  :cell-style="{ padding: '6px 0', cursor: 'pointer' }"
                  @row-click="handleRowClick"
                >
                  <el-table-column prop="taskName" label="事项" />
                  <el-table-column prop="initrTime" label="发起时间" />
                </el-table>
                <!--分页-->
                <el-pagination
                  v-show="total1 > 0"
                  @size-change="fetchData1"
                  @current-change="fetchData1"
                  layout="total, prev, pager, next"
                  @pagination="fetchData1"
                  :current-page.sync="form1.current"
                  :page-size="form1.size"
                  :total="total1"
                >
                </el-pagination>
              </el-tab-pane>
              <el-tab-pane label="已办事项" name="second">
                <el-table
                  :height="tableHeight"
                  v-loading="Loading1"
                  :data="tableData2"
                  row-key="id"
                  :cell-style="{ padding: '6px 0', cursor: 'pointer' }"
                  @row-click="handleRowClick"
                >
                  <el-table-column prop="taskName" label="事项" />
                  <el-table-column prop="initrTime" label="发起时间" />
                </el-table>
                <!--分页-->
                <el-pagination
                  v-show="total2 > 0"
                  @size-change="fetchData2"
                  @current-change="fetchData2"
                  layout="total, prev, pager, next"
                  @pagination="fetchData2"
                  :current-page.sync="form1.current"
                  :page-size="form1.size"
                  :total="total2"
                >
                </el-pagination>
              </el-tab-pane>
            </el-tabs>
          </el-card>
        </div>
        <div class="right">
          <el-card class="box-card">
            <el-form :model="formSearch" :inline="true" style="float: left">
              <el-form-item label="标题">
                <el-input
                  clearable
                  v-model.trim="formSearch.msgTitle"
                  placeholder="请输入标题"
                  style="width: 150px"
                ></el-input>
              </el-form-item>
              <el-button type="primary" @click="handleCheck()">查询</el-button>
            </el-form>
            <div class="buttonRead">
              <el-button type="primary" @click="handleChoose()" plain
                >已读</el-button
              >
              <el-button type="success" @click="handleAll()" plain
                >全部已读</el-button
              >
            </div>
            <el-table
              ref="multipleTable"
              :height="tableHeight"
              v-loading="Loading"
              :cell-style="{ padding: '5px 0', cursor: 'pointer' }"
              :data="tableData"
              row-key="id"
              @selection-change="handleSelectionChange"
              @row-click="getDetail"
            >
              <el-table-column
                type="selection"
                :selectable="selected"
                :reserve-selection="true"
                width="55"
              ></el-table-column>
              <el-table-column
                label="类别"
                width="120"
                prop="msgType"
                :show-overflow-tooltip="true"
              >
                <template slot-scope="scope">{{
                  readtypeList(scope.row.msgType)
                }}</template>
              </el-table-column>
              <el-table-column
                :show-overflow-tooltip="true"
                prop="msgTitle"
                label="标题"
              ></el-table-column>
              <el-table-column
                :show-overflow-tooltip="true"
                width="140"
                prop="msgPubdTime"
                label="发布时间"
              ></el-table-column>
              <el-table-column
                prop="readFlag"
                label="状态"
                :show-overflow-tooltip="true"
                width="70"
              >
                <template slot-scope="scope">
                  <el-tag
                    type="danger"
                    v-if="scope.row.readFlag === '0'"
                    disable-transition
                  >
                    {{ readFlag[scope.row.readFlag] }}
                  </el-tag>
                  <el-tag
                    type="success"
                    v-if="scope.row.readFlag === '1'"
                    disable-transition
                  >
                    {{ readFlag[scope.row.readFlag] }}
                  </el-tag>
                </template>
              </el-table-column>
            </el-table>
            <!--分页-->
            <el-pagination
              v-show="total > 0"
              @size-change="fetchData"
              @current-change="fetchData"
              layout="total, prev, pager, next"
              @pagination="fetchData"
              :current-page.sync="formSearch.current"
              :page-size="formSearch.size"
              :total="total"
            >
            </el-pagination>
          </el-card>
        </div>
      </div>
      <div class="bottom">
        <el-card class="box-card">
          <div class="big-echart" v-if="echartsPs">
            <div class="Echars_box">
              <h3><span></span>药品采购数量</h3>
              <div class="echars_context" id="Echars"></div>
            </div>
            <div class="Echars_box">
              <h3><span></span>药品采购金额</h3>
              <div class="echars_context" id="Echars2"></div>
            </div>
            <div class="Echars_box">
              <h3><span></span>药品配送满足率</h3>
              <div class="echars_context" id="Echars3"></div>
            </div>
            <div class="Echars_box">
              <h3><span></span>耗材采购数量</h3>
              <div class="echars_context" id="Echars4"></div>
            </div>
            <div class="Echars_box">
              <h3><span></span>耗材采购金额</h3>
              <div class="echars_context" id="Echars5"></div>
            </div>
            <div class="Echars_box">
              <h3><span></span>耗材配送满足率</h3>
              <div class="echars_context" id="Echars6"></div>
            </div>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import moment from "moment";
import {
  getData,
  markedRead,
  allRead,
  taskSum,
  purchaseNum,
  purchaseRatio,
  purchaseAmt,
} from "@/api/dashboard";
import { getQueryDic } from "@/api/system/dic";
import { getInfo } from "@/api/user";
export default {
  name: "Dashboard",
  data() {
    return {
      tableHeight: "200", //表格高度
      states: false,
      states1: false,
      activeName: "first",
      tableData: [],
      tableData1: [],
      tableData2: [],
      Loading: false,
      Loading1: false,
      formSearch: {
        current: 1,
        size: 5,
        msgTitle: "",
      },
      form1: {
        current: 1,
        size: 5,
      },
      marked: [],
      readFlag: ["未读", "已读"],
      total: 0,
      total1: 0,
      total2: 0,
      typeList: [],
      echartsPs: true,
      orderStatus: 0,
      items: [
        { title: "信息未提交", description: "" },
        { title: "待审核", description: "" },
        { title: "审核中", description: "" },
        { title: "驳回", description: "" },
      ],
      reaject: false,
      reason: "",
    };
  },
  mounted() {
    const that = this;
    window.onresize = function listen() {
      if (document.getElementById("box")) {
        that.tableHeight = document.getElementById("box").offsetHeight - 100;
      }
    };
    this.fetch();
    if (this.$store.state.user.orgType == "4") {
      this.echartsPs = false;
      throw new Error("供应商机构");
    }
  },
  methods: {
    // 用户角色、用户
    fetch() {
      getInfo().then((res) => {
        if (res.data.userContext.stas == "0") {
          this.states = true;
        }
        if (res.data.userContext.stas == "1") {
          this.states1 = true;
          this.$nextTick(function () {
            if (document.getElementById("box")) {
              this.tableHeight =
                document.getElementById("box").offsetHeight - 100;
            }
          });
          this.fetchData();
          this.fetchData1();
          this.getNoticeType();
          var _this = this;
          setTimeout(function () {
            _this.dome3();
            _this.dome4();
            _this.dome5();
            _this.dome6();
            _this.dome();
            _this.dome2();
          }, "0");
        }
      });
    },

    // 获取公告分类
    getNoticeType() {
      getQueryDic({ dicCode: "noticeType" }).then((res) => {
        this.typeList = res.data;
      });
    },
    readtypeList(val) {
      let newVal = this.typeList.find((item) => {
        return item.dicCode == val;
      });
      if (newVal) {
        return newVal.dicVal;
      }
    },
    // 获取公告详情
    getDetail(row, column, event) {
      this.$router.push({
        path: "/noticeDetail/" + row.id,
      });
    },

    handleRowClick(row) {
      let aa = row.routePath.indexOf(":");
      let bb = row.routePath.slice(aa + 1);
      this.$router.push({
        name: bb,
        query: { itemData: JSON.stringify(row) },
      });
    },
    handleClick(tab) {
      if (tab.label === "待办事项") {
        this.fetchData1();
      }
      if (tab.label === "已办事项") {
        this.fetchData2();
      }
    },
    dome() {
      let myChart = echarts.init(document.getElementById("Echars"));
      // 接口
      let url = "?prodType=" + "drugs";
      purchaseNum(url).then((res) => {
        let newObj = {};
        const keys = Object.keys(res.data[0]);
        keys.forEach((item, index) => {
          const value = keys[index];
          const arr = res.data.map((item) => item[value]);
          newObj[value] = arr;
        });
        let max = Math.max(...newObj.purchaseNum);
        myChart.setOption({
          grid: {
            top: "5%",
            left: "3%",
            bottom: "3%",
            right: "5%",
            containLabel: true,
          },
          tooltip: {},
          xAxis: {
            data: newObj.dataMonth,
            axisLabel: {
              interval: 0,
              textStyle: {
                color: "black",
                fontSize: 10,
              },
            },
          },
          yAxis: {
            type: "value",
            min: 0,
            max: max,
          },
          series: [
            {
              name: "药品采购数量",
              type: "bar",
              data: newObj.purchaseNum,
              // data: [5, 20, 36, 10, 10, 20, 40, 10, 40],
              barWidth: "50%",
              itemStyle: {
                normal: {
                  color: "#3C64DC",
                },
              },
            },
          ],
        });
      });
      window.addEventListener("resize", () => {
        if (myChart) {
          myChart.resize();
        }
      });
    },
    dome2() {
      let myChart = echarts.init(document.getElementById("Echars2"));
      let url = "?prodType=" + "drugs";
      purchaseAmt(url).then((res) => {
        let newObj = {};
        const keys = Object.keys(res.data[0]);
        keys.forEach((item, index) => {
          const value = keys[index];
          const arr = res.data.map((item) => item[value]);
          newObj[value] = arr;
        });
        let max = Math.max(...newObj.purchaseAmt);
        myChart.setOption({
          grid: {
            top: "5%",
            left: "3%",
            bottom: "3%",
            right: "5%",
            containLabel: true,
          },
          tooltip: {},
          xAxis: {
            data: newObj.dataMonth,
            axisLabel: {
              interval: 0,
              textStyle: {
                color: "black",
                fontSize: 10,
              },
            },
          },
          yAxis: {
            type: "value",
            min: 0,
            max: max,
          },
          series: [
            {
              name: "药品采购金额",
              type: "bar",
              data: newObj.purchaseAmt,
              barWidth: "50%",
              itemStyle: {
                normal: {
                  color: "#3C64DC",
                },
              },
            },
          ],
        });
      });
      window.addEventListener("resize", () => {
        if (myChart) {
          myChart.resize();
        }
      });
    },
    dome3() {
      let myChart = echarts.init(document.getElementById("Echars3"));
      let url = "?prodType=" + "drugs";
      purchaseRatio(url).then((res) => {
        let newObj = {};
        const keys = Object.keys(res.data[0]);
        keys.forEach((item, index) => {
          const value = keys[index];
          const arr = res.data.map((item) => item[value]);
          newObj[value] = arr;
        });
        let max = Math.max(...newObj.shipPurcPercent);
        myChart.setOption({
          grid: {
            top: "5%",
            left: "3%",
            bottom: "3%",
            right: "5%",
            containLabel: true,
          },
          tooltip: {},
          xAxis: {
            data: newObj.dataMonth,
            axisLabel: {
              interval: 0,
              textStyle: {
                color: "black",
                fontSize: 10,
              },
            },
          },
          yAxis: {
            type: "value",
            min: 0,
            max: max,
            axisLabel: {
              formatter: "{value}%",
            },
          },
          series: [
            {
              name: "药品配送满足率",
              type: "bar",
              data: newObj.shipPurcPercent,
              barWidth: "50%",
              itemStyle: {
                normal: {
                  color: "#3C64DC",
                },
              },
            },
          ],
        });
      });
      window.addEventListener("resize", () => {
        if (myChart) {
          myChart.resize();
        }
      });
    },
    dome4() {
      let myChart = echarts.init(document.getElementById("Echars4"));
      let url = "?prodType=" + "consumables";
      purchaseNum(url).then((res) => {
        let newObj = {};
        const keys = Object.keys(res.data[0]);
        keys.forEach((item, index) => {
          const value = keys[index];
          const arr = res.data.map((item) => item[value]);
          newObj[value] = arr;
        });
        let max = Math.max(...newObj.purchaseNum);
        myChart.setOption({
          grid: {
            top: "5%",
            left: "3%",
            bottom: "3%",
            right: "5%",
            containLabel: true,
          },
          tooltip: {},
          xAxis: {
            data: newObj.dataMonth,
            axisLabel: {
              interval: 0,
              textStyle: {
                color: "black",
                fontSize: 10,
              },
            },
          },
          yAxis: {
            type: "value",
            min: 0,
            max: max,
          },
          series: [
            {
              name: "耗材采购数量",
              type: "bar",
              data: newObj.purchaseNum,
              barWidth: "50%",
              itemStyle: {
                normal: {
                  color: "#3C64DC",
                },
              },
            },
          ],
        });
      });
      window.addEventListener("resize", () => {
        if (myChart) {
          myChart.resize();
        }
      });
    },
    dome5() {
      let myChart = echarts.init(document.getElementById("Echars5"));
      let url = "?prodType=" + "consumables";
      purchaseAmt(url).then((res) => {
        let newObj = {};
        const keys = Object.keys(res.data[0]);
        keys.forEach((item, index) => {
          const value = keys[index];
          const arr = res.data.map((item) => item[value]);
          newObj[value] = arr;
        });
        let max = Math.max(...newObj.purchaseAmt);
        myChart.setOption({
          grid: {
            top: "5%",
            left: "3%",
            bottom: "3%",
            right: "5%",
            containLabel: true,
          },
          tooltip: {},
          xAxis: {
            data: newObj.dataMonth,
            axisLabel: {
              interval: 0,
              textStyle: {
                color: "black",
                fontSize: 10,
              },
            },
          },
          yAxis: {
            type: "value",
            min: 0,
            max: max,
          },
          series: [
            {
              name: "耗材采购金额",
              type: "bar",
              data: newObj.purchaseAmt,
              barWidth: "50%",
              itemStyle: {
                normal: {
                  color: "#3C64DC",
                },
              },
            },
          ],
        });
      });
      window.addEventListener("resize", () => {
        if (myChart) {
          myChart.resize();
        }
      });
    },
    dome6() {
      let myChart = echarts.init(document.getElementById("Echars6"));
      let url = "?prodType=" + "consumables";
      purchaseRatio(url).then((res) => {
        let newObj = {};
        const keys = Object.keys(res.data[0]);
        keys.forEach((item, index) => {
          const value = keys[index];
          const arr = res.data.map((item) => item[value]);
          newObj[value] = arr;
        });
        let max = Math.max(...newObj.shipPurcPercent);
        myChart.setOption({
          grid: {
            top: "5%",
            left: "3%",
            bottom: "3%",
            right: "5%",
            containLabel: true,
          },
          tooltip: {},
          xAxis: {
            data: newObj.dataMonth,
            axisLabel: {
              interval: 0,
              textStyle: {
                color: "black",
                fontSize: 10,
              },
            },
          },
          yAxis: {
            type: "value",
            min: 0,
            max: max,
            axisLabel: {
              formatter: "{value}%",
            },
          },
          series: [
            {
              name: "耗材配送满足率",
              type: "bar",
              data: newObj.shipPurcPercent,
              barWidth: "50%",
              itemStyle: {
                normal: {
                  color: "#3C64DC",
                },
              },
            },
          ],
        });
      });
      window.addEventListener("resize", () => {
        if (myChart) {
          myChart.resize();
        }
      });
    },

    // 渲染
    fetchData() {
      this.Loading = true;
      getData(this.formSearch).then((res) => {
        if (res.success == true) {
          this.tableData = res.data.records;
          this.total = res.data.total;
          this.tableData.forEach((v) => {
            v.msgPubdTime = moment(v.msgPubdTime).format("YYYY-MM-DD HH:mm:ss");
          });
        } else {
        }
        this.Loading = false;
      });
    },
    fetchData1() {
      this.Loading1 = true;
      this.form1.handleStas = 0;
      taskSum(this.form1).then((res) => {
        if (res.success == true) {
          this.tableData1 = res.data.records;
          this.total1 = res.data.total;
          this.tableData1.forEach((v) => {
            v.initrTime = moment(v.initrTime).format("YYYY-MM-DD HH:mm:ss");
          });
        } else {
        }
        this.Loading1 = false;
      });
    },
    fetchData2() {
      this.Loading1 = true;
      this.form1.handleStas = 1;
      taskSum(this.form1).then((res) => {
        if (res.success == true) {
          this.tableData2 = res.data.records;
          this.total2 = res.data.total;
          this.tableData2.forEach((v) => {
            v.initrTime = moment(v.initrTime).format("YYYY-MM-DD HH:mm:ss");
          });
        } else {
        }
        this.Loading1 = false;
      });
    },
    // 选框
    handleSelectionChange(val) {
      val.forEach((v) => {
        if (v.readFlag == "0") {
          this.marked.push(v.id);
        }
      });
    },
    selected(row) {
      if (row.readFlag == "0") {
        return true; //可选择
      } else {
        return false; //不可选择
      }
    },
    // 选中已读
    handleChoose() {
      let data = { ids: this.marked };
      markedRead(data).then((res) => {
        if (res.success === true) {
          this.fetchData();
          this.marked = [];
        } else {
          this.$message({
            message: res.message || "操作失败",
            type: "error",
          });
        }
      });
    },
    // 全部已读
    handleAll() {
      this.$confirm("确认全部已读, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          allRead().then((res) => {
            if (res.success === true) {
              this.fetchData();
            } else {
              this.$message({
                message: res.message || "操作失败",
                type: "error",
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
    // 查询
    handleCheck() {
      this.formSearch.current = "1";
      this.fetchData();
    },
  },
};
</script>

<style lang="scss" scoped>
.top {
  width: 100%;
  height: 40%;
  margin-top: 20px;
  display: flex;
}
.left {
  width: 50%;
  height: 100%;
}
.right {
  width: 50%;
  height: 100%;
  margin-left: 10px;
}
.bottom {
  width: 100%;
  height: 60%;
  padding-top: 10px;
  ::v-deep .el-card__body {
    padding: 0;
  }
  .big-echart {
    display: flex;
    flex-wrap: wrap;
    height: 100%;
    justify-content: space-between;
    &:after {
      content: "";
      width: 30%;
    }
    .Echars_box {
      width: 30%;
      height: 50%;
      h3 {
        font-size: 14px;
        color: #303133;
        font-weight: 800;
        margin: 10px;
        span {
          vertical-align: top;
          display: inline-block;
          width: 5px;
          height: 14px;
          background: #3c64dc;
          margin-right: 5px;
        }
      }
      .echars_context {
        width: 100%;
        height: calc(100% - 45px);
      }
    }
  }
}
.back {
  height: calc(100vh - 90px);
}
.box-card {
  height: 100%;
}
::v-deep .el-card__body {
  height: 100%;
}
.buttonRead {
  float: right;
}
.left ::v-deep .el-card__body {
  padding-top: 5px;
}
.right ::v-deep .el-card__body {
  padding-top: 15px;
  .el-form-item--small.el-form-item {
    margin-bottom: 10px;
  }
}
</style>
