<template>
  <div class="receiptF">
    <!-- 头部信息 -->
    <header>
      <div class="total">
        <div class="total-left">“ 混凝土生产 ” - <span>{{ this.name }}</span></div>
        <div class="total-right">
          <div style="width: 300px; margin-left: 35px;">
            <el-radio-group v-model="radio1" @change="unitChange(radio1)">
              <el-radio-button label="0">建设单位</el-radio-button>
              <el-radio-button label="1">施工单位</el-radio-button>
            </el-radio-group>
          </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="now">昨日 &nbsp;<span>{{ Math.floor(isNaN(this.num.dayPlanSum) ? 0 : this.num.dayPlanSum) + "方" }}</span></div>
      <div class="before">本月&nbsp;<span>{{ Math.floor(isNaN(this.num.monthPlanSum) ? 0 : this.num.monthPlanSum) + "方" }}</span></div>
      <div class="next">本年&nbsp;<span>{{ Math.floor(isNaN(this.num.yearPlanSum) ? 0 : this.num.yearPlanSum) + "方" }}</span></div>
    </div>
    <!-- 图标信息及表格 -->
    <div class="message">
      <div class="charts"></div>
      <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="86"></el-table-column>
          <el-table-column prop="name" label="组织名称" width="215">
            <template slot-scope="{ row }">
              <!-- 自定义插槽内容 -->
              <div class="custom-slot" @click="handleClick(row)" style="cursor: pointer; color: rgb(127, 144, 255)">
                {{ row.name }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="now" label="昨日(方)" sortable width="215">
            <template slot-scope="{ row }">
              <!-- 自定义插槽内容 -->
              <div class="custom-slot">
                {{ Math.floor(row.dayPlanSum) }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="before" label="本月(方)" sortable width="215">
            <template slot-scope="{ row }">
              <!-- 自定义插槽内容 -->
              <div class="custom-slot">
                {{ Math.floor(row.monthPlanSum) }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="up" label="本年(方)" sortable width="180">
            <template slot-scope="{ row }">
              <!-- 自定义插槽内容 -->
              <div class="custom-slot">
                {{ Math.floor(row.yearPlanSum) }}
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>
<script>
import * as echarts from "echarts";
import "echarts-liquidfill"; //在这里引入
import {
  getPcConcreteProductionList, // 右下数据
  getPcConcreteProductionCharts, // echarts图表数据 头部数据
} from "../../api";
export default {
  data () {
    return {
      numberLoading: true, // 顶部数字加载
      loading: true,
      radio1: "0",
      radio2: "day",
      // 数据
      num: {},
      id: localStorage.getItem("id"),
      name: localStorage.getItem("name"),
      tableData: [],
      before: [],
      now: [],
    };
  },
  created () {
    const url = new URL(window.location.href);
    if (url.href.includes('?')) {
      this.id = localStorage.getItem("RGid");
      this.name = localStorage.getItem("RGname");
    } else {
      this.id = localStorage.getItem("id");
      this.name = localStorage.getItem("name");
    }
  },
  async mounted () {
    this.useCharts();
    this.getdata();
    this.getPcConcreteProductionList();
  },
  methods: {
    // message左边charts图
    useCharts () {
      var option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
            color: "#fac858",
          },
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.num.xdata,
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: this.num.ydata,
            type: 'line',
            areaStyle: {
              color: "#fac858",
            },
            lineStyle: {
              color: "blue",
            }
          }
        ]
      };
      const myChart = echarts.init(document.querySelector(".charts"));
      myChart.setOption(option);
    },
    // 初始获取数字数据
    async getdata () {
      this.numberLoading = true
      var res = await getPcConcreteProductionCharts({
        onpage: this.radio2,
        org_id: this.id,
      });
      this.num = res.data.data[0];
      this.numberLoading = false
      this.useCharts()
    },
    // 初始获取图表数据
    async getPcConcreteProductionList () {
      var res = await getPcConcreteProductionList({
        org_id: this.id,
        onpage: this.radio2,
        companyunit: this.radio1,
      });
      this.tableData = res.data.data
      this.loading = false
    },
    // 时间段改变
    async dateChange (value) {
      this.radio2 = value;
      var res = await getPcConcreteProductionCharts({
        onpage: this.radio2,
        org_id: this.id,
      });
      this.num = res.data.data[0];
      this.useCharts()
      var res = await getPcConcreteProductionList({
        org_id: this.id,
        onpage: this.radio2,
        companyunit: this.radio1,
      });
      this.tableData = res.data.data
      this.loading = false
    },
    // 单位改变
    async unitChange (value) {
      this.radio1 = value
      this.loading = true
      var res = await getPcConcreteProductionList({
        org_id: this.id,
        companyunit: this.radio1,
      });
      this.tableData = res.data.data
      this.loading = false
    },
    handleClick (value) {
      localStorage.setItem("RSname", value.name)
      localStorage.setItem("RSid", value.id)
      // 跳转从新的标签页打开
      const routerJump = this.$router.resolve(`/product?id=${2}`)
      window.open(routerJump.href, '_blank')
      // this.$router.push(`/product?id=${2}`)
    },
    // 回到首页
    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: 900px;
        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: 31%;
      height: 90%;
      border: 2px solid gray;
    }

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

      span {
        color: blue;
      }
    }

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

      span {
        color: blue;
      }
    }

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

      span {
        color: greenyellow;
      }
    }
  }

  .message {
    width: 99%;
    height: 400px;
    display: flex;
    justify-content: space-around;
    align-items: center;

    .charts {
      width: 48%;
      height: 100%;

      div {
        canvas {
          width: 800px;
        }
      }
    }

    .table {
      width: 48%;
      height: 100%;
    }
  }
}
</style>
