<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">{{ outputIndicator.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">{{ outputIndicator.distributeAmounts }}</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">{{ outputIndicator.avgPorkSideWeight }}</div>
              <div class="units">kg</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">{{ outputIndicator.avgPorkHeadWeight }}</div>
              <div class="units">kg</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">{{ outputIndicator.avgPorkRedWeight }}</div>
              <div class="units">kg</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">{{ outputIndicator.avgPorkWhiteWeight }}</div>
              <div class="units">kg</div>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <el-row :gutter="20" class="mb20">
        <el-col :span="12">
          <el-card>
            <div slot="header" class="clearfix">
              <span>白条重量统计</span>
            </div>
            <div class="area-box">
              <sideWeight :cdata="sideWeight"/>
            </div>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card>
            <div slot="header" class="clearfix">
              <span>猪头重量统计</span>
            </div>
            <div class="area-box">
              <headWeight :cdata="headWeight"/>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <el-row :gutter="20" class="mb20">
        <el-col :span="12">
          <el-card>
            <div slot="header" class="clearfix">
              <span>红脏重量统计</span>
            </div>
            <div class="area-box">
              <redWeight :cdata="redWeight"/>
            </div>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card>
            <div slot="header" class="clearfix">
              <span>白脏重量统计</span>
            </div>
            <div class="area-box">
              <whiteWeight :cdata="whiteWeight"/>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { getOutputIndicator,getSideWeight,getOtherProductWeight } from "@/api/app/dataStatistics";
import sideWeight from "./components/sideWeight.vue";
import headWeight from "./components/headWeight.vue";
import redWeight from "./components/redWeight.vue";
import whiteWeight from "./components/whiteWeight.vue";
export default {
  name: "outputStatistics",
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 表格数据
      reportList: [],
      //指标数据
      outputIndicator:{

      },
      sideWeight:{
        xAxis:[],
        yAxis:[]
      },
      headWeight:{
        xAxis:[],
        yAxis:[]
      },
      redWeight:{
        xAxis:[],
        yAxis:[]
      },
      whiteWeight:{
        xAxis:[],
        yAxis:[]
      },
      // 查询参数
      queryParams: {
        timeType: "1",
        timeRange: [],
      },
    };
  },
  components:{
    sideWeight,
    headWeight,
    redWeight,
    whiteWeight
  },
  mounted() {
    this.startRefresh();
  },
  methods: {
    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);
      }
      this.getIndicator();
      this.getSideWeightList();
      this.getHeadWeightList();
      this.getRedWeightList();
      this.getWhiteWeightList();
    },
    /** 查询列表 */
    getIndicator() {
      getOutputIndicator(this.queryParams).then(response => {
        let data = response.data;
        this.outputIndicator = {
          distributeAmounts:data.distributeAmounts?data.distributeAmounts:0,
          distributeCounts:data.distributeCounts?data.distributeCounts:0,
          avgPorkRedWeight:data.avgPorkRedWeight?data.avgPorkRedWeight.toFixed(2):0.00,
          avgPorkHeadWeight:data.avgPorkHeadWeight?data.avgPorkHeadWeight.toFixed(2):0.00,
          avgPorkWhiteWeight:data.avgPorkWhiteWeight?data.avgPorkWhiteWeight.toFixed(2):0.00,
          avgPorkSideWeight:data.avgPorkSideWeight?data.avgPorkSideWeight.toFixed(2):0.00,
        };
      });
    },
    //获取白条重量曲线
    getSideWeightList(){
      getSideWeight(this.queryParams).then(response => {
        let data = response.data;
        if(data){
          const names = data.map(item => item.timeSpot);
          const value = data.map(item => item.totalWeight);
          this.sideWeight = {
            xAxis:names,
            yAxis:value
          }
        }else{
          this.sideWeight = {
            xAxis:[],
            yAxis:[]
          }
        }

      });
    },
    //获取猪头重量曲线
    getHeadWeightList(){
      let param = {
        ...this.queryParams,
        keyword:"猪头"
      }
      getOtherProductWeight(param).then(response => {
        let data = response.data;
        if(data && data.length>0){
          const names = data.map(item => item.timeSpot);
          const value = data.map(item => item.totalWeight);
          this.headWeight = {
            xAxis:names,
            yAxis:value
          }
        }else{
          this.headWeight = {
            xAxis:[],
            yAxis:[]
          }
        }

      });
    },
    //获取红脏重量曲线
    getRedWeightList(){
      let param = {
        ...this.queryParams,
        keyword:"红脏"
      }
      getOtherProductWeight(param).then(response => {
        let data = response.data;
        if(data && data.length>0){
          const names = data.map(item => item.timeSpot);
          const value = data.map(item => item.totalWeight);
          this.redWeight = {
            xAxis:names,
            yAxis:value
          }
        }else{
          this.redWeight = {
            xAxis:[],
            yAxis:[]
          }
        }

      });
    },
    //获取白脏重量曲线
    getWhiteWeightList(){
      let param = {
        ...this.queryParams,
        keyword:"白条"
      }
      getOtherProductWeight(param).then(response => {
        let data = response.data;
        if(data && data.length>0){
          const names = data.map(item => item.timeSpot);
          const value = data.map(item => item.totalWeight);
          this.whiteWeight = {
            xAxis:names,
            yAxis:value
          }
        }else{
          this.whiteWeight = {
            xAxis:[],
            yAxis:[]
          }
        }

      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.initPage();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
  }
};
</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;
  }
</style>
