<template>
  <div class="commons">
    <div class="top-box">
      <div :class="isGroup ? 'left-top  group' : 'left-top  unit'">
        <!-- 关键指标统计 -->
        <div class="card tindicator-statistics">
          <h3>关键指标统计</h3>
          <ul>
            <li>
              <div class="center">
                <div class="left-icon">
                  <img src="@/assets/dashboard/target1.png" alt="" />
                </div>
                <div class="right-num">
                  <h4>年采购金额</h4>
                  <p>3675477</p>
                </div>
              </div>
            </li>
            <li>
              <div class="center">
                <div class="left-icon">
                  <img src="@/assets/dashboard/target2.png" alt="" />
                </div>
                <div class="right-num">
                  <h4>年采购数量</h4>
                  <p>349812</p>
                </div>
              </div>
            </li>
            <li>
              <div class="center">
                <div class="left-icon">
                  <img src="@/assets/dashboard/target3.png" alt="" />
                </div>
                <div class="right-num">
                  <h4>当月采购金额</h4>
                  <p>88741</p>
                </div>
              </div>
            </li>
            <li>
              <div class="center">
                <div class="left-icon">
                  <img src="@/assets/dashboard/target4.png" alt="" />
                </div>
                <div class="right-num">
                  <h4>当月采购数量</h4>
                  <p>21312</p>
                </div>
              </div>
            </li>
          </ul>
        </div>
        <!-- 采购数据统计 -->
        <div class="card data-statistics">
          <h3>采购数据统计</h3>
          <el-select
            class="select-type"
            v-model="value"
            placeholder="请选择"
            size="mini"
          >
            <el-option label="采购金额" value="1"> </el-option>
            <el-option label="采购数量" value="2"> </el-option>
          </el-select>
          <line-chart />
        </div>
      </div>
      <!-- 各单位数据分析 -->
      <div class="card data-analysis" v-if="isGroup">
        <h3>各单位数据分析</h3>
        <el-select
          class="select-type"
          v-model="value"
          placeholder="请选择"
          size="mini"
        >
          <el-option label="采购金额" value="1"> </el-option>
          <el-option label="采购数量" value="2"> </el-option>
        </el-select>
        <el-table
          v-loading="listLoading"
          element-loading-text="加载中"
          :data="list"
          height="515"
        >
          <template slot="empty">
            <img src="@/assets/nopage.png" alt />
            <p>暂无数据</p>
          </template>

          <el-table-column label="单位" prop="name1" />
          <el-table-column label="采购金额" prop="name2">
            <template slot-scope="scope"
              ><span
                style="
                  color: #2e90ff;
                  font-weight: 800;
                  font-family: sans-serif;
                "
                >{{ scope.row.name2 }}</span
              ></template
            ></el-table-column
          >
          <el-table-column type="index" label="排名">
            <template slot-scope="scope">
              <span
                v-if="scope.$index == 0"
                style="
                  color: #c13124;
                  font-weight: 800;
                  font-family: sans-serif;
                "
                >{{ scope.$index + 1 }}</span
              >
              <span
                v-else-if="scope.$index == 1"
                style="
                  color: #e99d7f;
                  font-weight: 800;
                  font-family: sans-serif;
                "
                >{{ scope.$index + 1 }}</span
              >
              <span
                v-else-if="scope.$index == 2"
                style="
                  color: #75f9fd;
                  font-weight: 800;
                  font-family: sans-serif;
                "
                >{{ scope.$index + 1 }}</span
              >
              <span v-else>{{ scope.$index + 1 }}</span>
            </template></el-table-column
          >
        </el-table>
      </div>
    </div>
    <div class="center-box">
      <!-- 快捷入口 -->
      <div class="card quick-entry">
        <h3>快捷入口</h3>
        <ul>
          <li>
            <img src="@/assets/dashboard/home_icon_shdsh.png" alt="" />
            <p>收货单审核</p>
          </li>
          <li>
            <img src="@/assets/dashboard/home_icon_ckfq.png" alt="" />
            <p>待出库</p>
          </li>
          <li>
            <img src="@/assets/dashboard/home_icon_pdbb.png" alt="" />
            <p>智能报表</p>
          </li>
          <li>
            <img src="@/assets/dashboard/home_icon_rkdj.png" alt="" />
            <p>收货单审核</p>
          </li>
          <li>
            <img src="@/assets/dashboard/home_icon_sgsq.png" alt="" />
            <p>计划模板管理</p>
          </li>
        </ul>
      </div>
      <!-- 消息提醒 -->
      <div class="card message-reminder">
        <h3>消息提醒</h3>
        <ul>
          <li @click="openDetail">
            <p>
              <span class="orange-message">消息</span
              ><span class="line">|</span> 阿普唑仑片库存达到下线
            </p>
          </li>
          <li @click="openDetail">
            <p>
              <span class="orange-message">消息</span
              ><span class="line">|</span> 阿普唑仑片库存达到下线
            </p>
          </li>
          <li @click="openDetail">
            <p>
              <span class="orange-message">消息</span
              ><span class="line">|</span> 阿普唑仑片库存达到下线
            </p>
          </li>
          <li @click="openDetail">
            <p>
              <span class="blue-message">公告</span><span class="line">|</span>
              备选库采购框架协议询比公告
            </p>
          </li>
          <li @click="openDetail">
            <p>
              <span class="blue-message">公告</span><span class="line">|</span>
              组织开展“感悟思想伟力 凝聚奋进力量”主题党日活动
            </p>
          </li>
        </ul>
        <a class="more" @click="openMore">查看更多</a>
      </div>
    </div>
    <!-- 工作待办 -->
    <div class="card bottom-box">
      <h3>工作待办</h3>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="待办事宜" name="first"></el-tab-pane>
        <el-tab-pane label="已办事宜" name="second"></el-tab-pane>
        <el-tab-pane label="全部" name="third"></el-tab-pane>
      </el-tabs>
      <el-table
        v-loading="listLoading"
        element-loading-text="加载中"
        :data="approveList"
        height="380"
      >
        <template slot="empty">
          <img src="@/assets/nopage.png" alt />
          <p>暂无数据</p>
        </template>
        <el-table-column type="index" label="序号" />
        <el-table-column label="事项名称" prop="sourceName" />
        <el-table-column label="状态" prop="stas" width="150" />
        <el-table-column label="提交人" prop="initr" width="150" />
        <el-table-column label="提交时间" prop="crteTime" width="150" />
        <el-table-column label="操作" width="150">
          <template slot-scope="scope">
            <el-button type="text" @click="approve(scope.row)">审批</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--分页-->
      <yl-pagination
        v-show="total > 0"
        :total="total"
        :page.sync="listQuery.current"
        :limit.sync="listQuery.size"
        @pagination="getData"
      />
    </div>
  </div>
</template>

<script>
import ylPagination from "@/components/yl-pagination";
import bus from "@/views/bus";
import lineChart from "./components/line-chart";
import { GetBizQueryByUser } from "@/api/approve/index";
export default {
  components: { lineChart,ylPagination },
  data() {
    return {
      activeName: "first",
      isGroup: true,
      value: "1",
      listLoading: false,
      listQuery:{
          current: 1,
          size: 10,
          stas: "A",
      },
      list: [
        {
          name1: "太原市人民医院",
          name2: "32143"
        },
        {
          name1: "太原市人民医院",
          name2: "22143"
        },
        {
          name1: "太原市人民医院",
          name2: "21143"
        },
        {
          name1: "太原市人民医院",
          name2: "19143"
        },
        {
          name1: "太原市人民医院",
          name2: "18143"
        },
        {
          name1: "太原市人民医院",
          name2: "17143"
        },
        {
          name1: "太原市人民医院",
          name2: "15143"
        },
        {
          name1: "太原市人民医院",
          name2: "14143"
        },
        {
          name1: "太原市人民医院",
          name2: "13143"
        },
        {
          name1: "太原市人民医院",
          name2: "12143"
        }
      ],
      approveList: [],
      total :0,
      dialogNoticeVisible: false
    };
  },
  mounted () {
    this.getData();
  },
  methods: {
    handleClick(tab, event) {
      // console.log(tab, event);
      if(this.activeName == 'first'){
        this.listQuery.stas = 'A'
      }else if(this.activeName == 'second'){
        this.listQuery.stas = 'Y'
      }
      this.getData();
    },
    getData(){
      this.listLoading = true;
      GetBizQueryByUser(this.listQuery).then((res) => {
          this.approveList = res.data.records;
          this.total = res.data.total;
          this.listLoading = false;
      })
      .catch((err) => {
          this.listLoading = false;
      });
    },
    approve(row) {
      this.$router.push({
          name: row.route,
          query: { 
              sourceId: row.sourceId,
              initr: row.initr,
              crteTime: row.crteTime,
              stas: row.stas
          },
      });
    },

    // 查看更多
    openMore() {
      bus.$emit("dialogNoticeVisible", true);
    },

    openDetail() {
      bus.$emit("dialogDetailVisible", true);
    }
  }
};
</script>

<style scoped lang="scss">
.commons {
  margin: 20px 0;
  .card {
    position: relative;
    background: #fff;
    padding: 15px;
    h3 {
      position: relative;
      padding-left: 5px;
      margin-bottom: 15px;
      color: #101010;
      font-size: 16px;
      font-weight: 800;
      border-left: 5px solid rgb(24, 144, 255);
    }
    .select-type {
      position: absolute;
      width: 100px;
      right: 15px;
      top: 10px;
    }
  }
  .top-box {
    height: 585px;
    .group {
      width: 70%;
    }
    .unit {
      width: 100%;
    }
    .left-top {
      float: left;
      overflow: hidden;
      // 关键指标统计
      .tindicator-statistics {
        width: 100%;
        height: 170px;
        ul {
          display: flex;
          justify-content: space-around;
          padding: 28px 0;
          border-top: 1px solid #f2f3f5;
          border-bottom: 1px solid #f2f3f5;
          height: 100px;
          li {
            height: 100%;
            width: 100%;
            border-right: 1px solid #f2f3f5;
            margin: auto;
            &:last-child {
              border-right: none;
            }
            .center {
              margin: auto;
              width: 150px;
              .left-icon {
                float: left;
                img {
                  width: 40px;
                  height: 40px;
                }
              }
              .right-num {
                float: left;
                margin-left: 10px;
                h4 {
                  font-weight: 400;
                  font-size: 12px;
                  margin-bottom: 10px;
                }
                p {
                  font-weight: 800;
                  font-size: 18px;
                  font-family: sans-serif;
                }
              }
            }
          }
        }
      }
      // 采购数据统计
      .data-statistics {
        margin-top: 15px;
        width: 100%;
        height: 400px;
      }
    }
    .data-analysis {
      float: right;
      overflow: hidden;
      width: 29%;
      height: 585px;

      .el-table {
        margin-top: 20px !important;
      }
    }
  }

  .center-box {
    margin: 15px 0;
    height: 230px;
    .quick-entry {
      float: left;
      width: 70%;
      height: 100%;
      ul {
        display: flex;
        justify-content: space-around;
        li {
          text-align: center;
          cursor: pointer;
          img {
            width: 120px;
          }
          p {
            font-weight: 800;
            font-size: 14px;
          }
        }
      }
    }
    .message-reminder {
      float: right;
      width: 29%;
      height: 100%;
      font-size: 14px;
      ul {
        li {
          cursor: pointer;
          margin-bottom: 15px;
          p {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            .orange-message {
              color: #f8ab4a;
            }
            .blue-message {
              color: #3c64dc;
            }
            .line {
              padding: 0 10px;
              color: #ccc;
            }
          }
        }
      }
      .more {
        float: right;
        color: #3c64dc;
        cursor: pointer;
      }
    }
  }
  .bottom-box {
    // height: 480px;
    .el-tabs__header {
      background: #e1e8fe;
      padding-left: 20px;
    }
    .el-table__header-wrapper,
    .el-table__fixed-header-wrapper {
      th {
        background-color: #fff;
      }
    }
  }
}
::v-deep .el-table {
  th.el-table__cell.is-leaf,
  td.el-table__cell {
    border-bottom: 1px solid #eee;
  }

  .el-table__header-wrapper,
  .el-table__fixed-header-wrapper {
    th {
      word-break: break-word;
      background-color: #e1e8fe;
      color: #515a6e;
      height: 45px;
    }
  }
}
</style>