<template>
    <div class="main-content12 ">
        <div class="flex-common">
            <el-tabs v-model="curTab" class="mb24" @tab-click="handleClick">
                <el-tab-pane label="新增卡券" name="add"></el-tab-pane>
                <el-tab-pane label="管理卡券" name="manage"></el-tab-pane>
            </el-tabs>
            <div v-if="curTab == 'add'" class="customize_box">
                <div class="flex-between mb24">
                    <div>
                        <h4>自定义卡券（原检测卡）</h4>
                        <p class="desc">为用户发放高度自定义的卡券,可通过卡券自提、公众号自动回复、自行与第三方合作（如：阿奇索）的形式发放</p>
                    </div>
                    <GuipButton type="system" :btnstyle="{'width': '142px'}"  @click="addTimeNums" >立即新增</GuipButton>
                </div>
                <div class="flex customizeWrap mb24">
                    <div class="customizeItem active">
                        <span class="posFree">中一个亿</span>
                        <div class="flex gap8">
                            <img src="@/assets/timesNum.png" alt="">
                            <span class="cardTitle">时间卡</span>
                        </div>
                        <p>每天有免费使用次数，用完后当天不可再用，但第二天次数会重置</p>
                        <GuipButton type="primary" :btnstyle="{'width': '254px'}"  @click="addTimeNums" >立即新增</GuipButton>
                    </div>
                    <div class="customizeItem">
                        <span class="posFree">中一个亿</span>
                        <div class="flex gap8">
                            <img src="@/assets/timesNum.png" alt="">
                            <span class="cardTitle">时间卡</span>
                        </div>
                        <p>每天有免费使用次数，用完后当天不可再用，但第二天次数会重置</p>
                        <GuipButton type="ignore" :btnstyle="{'width': '254px'}"  @click="addTimeNums" >立即新增</GuipButton>
                    </div>
                    <div class="customizeItem">
                        <span class="posFree">中一个亿</span>
                        <div class="flex gap8">
                            <img src="@/assets/timesNum.png" alt="">
                            <span class="cardTitle">时间卡</span>
                        </div>
                        <p>每天有免费使用次数，用完后当天不可再用，但第二天次数会重置</p>
                        <GuipButton type="primary" :btnstyle="{'width': '254px'}"  @click="addTimeNums" >立即新增</GuipButton>
                    </div>
                    <div class="customizeItem">
                        <span class="posFree">中一个亿</span>
                        <div class="flex gap8">
                            <img src="@/assets/timesNum.png" alt="">
                            <span class="cardTitle">时间卡</span>
                        </div>
                        <p>每天有免费使用次数，用完后当天不可再用，但第二天次数会重置</p>
                        <GuipButton type="primary" :btnstyle="{'width': '254px'}"  @click="addTimeNums" >立即新增</GuipButton>
                    </div>
                    <div class="customizeItem">
                        <span class="posFree">中一个亿</span>
                        <div class="flex gap8">
                            <img src="@/assets/timesNum.png" alt="">
                            <span class="cardTitle">时间卡</span>
                        </div>
                        <p>每天有免费使用次数，用完后当天不可再用，但第二天次数会重置</p>
                        <GuipButton type="primary" :btnstyle="{'width': '254px'}"  @click="addTimeNums" >立即新增</GuipButton>
                    </div>
                </div>
                <h4>独立卡券</h4>
                <p class="desc mb20">一些介绍，通过微信链接，用户免费领取。适用于微信社群运营。</p>
                <div class="flex customizeWrap">
                    <div class="customizeItem">
                        <span class="posFree">免费代金券</span>
                        <div class="flex gap8">
                            <img src="@/assets/timesNum.png" alt="">
                            <span class="cardTitle">时间卡</span>
                        </div>
                        <p>用户不需支付，领取指定代金券使用微信支付可用</p>
                        <GuipButton type="primary" :btnstyle="{'width': '254px'}"  @click="addTimeNums" >立即新增</GuipButton>
                    </div>
                </div>
            </div>
            <div v-if="curTab == 'manage'" class="manageBox">
                <h4 class="mb24">选择卡券类型</h4>
                <div class="cardTypeList gap20 flex">
                    <div v-for="item in walletList" :key="item.type" class="wallet-item" :class="walletType == item.type ? 'wallet-item-active' : ''" @click="walletClick(item.type)">
                        <img src="@/assets/site/tem-active.svg" class="tem-active" alt="" v-if="walletType == item.type">
                        <div class="wallet-name">{{item.name}}</div>
                        <div class="desc">{{ item.desc1 }}</div>
                        <div class="desc">{{ item.desc2 }}</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="flex-common mt12" v-if="curTab == 'manage'">
            <el-tabs v-model="curType" class="mb12" @tab-click="handleClick">
                <el-tab-pane label="单张发售卡" name="only"></el-tab-pane>
                <el-tab-pane label="批量发售卡" name="more"></el-tab-pane>
            </el-tabs>
            <div class="flex numsList gap12">
                <div class="numItem gap8 flex" :class="curCardType == item.type ? 'numItemActive' : ''" v-for="item in numsList" :key="item.name">
                    {{ item.name }} <span class="unit">{{ item.num }}</span>
                </div>
            </div>
            <GuipTable :tableData="tableList" :key="tableKey" ref="multipleTable" autoColumn="true" :loading="tableLoading" style="flex:1">
                <template>
                    <el-table-column fixed="left" prop="card" label="检测卡号" min-width="200"></el-table-column>
                    <el-table-column prop="type" label="发行方式" width="120"></el-table-column>
                    <el-table-column prop="rule" label="使用规则" min-width="200"></el-table-column>
                    <el-table-column prop="review_status_desc" label="余额/面额" min-width="120"></el-table-column>
                    <el-table-column prop="pay" label="支付金额" min-width="120"></el-table-column>
                    <el-table-column prop="review_status_desc" label="检测系统" min-width="120"></el-table-column>
                    <el-table-column prop="review_status_desc" label="检测服务" min-width="120"></el-table-column>
                    <el-table-column prop="review_status_desc" label="检测价格" min-width="120"></el-table-column>
                    <el-table-column prop="status" label="状态" min-width="120">
                        <template slot-scope="scope">
                            <span :class="['status','status'+[scope.row.status]]">{{ scope.row.status_desc }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column fixed="right" prop="tid" label="操作" min-width="100">
                        <template slot-scope="scope">
                            <GuipButton type="text" @click="handleRefuse(scope.row)">关闭</GuipButton>
                        </template>
                    </el-table-column>
                </template>
            </GuipTable>
        </div>
    </div>
</template>
<script>
import GuipButton from '@/components/GuipButton'
import GuipTable from '@/components/GuipTable.vue';
export default {
    components: {
        GuipButton,
        GuipTable,
    },
    watch: {
        curType(val) {
            if (val == 'only') {
                this.curCardType = 1;
            } else {
                this.curCardType = 2;
            }
        }
    },
    data() {
        return {
            curTab: 'manage',
            curType: 'only',
            curCardType: 1,
            tableList:[
                {
                    card: '123456789',
                    type:'单张发售卡',
                    rule:'满减卡',
                    review_status_desc:'10元',
                    pay:'￥10.00',
                    status: 1,
                    status_desc: '使用中',
                    tid: ''
                },
                {
                    card: '123456789',
                    type:'批量发售卡',
                    rule:'折扣卡',
                }
            ],
            walletList:[
                {
                    type: 1,
                    name: '自定义卡券（原检测卡）',
                    desc1:'为用户发放高度自定义的卡券',
                    desc2:'分折扣、满减、现金、时间、次数的卡类型'
                },
                {
                    type: 2,
                    name: '微信代金券',
                    desc1:'通过微信链接，用户免费领取',
                    desc2:'适用于微信社群运营'
                }
            ],
            walletType:1,
            numsList:[
                {
                    name:'现金卡',
                    type:1,
                    num:6
                },
                {
                    name:'折扣卡',
                    num:6,
                    type:2
                },
                {
                    name:'满减卡',
                    num:6,
                    type:3
                },
                {
                    name:'时间卡',
                    num:6,
                    type:4
                },
                {
                    name:'次数卡',
                    num:6,
                    type:5
                }
            ]
        }
    },
    mounted() {
        
    },
    methods: {
        // 
        addTimeNums() {

        },
        handleClick(tab, event) {
            console.log(tab, event);
        },
        walletClick(type) {
            this.walletType = type;
        },
        handleRefuse() {

        }
    },
}
</script>
<style scoped lang="scss">
.customize_box,.manageBox{
    h4{
        margin: 0;
        text-align: left;
    }
    .desc{
        text-align: left;
        margin: 6px 0 0px;
    }
}
.gap20{
    gap: 20px;
}
.manageBox{

}
.customizeWrap{
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 20px;
    .customizeItem{
        display: flex;
        flex-direction: column;
        gap: 14px;
        position: relative;
        width: 281.5px;
        height: 160px;
        padding: 16px 14px;
        box-sizing: border-box;
        border-radius: 8px;
        background: #FFFFFF;
        border: 1px solid #DFE2E6;
        box-shadow: 0px 4px 16px 0px rgba(17, 55, 143, 0.12);
        img{
            width: 32px;
            height: 32px;
        }
        .cardTitle{   
            font-weight: bold;
            color: #23242B;
        }
        p{
            font-size: 12px;
            font-weight: normal;
            line-height: 15px;
            letter-spacing: 0.08em;
            color: #8A9099;
            text-align: left;
        }
        .posFree{
            position: absolute;
            top: 0;
            right: 0;
            font-size: 12px;
            color: #FF4D4F;
            border-radius: 2px;
            width: 68px;
            height: 24px;
            padding: 4px 10px;
            box-sizing: border-box;
            border-radius: 0px 8px 0px 8px;
            background: #FFF2F2;
        }
    }
    .active{
        border-color: #006AFF;
    }
}
.cardTypeList{
    .wallet-item{
        display: flex;
        flex-direction: column;
        text-align: left;
        padding: 16px 14px;
        width: 282px;
        height: 96px;
        letter-spacing: 0.08em;
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.47);
        box-sizing: border-box;
        border: 1px solid #DFE2E6;
        .desc{
            font-size: 12px;
            color: #626573;
            letter-spacing: 0.08em;
        }

        .wallet-name{
        color: #1E2226;
        font-size: 14px;
        font-weight: bold;
        margin-bottom: 12px;
        }
        .wallet-num{
            font-size: 12px;
            color: #626573;
            padding: 0 2px;
            display: flex;
            align-items: baseline;
        }
        .wallet-price{
        font-size: 22px;
        font-weight: bold;
        color: #626573;
        }
    }

    .wallet-item-active{
        position: relative;
        background: #F2F7FF;
        border-color: #006AFF;
        .tem-active{
        position: absolute;
        right: 0;
        top: 0;
        width: 30px;
        height: 30px;
        }
        .wallet-name{
        color: #006AFF;
        }
    }
}

.numsList{
    .numItem{
        width: 111px;
        height: 34px;
        padding: 8px 17px;
        border-radius: 80px;
        background: #FFFFFF;
        box-sizing: border-box;
        border: 1px solid #DFE2E6;
        color: #626573;
    }
    .unit{
        width: 24px;
        height: 17px;
        padding: 2px 8px;
        box-sizing: border-box;
        border-radius: 100px;
        background: #E8F0FE;
        font-size: 12px;
        line-height: 13px;
        letter-spacing: 0.08em;
        color: #006AFF;
    }
    .numItemActive{
        font-weight: bold;
        color: #FFFFFF;
        border-radius: 80px;
        background: #006AFF;
    }
}
</style>