<template>
  <div class="statistics">
    <div class="cell_info">
      <div class="card">
        <i class="icon el-icon-s-order" style="color: #40c9c6"></i>
        <div class="des">
          <div class="label">当天申报总数</div>
          <count-to :start-val="0" :end-val="allQuantity" :duration="2000" class="num" />
          <span>单</span>
        </div>
      </div>
      <div class="card">
        <i class="icon el-icon-s-goods" style="color: #36a3f7"></i>
        <div class="des">
          <div class="label">当天申报总重量</div>
          <count-to :start-val="0" :end-val="allWeight" :duration="2000" :decimals="2" class="num" />
          <span>kg</span>
        </div>
      </div>
      <div class="card">
        <i class="icon el-icon-s-data" style="color: #f4516c"></i>
        <div class="des">
          <div class="label">当天申报总件数</div>
          <count-to :start-val="0" :end-val="allNumber" :duration="2000" class="num" />
          <span>件</span>
        </div>
      </div>
      <div class="card">
        <i class="icon el-icon-s-claim" style="color: #40c9c6"></i>
        <div class="des">
          <div class="label">当天消杀总数</div>
          <count-to :start-val="0" :end-val="allDisinfect" :duration="2000" class="num" />
          <span>次</span>
        </div>
      </div>
      <div class="card">
        <i class="icon el-icon-s-claim" style="color: #36a3f7"></i>
        <div class="des">
          <div class="label">当天检测总数</div>
          <count-to :start-val="0" :end-val="allDetection" :duration="2000" class="num" />
          <span>次</span>
        </div>
      </div>
      <div class="card">
        <i class="icon el-icon-s-release" style="color: #f4516c"></i>
        <div class="des">
          <div class="label">当天检测未通过次数</div>
          <count-to :start-val="0" :end-val="notDetection" :duration="2000" class="num" />
          <span>次</span>
        </div>
      </div>
      <div class="card">
        <i class="icon el-icon-s-shop" style="color: #00FF7F"></i>
        <div class="des">
          <div class="label">当天出库总数</div>
          <count-to :start-val="0" :end-val="enterLibrary" :duration="2000" class="num" />
          <span>单</span>
        </div>
      </div>
    </div>
    <div class="option">
      <el-button type="primary" @click="exportone">货物出入库数据导出</el-button>
      <el-button type="primary" @click="showAddress = true">监管仓基础信息导出</el-button>
    </div>
    <div class="container">
      <div class="time">
        <el-date-picker v-model="value1" type="daterange" align="right" unlink-panels size="medium" range-separator="至"
          start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd" :clearable="false"
          :picker-options="pickerOptionsMonth"></el-date-picker>
        <el-select size="medium" v-model="store1" placeholder="请选择仓库" style="width: 250px;margin-left: 30px">
          <el-option v-for="item in storeList" :key="item.code" :label="item.company" :value="item.code">
          </el-option>
        </el-select>
        <el-button type="primary" size="small" style="margin-left: 30px" @click="getAllQuantity">全部数据</el-button>
      </div>
      <div class="info">
        <div class="card">
          <i class="icon el-icon-s-order" style="color: #40c9c6"></i>
          <div class="des">
            <div class="label">申报总数</div>
            <count-to :start-val="0" :end-val="data1.sectionQuantity" :duration="2000" class="num" />
            <span>单</span>
          </div>
        </div>
        <div class="card">
          <i class="icon el-icon-s-goods" style="color: #36a3f7"></i>
          <div class="des">
            <div class="label">申报总重量</div>
            <count-to :start-val="0" :end-val="data1.sectionWeight" :duration="2000" :decimals="2" class="num" />
            <span>kg</span>
          </div>
        </div>
        <div class="card">
          <i class="icon el-icon-s-data" style="color: #f4516c"></i>
          <div class="des">
            <div class="label">申报总件数</div>
            <count-to :start-val="0" :end-val="data1.sectionNumber" :duration="2000" class="num" />
            <span>件</span>
          </div>
        </div>
        <div class="card">
          <i class="icon el-icon-s-shop" style="color: #00FF7F"></i>
          <div class="des">
            <div class="label">出库总数</div>
            <count-to :start-val="0" :end-val="data1.sectionEnterLibrary" :duration="2000" class="num" />
            <span>单</span>
          </div>
        </div>
      </div>
      <div class="chart" id="report"></div>
    </div>
    <div class="container">
      <div class="time">
        <el-date-picker v-model="value2" type="daterange" align="right" unlink-panels size="medium" range-separator="至"
          start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd" :clearable="false"
          :picker-options="pickerOptionsMonth"></el-date-picker>
        <el-select size="medium" v-model="store2" placeholder="请选择仓库" style="width: 250px;margin-left: 30px">
          <el-option v-for="item in storeList" :key="item.code" :label="item.company" :value="item.code">
          </el-option>
        </el-select>
        <el-button type="primary" size="small" style="margin-left: 30px" @click="getAllDisinfect">全部数据</el-button>
      </div>
      <div class="info">
        <div class="card">
          <i class="icon el-icon-s-claim" style="color: #40c9c6"></i>
          <div class="des">
            <div class="label">消杀总数</div>
            <count-to :start-val="0" :end-val="data2.sectionDisinfect" :duration="2000" class="num" />
            <span>次</span>
          </div>
        </div>
        <div class="card">
          <i class="icon el-icon-s-claim" style="color: #36a3f7"></i>
          <div class="des">
            <div class="label">检测总数</div>
            <count-to :start-val="0" :end-val="data2.sectionDetection" :duration="2000" class="num" />
            <span>次</span>
          </div>
        </div>
        <div class="card">
          <i class="icon el-icon-s-release" style="color: #f4516c"></i>
          <div class="des">
            <div class="label">检测未通过次数</div>
            <count-to :start-val="0" :end-val="data2.sectionNotDetection" :duration="2000" class="num" />
            <span>次</span>
          </div>
        </div>
      </div>
      <div class="chart" id="check"></div>
    </div>
    <el-dialog title="请选择仓库" :visible.sync="showAddress" width="500px" :before-close="handleClose">
      <el-form ref="form" label-width="80px">
        <el-form-item label="仓库">
          <el-select size="medium" v-model="dialogStore" placeholder="请选择仓库" style="width: 300px;">
            <el-option v-for="item in dialogStoreList" :key="item.code" :label="item.company" :value="item.code">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="申报日期">
          <el-date-picker style="width: 300px" v-model="dialogDate" type="daterange" align="right" unlink-panels
            size="medium" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd"
            :clearable="false" :picker-options="pickerOptionsMonth"></el-date-picker>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="exporttwo">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import CountTo from "vue-count-to";
import echarts from "echarts";
import resize from './mixins/resize'
import axios from 'axios'
import { getQuantity, getDisinfect, getAddress } from "@/api/coldfood";
import { config } from '@/utils/request'

export default {
  mixins: [resize],
  components: {
    CountTo
  },
  watch: {
    value1() {
      this.initQuantity()
    },
    value2() {
      this.initDisinfect()
    },
    store1() {
      this.initQuantity()
    },
    store2() {
      this.initDisinfect()
    }
  },
  data() {
    let endTime = new Date();
    let time = new Date().getTime() - 3600 * 1000 * 24 * 30
    let startTime = new Date(time)
    return {
      value1: [startTime, endTime],
      value2: [startTime, endTime],
      store1: 0,
      store2: 0,
      allNumber: 0, // 当天申报总件数
      allQuantity: 0, // 当天申报总数
      allWeight: 0, // 当天申报总重量
      allDisinfect: 0, // 当天消杀总数
      allDetection: 0, // 当天检测总数
      notDetection: 0, // 当天检测未通过次数
      enterLibrary: 0, // 当天出库总数
      data1: {
        sectionQuantity: 0,
        sectionWeight: 0,
        sectionNumber: 0,
        sectionEnterLibrary: 0
      },
      data2: {
        sectionDetection: 0,
        sectionDisinfect: 0,
        sectionNotDetection: 0
      },
      pickerOptionsMonth: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }],
        disabledDate(time) {
          return time.getTime() > Date.now();
        }
      },
      storeList: [],
      dialogStoreList: [],
      dialogStore: '',
      dialogDate: '',
      showAddress: false
    };
  },
  methods: {
    initQuantity() {
      let startTime = this.value1[0];
      let endTime = this.value1[1];
      let params = {
        startTime,
        endTime,
        addressCode: this.store1 !== 0 ? this.store1 : ""
      }
      getQuantity(params).then(res => {
        if (res.success) {
          this.allNumber = parseInt(res.data.allNumber) || 0;
          this.allQuantity = parseInt(res.data.allQuantity) || 0;
          this.allWeight = parseFloat(res.data.allWeight) || 0;
          this.data1.sectionNumber = parseInt(res.data.sectionNumber) || 0;
          this.data1.sectionWeight = parseFloat(res.data.sectionWeight) || 0;
          this.data1.sectionQuantity = parseInt(res.data.sectionQuantity) || 0;
          this.data1.sectionEnterLibrary = parseInt(res.data.sectionEnterLibrary) || 0;
          this.data1.xData = res.data.quantity.map(item => {
            return item.createTime
          })
          this.data1.yData = res.data.quantity.map(item => {
            return item.number
          })
          this.setOptionsOne(this.data1)
        }
      });
    },
    getAllQuantity() {
      let params = {
        addressCode: this.store1 !== 0 ? this.store1 : ""
      }
      getQuantity(params).then(res => {
        this.data1.sectionNumber = parseInt(res.data.sectionNumber) || 0;
        this.data1.sectionWeight = parseFloat(res.data.sectionWeight) || 0;
        this.data1.sectionQuantity = parseInt(res.data.sectionQuantity) || 0;
        this.data1.sectionEnterLibrary = parseInt(res.data.sectionEnterLibrary) || 0;
        // this.data1.xData = []
        this.data1.yData = []
        this.setOptionsOne(this.data1)
      })
    },
    initChartOne() {
      this.chartOne = echarts.init(document.getElementById("report"), "macarons");
    },
    setOptionsOne({ xData, yData } = {}) {
      this.chartOne.setOption({
        title: {
          text: '申报数量统计'
        },
        xAxis: {
          data: xData,
          boundaryGap: false,
          axisTick: {
            show: false
          }
        },
        grid: {
          left: 20,
          right: 40,
          bottom: 20,
          top: 30,
          containLabel: true
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross"
          },
          padding: [5, 10]
        },
        yAxis: {
          axisTick: {
            show: false
          },
          minInterval: 1
        },
        legend: {
          data: ["当月申报数量"]
        },
        series: [
          {
            name: "申报数量",
            itemStyle: {
              normal: {
                color: "#FF005A",
                lineStyle: {
                  color: "#FF005A",
                  width: 2
                }
              }
            },
            smooth: true,
            type: "line",
            data: yData,
            animationDuration: 2800,
            animationEasing: "cubicInOut"
          }
        ]
      });
    },
    initDisinfect() {
      let startTime = this.value2[0];
      let endTime = this.value2[1];
      let params = {
        startTime,
        endTime,
        addressCode: this.store2 !== 0 ? this.store2 : ""
      }
      getDisinfect(params).then(res => {
        if (res.success) {
          this.allDisinfect = parseInt(res.data.allDisinfect) || 0;
          this.allDetection = parseInt(res.data.allDetection) || 0;
          this.notDetection = parseInt(res.data.notDetection) || 0;
          this.enterLibrary = parseInt(res.data.enterLibrary) || 0;
          this.data2.sectionDetection = parseInt(res.data.sectionDetection) || 0;
          this.data2.sectionDisinfect = parseInt(res.data.sectionDisinfect) || 0;
          this.data2.sectionNotDetection = parseInt(res.data.sectionNotDetection) || 0;
          this.data2.xData = res.data.notDetectionList.map(item => {
            return item.createTime
          })
          this.data2.yData = res.data.notDetectionList.map(item => {
            return item.number
          })
          this.setOptionsTwo(this.data2)
        }
      });
    },
    getAllDisinfect() {
      let params = {
        addressCode: this.store2 !== 0 ? this.store2 : ""
      }
      getDisinfect(params).then(res => {
        this.data2.sectionDetection = parseInt(res.data.sectionDetection) || 0;
        this.data2.sectionDisinfect = parseInt(res.data.sectionDisinfect) || 0;
        this.data2.sectionNotDetection = parseInt(res.data.sectionNotDetection) || 0;
        this.data2.yData = []
        this.setOptionsTwo(this.data2)
      })
    },
    initChartTwo() {
      this.chartTwo = echarts.init(document.getElementById("check"), "macarons");
    },
    setOptionsTwo({ xData, yData } = {}) {
      this.chartTwo.setOption({
        title: {
          text: '防疫检测未通过统计'
        },
        xAxis: {
          data: xData,
          boundaryGap: false,
          axisTick: {
            show: false
          }
        },
        grid: {
          left: 20,
          right: 40,
          bottom: 20,
          top: 30,
          containLabel: true
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross"
          },
          padding: [5, 10]
        },
        yAxis: {
          axisTick: {
            show: false
          },
          minInterval: 1
        },
        legend: {
          data: ["当月检测出未通过数量"]
        },
        series: [
          {
            name: "检测出未通过数量",
            itemStyle: {
              normal: {
                color: "#FF005A",
                lineStyle: {
                  color: "#FF005A",
                  width: 2
                }
              }
            },
            smooth: true,
            type: "line",
            data: yData,
            animationDuration: 2800,
            animationEasing: "cubicInOut"
          }
        ]
      });
    },
    initStore() {
      getAddress({}).then(res => {
        this.storeList = JSON.parse(JSON.stringify(res.data))
        this.dialogStoreList = res.data
        // console.log(this.dialogStoreList)
        this.storeList.unshift({
          code: 0,
          company: '全部仓库'
        })
      })
    },
    exportone() {
      axios({
        method: "get",
        url: `${config.proxy}export/coldExportAll`,
        responseType: "blob" // 接收格式设置
      }).then((res) => {
        let excelName = "货物出入库数据统计.xls";
        const content = res.data;
        const blob = new Blob([content]);
        const fileName = excelName;
        if ("download" in document.createElement("a")) {
          // 非IE下载
          const elink = document.createElement("a");
          elink.download = fileName;
          elink.style.display = "none";
          elink.href = URL.createObjectURL(blob);
          document.body.appendChild(elink);
          elink.click();
          URL.revokeObjectURL(elink.href); // 释放URL 对象
          document.body.removeChild(elink);
        } else {
          // IE10+下载
          navigator.msSaveBlob(blob, fileName);
        }
      })
    },
    handleClose() {
      this.dialogStore = '';
      this.dialogDate = '';
      this.showAddress = false
    },
    exporttwo() {
      if (!this.dialogStore) {
        this.$message.warning('请选择要导出数据的仓库')
      } else if (!this.dialogDate) {
        this.$message.warning('请选择申报时间段')
      } else {
        let addressCode = this.dialogStore;
        let areaName = this.dialogStoreList.filter(item => {
          return item.code === this.dialogStore
        })[0].company
        let startTime = this.dialogDate[0];
        let endTime = this.dialogDate[1];
        axios({
          method: "get",
          url: `${config.proxy}export/coldWarehouse?addressCode=${addressCode}&areaName=${areaName}&startTime=${startTime}&endTime=${endTime}`,
          responseType: "blob" // 接收格式设置
        }).then((res) => {
          this.handleClose()
          let excelName = `${areaName}仓基础信息统计.xls`;
          const content = res.data;
          const blob = new Blob([content]);
          const fileName = excelName;
          if ("download" in document.createElement("a")) {
            // 非IE下载
            const elink = document.createElement("a");
            elink.download = fileName;
            elink.style.display = "none";
            elink.href = URL.createObjectURL(blob);
            document.body.appendChild(elink);
            elink.click();
            URL.revokeObjectURL(elink.href); // 释放URL 对象
            document.body.removeChild(elink);
          } else {
            // IE10+下载
            navigator.msSaveBlob(blob, fileName);
          }
        })
      }
    }
  },
  created() {
    this.initQuantity();
    this.initDisinfect();
    this.initStore()
    this.$nextTick(() => {
      this.initChartOne();
      this.initChartTwo()
    });
  }
};
</script>

<style lang="stylus" scoped>
.statistics{
  height: 86vh;
  overflow-y: auto;
  overflow-x: hidden;
  background: #f0f2f5;
  padding: 20px;
  box-sizing: border-box;
}
.cell_info {
  display: flex;
  align-items: center;

  .card {
    width: 200px;
    height: 108px;
    margin-left: 30px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.05);
    font-size: 12px;
    color: #666;
    background: #fff;

    .icon {
      font-size: 48px;
    }

    .des {
      text-align: center;
      .label {
        line-height: 18px;
        color: rgba(0, 0, 0, 0.45);
        font-size: 16px;
        margin-bottom: 12px;
      }

      .num {
        font-size: 20px;
      }
    }
  }

  .card:first-child {
    margin-left: 0;
  }
}

.option {
  margin-top 30px;
  display: flex;
  align-items: center;
}

.container {
  padding: 16px;
  margin-top: 30px;
  background: #fff;
  text-align: left;

  .time {
    display: flex;
    align-items: center;
  }

  .info {
    margin-top 20px;
    display: flex;
    align-items: center;

    .card {
      width: 200px;
      height: 108px;
      margin-left: 30px;
      padding: 0 40px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
      border-color: rgba(0, 0, 0, 0.05);
      font-size: 12px;
      color: #666;
      background: #fff;

      .icon {
        font-size: 48px;
      }

      .des {
        .label {
          line-height: 18px;
          color: rgba(0, 0, 0, 0.45);
          font-size: 16px;
          margin-bottom: 12px;
        }

        .num {
          font-size: 20px;
        }
      }
    }

    .card:first-child {
      margin-left: 0;
    }
  }

  .chart {
    margin-top: 20px;
    width: 100%;
    height: 350px;
  }
}
</style>