<template>
  <div class="app-container">
    <div class="main-title" style="margin-top: 0">
      <div class="title">仓库预约统计看板</div>
    </div>

    <div>
      <el-form ref="screenForm" :model="screenForm" label-width="70px" size="small" label-position="left">
        <el-form-item label="统计日期" prop="date">
          <el-date-picker
            v-model="screenForm.date"
            type="datetimerange"
:default-time="['00:00:00','23:59:59']"
            range-separator="至"
            value-format="yyyy-MM-dd HH:mm:ss"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </el-form-item>
      </el-form>
    </div>

    <div class="card-container">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-card shadow="hover">
            <div class="title">每日预约出货单</div>
            <div class="num">
              <span>{{ detailData.pickOrderNum || 0 }}</span
              >（单）
            </div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card shadow="hover">
            <div class="title">每日提货货品种类</div>
            <div class="num">
              <span>{{ detailData.pickCategoryNum || 0 }}</span
              >（种）
            </div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card shadow="hover">
            <div class="title">每日预约经销商</div>
            <div class="num">
              <span>{{ detailData.pickCustomNum || 0 }}</span
              >（家）
            </div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card shadow="hover">
            <div class="title">每日提货经销商</div>
            <div class="num">
              <span>{{ detailData.pickOrderCustomNum || 0 }}</span
              >（家）
            </div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card shadow="hover">
            <div class="title">每日出库货品种类</div>
            <div class="num">
              <span>{{ detailData.pickCategoryNum || 0 }}</span
              >（种）
            </div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card shadow="hover">
            <div class="title">每日出库货品台数</div>
            <div class="num">
              <span>{{ detailData.shipOrderNum || 0 }}</span
              >（台）
            </div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card shadow="hover">
            <div class="title">每日出库家用空调货品单数</div>
            <div class="num">
              <span>{{ detailData.shipHomeConditionerNum || 0 }}</span
              >（单）
            </div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card shadow="hover">
            <div class="title">每日出库商用空调货品单数</div>
            <div class="num">
              <span>{{ detailData.shipTradeConditionerNum || 0 }}</span
              >（单）
            </div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card shadow="hover">
            <div class="title">每日出库生活电器品单数</div>
            <div class="num">
              <span>{{ detailData.pickLifeNum || 0 }}</span
              >（单）
            </div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card shadow="hover">
            <div class="title">每日出库家用空调货品台数</div>
            <div class="num">
              <span>{{ detailData.shipHomeConditionerTower || 0 }}</span
              >（台）
            </div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card shadow="hover">
            <div class="title">每日出库商用空调货品台数</div>
            <div class="num">
              <span>{{ detailData.shipTradeConditionerTower || 0 }}</span
              >（台）
            </div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card shadow="hover">
            <div class="title">每日出库生活电器品台数</div>
            <div class="num">
              <span>{{ detailData.pickLifeTower || 0 }}</span
              >（台）
            </div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card shadow="hover">
            <div class="title">每日出库家用空调货品金额</div>
            <div class="num">
              <span>{{ detailData.shipHomeConditionerPrice || 0 }}</span
              >（元）
            </div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card shadow="hover">
            <div class="title">每日出库商用空调货品金额</div>
            <div class="num">
              <span>{{ detailData.shipTradeConditionerPrice || 0 }}</span
              >（元）
            </div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card shadow="hover">
            <div class="title">每日出库生活电器品金额</div>
            <div class="num">
              <span>{{ detailData.pickLifePrice || 0 }}</span
              >（元）
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { getStatistics } from '@/api/supply/pickup'

export default {
  data() {
    return {
      screenForm: {
        date: []
      },
      detailData: {}
    }
  },

  created() {
    this.getDetail()
  },

  methods: {
    getDetail() {
      getStatistics({
        startTime: this.screenForm.date ? this.screenForm.date[0] : '',
        endTime: this.screenForm.date ? this.screenForm.date[1] : ''
      }).then(res => {
        this.detailData = res.data
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.main-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 60px;
  border-bottom: 1px solid #dcdfe6;
  margin-bottom: 20px;
  .title {
    font-size: 16px;
    font-weight: 600;
    padding-left: 10px;
  }
}
.card-container {
  margin-top: 40px;
  .el-col {
    margin-bottom: 20px;
  }
  .title {
    font-size: 14px;
  }
  .num {
    text-align: center;
    margin-top: 20px;
    font-size: 12px;
    span {
      font-size: 20px;
      color: #409eff;
      font-weight: 600;
    }
  }
}
</style>
