<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="88px">
      <el-form-item>
        <el-radio-group v-model="queryParams.timeType" size="small" @change="checkTimeType">
          <el-radio-button label="1" >全部</el-radio-button>
          <el-radio-button label="2">本年</el-radio-button>
          <el-radio-button label="3">本月</el-radio-button>
          <el-radio-button label="4">本周</el-radio-button>
          <el-radio-button label="5">今日</el-radio-button>
          <el-radio-button label="6">自定义</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="" prop="timeRange">
        <el-date-picker
          v-model="queryParams.timeRange"
          type="daterange"
          value-format="yyyy-MM-dd"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :disabled="queryParams.timeType!=6"
          >
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <div>
      <el-row :gutter="20" class="mb20">
        <el-col :span="4">
          <el-card>
            <div slot="header" class="clearfix">
              <span>订单数量</span>
            </div>
            <div class="box-card">
              <div class="target color-blue">{{ grodIndicator.distributeCounts }}</div>
              <div class="units">次</div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="4">
          <el-card>
            <div slot="header" class="clearfix">
              <span>供应商数量</span>
            </div>
            <div class="box-card">
              <div class="target color-blue">{{ grodIndicator.supplierCounts }}</div>
              <div class="units">个</div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="4">
          <el-card>
            <div slot="header" class="clearfix">
              <span>肉商数量</span>
            </div>
            <div class="box-card">
              <div class="target color-blue">{{ grodIndicator.purchaserCounts }}</div>
              <div class="units">个</div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="4">
          <el-card>
            <div slot="header" class="clearfix">
              <span>计划屠宰头数</span>
            </div>
            <div class="box-card">
              <div class="target color-blue">{{ grodIndicator.entranceAmount }}</div>
              <div class="units">头</div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="4">
          <el-card>
            <div slot="header" class="clearfix">
              <span>实际屠宰头数</span>
            </div>
            <div class="box-card">
              <div class="target color-blue">{{ grodIndicator.entranceRealAmount }}</div>
              <div class="units">头</div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="4">
          <el-card>
            <div slot="header" class="clearfix">
              <span>不合格产品重量</span>
            </div>
            <div class="box-card">
              <div class="target color-green">{{ grodIndicator.unqualifiedWeight }}</div>
              <div class="units">kg</div>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <el-row :gutter="20" class="mb20">
        <el-col :span="8">
          <el-card>
            <div slot="header" class="clearfix">
              <span>供应商排名TOP5</span>
            </div>
            <div class="area-box">
              <el-table
                :data="supplierRank"
                class="customer-table"
                header-cell-class-name="header-cell-style"
                cell-class-name="table-cell-style">
                <el-table-column
                  type="index"
                  width="50">
                </el-table-column>
                <el-table-column
                  prop="supplierName"
                  label="供应商"
                  width="140">
                  <template slot-scope="scope">
                      <span>{{ sliceText(scope.row.supplierName,5) }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="totalAmount"
                  label="占比"
                  min-width="180">
                  <template slot-scope="scope">
                      <el-progress :text-inside="true" text-color="#fff" :stroke-width="20" :percentage="getPercent(scope.row)"></el-progress>
                    </template>
                </el-table-column>
                <el-table-column
                  prop="totalAmount"
                  label="供应数量"
                  width="80"
                  >
                </el-table-column>
              </el-table>
            </div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card>
            <div slot="header" class="clearfix">
              <span>产地统计</span>
            </div>
            <div class="area-box">
              <originAmount :cdata="originAmount"/>
            </div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card>
            <div slot="header" class="clearfix">
              <span>屠宰量统计</span>
            </div>
            <div class="area-box">
              <entranceAmount :cdata="entranceAmount"/>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <el-row :gutter="20" class="mb20">
        <el-col :span="8">
          <el-card>
            <div slot="header" class="clearfix">
              <span>肉商排名TOP5</span>
            </div>
            <div class="area-box">
              <el-table
                :data="purchaserRank"
                class="customer-table"
                header-cell-class-name="header-cell-style green"
                cell-class-name="table-cell-style">
                <el-table-column
                  type="index"
                  width="50">
                </el-table-column>
                <el-table-column
                  prop="purchaserName"
                  label="肉商"
                  width="140">
                  <template slot-scope="scope">
                      <span>{{ sliceText(scope.row.purchaserName,5) }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="totalAmount"
                  label="占比"
                  min-width="180">
                  <template slot-scope="scope">
                      <el-progress :text-inside="true" :color="'#67C23A'" text-color="#fff" :stroke-width="20" :percentage="getPercent(scope.row)"></el-progress>
                    </template>
                </el-table-column>
                <el-table-column
                  prop="totalAmount"
                  label="接收数量"
                  width="80"
                  >
                </el-table-column>
              </el-table>
            </div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card>
            <div slot="header" class="clearfix">
              <span>入场检验统计</span>
            </div>
            <div class="area-box">
              <harmlessAmount :cdata="harmlessAmount"/>
            </div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card>
            <div slot="header" class="clearfix">
              <span>去向统计</span>
            </div>
            <div class="area-box">
              <saleAmount :cdata="saleAmount"/>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { getGrodIndicator,getSupplierRank,getPurchaserRank,getOriginAmount,getHarmlessAmount,getSaleAmount,getEntranceAmountWithTime } from "@/api/app/dataStatistics";
import originAmount from "./components/originAmount.vue";
import harmlessAmount from "./components/harmlessAmount.vue";
import saleAmount from "./components/saleAmount.vue";
import entranceAmount from "./components/entranceAmount.vue";
import {sliceStr} from "@/utils/str.js";
export default {
  name: "Entrance",
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 表格数据
      supplierRank: [],
      purchaserRank: [],
      originAmount:{
        xAxis:[],
        yAxis:[]
      },
      harmlessAmount:{
        xAxis:[],
        yAxis:[]
      },
      saleAmount:{
        xAxis:[],
        yAxis:[]
      },
      entranceAmount:{
        xAxis:[],
        yAxis:[]
      },
      // 查询参数
      queryParams: {
        timeType: "1",
        timeRange: [],
      },
      //
      grodIndicator:{

      }
    };
  },
  components:{
    originAmount,
    harmlessAmount,
    saleAmount,
    entranceAmount
  },
  mounted() {
    this.startRefresh();
  },
  methods: {
    sliceText(val,num){
      return sliceStr(val,num);
    },
    checkTimeType(value){
      if(value!=6){
        this.$set(this.queryParams, "timeRange",[]);
        this.initPage();
      }
    },
    //定时刷新
    startRefresh() {
      this.initPage()

      const timer = setInterval(() => {
        this.initPage()
      }, 5000)

      // 使用$once自动清除定时器
      this.$once('hook:beforeDestroy', () => {
        if(timer != null){
          clearInterval(timer)
        }

      })
      // 使用$once自动清除定时器
      this.$once('hook:deactivated', () => {
        if(timer != null){
          clearInterval(timer)
        }
      })
    },
    initPage(){
      if (this.queryParams.timeType==6&&this.queryParams.timeRange && this.queryParams.timeRange.length>1) {

        this.$set(this.queryParams, "startTime",this.queryParams.timeRange[0]+" 00:00:00");
        this.$set(this.queryParams, "endTime",this.queryParams.timeRange[1]+" 23:59:59");
      }else{
        this.$set(this.queryParams, "startTime",null);
        this.$set(this.queryParams, "endTime",null);
      }
      console.log(this.queryParams)
      this.getGrod();
      this.getSupplierRankList();
      this.getPurchaserRankList();
      this.getOriginAmountList();
      this.getHarmlessAmountList();
      this.getSaleAmountList();
      this.getEntranceAmountList();
    },
    //查询生产指标
    getGrod() {
      getGrodIndicator(this.queryParams).then(response => {
        this.grodIndicator = response.data;

      });
    },
    //查询供应商排名
    getSupplierRankList(){
      getSupplierRank(this.queryParams).then(response => {
        this.supplierRank = response.data?response.data:[];
        let total = 0;
        this.supplierRank.map(item=>{
          total+=item.totalAmount;
        })
        this.supplierRank.map(item=>{
          item.total = total;
        })
        console.log(this.supplierRank)
      });
    },
    //查询肉商排名
    getPurchaserRankList(){
      getPurchaserRank(this.queryParams).then(response => {
        this.purchaserRank = response.data?response.data:[];
        let total = 0;
        this.purchaserRank.map(item=>{
          total+=item.totalAmount;
        })
        this.purchaserRank.map(item=>{
          item.total = total;
        })
        console.log(this.purchaserRank)
      });
    },
    getPercent(row){
        return row.total==0?0:(parseFloat(((row.totalAmount/row.total)*100).toFixed(2)))
    },
    //查询来源统计
    getOriginAmountList(){
      getOriginAmount(this.queryParams).then(response => {
        let data = response.data;
        if(data){
          const names = data.map(item => item.originPlace);
          const value = data.map(item => item.totalAmount);
          this.originAmount = {
            xAxis:names,
            yAxis:value
          }
        }else{
          this.originAmount = {
            xAxis:[],
            yAxis:[]
          }
        }

      });
    },
    //查询无害化统计
    getHarmlessAmountList(){
      getHarmlessAmount(this.queryParams).then(response => {
        let data = response.data;
        if(data){
          this.harmlessAmount = {
            xAxis:["病死","病害","急宰","准宰"],
            yAxis:[data.illnessDeadAmount,data.illnessDiseaseAmount,data.snapKillAmount,data.entranceRealAmount]
          }
        }else{
          this.harmlessAmount = {
            xAxis:["病死","病害","急宰","准宰"],
            yAxis:[]
          }
        }

      });
    },
    //查询去向统计
    getSaleAmountList(){
      getSaleAmount(this.queryParams).then(response => {
        let data = response.data;
        if(data){
          const names = data.map(item => item.salePlace);
          const value = data.map(item => item.totalAmount);
          this.saleAmount = {
            xAxis:names,
            yAxis:value
          }
        }else{
          this.saleAmount = {
            xAxis:[],
            yAxis:[]
          }
        }

      });
    },
    //查询屠宰统计
    getEntranceAmountList(){
      getEntranceAmountWithTime(this.queryParams).then(response => {
        let data = response.data;
        if(data){
          const names = data.map(item => item.timeSpot);
          const value = data.map(item => item.totalAmount);
          this.entranceAmount = {
            xAxis:names,
            yAxis:value
          }
        }else{
          this.entranceAmount = {
            xAxis:[],
            yAxis:[]
          }
        }

      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.initPage();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.initPage();
    },
  }
};
</script>
<style>
  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    height: 50px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
  }
  .box-card .units{
    margin-left: 10px;
    /* line-height: 50px; */
  }
  .box-card .target{
    flex: 1;
    line-height: 34px;
    font-size: 44px;
  }
  .color-blue{
    color:#409EFF
  }
  .color-green{
    color:#67C23A
  }
  .area-box{
    height: 210px;
  }
  .customer-table{
    width:100%;
    border:0;
  }
  .customer-table >>> .el-table th.is-leaf {
    /* 去除上边框 */
      border: none;
  }
  .customer-table >>> .el-table::before{
    /* 去除下边框 */
    height: 0;
  }
  .header-cell-style{
    background: #409EFF !important;
    color:#fff !important;
    padding: 3px 0 !important;
    height:30px !important;
  }
  .header-cell-style.green{
    background: #67C23A !important;
  }

  .table-progress{
    display: flex;
    align-items: center;
  }
  .table-cell-style{
    padding: 7px 0 !important;
  }
</style>
