<style scoped>
  .el-date-editor /deep/ .el-input__inner {
    width: 100%;
    border: none;
    background-color: transparent;
    height:28px;
  }

  .border-bottom {
    border-bottom: 1px dashed #d1d1d1;
    padding-bottom: 5px;
    margin-bottom: 5px;
  }

</style>
<template>
  <div class="page-body">
    <div class="page-search row items-center">
      <div class="col row wrap q-mr-lg q-col-gutter-md">
        <div class="col-2">
          <q-select stack-label color="primary" dense filled label="类型" option-value="Id" option-label="Name"
            :options="SelectList" v-model="msg.SelectType" ref="SelectType" @input="getSelectType(msg.SelectType)"
            emit-value map-options />
        </div>
        <template v-if="msg.SelectType==1">
          <div class="col-2 Sysuser_Date">
            <q-field filled dense>
               <template v-slot:control>
                <el-date-picker v-model="msg.StartTime" size="mini" style="width:100%" :clearable="false" type="date"
                  placeholder="选择开始日期" value-format="yyyy-MM-dd" @change="resetSearch">
                </el-date-picker>    
              </template>
            </q-field>
          </div>
          <div class="col-2 Sysuser_Date">
            <q-field filled dense>
               <template v-slot:control>
                <el-date-picker v-model="msg.EndTime" size="mini" style="width:100%" :clearable="false" type="date"
                  placeholder="选择结束日期" value-format="yyyy-MM-dd" @change="resetSearch">
                </el-date-picker>    
              </template>
            </q-field>
          </div>
        </template>
        <template v-if="msg.SelectType==2">
          <div class="col-2">
            <q-field filled dense>
              <template v-slot:control>
                <el-date-picker v-model="msg.StartTime" size="mini" style="width:100%" type="month" :clearable="false"
                  @change="resetSearch" value-format="yyyy-MM" placeholder="选择月">
                </el-date-picker>
              </template>
            </q-field>
          </div>
          <div class="col-2">
            <q-field filled dense>
              <template v-slot:control>
                <el-date-picker v-model="msg.EndTime" size="mini" style="width:100%" type="month" :clearable="false"
                  @change="resetSearch" value-format="yyyy-MM" placeholder="选择月">
                </el-date-picker>
              </template>
            </q-field>
          </div>
        </template>
        <template v-if="msg.SelectType==3">
          <div class="col-2">
            <q-field filled dense>
              <template v-slot:control>
                <el-date-picker v-model="msg.StartTime" size="mini" style="width:100%" type="year" :clearable="false"
                  @change="resetSearch" format="yyyy" value-format="yyyy" placeholder="选择年">
                </el-date-picker>
              </template>
            </q-field>
          </div>
          <div class="col-2">
            <q-field filled dense>
              <template v-slot:control>
                <el-date-picker v-model="msg.EndTime" size="mini" style="width:100%" type="year" :clearable="false"
                  @change="resetSearch" format="yyyy" value-format="yyyy" placeholder="选择年">
                </el-date-picker>
              </template>
            </q-field>
          </div>
        </template>
      </div>
    </div>
    <div class="page-content">
      <q-table :pagination="msg" :loading="loading" no-data-label="暂无相关数据" flat class="sticky-column-table"
        separator="none" :data="dataList" :columns="columns">
        <template v-slot:top>
          <div class="col-2 q-table__title">咖啡劵统计</div>
          <q-space />
          <div class="page-option">
            <q-btn color="accent" class="q-mr-md" size="sm" icon="download" style="margin-top:15px;" label="下载"
              @click="downloadStarBucks" />
          </div>
        </template>
        <template v-slot:body="props">
          <q-tr :props="props">
            <template v-for="col in props.cols">
              <q-td v-if="col.name == 'Date'" :key="col.name">
                {{col.value}}
              </q-td>
              <q-td v-else-if="col.name=='EmpName'">
                <div v-for="(x,index) in col.value" :key="index" :class="{'border-bottom':col.value.length>1}">
                  <span>{{x.EmpName}}</span>
                </div>
              </q-td>
              <q-td v-else-if="col.name=='EmpBuyNum'">
                <div v-for="(x,index) in col.value" :key="index" :class="{'border-bottom':col.value.length>1}">
                  <span>{{x.EmpBuyNum}}</span>
                </div>
              </q-td>
              <q-td v-else-if="col.name=='EmpFreeNum'">
                <div v-for="(x,index) in col.value" :key="index" :class="{'border-bottom':col.value.length>1}">
                  <span>{{x.EmpFreeNum}}</span>
                </div>
              </q-td>
              <q-td v-else-if="col.name=='StuBuyNum'">
                <div v-for="(x,index) in col.value" :key="index" :class="{'border-bottom':col.value.length>1}">
                  <span>{{x.StuBuyNum}}</span>
                </div>
              </q-td>
              <q-td v-else-if="col.name=='StuFreeNum'">
                <div v-for="(x,index) in col.value" :key="index" :class="{'border-bottom':col.value.length>1}">
                  <span>{{x.StuFreeNum}}</span>
                </div>
              </q-td>

              <q-td v-else-if="col.name=='LBBuyNum'">
                <div v-for="(x,index) in col.value" :key="index" :class="{'border-bottom':col.value.length>1}">
                  <span>{{x.LBBuyNum}}</span>
                </div>
              </q-td>
              <q-td v-else-if="col.name=='LBFreeNum'">
                <div v-for="(x,index) in col.value" :key="index" :class="{'border-bottom':col.value.length>1}">
                  <span>{{x.LBFreeNum}}</span>
                </div>
              </q-td>
              <q-td v-else-if="col.name=='Income'">
                {{col.value}}
              </q-td>
              <q-td v-else-if="col.name=='Total'">
                {{col.value}}
              </q-td>
              <q-td v-else-if="col.name=='Id'" :key="col.name" style="text-align:right;">
                <q-btn flat size="xs" icon="iconfont icon-View" @click="goDetail(col)" color="accent"
                  style="font-weight:400" label="查看" />
              </q-td>
            </template>
          </q-tr>
        </template>
        <template v-slot:bottom>
        </template>
      </q-table>
    </div>
  </div>
</template>

<script>
  import {
    EduDownLoad
  } from "../../../api/common/common";

  export default {
    meta: {
      title: "星巴克统计"
    },
    data() {
      return {
        msg: {
          SelectType: 1, //类型 1日报表 2月报表 3年报表
          StartTime: '', //开始 对应 日 月 年
          EndTime: '',
          rowsPerPage: 1000,
        },
        SelectList: [{
          Id: 1,
          Name: '日报表'
        }, {
          Id: 2,
          Name: '月报表'
        }, {
          Id: 3,
          Name: '年报表'
        }],
        dataList: [],
        loading: true,
        columns: [{
            name: 'Date',
            label: '日期',
            field: 'Date',
            align: 'left'
          },
          {
            name: 'EmpName',
            label: '核销人',
            align: 'left',
            field: row => row.CList
          },
          {
            name: 'EmpFreeNum',
            label: '员工赠送',
            align: 'left',
            field: row => row.CList
          },
          {
            name: 'EmpBuyNum',
            label: '员工购买',
            align: 'left',
            field: row => row.CList
          },
          {
            name: 'StuFreeNum',
            label: '学员赠送',
            align: 'left',
            field: row => row.CList
          },
          {
            name: 'StuBuyNum',
            label: '学员购买',
            align: 'left',
            field: row => row.CList
          },
          {
            name: 'LBFreeNum',
            label: '来宾赠送',
            align: 'left',
            field: row => row.CList
          },
          {
            name: 'LBBuyNum',
            label: '来宾购买',
            align: 'left',
            field: row => row.CList
          },
          {
            name: 'Income',
            label: '当日收款',
            field: 'Income',
            align: 'left'
          },
          {
            name: 'Total',
            label: '当日出品杯数',
            field: 'Total',
            align: 'left'
          },
          {
            name: 'Id',
            label: '操作',
            field: 'Date'
          }
        ],
      }
    },

    mounted() {
      this.getDayTotal();
      this.getStarBucksList()
    },
    methods: {
      //选择类型
      getSelectType(type) {
        switch (type) {
          case 1:
            this.getDayTotal();
            this.getStarBucksList();
            break;
          case 2:
            this.getMonthTotal();
            this.getStarBucksList();
            break;
          case 3:
            this.getYearTotal();
            this.getStarBucksList();
        }
      },
      //获取当天时间
      getDayTotal() {
        let nowDay = new Date();
        var year = nowDay.getFullYear(); //年
        var month = nowDay.getMonth() + 1; //月
        var day = nowDay.getDate(); //日
        this.msg.StartTime = year + '-' + month + '-' + day
        this.msg.EndTime = year + '-' + month + '-' + day
      },
      //获取月度时间
      getMonthTotal() {
        let nowDay = new Date();
        var year = nowDay.getFullYear(); //年
        var month1 = nowDay.getMonth(); //月
        var month2 = nowDay.getMonth() + 1; //月
        this.msg.StartTime = year + '-' + month1
        this.msg.EndTime = year + '-' + month2
      },
      //获取月度 年
      getYearTotal() {
        let nowDay = new Date();
        var year = nowDay.getFullYear(); //年
        this.msg.StartTime = year.toString();
        this.msg.EndTime = (year + 1).toString();
      },
      //获取星巴克统计列表
      getStarBucksList() {
        this.loading = true;
        this.apipostDS("/api/Coffee/GetCoffeeStatistics", this.msg, (res) => {
          this.loading = false
          if (res.data.resultCode == 1) {
            this.dataList = res.data.data;
          }
        })
      },
      //跳转详情
      goDetail(obj) {
        this.OpenNewUrl('/administration/starBucks/starBucksDetail', {
          Date: obj.value,
          Type: this.msg.SelectType
        })
      },
      //查询条件改变
      resetSearch() {
        this.getStarBucksList();
      },
      //下载导出星巴克
      downloadStarBucks() {
        this.loading = true;
        var msg = JSON.parse(JSON.stringify(this.msg));
        this.GetLocalFileDS("/api/Coffee/GetCoffeeStatisticsToExcel", {
          ...this.msg
        }, "咖啡数据统计.xls")
        this.loading = false;
      }
    }
  }

</script>
<style lang="sass">
  @import url('~assets/css/table.sass')

</style>
