<template>
    <el-card class="todo">
        <div class="title">待办</div>

        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane :label="item.label" :name="item.name" v-for="(item, index) in tabPaneList" :key="index">
            </el-tab-pane>
        </el-tabs>
        <div v-if="tableData.length">
            <div v-for="(item, index) in tableData" :key="index" class="tableData">
                <img src="/img/home/todo1.png" alt="" class="icon" v-if="index === 0" />
                <img src="/img/home/todo2.png" alt="" class="icon" v-if="index === 1" />
                <div class="table-info">
                    <div class="table-title">{{ item.title }}</div>
                    <div class="table-name">{{ item.create }} {{ item.time }}</div>
                </div>
                <div class="table-btn">
                    <el-button type="primary" round size="small" @click="preview(item)" v-if="activeName === 'first'">预览
                    </el-button>
                    <el-button type="primary" round size="small" @click="preview2(item)" v-if="activeName === 'second'">
                        查看</el-button>
                    <el-button type="primary" round size="small" @click="preview3(item)" v-if="activeName === 'third'">
                        查看</el-button>
                </div>
            </div>
            <div class="more" @click="linkMore">查看更多></div>
        </div>
        <div class="text-center pt20" v-else>
            <avue-empty :size="50" desc="" image="">
                <img src="/svg/empty.svg" alt="" />
                <p>暂无数据</p>
            </avue-empty>
        </div>
        <el-drawer title="查看" :visible.sync="dialog" size="50%" append-to-body wrapperClosable="true">
            <div class="demo-drawer__content">
                <report-approval :id="id" :processStatus="processStatus" spDrawerTitle="查看" @closeForm="closeForm"
                    ref="reportApproval"></report-approval>
            </div>
        </el-drawer>
        <el-drawer title="查看" :visible.sync="dialog2" size="50%" append-to-body wrapperClosable="true">
            <div class="demo-drawer__content">
                <reportAdd :id="id" spDrawerTitle="查看" @closeForm="closeForm" ref="reportAdd"></reportAdd>
            </div>
        </el-drawer>
    </el-card>
</template>
<script>
// import { getList } from "@/api/business/yjxyzy/yjtg/yjtg";
// import { getGzxx } from "@/api/business/yjxyzy/gzxx/kgzxx";
// import { getYqyd } from "@/api/business/yjxyzy/gzxx/yqyd";
// import reportApproval from "@/views/business/yjxyzy/gzxx/reportApproval.vue";
// import reportAdd from "@/views/business/yjxyzy/yqyd/reportAdd.vue";

export default {
    name: "todo",
    data() {
        return {
            activeName: "first",
            tabPaneList: [],
            tableData: [],
            processStatus: "",
            id: "",
            dialog: false,
            dialog2: false,
        };
    },
    components: {
        // reportApproval,
        // reportAdd,
    },
    created() {
        // this.init();
    },
    methods: {
        init() {
            this.tabPaneList = [
                {
                    label: "应急通告",
                    name: "first",
                },
                {
                    label: "公众信息",
                    name: "second",
                },
                {
                    label: "舆情应对",
                    name: "third",
                },
                // {
                //   label: "公众信息",
                //   name: "fourth",
                // },
            ];
            this.activeName = this.tabPaneList[0].name;
            this.handleClick();
        },
        handleClick() {
            this.getData();
        },
        getData() {
            //   let params = {
            //     current: 1,
            //     size: 2,
            //   };

            //   if (this.activeName === "first") {
            //     getList(params).then((res) => {
            //       this.tableData = res.data.data.records.map((e) => {
            //         return {
            //           title: e.reportTitle,
            //           create: e.createUserName,
            //           time: e.reportTime,
            //           reportUrl: e.reportUrl,
            //         };
            //       });
            //     });
            //   }
            //   if (this.activeName === "second") {
            //     getGzxx(params).then((res) => {
            //       this.tableData = res.data.data.records.map((e) => {
            //         return {
            //           title: e.messagesTitle,
            //           create: e.deptName,
            //           time: e.messagesTime,
            //           id: e.id,
            //           processStatus: e.processStatus,
            //         };
            //       });
            //     });
            //   }
            //   if (this.activeName === "third") {
            //     getYqyd(params).then((res) => {
            //       this.tableData = res.data.data.records.map((e) => {
            //         return {
            //           title: e.reportTitle,
            //           create: e.deptName,
            //           time: e.reportTime,
            //           id: e.id,
            //         };
            //       });
            //     });
            //   }
        },
        linkMore() {
            //   if (this.activeName === "first") {
            //     this.$router.push({
            //       path: "/business/yjxyzy/notice/notice",
            //     });
            //   }
            //   if (this.activeName === "second") {
            //     this.$router.push({
            //       path: "/business/yjxyzy/gzxx/kgzxx",
            //     });
            //   }
            //   if (this.activeName === "third") {
            //     this.$router.push({
            //       path: "/business/yjxyzy/yqyd/index",
            //     });
            //   }
        },
        linkAudit(item) {
            console.log(item);
        },

    },
};
</script>
<style scoped lang="scss">
.todo {
    height: 100%;

    .title {
        font-size: 18px;
        color: #272727;
    }

    .tableData {
        background-color: #f6f7fd;
        height: 82px;
        display: flex;
        flex-direction: row;
        padding-left: 100px;
        position: relative;
        margin-bottom: 10px;

        .icon {
            height: 50px;
            // width: 50px;
            position: absolute;
            left: 25px;
            top: 50%;
            transform: translateY(-50%);
        }

        .table-info {
            flex-grow: 1;
            width: 100px;

            .table-title {
                padding-top: 20px;
                font-size: 16px;
                color: #272727;

                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .table-name {
                font-size: 14px;
                padding-top: 5px;
                color: #888;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
        }

        .table-btn {
            width: 130px;

            vertical-align: middle;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
        }
    }

    .more {
        height: 44px;
        line-height: 44px;
        text-align: center;
        background-color: #f6f7fd;
        color: #888;
        margin-top: 10px;
        cursor: pointer;
        font-size: 14px;
    }
}
</style>
