<template>
    <div class="InfoList" v-loading="listLoading">
        <!--<el-tabs :value="number" :tab-position="tabPosition" :stretch="true" @tab-click="tabClick">-->
        <!--<el-tab-pane label="全部"></el-tab-pane>-->
        <!--<el-tab-pane label="填全未审"></el-tab-pane>-->
        <!--<el-tab-pane label="未完成"></el-tab-pane>-->
        <!--<el-tab-pane label="审核中"></el-tab-pane>-->
        <!--<el-tab-pane label="审核完成"></el-tab-pane>-->
        <!--<el-tab-pane label="审核失败"></el-tab-pane>-->
        <!--</el-tabs>-->
        <div class="tab_button">
            <span :class="number==index?'button_style_action':'button_style'" v-for="(item,index) in dataList" :key="index" @click="tabClick(index)">{{item.label}}</span>
            <!--<span class="button_style">全部</span>-->
            <!--<span class="button_style">填全未审</span>-->
            <!--<span class="button_style">未完成</span>-->
            <!--<span class="button_style">审核中</span>-->
            <!--<span class="button_style">审核完成</span>-->
            <!--<span class="button_style">审核失败</span>-->
        </div>
        <div class="content">
              <div class="content_left">
                  <!--<el-checkbox v-model="checked" style="margin-right: 3%"></el-checkbox>全选/反选-->
                  <el-checkbox  v-model="checkAll" @change="handleCheckAllChange" style="margin-left: 4%">全选/反选</el-checkbox>
              </div>
              <div class="content_right">
                  <span>共 <span style="color: rgba(32, 135, 247, 1);font-weight: bold;">{{records.length}}</span> 条记录</span>
              </div>
        </div>
        <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
        <div class="box">

             <div class="box_main" v-for="(item,index) in records" :key="index">
                 <div style="height: 100%;width: 94%;margin-left: 3%;margin-right: 3%">
                 <div class="box_main_top">
                     <div style="position: relative;top:50%;transform: translateY(-50%)">
                     <el-checkbox :label="item._id" :disabled="selectable(item)">{{itemLabel}}</el-checkbox><span style="margin-left: 2%;font-size: 15px">{{item.name}} <span v-if="item.idNumber" style="color: rgba(112, 197, 70, 1)">（{{item.idNumber}}）</span></span>
                         <span class="symbol" @click="cellClick(item)">></span>
                     </div>
                 </div>
                 <div class="box_main_center"></div>
                 <div class="box_main_footer">
                     <div class="box_footer_left">
                         <div style="position: relative;top:50%;transform: translateY(-50%)">
                         状态：<span :style="'font-size: 15px;font-weight: bold;color:'+isStatus(item.status).color" >{{isStatus(item.status).label}}</span>
                         </div>
                     </div>
                     <div class="box_footer_right">
                         <div style="position: relative;top:50%;transform: translateY(-50%)">
                         <span>采集时间：{{dateFormat1(item.time)}}</span>
                         </div>
                     </div>
                 </div>
                 </div>
             </div>

        </div>
        </el-checkbox-group>
        <!--<el-table-->
                <!--:data="records"-->
                <!--highlight-current-row-->
                <!--v-loading="listLoading"-->
                <!--@selection-change="select"-->
                <!--@cell-click="cellClick"-->
                <!--:max-height="maxHeight"-->
        <!--&gt;-->
            <!--<el-table-column type="selection" :selectable="selectable" width="35px"></el-table-column>-->

            <!--<el-table-column prop="name" label="全选/反选">-->
                <!--<template slot-scope="scope">-->
                    <!--<span>{{scope.row.name}}</span>-->
                    <!--<span-->
                            <!--v-if="scope.row.idNumber"-->
                            <!--:style="scope.row.idNumber!==''?{color: '#67C23A'}:{color: '#F56C6C'}"-->
                    <!--&gt;{{"（" +scope.row.idNumber + "）"}}</span>-->
                <!--</template>-->
            <!--</el-table-column>-->
            <!--<el-table-column prop="time" width="120px" label="保存时间" sortable :formatter="dateFormat"></el-table-column>-->
            <!--<el-table-column prop="status" label="状态" sortable>-->
                <!--<template slot-scope="scope">-->
                    <!--<span v-if="scope.row.status === '1'" style="color: #67C23A">填全未审</span>-->
                    <!--<span v-if="scope.row.status === '0'" style="color: #F56C6C">未完成</span>-->
                    <!--<span v-if="scope.row.status === '2'" style="color: #909399">审核中</span>-->
                    <!--<span v-if="scope.row.status === '3'" style="color: #409EFF">审核完成</span>-->
                    <!--<span v-if="scope.row.status === '4'" style="color: #E6A23C">审核失败</span>-->
                <!--</template>-->
            <!--</el-table-column>-->
        <!--</el-table>-->

        <div class="lzm_bottom">
            <el-button class="bottom_button" type="primary" @click="goHome">回到上一页</el-button>
            <el-button class="bottom_button" type="danger" @click="del">删除</el-button>
        </div>
    </div>
</template>

<script>
    import {deleteInfo, listByOpenid} from "../../api";
    import {decryptListData_ECB} from "@/api/tool/sm4";
    import storageUtil from "../../util/storageUtil";

    export default {
        name: "InfoList",
        data() {
            return {
                dataList:[
                    {label:'全部'},
                    {label:'填全未审'},
                    {label:'未完成'},
                    {label:'审核中'},
                    {label:'审核完成'},
                    {label:'审核失败'},
                ],
                checked:false,
                tabPosition: "top",
                listLoading: false,
                records: [], //当前记录集合
                selectIds: [], //当前选中的条目
                maxHeight: 0,
                number:0,

                itemLabel:"",
                checkAll: false,
                checkedCities: [],
                cities:[],
            };
        },
        methods: {
            goHome() {
                this.$router.replace("/main");
            },
            select(s) {
                //选中某个条目
                this.selectIds = s;
            },
            selectable(row) {
                if(row.status === "3") {
                    return true; //禁用状态
                } else {
                    return false ; //非禁用状态
                }
            },
            cellClick(row) {
                //编辑
                if (row.status !== "2") {
                    this.$router.push({
                        path: "/info",
                        query: {
                            id: row.fid,
                            name: row.name
                        }
                    });
                } else {
                    this.$message.error("审核中禁止修改");
                }
            },
            del() {
                console.log(this.checkedCities,'this.checkedCities');
                if (this.checkedCities.length) {
                    this.$confirm("该操作会将所有选中数据删除", "是否删除？", {
                        type: "warning"
                    })
                        .then(async () => {
                            this.listLoading = true;
                            for (let item of this.checkedCities) {
                                await this.deleteById(item);
                            }
                            this.listLoading = false;
                            this.$message({
                                type: "success",
                                message: "删除成功!"
                            });
                            console.log(this.number, "看看");
                            switch (this.number) {
                                case "0":
                                    this.openIdInfo();
                                    break;
                                case "1":
                                    this.openIdInfo({status: "1"});
                                    break;
                                case "2":
                                    this.openIdInfo({status: "0"});
                                    break;
                                case "3":
                                    this.openIdInfo({status: "2"});
                                    break;
                                case "4":
                                    this.openIdInfo({status: "3"});
                                    break;
                                case "5":
                                    this.openIdInfo({status: "4"});
                                    break;
                                default:
                                    this.openIdInfo();
                            }
                        })
                        .catch(() => {
                        });
                } else {
                    this.$message({
                        type: "info",
                        message: "请选择要删除的记录"
                    });
                }
            },
            async deleteById(id) {
                await deleteInfo({id: id}, "GET");
            },

            dateFormat1(daterc) {
                if (daterc != null) {
                    const dateMat = new Date(daterc);
                    const year = dateMat.getFullYear();
                    const month =
                        dateMat.getMonth() + 1 > 9
                            ? dateMat.getMonth() + 1
                            : "0" + (dateMat.getMonth() + 1);
                    const day =
                        dateMat.getDate() > 9 ? dateMat.getDate() : "0" + dateMat.getDate();
                    const hh =
                        dateMat.getHours() > 9
                            ? dateMat.getHours()
                            : "0" + dateMat.getHours();
                    const mm =
                        dateMat.getMinutes() > 9
                            ? dateMat.getMinutes()
                            : "0" + dateMat.getMinutes();
                    const ss =
                        dateMat.getSeconds() > 9
                            ? dateMat.getSeconds()
                            : "0" + dateMat.getSeconds();
                    const timeFormat =
                        year + "/" + month + "/" + day + " " + hh + ":" + mm + ":" + ss;
                    return timeFormat;
                }
            },
            async openIdInfo(p) {
                this.checkedCities=[];
                this.checkAll=false;
                const result = await listByOpenid(p, "GET");
                decryptListData_ECB(result.data,["name","idNumber"])
                if (result.code === 0) {
                    this.maxHeight = window.screen.availHeight - 70 - 220;
                    this.records = result.data;
                }
            },
            tabClick(tab) {
                // this.number = tab.index;
                console.log(tab,'tab');
                this.number = tab.toString();
                switch (this.number) {
                    case "0":
                        this.openIdInfo();
                        break;
                    case "1":
                        this.openIdInfo({status: "1"});
                        break;
                    case "2":
                        this.openIdInfo({status: "0"});
                        break;
                    case "3":
                        this.openIdInfo({status: "2"});
                        break;
                    case "4":
                        this.openIdInfo({status: "3"});
                        break;
                    case "5":
                        this.openIdInfo({status: "4"});
                        break;
                    default:
                        this.openIdInfo();
                        break;
                }
                storageUtil.save("number", this.number);
            },
            isStatus(status){
                let  data;
                switch(status){
                    case '1':
                        data={
                            label:'填全未审',
                            color:'#67C23A'
                        };
                        break;
                    case '0':
                        data={
                            label:'未完成',
                            color:'#F56C6C'
                        };
                        break;
                    case '2':
                        data={
                            label:'审核中',
                            color:'#909399'
                        };
                        break;
                    case '3':
                        data={
                            label:'审核完成',
                            color:'#409EFF'
                        };
                        break;
                    case '4':
                        data={
                            label:'审核失败',
                            color:'#E6A23C'
                        };
                        break;
                }
                return data;
            },
            handleCheckedCitiesChange(value) {
                let checkedCount = value.length;
                this.checkAll = checkedCount === this.records.filter(item=> item.status !== "3").length;
            },
            handleCheckAllChange(val) {
                this.checkedCities = val ? this.records.filter(item=> item.status !== "3").map(item=>item._id) : [];
            },
        },
        mounted() {
            this.number = storageUtil.read("number");
            switch (this.number) {
                case "0":
                    this.openIdInfo();
                    break;
                case "1":
                    this.openIdInfo({status: "1"});
                    break;
                case "2":
                    this.openIdInfo({status: "0"});
                    break;
                case "3":
                    this.openIdInfo({status: "2"});
                    break;
                case "4":
                    this.openIdInfo({status: "3"});
                    break;
                case "5":
                    this.openIdInfo({status: "4"});
                    break;
                default:
                    this.openIdInfo();
                    break;
            }
        }
    };
</script>


<style scoped>
    .lzm_bottom {
        z-index: 10;
        background: #fff;
        width: 100%;
        padding: 15px 0;
        text-align: center;
        position: fixed;
        left: 0;
        bottom: 0;
    }

    .bottom_button {
        width: 40%;
    }

    >>> .el-tabs__item {
        color: #333333;
        background: #F7F7F7;
        border-radius: 27px;
        text-align: center;
        /*padding: 0;*/
        margin: 0 15px;
    }

    >>> .el-tabs__item.is-active {
        color: #FFFFFF;
        background: linear-gradient(90deg, #1F87F7 0%, #78BDFD 100%);
        border-radius: 27px;
        text-align: center;
    }

    >>> .el-tabs--top .el-tabs__item.is-top:last-child {
        padding-right: 4% !important;
    }

    >>> .el-tabs--top .el-tabs__item.is-top:nth-child(2) {
        padding-left: 4% !important;
    }

    .button_style_action {
        background: linear-gradient(90deg, #1F87F7 0%, #78BDFD 100%);
        border-radius: 20px;
        padding: 10px 15px;
        color: #FFFFFF;
        position: relative;
        top: 30%;
        transform: translateY(-50%);
        margin: 2.5%;
    }
    .button_style {
        color: #333333;
        background: #F7F7F7;
        border-radius: 20px;
        text-align: center;
        padding: 10px 15px;
        position: relative;
        top: 30%;
        transform: translateY(-50%);
        margin: 2.5%;
    }
    .tab_button::-webkit-scrollbar {

        display: none;    /* 隐藏滚动条 */

    }
    .tab_button{
        width: 100%;
        height: 9vh;
        /*border: red solid 1px;*/
        overflow-x: auto;

        white-space: nowrap;

        overflow-y: auto;
    }
    .content{
        /*margin: 2.5%;*/
        width: 94%;
        margin:0 3%;
        height: 6vh;
        /*border: red solid 1px;*/
        display: flex;
    }
    .content_left{
        flex: 1;
        font-size: 15px;
    }
    .content_right{
        flex: 1;
        text-align: right;
        font-size: 15px;
        font-weight: 400;
        color: #333333;
    }
    >>> .el-checkbox__inner{
        width: 18px;
        height: 18px;
    }
    >>> .el-checkbox__inner::after{
        height: 9px;
        left: 5px;
    }
    .box{
        width: 94%;
        margin:2% 3%;
        height: 64vh;
        overflow-y: auto;
        overflow-x: hidden;
        /*border: red solid 1vh;*/
    }
    .box_main{
        width: 99%;
        height: 24%;
        background: #FFFFFF;
        border: 1px solid #E4EFFE;
        box-shadow: 0px 3px 20px 0px rgba(31, 123, 241, 0.08);
        border-radius: 10px;
        display: flex;
        flex-direction: column;
        font-size: 10px;
        margin-bottom: 3%;
    }
    .box_main_center{
        height: 1%;
        /*width: 100%;*/
        /*margin-left: 5%;*/
        /*margin-right: 5%;*/
        background: #F4F4F4;
    }
    .box_main_top{
        height: 49.5%;
    }
    .box_main_footer{
        height: 49.5%;
        display: flex;
        font-weight: 400;
        color: #999999;
    }
    .symbol{
        position:absolute;
        right:0;
        top:50%;
        transform: translateY(-50%);
        font-size: 30px;
        color: #9b9b9b;
    }
    .box_footer_left{
        flex: 4;
    }
    .box_footer_right{
        flex: 6;
        text-align: right;
    }
    >>> .el-checkbox__label{
       font-size: 15px;
    }
</style>
