<template>
  <div class="container">
    <div class="search-form">
      <el-form :inline="true" :model="searchFrom" size="small">
        <el-form-item label="赠品名称" label-width="100px">
          <el-input v-model="searchFrom.gift_name" clearable></el-input>
        </el-form-item>
        <el-form-item label="类型" label-width="100px">
          <el-select v-model="searchFrom.gift_type" placeholder="请选择" clearable>
            <el-option label="渠道赠品" value="1"></el-option>
            <el-option label="活动赠品" value="2"></el-option>
            <el-option label="关联赠品" value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="期数名称" label-width="100px">
          <el-input v-model="searchFrom.periods_title" clearable></el-input>
        </el-form-item>
        <el-form-item label="班级名称" label-width="100px">
          <el-input v-model="searchFrom.class_name" clearable></el-input>
        </el-form-item>
        <el-form-item label="电话号码" label-width="100px">
          <el-input v-model="searchFrom.mobile" clearable></el-input>
        </el-form-item>
        <el-form-item label="领取时间" label-width="100px">
          <el-date-picker
            v-model="searchFrom.receiveTime"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd HH:mm:ss">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" plain @click="getRecordList">搜索</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="success" plain @click="exportTable">导出</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="table-form">
      <el-table :data="recordList" size="mini" style="width: 100%">
        <el-table-column prop="gift_name" label="赠品名称"></el-table-column>
        <el-table-column prop="gift_type" label="赠品类型">
          <template slot-scope="scope">
            <div v-if="scope.row.gift_type == 1">渠道赠品</div>
            <div v-if="scope.row.gift_type == 2">活动赠品</div>
            <div v-if="scope.row.gift_type == 3">关联赠品</div>
          </template>
        </el-table-column>
        <el-table-column prop="quantity" label="数量"></el-table-column>
        <el-table-column prop="cost" label="成本"></el-table-column>
        <el-table-column prop="periods_title" label="期数名称"></el-table-column>
        <el-table-column prop="class_name" label="班级名称"></el-table-column>
        <el-table-column prop="money" label="实付金额"></el-table-column>
        <el-table-column prop="teacher_name" label="带班老师"></el-table-column>
        <el-table-column prop="user_id" label="UID"></el-table-column>
        <el-table-column prop="nickname" label="客户名称"></el-table-column>
        <el-table-column prop="mobile" label="收货人电话"></el-table-column>
        <el-table-column prop="address" label="收货地址"></el-table-column>
        <el-table-column prop="created_at" label="领取时间"></el-table-column>
        <el-table-column prop="deliver_at" label="物流导入时间"></el-table-column>
        <el-table-column prop="express_no" label="快递单号"></el-table-column>
      </el-table>
    </div>
    <div class="pagination">
      <page :nowPage="nowPage" :total="total" :limit="limit" @pageChange="onPageChange" @sizeChange="onSizeChange"/>
    </div>
  </div>
</template>

<script>
    import page from "../framework/page";
    import { receiveRecordApi, exportExcelApi } from "../../service/api";

    export default {
        name: "index",
        components: {
            page
        },
        data() {
            return {
                searchFrom: {
                    gift_id: '',
                    gift_name: '',
                    gift_type: '',
                    periods_title: '',
                    class_name: '',
                    mobile: '',
                    receiveTime: []
                },
                recordList: [],
                nowPage: 1,
                total: 0,
                limit: 10
            }
        },
        methods: {
            getRecordList() {
                let json = {
                    gift_id: this.searchFrom.gift_id,
                    gift_name: this.searchFrom.gift_name,
                    gift_type: this.searchFrom.gift_type,
                    periods_title: this.searchFrom.periods_title,
                    class_name: this.searchFrom.class_name,
                    mobile: this.searchFrom.mobile,
                    start_at: this.searchFrom.receiveTime[0],
                    over_at: this.searchFrom.receiveTime[1],
                    limit: this.limit,
                    page: this.nowPage
                };
                receiveRecordApi(json).then(res => {
                    this.recordList = res.list;
                    this.total = res.total;
                });
            },
            onPageChange(val) {
                this.nowPage = val;
                this.getRecordList();
            },
            onSizeChange(val) {
                this.limit = val;
                this.nowPage = 1;
                this.getRecordList();
            },
            exportTable() {
                let json = {
                    gift_name: this.searchFrom.gift_name,
                    gift_type: this.searchFrom.gift_type,
                    periods_title: this.searchFrom.periods_title,
                    class_name: this.searchFrom.class_name,
                    mobile: this.searchFrom.mobile,
                    start_at: this.searchFrom.receiveTime[0],
                    over_at: this.searchFrom.receiveTime[1]
                };
                exportExcelApi("/api/admin/gift/receive/record/export", json);
            },
        },
        created() {
            let _query = this.$route.query;
            if (_query && _query.id) {
                this.searchFrom.gift_id = _query.id;
            }
            this.getRecordList();
        }
    }
</script>

<style scoped>
  .container {
    padding: 20px;
  }
</style>
