<template>
    <view class="app-coupon-pick">
        <view class="coupon-tab dir-left-nowrap cross-center" @touchmove.stop="true">
            <view @click="couponType=1"
                  class="box-grow-1"
                  :style="{'color': couponType==1 && !is_gift ? theme.background : ''}"
                  :class="couponType==1 && is_gift ? theme + '-color ' + theme : ''">可用优惠券
                <template v-if="list">({{list.length}})</template>
                <view class="active-block"
                      :style="{'background-color': is_gift ? '' : theme.background,'display': couponType==1 ? 'block':'none'}"
                      :class="is_gift ? theme + '-background ' + theme : ''"></view>
            </view>
            <view class="box-grow-0 split"></view>
            <view @click="couponType=0"
                  class="box-grow-1"
                  :style="{'color': couponType==0 && !is_gift ? theme.background : ''}"
                  :class="couponType==0 && is_gift ? theme + '-color ' + theme : ''">不可用优惠券
                <template v-if="cantUseList">({{cantUseList.length}})</template>
                <view class="active-block"
                      :style="{'background-color': is_gift ? '' : theme.background,'display': couponType==0 ? 'block':'none'}"
                      :class="is_gift ? theme + '-background ' + theme : ''"></view>
            </view>
        </view>
        <scroll-view scroll-y="true" class="list-scroll">
            <view class="coupon-list" v-if="couponType == 1">
                <view v-if="list === null" style="padding: 50rpx; text-align: center; color: #999;">加载中</view>
                <template v-else>
                    <view v-if="!list.length" style="padding: 128rpx; text-align: center;">
                        <image src="https://shop.9026.com/web/statics/img/mall/static/no-goods.png"
                               style="width: 240rpx;height: 240rpx;margin-bottom: 36rpx;"></image>
                        <view style="color: #999999;">暂无可用优惠券</view>
                    </view>
                    <template v-else>
                        <!-- <view v-for="(item,index) in list"
                              :key="index"
                              class="item">
                            <view class="dir-left-nowrap cross-center top"
                                  :style="{
                                  backgroundImage: `url(${appImg.order_submit.coupon_bg})`,
                                  }">
                                <view class="box-grow-0 mr-32">
                                    <view v-if="item.type==1" class="dir-left-nowrap cross-bottom">
                                        <view style="font-size: 72rpx;line-height: 1;">{{item.discount}}</view>
                                        <view style="line-height: 1.75">折</view>
                                    </view>
                                    <view v-else class="dir-left-nowrap cross-bottom">
                                        <view style="line-height: 1.75">￥</view>
                                        <view style="font-size: 72rpx;line-height: 1;">{{item.sub_price}}</view>
                                    </view>
                                </view>
                                <view class="box-grow-1" style="font-size: 24rpx;">
                                    <view class="desc-row">{{item.coupon_data.name}}</view>
                                    <view class="desc-row">满{{item.coupon_min_price}}元可用</view>
                                    <view v-if="item.discount_limit" class="desc-row">
                                        优惠上限:￥{{item.discount_limit}}
                                    </view>
                                </view>
                                <app-submit-checkbox
                                        :round="true"
                                        v-model="item.checked"
                                        :theme="theme"
                                        border-color="#999999"
                                        @input="handleCouponChange"
                                        :sign="index"></app-submit-checkbox>
                            </view>
                            <view class="bottom">
                                <view style="margin-bottom: 12rpx;">有效日期：{{item.start_time}}-{{item.end_time}}</view>
                                <view>适用范围：{{item.coupon_data.appoint_type == 3 ? '全场通用' : item.coupon_data.appoint_type == 5?'礼品卡' : '限品类'}}</view>
                            </view>
                        </view> -->
						<view  v-for="(item,index) in list" :key="index">
						    <view class="list-item">
								<image src="https://t17.9026.com/web/statics/image/index/img-coupon-bg-0.png" ></image>
						        <view class="item-left dir-top-nowrap main-center">
						            <view class="coupon-price t-omit" v-if="item.type == 2">￥{{item.sub_price}}</view>
						            <view class="coupon-price t-omit" v-else>{{item.discount}}折</view>
						            <view style="font-size: 10px" class="t-omit" v-if="item.coupon_min_price > 0">满{{item.coupon_min_price}}可用</view>
						            <view style="font-size: 10px" v-else>无门槛使用</view>
						            <view style="font-size: 10px" v-if="item.discount_limit">优惠上限:￥{{item.discount_limit}}</view>
						        </view>
						        <view class="item-right">
						            <view class="item-name t-omit hjx-tc-222 hjx-tw-600" style="margin-bottom: 20rpx;">{{item.coupon_data.name}}</view>
									<view v-if="item.coupon_data.appoint_type == 3">全场通用</view>
									<view v-else-if="item.coupon_data.appoint_type == 4">仅限当面付活动使用</view>
									<view v-else-if="item.coupon_data.appoint_type == 5">仅限礼品卡使用</view>
									<view v-else>限品类</view>
						            <view class="t-omit t-small-color time-area hjx-tc-B19D60" style="margin-top: 5rpx;">{{item.start_time.split(' ')[0]}} - {{item.end_time.split(' ')[0]}}</view>
						        </view>
								<view class="item-right-btn cross-center" >
									<!-- <view class="btn11">领取并使用</view> -->
									<app-submit-checkbox
									        :round="true"
											:value="item.checked"
									        :theme="theme"
									        border-color="#999999"
									        @input="handleCouponChange"
									        :sign="index">
									</app-submit-checkbox>
								</view>
						    </view>
						</view>
                    </template>
                </template>
            </view>
            <view class="coupon-list" v-else>
                <view v-if="cantUseList === null" style="padding: 50rpx; text-align: center; color: #999;">加载中</view>
                <template v-else>
                    <view v-if="!cantUseList.length" style="padding-top: 128rpx; text-align: center;">
                        <image src="https://shop.9026.com/web/statics/img/mall/static/no-goods.png"
                               style="width: 240rpx;height: 240rpx;margin-bottom: 36rpx;"></image>
                        <view style="color: #999999;">暂无不可用优惠券</view>
                    </view>
                    <template v-else>
                        <!-- <view v-for="(item,index) in cantUseList"
                              :key="index"
                              class="item">
                            <view class="dir-left-nowrap cross-center top"
                                  :style="{
                                  backgroundImage: `url(${appImg.order_submit.coupon_bg_disable})`,
                                  }">
                                <view class="box-grow-0 mr-32">
                                    <view v-if="item.type==1" class="dir-left-nowrap cross-bottom">
                                        <view style="font-size: 72rpx;line-height: 1;">{{item.discount}}</view>
                                        <view style="line-height: 1.75">折</view>
                                    </view>
                                    <view v-else class="dir-left-nowrap cross-bottom">
                                        <view style="line-height: 1.75">￥</view>
                                        <view style="font-size: 72rpx;line-height: 1;">{{item.sub_price}}</view>
                                    </view>
                                </view>
                                <view class="box-grow-1" style="font-size: 24rpx;">
                                    <view class="desc-row">{{item.coupon_data.name}}</view>
                                    <view class="desc-row">满{{item.coupon_min_price}}元可用</view>
                                    <view v-if="item.discount_limit" class="desc-row">
                                        优惠上限:￥{{item.discount_limit}}
                                    </view>
                                </view>
                            </view>
                            <view class="bottom">
                                <view style="margin-bottom: 12rpx;">有效日期：{{item.start_time}}-{{item.end_time}}</view>
                                <view>适用范围：{{item.coupon_data.appoint_type == 3 ? '全场通用' : '限品类'}}</view>
                            </view>
                        </view> -->
						<view  v-for="(item,index) in cantUseList" :key="index">
						    <view class="list-item no-use" style="background-color: rgba(0,0,0,0.4);">
								<image src="https://t17.9026.com/web/statics/image/index/img-coupon-bg-0.png" ></image>
						        <view class="item-left dir-top-nowrap main-center">
						            <view class="coupon-price t-omit" v-if="item.type == 2">￥{{item.sub_price}}</view>
						            <view class="coupon-price t-omit" v-else>{{item.discount}}折</view>
						            <view style="font-size: 10px" class="t-omit" v-if="item.coupon_min_price > 0">满{{item.coupon_min_price}}可用</view>
						            <view style="font-size: 10px" v-else>无门槛使用</view>
						            <view style="font-size: 10px" v-if="item.discount_limit">优惠上限:￥{{item.discount_limit}}</view>
						        </view>
						        <view class="item-right">
						            <view class="item-name t-omit hjx-tc-222 hjx-tw-600" style="margin-bottom: 20rpx;">{{item.coupon_data.name}}</view>
									<view v-if="item.coupon_data.appoint_type == 3">全场通用</view>
									<view v-else-if="item.coupon_data.appoint_type == 4">仅限当面付活动使用</view>
									<view v-else-if="item.coupon_data.appoint_type == 5">仅限礼品卡使用</view>
									<view v-else>限品类</view>
						            <view class="t-omit t-small-color time-area hjx-tc-B19D60" style="margin-top: 5rpx;">{{item.start_time.split(' ')[0]}} - {{item.end_time.split(' ')[0]}}</view>
						        </view>
						    </view>
						</view>
                    </template>
                </template>
            </view>
        </scroll-view>
    </view>
</template>

<script>
    import {mapState} from 'vuex';
    import AppSubmitCheckbox from "./app-submit-checkbox.vue";

    export default {
        name: "app-coupon-pick",
        components: {
            AppSubmitCheckbox
        },
        props: {
            theme: {
                type: [String,Object],
            },
            plugin: String,
            mchIndex: {
                type: Number,
                default: 0
            },
            noCoupons: {
                type: Boolean,
                default: false
            },
        },
        data() {
            return {
                couponType: 1,
                loading: false,
                list: null,
                is_gift: false,
                cantUseList: null
            }
        },
        computed: {
            ...mapState({
                appImg: state => state.mallConfig.__wxapp_img,
				customerAccessToken:state=>state.user.customerAccessToken  //代客下单判断是否选择客户，来获取客户优惠券
            }),
        },
		watch:{
			customerAccessToken(){
				this.$store.commit('orderSubmit/mutSetMchNoCouponStatusList', []);
				this.loadData();
				this.loadData(true);
			}
		},
        created() {
            this.$store.commit('orderSubmit/mutSetMchNoCouponStatusList', []);
            this.is_gift = typeof(this.theme) == 'string' && this.theme.indexOf('gift') >= 0 ? true : false;
            this.loadData();
            this.loadData(true);
        },
        methods: {
            loadData(loadCantUse = false) {
                this.loading = true;
                this.$request({
                    url: this.$api.order.usable_coupon_list,
                    method: 'post',
                    data: {
                        form_data: JSON.stringify(this.$store.state.orderSubmit.formData.list[this.mchIndex]),
                        is_cant_use_list: loadCantUse ? 1 : 0,
                        sign: this.plugin
                    }
                }).then(response => {
                    this.loading = false;
                    if (response.code === 0) {
                        if (loadCantUse) {
                            this.cantUseList = response.data.list;
                        } else {
                            for (let i in response.data.list) {
                                response.data.list[i].checked = false;
                            }
                            this.list = response.data.list;
                            const mchNoCouponStatusList = this.$store.getters['orderSubmit/getMchNoCouponStatusList'];
                            let noCoupons = this.$validation.isEmpty(this.list);
                            this.$emit('update:noCoupons', noCoupons);
                            mchNoCouponStatusList[this.mchIndex] = noCoupons;
                            this.$store.commit('orderSubmit/mutSetMchNoCouponStatusList', mchNoCouponStatusList);
                        }
                    } else {
                    }
                }).catch(() => {
                    this.loading = false;
                });
            },
            handleCouponChange({v, index}) {
                if (v) {
                    this.setData(this.list[index].id, index);
                } else {
                    this.setData(0, index);
                }
            },
            setData(data, index) {
                if (parseInt(data) === 0) {
                    this.list[index].checked = false;
                } else {
                    for (let i in this.list) {
                        this.list[i].checked = parseInt(index) === parseInt(i);
                    }
                }
				
				console.log('this.list',this.list)
                const formData = this.$store.state.orderSubmit.formData;
                formData.list[this.mchIndex].user_coupon_id = data;
                this.$store.commit('orderSubmit/mutSetFormData', formData);
                this.$emit('change');
            },
        },
    }
</script>

<style scoped lang="scss">
    .app-coupon-pick {
        .mr-32 {
            margin-right: #{32rpx};
        }

        .btn {
            height: #{56rpx};
            line-height: #{56rpx};
            padding: 0 #{32rpx};
            border-radius: #{1000rpx};
            background: #fff;
            text-align: center;
            border: #{1rpx} solid;
        }

        .btn:active {
            box-shadow: 0 0 #{100rpx} rgba(0, 0, 0, 0.05) inset;
        }

        .btn.use {
            color: #c5a977;
            border-color: transparent;
        }

        .btn.dont-use {
            height: #{80rpx};
            line-height: #{80rpx};
        }

        .coupon-tab {
            > view {
                text-align: center;
                padding: #{32rpx};
                position: relative;
            }

            .active {
            }

            .active-block {
                position: absolute;
                bottom: 0;
                left: 50%;
                height: #{4rpx};
                width: #{110rpx};
                margin-left: -#{60rpx};
                display: none;
            }

            .active {
                .active-block {
                    display: block;
                }
            }

            .split {
                width: #{1rpx};
                height: #{28rpx};
                background: #ddd;
                padding: 0;
            }

            border-bottom: #{1rpx} solid #ddd;
        }

        .list-scroll {
            overflow: hidden;
            background: #f7f7f7;
            height: #{913rpx};
        }

        .coupon-list {
            box-sizing: border-box;
            padding: #{32rpx};

            .item {
                margin: #{32rpx} 0;
                background: #fff;
                border-radius: #{16rpx};
                box-shadow: 0 0 #{10rpx} rgba(0, 0, 0, .05);
                overflow: hidden;

                .top {
                    padding: #{40rpx} #{24rpx};
                    color: #fff;
                    background-size: 100% 100%;

                    .desc-row {
                        margin: #{6rpx} 0;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                    }
                }

                .bottom {
                    padding: #{24rpx} #{24rpx};
                    font-size: #{24rpx};
                }
            }
        }
    }
	
	
	
	.list {
	    padding: #{32rpx} #{35rpx};
	    background-color: #f7f7f7;
	}
	
	.list-item {
	    height: #{181rpx};
	    width: 100%;
	    position: relative;
	    margin-bottom: #{20rpx};
		border-radius: 8rpx;
		overflow: hidden;
	}
	.no-use{
		opacity: 0.4;
		background-color: rgba(0,0,0,0.4);
	}
	
	.list-item image {
	    width: 100%;
	    height: 100%;
	}
	
	.item-left {
	    position: absolute;
	    left: 0;
	    top: 0;
	    height:100%;
	    width: #{190rpx};
	    text-align: center;
	    font-size: #{24rpx};
	    color: #B19D60;
	    padding-top: #{8rpx};
	}
	
	.coupon-price {
	    font-size: #{36rpx};
	    padding-bottom: #{16rpx};
		font-weight: 600;
	}
	
	.item-right {
	    position: absolute;
	    left: #{220rpx};
	    top: #{30rpx};
	    width: 45%;
	    color: #666666;
	    font-size: #{24rpx};
	}
	
	.item-name {
	    font-size: #{32rpx};
	}
	
	.item-right view {
	    margin-bottom: #{4rpx};
	}
	.item-right-btn{
		position: absolute;
		right: 0;
		top: 0;
		width: 24%;
		height: 100%;
		.btn11{
			width: 140rpx;
			height: 52rpx;
			border: 1rpx solid #B19D60;
			border-radius: 26rpx;
			font-size: 22rpx;
			font-weight: 500;
			color: #B19D60;
			text-align: center;
			line-height: 52rpx;
			box-sizing: border-box;
		}
	}
	.coupon-footer {
	    position: fixed;
	    bottom: 0;
	    left: 0;
	    right: 0;
	    width: 100%;
	    height: #{100rpx};
	    line-height: #{100rpx};
	    text-align: center;
	    background-color: #fff;
	    z-index: 2;
	}
	
	.coupon-footer.iphone_x {
	    height: #{150rpx};
	    padding-bottom: #{50rpx};
	}
	
	.list-item .status {
	    position: absolute;
	    top: 0;
	    right: 0;
	    height: #{98rpx};
	    width: #{140rpx};
	    z-index: 2;
	}
	
	.tip {
		margin-top: 20%;
	    text-align: center;
	    color: #686868;
	}
	
	.t-omit {
	    display: inline-block;
	    white-space: nowrap;
	    width: 100%;
	    overflow: hidden;
	    text-overflow: ellipsis;
	}
	
	.t-omit-two {
	    word-break: break-all;
	    text-overflow: ellipsis;
	    display: -webkit-box;
	    -webkit-box-orient: vertical;
	    -webkit-line-clamp: 2;
	    overflow: hidden;
	}
</style>