<template>

    <div class="container">
        <div class="notification-view">
            <div class="right-wrapright-wrap">
                <div class="myTabs" style="background: #fff;">
                    <el-tabs style="padding: 0 20px 40px 20px;" v-model="activeName" @tab-click="handleClick">
                        <el-tab-pane label="我的积分" name="first">
                            <el-radio-group v-model="firstTabPosition" style="margin-bottom: 30px;">
                                <el-radio-button v-for="(item, index) in firstTabsList" :key="index"
                                    :label="item.value">
                                    {{ item.name }}
                                </el-radio-button>
                            </el-radio-group>
                            <div v-if="firstTabPosition == 'integralList'" class="integralList">
                                <el-select clearable style="width: 220px; margin-right: 30px;" size="small"
                                    v-model="listQuery.type" placeholder="请选择积分类型">
                                    <el-option v-for="item in options" :key="item.dictValue" :label="item.dictLabel"
                                        :value="item.dictValue">
                                    </el-option>
                                </el-select>
                                <el-button size="small" style="margin-right: 30px;" type="primary"
                                    @click="handleFilter">查询</el-button>
                                <el-table size="small" :data="firstList" border style="margin-top: 30px;width: 960px">
                                    <el-table-column align="center" type="index" width="50"
                                        label="序号"></el-table-column>
                                    <el-table-column align="center" prop="integralTypeName"
                                        label="积分类型"></el-table-column>
                                    <el-table-column align="center" prop="integral" label="积分">
                                        <template slot-scope="scope">
                                            <span style="color: #67C23A;font-weight: 600;font-size: 14px;"
                                                v-if="scope.row.pm == 0">
                                                + {{ scope.row.integral }}
                                            </span>
                                            <span style="color: #F56C6C;font-weight: 600;font-size: 14px;" v-else>
                                                - {{ scope.row.integral }}
                                            </span>
                                        </template>
                                    </el-table-column>
                                    <el-table-column align="center" prop="comment" label="备注"></el-table-column>
                                    <el-table-column align="center" prop="createTime" label="获取时间"></el-table-column>
                                </el-table>
                                <div class="myPage">
                                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                                        :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="10"
                                        layout="total, sizes, prev, pager, next, jumper" :total="total">
                                    </el-pagination>
                                </div>

                            </div>
                            <div v-if="firstTabPosition == 'integralRules'" class="integralRules" v-html="integralRules"></div>
                            <div v-if="firstTabPosition == 'activityRules'" class="integralRules" v-html="activityRules"></div>
                        </el-tab-pane>
                        <el-tab-pane label="我的兑换" name="second">
                            <el-radio-group v-model="secondTabPosition" @change="handleClickSecondTabs">
                                <el-radio-button v-for="(item, index) in secondTabsList" :key="index"
                                    :label="item.value">
                                    {{ item.name }}
                                </el-radio-button>
                            </el-radio-group>
                            <div class="gainList_container content">
                                <div class="gains_wrapper">
                                    <el-empty v-if="secondList.length == 0" :image-size="200"></el-empty>
                                    <div v-else class="list_wrapper">
                                        <div class="list">
                                            <div v-for="(item, index) in secondList" :key="index" class="item">
                                                <div class="img-wapper">
                                                    <el-image :src="item.imgUrl" class="item-icon"></el-image>
                                                </div>
                                                <div class="main">
                                                    <p class="goods_name" :title="item.name">{{ item.name }}</p>
                                                    <div style="display: flex;justify-content: space-between;">
                                                        <p class="date">
                                                            兑换时间
                                                            {{ item.createTime }}
                                                        </p>
                                                        <p class="date">
                                                            订单号
                                                            {{ item.orderSeq }}
                                                        </p>
                                                    </div>

                                                    <div class="buttons"
                                                        style="display: flex;justify-content: space-between;">
                                                        <button class="button-item actived"
                                                            @click="handleClickGoods(item.orderId)">
                                                            查看信息
                                                            <svg width="16" height="16" viewBox="0 0 16 16" fill="none"
                                                                xmlns="http://www.w3.org/2000/svg" class="arrow">
                                                                <path
                                                                    d="M12.5855 5.33203C13.0117 5.33203 13.2425 5.83111 12.9664 6.15586L8.38099 11.5505C8.18132 11.7854 7.81872 11.7854 7.61905 11.5505L3.0336 6.15586C2.75757 5.83111 2.98837 5.33203 3.41457 5.33203L12.5855 5.33203Z"
                                                                    fill="#916BE1"></path>
                                                            </svg>
                                                        </button>
                                                        <div class="status">
                                                            <span v-if="item.orderType == 0">待审核</span>
                                                            <span v-if="item.orderType == 1">待发货</span>
                                                            <span v-if="item.orderType == 2">作废</span>
                                                            <span v-if="item.orderType == 3">待收货</span>
                                                            <span v-if="item.orderType == 4">已收货</span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </el-tab-pane>
                        <el-tab-pane label="我的礼品劵" name="third">
                            <div class="gainList_container content">
                                <div class="gains_wrapper">
                                    <el-empty v-if="thirdList.length == 0" :image-size="200"></el-empty>
                                    <div v-else class="list_wrapper">
                                        <div class="list">
                                            <div v-for="(item, index) in thirdList" :key="index" class="item isVirtual">
                                                <div class="img-wapper">
                                                    <el-image :src="item.couponImg" class="item-icon"></el-image>
                                                </div>
                                                <div class="main">
                                                    <p class="goods_name">{{ item.couponName }}</p>
                                                    <p class="date">
                                                        兑换截止时间：
                                                        {{ item.enableEndTime }}
                                                    </p>

                                                </div>
                                                <div v-if="item.status == 0" class="status">
                                                    <span class="use-btn" @click="setTab(item)">去使用</span>
                                                </div>
                                                <div v-if="item.status == 1" class="status">
                                                    <span style="color: #8a919f;">已使用</span>
                                                </div>
                                                <div v-if="item.status == 3" class="status">
                                                    <span style="color: #F56C6C;">已超期 </span>
                                                </div>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="我的勋章" name="fifth">
                            <MyMedal></MyMedal>
                        </el-tab-pane>
                        <el-tab-pane label="参与活动记录" name="fourth">
                            <el-radio-group v-model="fourthTabPosition" style="margin-bottom: 30px;"
                                @change="handleClickTabs">
                                <el-radio-button v-for="(item, index) in fourthTabsList" :key="index"
                                    :label="item.value">
                                    {{ item.name }}
                                </el-radio-button>
                            </el-radio-group>
                            <div v-if="fourthTabPosition == '1'">
                                <el-date-picker style="width: 220px; margin-right: 30px;" size="small"
                                    class="filter-item" value-format="yyyy-MM-dd" v-model="listQuery.createTime"
                                    type="date" placeholder="答题日期">
                                </el-date-picker>
                                <el-button size="small" style="margin-right: 30px;" type="primary"
                                    @click="handleFilterAnswerList">查询</el-button>
                                <el-empty v-if="answerList.length == 0" :image-size="200"></el-empty>
                                <div v-else>
                                    <el-table size="small" :data="answerList" border
                                        style="margin-top: 30px;width: 960px">
                                        <el-table-column align="center" type="index" width="50"
                                            label="序号"></el-table-column>
                                        <el-table-column align="center" prop="answerDate"
                                            label="答题时间"></el-table-column>
                                        <el-table-column align="center" prop="answerTime"
                                            label="用时(毫秒)"></el-table-column>
                                        <el-table-column align="center" prop="rightQuantities"
                                            label="正确数"></el-table-column>
                                        <el-table-column align="center" prop="rownum" label="当前排名"></el-table-column>
                                    </el-table>
                                    <div class="myPage">
                                        <el-pagination @size-change="handleSizeChangeAnswerList"
                                            @current-change="handleCurrentChangeAnswerList" :current-page="currentPage"
                                            :page-sizes="[10, 20, 30, 40]" :page-size="10"
                                            layout="total, sizes, prev, pager, next, jumper" :total="total">
                                        </el-pagination>
                                    </div>
                                </div>
                            </div>
                            <div v-if="fourthTabPosition == '2'">
                                <el-date-picker style="width: 220px; margin-right: 30px;" size="small"
                                    class="filter-item" value-format="yyyy-MM-dd" v-model="listQuery.createTime"
                                    type="date" placeholder="抽奖日期">
                                </el-date-picker>
                                <el-input placeholder="请输入活动名称" clearable style="width: 220px; margin-right: 30px;"
                                           size="small" class="filter-item" v-model="listQuery.actTitle"></el-input>

                                <el-button size="small" style="margin-right: 30px;" type="primary"
                                    @click="handleFilterPrizeList">查询</el-button>
                                <el-empty v-if="prizeList.length == 0" :image-size="200"></el-empty>
                                <div v-else>
                                    <el-table size="small" :data="prizeList" border
                                        style="margin-top: 30px;width: 960px">
                                        <el-table-column align="center" type="index" width="50"
                                            label="序号"></el-table-column>
                                        <el-table-column align="center" prop="createTime"
                                            label="得奖时间"></el-table-column>
                                        <el-table-column align="center" prop="actTitle" label="活动名称"></el-table-column>
                                        <el-table-column align="center" prop="prizeName" label="奖品"></el-table-column>
                                    </el-table>
                                    <div class="myPage">
                                        <el-pagination @size-change="handleSizeChangePrizeList"
                                            @current-change="handleCurrentChangePrizeList" :current-page="currentPage"
                                            :page-sizes="[10, 20, 30, 40]" :page-size="10"
                                            layout="total, sizes, prev, pager, next, jumper" :total="total">
                                        </el-pagination>
                                    </div>
                                </div>

                            </div>
                            <div v-if="fourthTabPosition == '3'">
                                <!-- <el-date-picker
                        style="width: 220px; margin-right: 30px;"
                        size="small"
                        class="filter-item"
                        v-model="listQuery.createTime"
                        type="week"
                        format="yyyy 第 WW 周"
                        value-format="yyyy-MM-dd"
                        placeholder="选择周">
                        </el-date-picker> -->
                                <el-date-picker style="width: 220px; margin-right: 30px;" size="small"
                                    class="filter-item" value-format="yyyy-MM-dd" v-model="listQuery.createTime"
                                    type="date" placeholder="游戏日期">
                                </el-date-picker>
                                <el-input placeholder="请输入游戏标题" clearable style="width: 220px; margin-right: 30px;"
                                    size="small" class="filter-item" v-model="listQuery.title"></el-input>
                                <el-button size="small" style="margin-right: 30px;" type="primary"
                                    @click="handleFilterGameLogList">查询</el-button>
                                <el-empty v-if="gameLogList.length == 0" :image-size="200"></el-empty>
                                <div v-else>
                                    <el-table size="small" :data="gameLogList" border
                                        style="margin-top: 30px;width: 960px">
                                        <el-table-column align="center" type="index" width="50"
                                            label="序号"></el-table-column>
                                        <el-table-column align="center" prop="title" label="游戏标题"></el-table-column>
                                        <el-table-column align="center" prop="createTime"
                                            label="游戏时间"></el-table-column>
                                        <el-table-column align="center" prop="actuaMoney" label="得分"></el-table-column>
                                        <!-- <el-table-column align="center" prop="rownum" label="排名"></el-table-column> -->
                                    </el-table>
                                    <div class="myPage">
                                        <el-pagination @size-change="handleSizeChangeGameLogList"
                                            @current-change="handleCurrentChangeGameLogList" :current-page="currentPage"
                                            :page-sizes="[10, 20, 30, 40]" :page-size="10"
                                            layout="total, sizes, prev, pager, next, jumper" :total="total">
                                        </el-pagination>
                                    </div>
                                </div>

                            </div>
                            <div v-if="fourthTabPosition == '4'">
                                <el-date-picker style="width: 220px; margin-right: 30px;" size="small"
                                    class="filter-item" value-format="yyyy-MM-dd" v-model="listQuery.createTime"
                                    type="date" placeholder="互动日期">
                                </el-date-picker>
                                <el-button size="small" style="margin-right: 30px;" type="primary"
                                    @click="handleFilterPostList">查询</el-button>
                                <el-empty v-if="postList.length == 0" :image-size="200"></el-empty>
                                <div v-else>
                                    <el-table size="small" :data="postList" border
                                        style="margin-top: 30px;width: 960px">
                                        <el-table-column align="center" type="index" width="50"
                                            label="序号"></el-table-column>
                                        <el-table-column align="center" min-width="100px" label="标题" prop="title">
                                        </el-table-column>
                                        <el-table-column align="center" min-width="80px" label="类型" prop="typeName">
                                        </el-table-column>
                                        <el-table-column align="center" min-width="80px" label="积分" prop="integral">
                                        </el-table-column>
                                        <el-table-column align="center" min-width="100px" label="截止日期" prop="deadline">
                                        </el-table-column>
                                        <el-table-column align="center" min-width="100px" label="创建日期"
                                            prop="createTime">
                                        </el-table-column>
                                        <el-table-column align="center" min-width="80px" label="状态"
                                            prop="complateStatusName">
                                        </el-table-column>
                                    </el-table>
                                    <div class="myPage">
                                        <el-pagination @size-change="handleSizeChangePostList"
                                            @current-change="handleCurrentChangePostList" :current-page="currentPage"
                                            :page-sizes="[10, 20, 30, 40]" :page-size="10"
                                            layout="total, sizes, prev, pager, next, jumper" :total="total">
                                        </el-pagination>
                                    </div>
                                </div>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="新手指引" name="sixth">
                            <div class="guide-replay-card">
                                <div class="guide-replay-icon">📖</div>
                                <h3 class="guide-replay-title">新手指引</h3>
                                <p class="guide-replay-desc">回顾誉商城的功能介绍，快速上手积分兑换、参与活动等操作。</p>
                                <el-button type="primary" @click="handleReplayGuide">重新查看</el-button>
                            </div>
                        </el-tab-pane>
                    </el-tabs>
                </div>

            </div>
        </div>
    </div>
</template>
<script scoped>
import { orderList, myWelfareList, notice, integralTypes, userlogs, answerList, prizeList, gameLogList, postList } from "@/api/allApi";
import { getTab, setTab } from '@/utils/auth'
import MyMedal from "@/views/HomeView/MyMedal.vue";
export default {
    components: {
        MyMedal,
    },
    data() {
        return {
            answerList: [],
            prizeList: [],
            gameLogList: [],
            postList: [],
            firstList: [],
            firstTabPosition: 'integralList',
            firstTabsList: [
                {
                    value: 'integralList',
                    name: '积分列表',
                },
                {
                    value: 'integralRules',
                    name: '积分规则',
                },
                {
                    value: 'activityRules',
                    name: '活跃度判定规则',
                },
            ],
            fourthTabPosition: '1',
            fourthTabsList: [
                {
                    value: '1',
                    name: '答题',
                },
                {
                    value: '2',
                    name: '抽奖',
                },
                {
                    value: '3',
                    name: '游戏',
                },
                {
                    value: '4',
                    name: '互动',
                },
            ],

            secondList: [

            ],
            secondTabPosition: 'all',
            secondTabsList: [
                {
                    value: 'all',
                    name: '全部',
                },
                {
                    value: '0',
                    name: '待审核',
                },
                {
                    value: '1',
                    name: '待发货',
                },
                {
                    value: '3',
                    name: '待收货',
                },
                {
                    value: '4',
                    name: '已收货',
                },
                {
                    value: '2',
                    name: '作废',
                },
            ],
            thirdList: [],
            options: [],
            value: '',
            time: '',
            tableData: [],
            currentPage: 1,
            integralRules: '',
            activityRules: '',
            activeName: 'first',
            total: 0,
            listQuery: {
                page: 1,
                limit: 10,
                type: '',
                title: '',
                actTitle: '',
                createTime: ''
            },
        };
    },
    created() {
        const Tab = getTab();
        if (Tab == 'exchange') {
            this.activeName = 'second';
            this.getSecondList('0,1,2,3,4');
        }
        if (Tab == 'welfare') {
            this.activeName = 'third';
            this.getThirdList();
        }
        this.getIntegralTypes();
        this.getFirstList();
        this.getIntegralNotice();
        this.getActivityRules();
    },
    methods: {
        getAnswerList() {
            answerList(this.listQuery).then(response => {
                this.answerList = response.data.data.items;
                this.total = response.data.data.total;
            })
        },
        getPrizeList() {
            prizeList(this.listQuery).then(response => {
                this.prizeList = response.data.data.items;
                this.total = response.data.data.total;
            })
        },
        getGameLogList() {
            gameLogList(this.listQuery).then(response => {
                this.gameLogList = response.data.data.items;
                this.total = response.data.data.total;
            })
        },
        getPostList() {
            postList(this.listQuery).then(response => {
                this.postList = response.data.data.items;
                this.total = response.data.data.total;
            })
        },
        setTab(item) {
            setTab('gift');
            let id = item.skuId;
            let skuIds = item.couponVo.skuIds;
            let name = 'giftNotice';
            let type = item.actId;
            if(skuIds.length == 1){
                this.$router.push({
                    path: '/home/pointsMall/redeem',
                    query: {
                        id: id || skuIds[0],
                        name: name,
                        type: type
                    }
                });
            }else{
                this.$router.push({
                    path: '/home/pointsMall',
                });
            }
            
        },
        getIntegralNotice() {
            notice({ noticeType: 'integralNotice' }).then(response => {
                this.integralRules = response.data.data.content;
            })
        },
        getActivityRules() {
            notice({ noticeType: 'activityRules' }).then(response => {
                this.activityRules = response.data.data.content;
            })
        },
        getIntegralTypes() {
            integralTypes({ dictType: 'integral_rule_type' }).then(response => {
                this.options = response.data.data;
            })
        },
        getFirstList() {
            userlogs(this.listQuery).then(response => {
                this.firstList = response.data.data.items;
                this.total = response.data.data.total;
            })
        },
        getSecondList(val) {
            orderList({ orderType: val }).then(response => {
                this.secondList = response.data.data;
            })
        },
        getThirdList() {
            myWelfareList().then(response => {
                const dataList = response.data.data;
                dataList.forEach(element => {
                    element.couponImg = element.couponVo.couponImg;
                    element.couponName = element.couponVo.couponName;
                    element.enableEndTime = element.couponVo.enableEndTime;
                });
                this.thirdList = dataList;
            })
        },
        handleClickGoods(orderId) {
            this.$router.push({
                path: '/myCenter/goodsDetail',
                query: {
                    orderId: orderId,
                }
            });
        },
        handleFilter() {
            this.listQuery.page = 1
            this.getFirstList();
        },
        handleSizeChange(val) {
            this.listQuery.limit = val;
            this.getFirstList();
        },
        handleCurrentChange(val) {
            this.listQuery.page = val;
            this.getFirstList();
        },
        //答题
        handleFilterAnswerList() {
            this.listQuery.page = 1
            this.getAnswerList();
        },
        handleSizeChangeAnswerList(val) {
            this.listQuery.limit = val;
            this.getAnswerList();
        },
        handleCurrentChangeAnswerList(val) {
            this.listQuery.page = val;
            this.getAnswerList();
        },
        //抽奖
        handleFilterPrizeList() {
            this.listQuery.page = 1
            this.getPrizeList();
        },
        handleSizeChangePrizeList(val) {
            this.listQuery.limit = val;
            this.getPrizeList();
        },
        handleCurrentChangePrizeList(val) {
            this.listQuery.page = val;
            this.getPrizeList();
        },
        //游戏
        handleFilterGameLogList() {
            this.listQuery.page = 1
            this.getGameLogList();
        },
        handleSizeChangeGameLogList(val) {
            this.listQuery.limit = val;
            this.getGameLogList();
        },
        handleCurrentChangeGameLogList(val) {
            this.listQuery.page = val;
            this.getGameLogList();
        },
        //互动
        handleFilterPostList() {
            this.listQuery.page = 1
            this.getPostList();
        },
        handleSizeChangePostList(val) {
            this.listQuery.limit = val;
            this.getPostList();
        },
        handleCurrentChangePostList(val) {
            this.listQuery.page = val;
            this.getPostList();
        },

        handleClickTabs(val) {
            this.total = 0;
            this.listQuery = {
                page: 1,
                limit: 10,
                type: '',
                createTime: ''
            };
            if (val == '1') {
                this.getAnswerList();
            }
            if (val == '2') {
                this.getPrizeList();
            }
            if (val == '3') {
                this.getGameLogList();
            }
            if (val == '4') {
                this.getPostList();
            }
        },

        handleClickSecondTabs(val) {
            if (val == 'all') {
                val = '0,1,2,3,4'
            }
            this.getSecondList(val);
        },

        handleReplayGuide() {
            let parent = this.$parent;
            while (parent) {
                if (parent.$options.name === 'app' && parent.showGuide) {
                    parent.showGuide();
                    return;
                }
                parent = parent.$parent;
            }
            console.warn('[Guide] 未找到 App 实例');
        },

        handleClick(tab) {
            this.total = 0;
            this.listQuery = {
                page: 1,
                limit: 10,
                type: '',
                createTime: ''
            };
            var name = tab.name;
            if (name == 'first') {
                this.getFirstList();
            }
            if (name == 'second') {
                this.getSecondList('0,1,2,3,4');
            }
            if (name == 'third') {
                this.getThirdList();
            }
            if (name == 'fourth') {
                this.getAnswerList();
            }
        },

    }
};
</script>
<style scoped>
.guide-replay-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 40px;
  text-align: center;
}
.guide-replay-icon {
  font-size: 56px;
  margin-bottom: 20px;
}
.guide-replay-title {
  font-size: 20px;
  font-weight: 600;
  color: #333;
  margin: 0 0 12px 0;
}
.guide-replay-desc {
  font-size: 14px;
  color: #999;
  line-height: 1.6;
  max-width: 400px;
  margin: 0 0 30px 0;
}
.gray{
  filter: grayscale(100%);
}
.container {
    position: relative;
    margin: 0 auto;
    width: 100%;
    max-width: 960px;
}
.notification-view{
  margin-top: 1.767rem;
}
.right-wrap {
    width: 100%;
}

.myPage {
    margin-top: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.gainList_container {
    min-height: 560px;
}

.gainList_container .gains_wrapper {
    position: relative;
    box-sizing: border-box;
    padding-top: 20px;
    padding-left: 20px;
}

.gainList_container .gains_wrapper .list {
    display: flex;
    flex-wrap: wrap;
    margin: -20px 0 0 -20px;
}

.item.isVirtual {
    background: #f7f8fa;
    border: 1px solid #e5e6eb;
}

.item {
    display: flex;
    align-items: center;
    flex: 0 1 auto;
    width: calc(50% - 30px);
    min-width: 410px;
    height: 116px;
    padding-right: 6px;
    background: #fff;
    border: 1px solid #e5e6eb;
    box-sizing: border-box;
    border-radius: 4px;
    margin-right: 20px;
    margin-top: 20px;
}

.item .img-wapper {
    width: 114px;
    height: 114px;
    margin-right: 16px;
    background: #f7f8fa;
    display: flex;
    align-items: center;
    justify-content: center;
}

.item .img-wapper .item-icon {
    max-width: 72px;
    max-height: 72px;
}

.item .main {
    flex: auto;
}

.item .date,
.item .goods_name {
    overflow: hidden;
    text-overflow: ellipsis;
}

.item .goods_name {
    max-width: 300px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    font-size: 16px;
    line-height: 24px;
    color: #252933;
    padding-bottom: 4px;
}

.item p {
    margin: 0;
}

.item .date {
    white-space: nowrap;
    font-size: 14px;
    line-height: 22px;
    color: #8a919f;
}

.item .buttons {
    margin-top: 8px;
    margin-left: -8px;
    display: flex;
    align-items: center;
}

.item .button-item.actived {
    background: #f2f3f5;
    color: #8a919f;
}

.item .button-item {
    cursor: pointer;
    display: flex;
    align-items: center;
    font-size: 13px;
    padding: 0 8px;
    height: 26px;
    margin-left: 8px;
    font-weight: 500;
    background: #f2f3f5;
    border-radius: 50px;
    color: #8a919f;
    white-space: nowrap;
    border: none;
}

.item .arrow {
    width: 12px;
    height: 12px;
    margin-left: 2px;
    transform: rotate(-90deg);
}

svg:not(:root) {
    overflow: hidden;
}

.item .button-item svg path {
    fill: currentColor;
}

.status {
    margin-right: 5px;
    font-size: 13px;
}

.status.bottom {
    margin-top: 55px;
}

.status .use-btn {
    cursor: pointer;
    color: #1e80ff;
}
</style>