<template>
  <view class="all">
    <view class="part">
        <view class="partOne">
            <view class="one_left">
                <view class="type" :style="[typeBackground]">{{info.typeDesc}}</view>
                <view class="price">
                    <view :style="[priceColor]" v-if="info.couponType===1">{{info.price}}<span>元</span></view>
                    <view :style="[priceColor]" v-else-if="info.couponType===2">{{info.price}}<span>折</span></view>
                    <view :style="[priceColor]" class="dkStyle" v-else>{{info.price}}<span></span></view>
                </view>
                <view :style="[priceDescColor]" class="price_desc">{{info.priceDesc}}</view>
            </view>
            <view class="one_right">
                <view class="right_top">
                    <view class="info">
                        <view :style="[titleColor]" class="title">{{info.title}}</view>
                        <view :style="[timeColor]" class="time">{{info.time[0]?info.time[0]+'-'+info.time[1]:'有效期至'+info.time[1]}}</view> 
                    </view>
                    <view class="action">
                        <view v-if="type==='use'">
                            <view class="check"  @click="selected(info)" :class="info.checkStatus?'checked':'nochecked'"></view>
                        </view>
                        <view v-else>
                            <view v-if="info.status===0">
                                <button class="gouse" @click="goMenu">去使用</button>
                            </view>
                        </view>
                    </view>
                </view>
                <view class="right_bottom">
                    <view class="more_info" @click="openDetail">
                        <view :style="[descColor]"class="desc" v-if="info.couponType===1||info.couponType===2">抵扣订单金额</view>
                        <view :style="[descColor]"class="desc" v-else>下单可抵扣商品，指定分类商品可用</view>
                        <image :class="['arrow-right-select',arrowFlag?'arrow-right-select-down':'arrow-right-select-up']" :src="info.status!==0?'../../static/imgs/jiantouqian.png':'../../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">不可使用原因：{{info.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, // 1满减 2折扣 3抵扣
                    typeDesc:'最大字数最大字', // 左上角文案描述
                    mjPrice:'30', // 满减金额
                    zkPrice:'7', // 折扣金额
                    dkPrice:'免单', // 抵扣金额
                    priceDesc:'满130可用', // 条件描述
                    checkStatus:false, // 优惠券选中状态
                    title:'最大字数最大字数最大', // 优惠券标题
                    time:['2022.07.24.17:20'], // 过期时间
                    shopList:['全门店可用'], // 可用门店
                    goodList:['全品类可用'], // 可用品类 
                    useScence:['小程序下单可用'], // 使用场景
                    useDesc:['*不可与其他优惠券同时使用','*不可与门店优惠共享','*订单完成后选择退款，只退回实际支付金额，优惠券不予退回'], // 使用说明
                    zkRule:'整单最高抵扣50元', // 折扣规则
                    reson:'不可与已勾选券叠加使用' // 不可使用原因
                }
            }
        }
    },
    computed: {
        typeBackground(){
            const {status} = this.info
            if(status!==0){
                return  { '--type-background': 'linear-gradient(90deg, #666666 0%, #999999 100%)' }
            }else{
                return { '--type-background': 'linear-gradient(90deg, #75A2FF 0%, #B6CEFF 100%)' }
            }
        },
        priceColor(){
            const {status} = this.info
            if(status!==0){
                return  { 'color': '#666666' }
            }else{
                return { 'color': '#0050F6' }
            }
        },
        priceDescColor(){
            const {status} = this.info
            if(status!==0){
                return  { 'color': '#999999' }
            }else{
                return { 'color': '#0050F6' }
            }
        },
        titleColor(){
            const {status} = this.info
            if(status!==0){
                return  { 'color': '#666666' }
            }else{
                return { 'color': '#333333' }
            }
        },
        timeColor(){
            const {status} = this.info
            if(status!==0){
                return  { 'color': '#999999' }
            }else{
                return { 'color': '#333333' }
            } 
        },
        descColor(){
            const {status} = this.info
            if(status!==0){
                return  { 'color': '#999999' }
            }else{
                return { 'color': '#666666' }
            } 
        }
    },
    data(){
        return {
            detailFlag:false,
            checkFlag:false,
            arrowFlag:false
        }
    },
    methods:{
        openDetail(){
            this.detailFlag = !this.detailFlag 
            this.arrowFlag = !this.arrowFlag
        },
        selected(info) {
            if(info.status!==0)return
            this.$emit("updata",info.id)
        },
        goMenu() {
            uni.switchTab({ url: '/pages/menu/menu' });
        }
    }

}   
</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 / 182rpx 51% no-repeat,
               radial-gradient(circle at right bottom, transparent 17rpx,  #FFFFFF 0) bottom left / 182rpx 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;
                    display: inline-block;
                    font-size: 20rpx;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    background: var(--type-background);
                    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: var(color);
                    line-height: 74rpx;
                    margin: 0 auto;
                    text-align: center;
                    margin-top: 40rpx;
                    .dkStyle {
                        font-size: 48rpx;
                    }
                    span {
                        height: 34rpx;
                        font-size: 24rpx;
                        font-family: Futura-Medium, Futura;
                        font-weight: 500;
                        color: var(color);
                        line-height: 30rpx;
                    }
                }
                .price_desc {
                    height: 28rpx;
                    font-size: 20rpx;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: var(color);
                    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: var(color);
                            line-height: 40rpx;
                            white-space: nowrap;
                        }
                        .time {
                            height: 28rpx;
                            font-size: 20rpx;
                            font-family: PingFangSC-Regular, PingFang SC;
                            font-weight: 400;
                            color: var(color);
                            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: var(color);
                            line-height: 28rpx;
                        }
			            .arrow-right-select {
                            margin-left: 8rpx;
			            	width: 8.27rpx;
			            	height: 12.68rpx;
			            }
                        .arrow-right-select-down {
                            animation-name: upAnidown;
                            animation-duration: 0s;
                            animation-fill-mode:forwards;
                            @keyframes upAnidown {
                              0% {
                                transform: rotate(0);
                                -webkit-transform: rotate(0);
                              }
                              100% {
                                transform: rotate(90deg);
                                -webkit-transform: rotate(90deg);
                              }
                            }
                        };
                        .arrow-right-select-up {
                            animation-name: upAniup;
                            animation-duration: 0s;
                            animation-fill-mode:forwards;
                            @keyframes upAniup {
                              0% {
                                transform: rotate(90deg);
                                -webkit-transform: rotate(90deg);
                              }
                              100% {
                                transform: rotate(0deg);
                                -webkit-transform: rotate(0deg);
                              }
                            }
                        }
                    }
                }
             }
             .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: '';
          width: 2rpx;
          height: 198rpx;
        //   border: 1rpx solid red;
          background:url("../../static/imgs/xuxian1.png");
          background-size: 2rpx 198rpx;
          background-repeat: no-repeat;
          position: absolute;
          left: 179rpx;
          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 / 182rpx 51% no-repeat,
               radial-gradient(circle at right bottom, transparent 17rpx,  #FFFFFF 0) bottom left / 182rpx 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;
          background:url("../../static/imgs/xuxian3.png");
          background-size: 122rpx 1rpx;
          background-repeat: no-repeat;
          position: absolute;
          left: 33.75rpx;
        }
        .partTwo::after {
          content: '';
          height: 1rpx;
          width: 460rpx;
        //   border: 1rpx dashed #FFFFFF;
        background:url("../../static/imgs/xuxian2.png");
          background-size: 460rpx 1rpx;
          background-repeat: no-repeat;
          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 / 182rpx 51% no-repeat,
              radial-gradient(circle at right bottom, transparent 0px,  #E9E9E9 0) bottom left / 182rpx 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>