Vue.component('m-coupon-send-record', {
    template: `<el-dialog :append-to-body="true" :visible.sync="showSendRecord"
                          width="80%" :top="'50px'" 
                          :before-close="closeDialog"
                          custom-class="customer-el-dialog__body"
                          :close-on-click-modal="false">
        <div style="padding:5px 0px 15px 0px">
            <el-radio-group v-model="searchForm.usage_status" plain size="small" @change="pageRecordChange(1)">
                <el-radio-button label="">全部</el-radio-button>
                <el-radio-button :label="1">未使用</el-radio-button>
                <el-radio-button :label="2">已使用</el-radio-button>
                <el-radio-button :label="3">已过期</el-radio-button>
            </el-radio-group>
            <el-input size="small" style="width: 230px"
                    @keydown.enter.exact.native.prevent="pageRecordChange(1)"
                    v-model="searchForm.search_text" clearable
                    :placeholder="'请输入'+(searchForm.search_type==1?'姓名|昵称':'手机')">
                    <el-select v-model="searchForm.search_type"
                           style="width: 80px"
                           background slot="prepend">
                        <el-option label="手机" :value="2"></el-option>
                        <el-option label="昵称" :value="1"></el-option>
                    </el-select>
            </el-input>
            <el-button type="primary" @click="pageRecordChange(1)" size="small">搜索</el-button>
        </div>
        <template>
            <el-table border :data="recordList" size="small" height="450" :header-cell-style="{background:'#F5F7FA',color:'#606266'}">
                <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
                <el-table-column align="center" prop="vip_name" label="会员" width="120"
                                 show-overflow-tooltip></el-table-column>
                <el-table-column align="center" prop="vip_phone" label="手机号" width="100"></el-table-column>
                <el-table-column align="center" prop="coupon_name" label="优惠券名称" min-width="100px" show-overflow-tooltip></el-table-column>
                <el-table-column align="center" prop="needmoney" label="优惠门槛" width="70"></el-table-column>
                <el-table-column align="center" prop="reducemoney" label="优惠金额" width="70"></el-table-column>
                <el-table-column align="center" prop="addtime" label="发放时间" show-overflow-tooltip></el-table-column>
                <el-table-column align="center" prop="canusetime" label="有效期" min-width="150"
                                 show-overflow-tooltip></el-table-column>
                <el-table-column align="center" prop="isuse_name" label="状态" width="70"
                                 show-overflow-tooltip></el-table-column>
                <el-table-column align="center" prop="use_time" label="使用时间" width="70"
                                 show-overflow-tooltip></el-table-column>
                <el-table-column align="center" prop="use_store" label="使用门店" width="100"
                                 show-overflow-tooltip></el-table-column>
                <div slot="empty" v-if="!loading">暂无数据</div>
                <div slot="empty" v-else><span class="el-icon-loading"></span></div>
            </el-table>
            <el-pagination
                    @size-change="limitRecordChange"
                    @current-change="pageRecordChange"
                    :current-page="page"
                    :page-size="limit"
                    :total="currentLen"
                    :pager-count="5"
                    :page-sizes="[10,20,30,40,50,60,70,80,90,100]"
                    layout="total, sizes, prev, pager, next, jumper">
            </el-pagination>
        </template>
    </el-dialog>`,
    props: {
        'showSendRecord': {
            type: Boolean,
            default: false,
        },
        'id': {
            type: String,
            default: '0',
        },//优惠券或券包的ID
        'couponMold': {
            type: Number,
            default: '1',
        },//类型 1优惠券  2券包
        'storeId': {
            type: String,
            default: '',
        }
    },
    data() {
        return {
            searchForm: {
                search_type: 2,
                search_text: '',
                usage_status: '',
            },
            page: 1,
            limit: 10,
            currentLen: 0,
            recordList: [],
            loading: false,
        }
    },
    methods: {
        closeDialog() {
            this.$emit('close');
        },
        // 切换记录每页数量
        limitRecordChange(val) {
            this.limit = val;
            this.page = 1;
            this.couponRecordList();
        },
        // 切换记录页数
        pageRecordChange(val) {
            this.page = val;
            this.couponRecordList();
        },
        // 优惠券发放记录
        couponRecordList() {
            this.loading = true;
            $.ajax({
                url: '/index.php/Retail/' + (this.storeId ? 'StoreCoupon' : 'Mcoupon') + '/' + (this.couponMold == 2 ? 'couponGroupRecordList' : 'couponRecordList'),
                type: "post",
                data: {
                    id: this.id,
                    search_info: this.searchForm,
                    page: this.page,
                    limit: this.limit,
                },
                success: (res) => {
                    if (res.status == 1) {
                        this.recordList = res.data.list;
                        this.currentLen = res.data.count * 1;
                    } else {
                        this.recordList = [];
                        this.currentLen = 0;
                    }
                    this.loading = false;
                }
            })
        },
    },
    mounted() {

    },
    created() {

    },
    watch: {
        showSendRecord(n, o) {
            if (n) {
                this.pageRecordChange(1);
            } else {
                this.recordList = [];
                this.searchForm = {
                    search_type: 1,
                    search_text: '',
                    usage_status: '',
                    page: 1,
                    limit: 10,
                };
            }
        },
    },
});