<template>
  <view class="all">
    <view class="part">
        <view class="partOne">
            <view class="one_left">
                <view class="type">{{info.typeDesc}}</view>
                <view class="price">
                    <view v-if="info.couponType===0">{{info.mjPrice}}<span>元</span></view>
                    <view v-else-if="info.couponType===1">{{info.zkPrice}}<span>折</span></view>
                    <view v-else :style="{'font-size':'48rpx'}">{{info.dkPrice}}<span></span></view>
                </view>
                <view class="price_desc">{{info.priceDesc}}</view>
            </view>
            <view class="one_right">
                <view class="right_top">
                    <view class="info">
                        <view class="title">{{info.title}}</view>
                        <view class="time">有效期至{{info.time[0]}}</view>
                    </view>
                    <view class="action">
                        <view v-if="type==='use'">
                            <view class="check"  @click="selected" :class="checkFlag?'checked':'nochecked'"></view>
                        </view>
                        <view v-else>
                            <view v-if="info.status===0">
                                <button class="gouse">去使用</button>
                            </view>

                        </view>
                    </view>
                </view>
                <view class="right_bottom">
                    <view class="more_info" @click="openDetail">
                        <view class="desc" v-if="info.couponType===0||info.couponType===1">抵扣订单金额</view>
                        <view class="desc" v-else>下单可抵扣商品，指定分类商品可用</view>
                        <image class="arrow-right-select" :src="'../../static/imgs/jiantouhei.png'" />
                    </view>
                </view>
            </view>
            <view v-if="info.status===2||info.status===3" class="tap">
                <view class="tap_innew">
                    <view class="text" v-if="info.status===2">已使用</view>
                    <view class="text" v-else>已失效</view>
                </view>
            </view>
        </view>
        <view class="partTwo" v-if="detailFlag">
            <view class="part_top">
                <view>可用门店：{{info.shopList[0]}}</view>
                <view>可用饮品范围：{{info.goodList[0]}}</view>
                <view>可用场景：{{info.useScence[0]}}</view>
            </view>
            <view class="part_bottom">
                <view>使用说明：</view>
                <view v-for="(item,index) in info.useDesc" :key="index">{{item}}</view>
                <view>折扣规则：{{info.zkRule}}</view>
            </view>
        </view>
        <view class="partThree" v-if="info.status === 1">
            <view class="reson">{{reson}}</view>
        </view>
    </view>
  </view>
</template>

<script>
export default {
    props:{
        type:{
            type:String,
            default(){
                return ''
            }
        },
        info:{
            type:Object,
            default(){
                return {
                    status:0, // 0可使用 1不可使用 2已使用 3已失效
                    couponType:2, // 0满减 1折扣 2抵扣
                    typeDesc:'最大字数最大字', // 左上角文案描述
                    mjPrice:'30', // 满减金额
                    zkPrice:'7', // 折扣金额
                    dkPrice:'免单', // 抵扣金额
                    priceDesc:'满130可用', // 条件描述
                    checkStatus:false, // 优惠券选中状态
                    title:'最大字数最大字数最大', // 优惠券标题
                    time:['2022.07.24.17:20'], // 过期时间
                    shopList:['全门店可用'], // 可用门店
                    goodList:['全品类可用'], // 可用品类 
                    useScence:['小程序下单可用'], // 使用场景
                    useDesc:['*不可与其他优惠券同时使用','*不可与门店优惠共享','*订单完成后选择退款，只退回实际支付金额，优惠券不予退回'], // 使用说明
                    zkRule:'整单最高抵扣50元', // 折扣规则
                    reson:'不可与已勾选券叠加使用' // 不可使用原因
                }
            }
        }
    },
    data(){
        return {
            detailFlag:false,
            status:true,
            checkFlag:false,
            reson:''
        }
    },
    methods:{
        openDetail(){
            this.detailFlag = !this.detailFlag 
        },
        selected() {
            this.checkFlag = !this.checkFlag
        }
    }

}   
</script>

<style lang="scss" scoped>
.all {
    .part {
        width: 100%;
        margin-top: 32rpx;
        .partOne {
             width: 100%;
             height: 241rpx;
             display: flex;
             position: relative;
             justify-content: space-between;
             align-items: center;
             background: radial-gradient(circle at right top, transparent 17rpx,  #FFFFFF 0) top left / 180rpx 51% no-repeat,
               radial-gradient(circle at right bottom, transparent 17rpx,  #FFFFFF 0) bottom left / 180rpx 51% no-repeat,
               radial-gradient(circle at left top, transparent 17rpx, #FFFFFF 0) top right / 511rpx 51% no-repeat,
               radial-gradient(circle at left bottom, transparent 17rpx, #FFFFFF 0) bottom right / 511rpx 51% no-repeat;
             filter: drop-shadow(-1px 3px 3px rgba(102,102,102,0.1000));
             .one_left {
                height: 100%;
                width: 154rpx;
                .type {
                    padding: 2rpx 10rpx;
                    max-width: 154rpx;
                    text-align: center;
                    height: 28rpx;
                    overflow: hidden;
                    font-size: 20rpx;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    background: linear-gradient(90deg, #75A2FF 0%, #B6CEFF 100%);
                    color: #FFFFFF;
                    line-height: 28rpx;
                    white-space: nowrap;
                }
                .price{
                    width: 178rpx;
                    height: 79rpx;
                    font-size: 56rpx;
                    font-family: Futura-Medium, Futura;
                    font-weight: 500;
                    color: #0050F6;
                    line-height: 74rpx;
                    margin: 0 auto;
                    text-align: center;
                    margin-top: 40rpx;
                    span {
                        height: 34rpx;
                        font-size: 24rpx;
                        font-family: Futura-Medium, Futura;
                        font-weight: 500;
                        color: #0050F6;
                        line-height: 30rpx;
                    }
                }
                .price_desc {
                    height: 28rpx;
                    font-size: 20rpx;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #0050F6;
                    line-height: 28rpx;
                    width: 178rpx;
                    text-align: center;
                }
             }
             .one_right {
                height: 198rpx;
                width: calc(510rpx - 38rpx);
                .right_top {
                    display: flex;
                    justify-content: space-between;
                    align-items: flex-end;
                    padding-top: 42rpx;
                    padding-bottom: 22rpx;
                    margin-right: 32rpx;
                    border-bottom: 1rpx solid #ECECEC;
                    .info {
                        .title {
                            max-width: 280rpx;
                            overflow: hidden;
                            height: 40rpx;
                            font-size: 28rpx;
                            font-family: PingFangSC-Medium, PingFang SC;
                            font-weight: 500;
                            color: #333333;
                            line-height: 40rpx;
                            white-space: nowrap;
                        }
                        .time {
                            height: 28rpx;
                            font-size: 20rpx;
                            font-family: PingFangSC-Regular, PingFang SC;
                            font-weight: 400;
                            color: #333333;
                            margin-top: 8rpx;
                            line-height: 28rpx;
                        }
                    }
                    .action {
                        .gouse{
                            width: 128rpx;
                            height: 52rpx;
                            background: #0050F6;
                            border-radius: 2rpx;
                            font-size: 24rpx;
                            font-family: PingFangSC-Regular, PingFang SC;
                            font-weight: 400;
                            color: #FFFFFF;
                            line-height: 52rpx;
                        }
                        .check{
					    	width: 40rpx;
					    	height: 40rpx;
					    }
                        .checked{
						    background: url('../../static/imgs/duigouxuanzhong.png') center center no-repeat;
						    background-size:100% 100%;
					    }
					    .nochecked{
					    	background: url('../../static/imgs/weixuanzhong.png') center center no-repeat;
					    	background-size:100% 100%;
					    }
                    }
                }
                .right_bottom {
                    padding-top: 22.96rpx;
                    margin-right: 32rpx;
                    .more_info {
                        display: flex;
                        justify-content: flex-start;
                        align-items: center;
                        .desc {
                            height: 28rpx;
                            font-size: 20rpx;
                            font-family: PingFangSC-Regular, PingFang SC;
                            font-weight: 400;
                            color: #666666;
                            line-height: 28rpx;
                        }
			            .arrow-right-select {
                            margin-left: 8rpx;
			            	width: 8.27rpx;
			            	height: 12.68rpx;
			            }
                    }
                }
             }
             .tap {
                border: 1px solid #DFDFDF;
                width: 102rpx;
                height: 102rpx;
                border-radius: 50%;
                top: 15rpx;
                right: 15rpx;
                position: absolute;
                .tap_innew {
                    position: relative;
                    border: 1px solid #DFDFDF;
                    width: 88rpx;
                    height: 88rpx;
                    border-radius: 50%;
                    top: 7rpx;
                    left: 7rpx;
                    transform: rotate(25deg);
                    .text {
                        width: 100%;
                        height: 100%;
                        line-height: 88rpx;
                        text-align: center;
                        font-size: 20rpx;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #999999;
                    }
                }
             }
        }
        .partOne::before {
          content: '';
          height: 198rpx;
          border: 1rpx dashed #F6F6F6;
          position: absolute;
          left: 176rpx;
          top: 0;
          bottom: 0;
          margin: auto;
        }
        .partTwo {
            overflow:hidden;
             transform: translateZ(0);
             width: 100%;
             margin-right: 30rpx;
             position: relative; 
             background: radial-gradient(circle at right top, transparent 17rpx,  #FFFFFF 0) top left / 180rpx 51% no-repeat,
               radial-gradient(circle at right bottom, transparent 17rpx,  #FFFFFF 0) bottom left / 180rpx 51% no-repeat,
               radial-gradient(circle at left top, transparent 17rpx, #FFFFFF 0) top right / 511rpx 51% no-repeat,
               radial-gradient(circle at left bottom, transparent 17rpx, #FFFFFF 0) bottom right / 511rpx 51% no-repeat;
             filter: drop-shadow(-1px 3px 3px rgba(102,102,102,0.1000));
             .part_top {
                margin-top: 39.6rpx;
                margin-left: 31.11rpx;
                margin-right: 30rpx;
                font-size: 20rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #999999;

             }
             .part_bottom {
                margin-top: 16rpx;
                margin-left: 31.11rpx;
                margin-right: 30rpx;
                margin-bottom: 40rpx;
                font-size: 20rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #999999;
             }
        }
        .partTwo::before {
          content: '';
          height: 1rpx;
          width: 122rpx;
          border: 1rpx dashed #FFFFFF;
          position: absolute;
          left: 33.75rpx;
        }
        .partTwo::after {
          content: '';
          height: 1rpx;
          width: 460rpx;
          border: 1rpx dashed #FFFFFF;
          position: absolute;
          left: 196.75rpx;
          top: 0rpx;
        }
        .partThree {
            width: 100%;
            position: relative;
            overflow: hidden;
            background: radial-gradient(circle at right top, transparent 17rpx,  #E9E9E9 0) top left / 180rpx 51% no-repeat,
              radial-gradient(circle at right bottom, transparent 0px,  #E9E9E9 0) bottom left / 180rpx 51% no-repeat,
              radial-gradient(circle at left top, transparent 17rpx, #E9E9E9 0) top right / 511rpx 51% no-repeat,
              radial-gradient(circle at left bottom, transparent 0px, #E9E9E9 0) bottom right / 511rpx 51% no-repeat;
            filter: drop-shadow(-1px 3px 3px rgba(102,102,102,0.1000));
            .reson {
                margin: 18rpx 30rpx 20rpx 32rpx;
                height: 34rpx;
                width: 622rpx;
                overflow: hidden;
                font-size: 24rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #666666;
                line-height: 34rpx;
                white-space: nowrap;
            }
        }
    }
}
</style>