<template>
  <div>
    <div style="padding: 10px">
      <div style="display: inline-flex;font-weight: bold">
        月份：
      </div>
      <div style="display: inline-flex;padding: 10px 20px;">
        <el-date-picker
            @change="getMonthJcdTj"
            v-model="value2"
            format="yyyy-MM"
            :default-value="new Date()"
            type="month"
            placeholder="选择月">
        </el-date-picker>
      </div>
      <el-row :gutter="20">
        <el-col :span="1.5">
          <el-card shadow="hover">
            <el-table :data="list.place" v-loading="loading" :show-summary="true">
              <el-table-column label="就餐地" align="center" prop="placeName" width="120"/>
              <el-table-column label="订单总数" align="center" prop="count" width="95"/>
              <el-table-column label="事业编群" align="center" prop="sybq" width="95"/>
              <el-table-column label="非事业编群" align="center" prop="fsybq" width="95"/>
              <el-table-column label="第三方劳务外包" align="center" prop="dsflwwb" width="120"/>
            </el-table>
          </el-card>
        </el-col>
        <el-col :span="1.5">
          <el-card shadow="hover">
            <div style="padding: 5px">
              <el-button
                  type="warning"
                  plain
                  icon="el-icon-download"
                  size="mini"
                  :loading="exportLoading"
                  @click="download"
              >导出
              </el-button>
            </div>
            <div style="padding: 5px 10px">
              <el-table :data="list2" v-loading="loading2">
                <el-table-column label="用户编号" align="center" prop="userNumber" width="120"/>
                <el-table-column label="用户名" align="center" prop="nickName" width="120"/>
                <el-table-column label="用户类型" align="center" prop="userTypeTitle" width="120"/>
                <el-table-column label="订单总数" align="center" prop="count" width="95"/>
                <el-table-column label="消费总额" align="center" prop="sumTotal" width="120"/>
              </el-table>
              <pagination
                  v-show="useMoneyParams.total>0"
                  :total="useMoneyParams.total"
                  :page.sync="useMoneyParams.pageNum"
                  :limit.sync="useMoneyParams.pageSize"
                  @pagination="getUseMoney"
              />
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { jdcMonthTj, useMoneyMonthTj, useMoneyMonthTjExport } from '@/api/canteen/order'

export default {
  name: 'jcdStat',
  props: {
    menuNumber: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      list: [],
      list2: [],
      list2Data: [],
      useMoneyParams: {
        total: 0,
        pageNum: 1,
        pageSize: 10
      },
      loading: false,
      loading2: false,
      exportLoading: false,
      value2: ''
    }
  },
  create() {
  },
  methods: {
    download() {
      this.exportLoading = true
      let params = {
        year: 1900 + this.value2.getYear(),
        month: (this.value2.getMonth() + 1)
      }
      useMoneyMonthTjExport(params).then(response => {
        this.$download.name(response.msg)
        this.exportLoading = false
      }).catch(() => {
      })
    },
    getUseMoney() {
      let i = (this.useMoneyParams.pageNum - 1) * this.useMoneyParams.pageSize
      let copyList = []
      for (let j = i; j < i + this.useMoneyParams.pageSize; j++) {
        copyList.push(this.list2Data[j])
      }
      this.list2 = copyList
    },
    getMonthJcdTj() {
      if (this.value2) {
        this.loading = true
        this.loading2 = true
      } else {
        this.list = []
        this.list2 = []
      }
      let params = {
        year: 1900 + this.value2.getYear(),
        month: (this.value2.getMonth() + 1)
      }
      jdcMonthTj(params).then(result => {
        if (result.code === 200) {
          if (result.data) {
            this.list = result.data
            this.loading = false
          }
        } else {
          this.loading = false
        }
      }).catch(() => {
        this.loading = false
      }).finally(() => {
        this.loading = false
      })
      useMoneyMonthTj(params).then(result => {
        if (result.code === 200) {
          if (result.data) {
            this.list2Data = result.data
            this.useMoneyParams.total = this.list2Data.length
            this.getUseMoney()
            this.loading2 = false
          }
        } else {
          this.loading2 = false
        }
      }).catch(error => {
        this.loading2 = false
      }).finally(() => {
        this.loading2 = false
      })
    }
  }
}
</script>

<style scoped>

</style>
