<template>
    <div>
        <el-card>
            <el-page-header @back="goback" content="套系列表"></el-page-header>
        </el-card>
        <el-container>
            <el-header style="height: 120px;">
                <div id="header-one">
                    <h3 class="el-icon-search" style="margin-left: 10px;">筛选搜索</h3>
                    <div id="header-one-btu">
                        <el-button @click="empty">重置</el-button>
                        <el-button type="primary" @click="check">搜索</el-button>
                    </div>
                </div>
                <div id="header-two">
                    <el-row>
                        <el-col :span="5" id="header-two-left">
                            <el-form ref="anFormRef" :model="anForm" label-width="80px">
                                <el-form-item label="藏品名称(套):" label-width="102px">
                                    <el-input v-model="anForm.anName" class="anInput" placeholder="筛选藏品标题"
                                        center></el-input>
                                </el-form-item>
                            </el-form>
                        </el-col>
                        <el-col :span="8">
                            <el-form label-width="80px">
                                <el-form-item label="创建时间:">
                                    <el-date-picker v-model="dataput" type="datetimerange" class="up-input-right"
                                        range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right">
                                    </el-date-picker>
                                </el-form-item>
                            </el-form>
                        </el-col>
                    </el-row>
                </div>
            </el-header>
            <el-main style="height: 110px;">
                <h3 class="el-icon-tickets">套系列表 共有{{ total }}条数据</h3>
                <el-button id="main-btu" @click="addSet()">添加</el-button>
            </el-main>
            <div class="footer">
                <!-- 这破玩意帮点击为啥不好使...... -->
                <!-- <el-radio-group v-model="tabPosition">
                                                                                             <el-radio-button label="onSale" tab-click="onSale1">在售</el-radio-button>
                                                                                            <el-radio-button label="preSale" @click="preSale()">预售</el-radio-button>
                                                                                                 <el-radio-button label="expired" @click="expired()">已过期</el-radio-button>
                                                                                               </el-radio-group> -->
                <el-row>
                    <!-- 这块样式需要index没有只能先这么写 -->
                    <el-button size="small" @click="onSale1()" :class="btnact">在售</el-button>
                    <el-button size="small" @click="preSale()" :class="btnact1">预售</el-button>
                    <el-button size="small" @click="expired()" :class="btnact2">已过期</el-button>
                </el-row>
                <!-- 非响应式？？‘’‘不是非响应式上面帮点击时间不好使 -->
                <el-table :data="tableData" border style="width: 100%">
                    <el-table-column prop="id" label="id" width="110" align="center">
                    </el-table-column>
                    <el-table-column prop="name" label="藏品名称(套)" width="280" align="center">
                    </el-table-column>
                    <el-table-column prop="time" label="创建时间" width="280" align="center">
                    </el-table-column>
                    <el-table-column prop="time2" label="展示时间" width="280" align="center">
                    </el-table-column>
                    <el-table-column prop="number" label="藏品数量" width="280" align="center">
                    </el-table-column>
                    <el-table-column prop="tai" label="状态" width="280" align="center">
                    </el-table-column>
                    <el-table-column prop="edit" label="操作" width="280" align="center">
                        <el-button type="text" @click="sList()">藏品列表</el-button>
                        <el-row>
                            <el-button type="text" @click="upJia()">上架</el-button>
                            <el-button type="text" @click="editTime()">修改时间</el-button>
                        </el-row>
                    </el-table-column>
                </el-table>
            </div>
        </el-container>
    </div>
</template>
<script>
import { getSet, searchSet } from "@/api/sets/index"
export default {
    data() {
        return {
            anForm: {
                anName: '',
            },
            total: 1,
            dataput: '',
            activeName: 'first',
            //列表
            tabPosition: 'onSale',
            //
            btnact: 'th',
            btnact1: 'th1',
            btnact2: 'th2',
            tableData: [{
                id: '17',
                name: 'wangxiu',
                time: '20230218',
                time2: '20230218',
                number: '7',
                tai: '已上线',
                edit: 'caozuo'
            }],
        }
    },
    watch: {
        activeName(newVal, oldVal) {
            console.log(newVal, "\n", oldVal)
        }
    },
    created() {

    },
    methods: {
        goback() {
            window.history.go(-1)
        },
        //点击标签切换修改后
        onSale1() {
            console.log("11")
            if (this.btnact == 'activeBack') {
                this.btnact = 'th'
                this.btnact1 = 'activeBack1'
                this.btnact2 = 'activeBack2'
            }
            else {
                this.btnact = 'activeBack'
                this.btnact1 = 'th1'
                this.btnact2 = 'th2'
            }
            this.tableData = [{
                id: '17',
                name: 'wangxiu',
                time: '20230218',
                time2: '20230218',
                number: '7',
                tai: '已上线',
                edit: 'caozuo'
            }]



        },
        preSale() {
            console.log('222')
            if (this.btnact1 == 'activeBack1') {
                this.btnact1 = 'th1'
                this.btnact = 'activeBack'
                this.btnact2 = 'activeBack2'
            }
            else {
                this.btnact1 = 'activeBack1'
                this.btnact = 'th'
                this.btnact2 = 'th2'
            }
            this.tableData = [{
                id: '17',
                name: 'wangxiu 预售',
                time: '20230218',
                time2: '20230218',
                number: '7',
                tai: '已上线',
                edit: 'caozuo'
            }]
        },
        expired() {
            console.log('333')
            if (this.btnact2 == 'activeBack2') {
                this.btnact2 = 'th2'
                this.btnact = 'activeBack'
                this.btnact1 = 'activeBack1'
            }
            else {
                this.btnact2 = 'activeBack'
                this.btnact = 'th'
                this.btnact1 = 'th1'
            }
            this.tableData = [{
                id: '17',
                name: 'wangxiu77777',
                time: '20230218',
                time2: '20230218',
                number: '7',
                tai: '已上线',
                edit: 'caozuo'
            }]
        },
        //重置
        empty() {
            this.anForm.anName = "";
            this.dataput = "";
        },
        //搜索
        check() {
            if (this.anForm.anName) {
            let con = {
            name: this.anForm.anName
        }
            searchNotice(con).then((data) => {
             this.tableData = data.list;
             this.total = data.count;
        })
      } else {
        this.getnotice();
      }
        },
        //添加
        addSet() {
            this.$router.push('./addSet')
        },
        //藏品列表
        sList() {
            this.$router.push('./collectionDetails')
        },
        //上架
        upJia() {
            this.$confirm('是否要上架商品?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }).then(() => {
            this.$message({
            type: 'success',
            message: '上架成功!'
        });
        }).catch(() => {
            this.$message({
            type: 'info',
             message: '已取消'
        });
        });

        },
        //修改时间
        editTime() {
            console.log("修改时间")
        }


    }
};

</script>
<style scoped>
.el-main {
    color: #333;
    border: 1px solid #d3d7d4;
    border-radius: 5px;
    margin-left: 30px;
    margin-right: 30px;
}

.el-header {
    color: #333;
    border: 1px solid #d3d7d4;
    border-radius: 5px;
    margin: 30px;
}

/* .el-footer {} */

#footer-t {
    color: #333;
    border: 1px solid #d3d7d4;
    border-radius: 5px;
    margin-left: 10px;
    margin-top: 30px;
}

/* #header-one {} */

#header-two {
    /* background-color: aqua; */
    margin-left: 90px;
}

#header-one-btu {
    margin: 20px 20px 0px 0px;
    float: right;
}

#header-two-left {
    margin-right: 150px;
}

#main-btu {
    float: right;
    margin-top: 10px;
}

#page {
    float: right;
    margin-top: 15px;
}

.footer {
    margin: 20px auto;
    width: 97%;
}

.th {
    /* margin: 0;
    padding: 0; */
    margin-right: -10.75px;
    font-size: 16px;
    font-weight: 800;
    background-color: #FFFFFF;
    color: #606266;
}

.activeBack {
    margin-right: -10.75px;
    font-size: 16px;
    font-weight: 800;
    background-color: #409EFF;
    color: white;
}

.th1 {
    /* margin: 0;
    padding: 0; */
    margin-right: -10.75px;
    font-size: 16px;
    font-weight: 800;
    background-color: #FFFFFF;
    color: #606266;
}

.activeBack1 {
    margin-right: -10.75px;
    font-size: 16px;
    font-weight: 800;
    background-color: #409EFF;
    color: white;
}

.th2 {
    /* margin: 0;
    padding: 0; */
    margin-right: -10.75px;
    font-size: 16px;
    font-weight: 800;
    background-color: #FFFFFF;
    color: #606266;
}

.activeBack2 {
    margin-right: -10.75px;
    font-size: 16px;
    font-weight: 800;
    background-color: #409EFF;
    color: white;
}
</style>