<template>
  <d2-container class="page">
    <el-row class="content">
      <div class="page-content left-content">
        <span class="content-title">报警待处理</span>
        <el-table
          :data="tableData"
          class="table-content"
          @row-click="jumpDetails"
          :row-class-name="tableRowClassName"
        >
          <el-table-column
            prop="name"
            align="center"
            label="仓库名称"
          ></el-table-column>
          <el-table-column
            prop="itemName"
            label="仓房名称"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="submitter"
            label="报警时间"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="reportDate"
            align="center"
            label="已处理等待时常"
          ></el-table-column>
          <el-table-column align="center" label="操作">
            <el-button type="text" size="small" icon="el-icon-edit"
              >编辑</el-button
            >
          </el-table-column>
        </el-table>
      </div>
      <div class="page-content right-content">
        <span class="content-title">通知公告</span>
        <ul class="tzggList">
          <li v-for="(item, index) in tzggListData" :key="index">
            <span>{{ item.name }}</span>
            <span class="tzggListLi">2011-10-19 11:11:11</span>
          </li>
        </ul>
      </div>
    </el-row>
    <el-row class="content contentX">
      <div class="page-content left-content">
        <span class="content-title">出入库数量趋势</span>
        <div id="myChart" :style="{ width: '400px', height: '250px' }"></div>
      </div>
      <div class="page-content right-content">
        <span class="content-title">库区报警排名</span>
      </div>
    </el-row>
  </d2-container>
</template>

<script>
export default {
  data() {
    return {
      tableData: [{ name: "哈哈哈" }, { name: "哈哈哈" }],
      tzggListData: [{ name: "哈哈哈" }, { name: "哈哈哈" }],
    };
  },
  methods: {
    jumpDetails() {},
    tableRowClassName({ row, rowIndex }) {
      if ((rowIndex + 1) % 2 === 0) {
        return "one-row";
      } else {
        return "two-row";
      }
    },
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("myChart"));
      // 绘制图表
      myChart.setOption({
        // title: { text: "在Vue中使用echarts" },
        tooltip: {},
        legend: {
          data: ["出库", "入库"],
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [
            "1月",
            "2月",
            "3月",
            "4月",
            "5月",
            "6月",
            "7月",
            "8月",
            "9月",
            "10月",
            "11月",
            "12月",
          ],
        },
        yAxis: { type: "value" },
        series: [
          {
            name: "出库",
            type: "line",
            stack: "Total",
            smooth: true,
            data: [120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134, 90],
          },
          {
            name: "入库",
            type: "line",
            stack: "Total",
            smooth: true,
            data: [220, 182, 191, 234, 290, 330, 310, 120, 132, 101, 134, 90],
          },
        ],
      });
    },
  },
  created() {},
  mounted() {
    this.drawLine();
  },
};
</script>

<style lang="scss" scoped>
.page {
  width: 100%;
  height: 100%;
  color: #dafaff;
  background-image: url("./image/bg.png") no-repeat;
  ::v-deep.el-table::before {
    background-color: #042c59 !important;
  }
  ::v-deep.el-table td.el-table__cell,
  ::v-deep.el-table th.el-table__cell.is-leaf {
    border: 0px !important;
  }
  ::v-deep.el-table th.el-table__cell {
    background-color: #042c59;
  }
  ::v-deep.el-table--enable-row-hover
    .el-table__body
    tr:hover
    > td.el-table__cell {
    background-color: #1460b0;
  }
  ::v-deep.el-table thead {
    color: #dafaff;
  }
  ::v-deep.d2-container-full__body {
    background: none !important;
  }
  ::v-deep.el-table .one-row {
    background-color: #042c59 !important;
    color: #dafaff;
  }
  ::v-deep.el-table .two-row {
    background-color: #063c67 !important;
    color: #dafaff;
  }
  .table-content {
    width: 98%;
    margin-left: 6px;
    background: #042c59;
  }
  .content-title {
    padding-left: 43px;
    display: inline-block;
    height: 50px;
    line-height: 50px;
    background: url("./image/xjt.png") no-repeat;
    background-position: 20px center;
  }
  .content {
    width: 100%;
    height: 45%;
    min-height: 300px;
  }
  .contentX {
    margin-top: 4%;
  }
  .page-content {
    width: 35%;
    min-width: 350px;
    height: 100%;
    background: url("./image/kuang-bg_1.png") no-repeat;
    background-size: 100% 100%;
  }
  .right-content {
    margin-right: -20px;
    float: right;
  }
  .left-content {
    float: left;
  }
  .tzggList {
    margin: 10px 0;
    padding: 0;
  }
  .tzggList li {
    margin: 5px;
    padding-left: 10px;
    list-style: none;
    padding-right: 10px;
    height: 40px;
    line-height: 40px;
    border-bottom: 1px solid #1460b0;
  }
  .tzggListLi {
    float: right;
  }
  #myChart {
    margin: 0 auto;
  }
  // .btn-group {
  //   color: $color-text-placehoder;
  //   font-size: 12px;
  //   line-height: 12px;
  //   margin-top: 0px;
  //   margin-bottom: 20px;
  //   .btn-group__btn {
  //     color: $color-text-sub;
  //     &:hover {
  //       color: $color-text-main;
  //     }
  //     &.btn-group__btn--link {
  //       color: $color-primary;
  //     }
  //   }
  // }
}
</style>
