<template>
  <div class="receiptF">
    <!-- 头部信息 -->
    <header>
      <div class="total">
        <div class="total-left">“ {{ this.selectedContent }} ” - <span>{{ this.name }}</span></div>
        <div class="total-right">
          <div style="width: 300px; margin-left: 35px;">
          </div>
          <div>
          </div>
          <div>
            <el-radio-group v-model="radio2" @change="dateChange(radio2)">
              <el-radio-button label="day">本日</el-radio-button>
              <el-radio-button label="month">本月</el-radio-button>
              <el-radio-button label="quarter">本季</el-radio-button>
              <el-radio-button label="year">本年</el-radio-button>
            </el-radio-group>
          </div>
          <div class="icon">
            <i @click="pushIndex" class="el-icon-s-home" :style="{ fontSize: '32px', color: 'rgb(64,158,225)' }"></i>
            <i class="el-icon-s-operation" :style="{
              fontSize: '32px',
              marginLeft: '15px',
              color: 'rgb(64,158,225)',
            }"></i>
          </div>
        </div>
      </div>
      <footer></footer>
    </header>
    <!-- 数字信息 -->
    <div class="num">
      <div class="num1">计划用量&nbsp;<span>{{ Math.floor(Number(this.num.plansum)) + "吨" }}</span></div>
      <div class="num2">验收入库&nbsp;<span>{{ Math.floor(Math.abs(Number(this.num.acceptancesum))) + "吨" }}</span></div>
      <div class="num3">出库数量&nbsp;<span>{{ Math.floor(Math.abs(Number(this.num.deliverysum))) + "吨" }}</span></div>
      <div class="num4">库存数量&nbsp;<span>{{  Math.floor(Math.abs(Number(this.num.inventorysum))) + "吨"  }}</span></div>
    </div>
    <!-- 图标信息及表格 -->
    <div class="message">
      <div class="table">
        <el-table :data="tableData" style="width: 100%" height="350" stripe border :default-sort="{
          prop: 'date',
          order: 'descending',
        }" class="tab" v-loading="loading">
          <el-table-column type="index" label="序号" width="80"></el-table-column>
          <el-table-column prop="name" label="材料" width="250">
            <template slot-scope="{ row }">
              <!-- 自定义插槽内容 -->
              <div class="custom-slot">
                {{ row.name }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="model" label="规格型号" width="400">
            <template slot-scope="{ row }">
              <!-- 自定义插槽内容 -->
              <div class="custom-slot">
                {{ row.name }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="now" label="计划量(吨)" sortable width="280">
            <template slot-scope="{ row }">
              <!-- 自定义插槽内容 -->
              <div class="custom-slot">
                {{ Math.abs(Number(row.plansum)).toFixed(2) }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="before" label="验收量(吨)" sortable width="280">
            <template slot-scope="{ row }">
              <!-- 自定义插槽内容 -->
              <div class="custom-slot">
                {{ Math.abs(Number(row.acceptancesum)).toFixed(2) }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="up" label="出库量(吨)" sortable width="280">
            <template slot-scope="{ row }">
              <!-- 自定义插槽内容 -->
              <div class="custom-slot">
                {{ Math.floor(Math.abs(Number(row.deliveryweight))) }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="up" label="库存量(吨)" sortable width="280">
            <template slot-scope="{ row }">
              <!-- 自定义插槽内容 -->
              <div class="custom-slot">
                {{ Math.floor(Math.abs(Number(row.inventoryweight))) }}
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>
<script>
import * as echarts from "echarts";
import "echarts-liquidfill"; //在这里引入
import {
  getCount,
  getMaterialDescon,
} from "../../api";
export default {
  data() {
    return {
      loading:true,
      radio1: "0",
      radio2: "day",
      // 数据
      num: {},
      efficiency: null,
      value1: "",
      value2: "",
      id: localStorage.getItem("id"),
      name: localStorage.getItem("name"),
      selectedContent: localStorage.getItem("selectedContent"),
      tableData: [],
      chartsName: [],
      data1: [],
      data2: [],
      data3: [],
      data4: [],
      // 数据部分
      yesterdays: null,
      months: null,
      years: null,
    };
  },
  created () {
    const url = new URL(window.location.href);
    if (url.href.includes('?')) {
      this.id = localStorage.getItem("RSid");
      this.name = localStorage.getItem("RSname");
    } else {
      this.id = localStorage.getItem("id");
      this.name = localStorage.getItem("name");
    }
  },
  async mounted() {
    this.getdata();
    this.getPcConcreteProductionList();
  },
  methods: {
    // 初始获取数字数据
    async getdata() {
      const res = await getMaterialDescon({
        name: this.selectedContent,
        onpage: this.radio2,
        org_id: this.id,
      });
      this.num = res.data.data[0];
    },
    // 初始获取表格列表数据
    async getPcConcreteProductionList() {
      const res1 = await getCount({
        onpage:this.radio2,
        name:this.selectedContent,
        org_id:this.id,
      })
      this.tableData = res1.data.data
      this.loading = false
    },
    // 时间段改变
    async dateChange(value) {
      this.radio2 = value
      this.loading = true
      const res = await getMaterialDescon({
        name: this.selectedContent,
        onpage: this.radio2,
        org_id: this.id,
      });
      this.num = res.data.data[0];
      const res1 = await getCount({
        onpage:this.radio2,
        name:this.selectedContent,
        org_id:this.id,
      })
      this.tableData = res1.data.data
      this.loading = false
    },
    // 设置点击跳转事件
    handleClick(value) {
      localStorage.setItem("DWCid", value.id);
      localStorage.setItem("DWCname", value.name);
      this.$router.push("/detailtwoC");
    },
    // 回到首页
    pushIndex() {
      this.$router.push("/");
    }
  },
};
</script>
<style scoped lang="scss">
.receiptF {
  width: 100%;

  header {
    width: 100%;
    height: 130px;

    .total {
      width: 100%;
      height: 100px;
      display: flex;
      justify-content: space-between;

      .total-left {
        width: 600px;
        margin-top: 20px;
        font-size: 32px;
        font-weight: 700;
        color: rgb(80, 139, 248);
      }

      .total-right {
        width: 1200px;
        height: 100%;
        display: flex;
        justify-content: space-around;
        align-items: center;
        display: flex;
        overflow: hidden;
        margin-left: -100px;

        div:nth-child(2) {
          margin-left: -130px;

          ul {
            width: 200px;
            height: 35px;
            display: flex;
            border: 1px solid black;
            align-items: center;
            border-radius: 10px;

            li:last-child {
              border: none;
            }

            li {
              text-align: center;
              width: 50px;
              height: 100%;
              display: flex;
              align-items: center;
              justify-content: center;
              list-style: none;
              border-right: 1px solid black;
            }
          }
        }

        .icon {
          width: 80px;
          margin-left: -80px;
        }
      }
    }

    footer {
      width: 100%;
      height: 18px;
      background-color: rgb(216, 236, 255);
      color: blue;
      overflow: hidden;
    }
  }

  .num {
    width: 99%;
    height: 155px;
    margin: 15px auto;
    display: flex;
    justify-content: space-around;

    div {
      width: 21%;
      height: 90%;
      border: 2px solid gray;
    }

    .num1 {
      width: 23%;
      height: 100%;
      border-radius: 15px;
      font-size: 40px;
      text-align: center;
      font-weight: 800;
      display: flex;
      align-items: center;
      justify-content: center;

      span {
        color: rgb(80, 139, 248);
      }
    }

    .num2 {
      width: 23%;
      height: 100%;
      border-radius: 15px;
      font-size: 40px;
      text-align: center;
      font-weight: 800;
      display: flex;
      align-items: center;
      justify-content: center;

      span {
        color: rgb(80, 139, 248);
      }
    }

    .num3 {
      width: 23%;
      height: 100%;
      border-radius: 15px;
      font-size: 40px;
      text-align: center;
      font-weight: 800;
      display: flex;
      align-items: center;
      justify-content: center;

      span {
        color: rgb(80, 139, 248);
      }
    }
    .num4 {
      width: 23%;
      height: 100%;
      border-radius: 15px;
      font-size: 40px;
      text-align: center;
      font-weight: 800;
      display: flex;
      align-items: center;
      justify-content: center;

      span {
        color: rgb(80, 139, 248);
      }
    }
  }

  .message {
    width: 99%;
    height: 440px;
    display: flex;
    justify-content: center;
    align-items: center;
    .table {
      width: 98%;
      height: 100%;
      margin: 15px auto;
    }
  }
}
</style>
