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

</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 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">
          <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>
        <div class="col-2">
          <q-select stack-label color="primary" dense filled label="消费类型" option-value="Id" option-label="Name"
            :options="TypeList" v-model="msg.Type" @input="resetSearch" emit-value map-options />
        </div>
        <div class="col-2">
          <q-select stack-label color="primary" dense filled label="使用类型" option-value="Id" option-label="Name"
            :options="BuyTypeList" v-model="msg.BuyType" @input="resetSearch" emit-value map-options />
        </div>
      </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" v-if="isShowDown" size="sm" icon="download" style="margin-top:15px;"
              label="下载" @click="downloadStarBucks" />
          </div>
        </template>
        <template v-slot:body-cell-UserName="props">
          <q-td :props="props">
            <q-avatar rounded size="sm" v-if="props.row.UserIcon">
              <img :src="props.row.UserIcon" />
            </q-avatar>
            <q-avatar rounded size="sm" color="teal-10" text-color="white" v-if="!props.row.UserIcon">
              {{item.row.UserName[0]}}</q-avatar>
            <span style="position:relative;top:3px;margin-left:2px;">{{props.row.UserName}}</span>
          </q-td>
        </template>

        <template v-slot:body-cell-Type="props">
          <q-td :props="props">
            {{props.row.Type==1?'存入':'消费'}}
          </q-td>
        </template>
        <template v-slot:body-cell-BuyType="props">
          <q-td :props="props">
            <span v-if="props.row.BuyType==0">-</span>
            <span v-if="props.row.BuyType==1">赠送</span>
            <span v-if="props.row.BuyType==2">购买</span>
          </q-td>
        </template>
        <template v-slot:body-cell-EmpType="props">
          <q-td :props="props">
            <span v-if="props.row.EmpType==1">员工</span>
            <span v-if="props.row.EmpType==2">学员</span>
            <span v-if="props.row.EmpType==3">来宾</span>
          </q-td>
        </template>
        <template v-slot:bottom>
          <q-pagination class="full-width justify-end" v-model="msg.pageIndex" color="primary" :max="pageCount"
            :input="true" @input="changePage" />
        </template>
      </q-table>
    </div>
  </div>
</template>

<script>
  export default {
    meta: {
      title: "咖啡券详情"
    },
    data() {
      return {
        msg: {
          pageIndex: 1,
          pageSize: 12,
          rowsPerPage: 12,
          StartTime: '',
          EndTime: '',
          Type: 0, //1存入 2消费
          BuyType: 0 //使用类型 1免费的 2使用购买的
        },
        TypeList: [{
          Id: 0,
          Name: '不限'
        }, {
          Id: 1,
          Name: '存入'
        }, {
          Id: 2,
          Name: '消费'
        }],
        BuyTypeList: [{
          Id: 0,
          Name: '不限'
        }, {
          Id: 1,
          Name: '免费的'
        }, {
          Id: 2,
          Name: '使用购买的'
        }],
        pageCount: 0,
        dataList: [],
        loading: true,
        columns: [{
            name: 'UserName',
            label: '用户名称',
            align: 'left',
            field: 'UserName'
          }, {
            name: 'Type',
            label: '使用类型',
            field: 'Type',
            align: 'left'
          }, {
            name: 'BuyType',
            label: '消费类型',
            field: 'BuyType',
            align: 'left'
          },
          {
            name: 'EmpType',
            label: '员工类型',
            align: 'left',
            field: 'EmpType'
          },
          {
            name: 'EmpStuName',
            label: '员工/学员',
            align: 'left',
            field: 'EmpStuName'
          },
          {
            name: 'Number',
            label: '数量',
            align: 'left',
            field: 'Number'
          },
          {
            name: 'Remark',
            label: '备注',
            align: 'left',
            field: 'Remark'
          },
          {
            name: 'CreateByName',
            label: '核销人',
            align: 'left',
            field: 'CreateByName'
          },
          {
            name: 'CreateDate',
            label: '时间',
            field: 'CreateDate',
            align: 'left'
          }
        ],
        isShowDown: false
      }
    },
    watch: {
      msg: {
        handler(val) {
          if (val) {
            if (val.StartTime != '' && val.EndTime != '') {
              this.isShowDown = true;
            }
          }
        },
        deep: true
      },
    },
    mounted() {
      if (this.$route.query) {
        if (this.$route.query.Type == 1) {
          this.msg.StartTime = this.$route.query.Date;
          this.msg.EndTime = this.$route.query.Date;
        }
        if (this.$route.query.Type == 2) {
          if (this.$route.query.Date) {
            let year = this.$route.query.Date.split('-')[0];
            let month = this.$route.query.Date.split('-')[1];
            var firstDay = new Date(year, month - 1, 1);
            var lastDay = new Date(year, month, 0);
            this.msg.StartTime = this.getDateStr(firstDay);
            this.msg.EndTime = this.getDateStr(lastDay);
          }
        }
        if (this.$route.query.Type == 3) {
          if (this.$route.query.Date) {
            let year1 = new Date(this.$route.query.Date, 0, 1) //第一天
            let year2 = new Date(this.$route.query.Date, 12, 0) //第一天
            this.msg.StartTime = this.getDateStr(year1);
            this.msg.EndTime = this.getDateStr(year2);
          }
        }
      }
      this.getList()
    },
    methods: {
      getDateStr(dateStamp) {
        var time = new Date(dateStamp);
        var y = time.getFullYear();
        var M = time.getMonth() + 1;
        var d = time.getDate();
        return y + '-' + M + '-' + d
      },
      getList() {
        this.loading = true
        this.apipostDS("/api/Coffee/GetCoffeeCouponsPageList", this.msg, (res) => {
          this.loading = false
          if (res.data.resultCode == 1) {
            this.dataList = res.data.data.pageData;
            this.pageCount = res.data.data.pageCount;
          }
        })
      },
      //重新查询
      resetSearch() {
        this.msg.pageIndex = 1;
        this.getList();
      },
      changePage(val) {
        this.msg.pageIndex = val;
        this.getList()
      },
      //获取下个月
      getNextMonth(date) {
        var arr = date.split('-');
        var year = arr[0]; //获取当前日期的年份  
        var month = arr[1]; //获取当前日期的月份  
        var day = arr[2]; //获取当前日期的日  
        var days = new Date(year, month, 0);
        days = days.getDate(); //获取当前日期中的月的天数  
        var year2 = year;
        var month2 = parseInt(month) + 1;
        if (month2 == 13) {
          year2 = parseInt(year2) + 1;
          month2 = 1;
        }
        var day2 = day;
        var days2 = new Date(year2, month2, 0);
        days2 = days2.getDate();
        if (day2 > days2) {
          day2 = days2;
        }
        if (month2 < 10) {
          month2 = '0' + month2;
        }
        var t2 = year2 + '-' + month2 + '-' + day2;
        return t2;
      },
      //下载导出星巴克
      downloadStarBucks() {
        this.loading = true;
        var msg = JSON.parse(JSON.stringify(this.msg));
        var d1 = msg.StartTime;
        var d2 = msg.EndTime;
        if (d1 != null && d2 != null) {
          var dd1 = new Date(d1);
          var dd2 = new Date(d2);
          var num = (dd2 - dd1) / (1000 * 60 * 60 * 24)
          if (num > 30) {
            msg.EndTime = this.getNextMonth(msg.StartTime);
          }
        }
        this.GetLocalFileDS("/api/Coffee/GetCoffeeCouponsListToExcel", {
          ...msg
        }, "咖啡详情统计.xls")
        this.loading = false;
      }
    }
  }

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

</style>
