<template>
    <div class="JNPF-common-layout">
        <div class="JNPF-common-layout-center">
            <el-row class="JNPF-common-search-box" :gutter="16">
            </el-row>
            <div class="JNPF-common-layout-main JNPF-flex-main">
                <div class="JNPF-common-head">
                    <div>
                        <!-- <el-button type="primary" icon="el-icon-upload2" @click="exportData()">导出
                        </el-button> -->
                    </div>
                    <div class="JNPF-common-head-right">
                        <el-tooltip effect="dark" :content="$t('common.refresh')" placement="top">
                            <el-link icon="icon-ym icon-ym-Refresh JNPF-common-head-icon"
                                :underline="false" @click="getList()" />
                        </el-tooltip>
                    </div>
                </div>
                <JNPF-table v-loading="listLoading" :data="tableData">
                    <el-table-column prop="createUserName" label="发起人" align="left"
                        show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="state" label="状态" align="left" show-overflow-tooltip>
                        <template slot-scope="scope" sortable>
                            <span
                                :style="{ color: scope.row.state.color }">{{ scope.row.state.label }}</span>

                        </template>
                    </el-table-column>
                    <el-table-column prop="type_jnpfId" label="建议类型" align="left" width="300"
                        show-overflow-tooltip>
                        <template slot-scope="scope" sortable style="width: 100%;">
                            <div class="button" v-for="(type, index) in scope.row.type" :key="index"
                                :style="{ color: type.color, backgroundColor: type.color + '20' }">
                                {{ type.label }}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="content" label="建议内容" align="left" width="300"
                        show-overflow-tooltip>
                        <template slot-scope="scope" sortable style="width: 300;">
                            <div class="suggest-content">
                                {{ scope.row.content }}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="view" label="浏览数" align="left" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="replyCount" label="评论数" align="left"
                        show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="likeCount" label="点赞数" align="left"
                        show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="createDate_jnpfId" label="发起时间" align="left"
                        show-overflow-tooltip>
                        <template slot-scope="scope" sortable>
                            {{ getDate(scope.row.createDate_jnpfId, 'YY-MM-DD HH:mm:ss') }}
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" fixed="right" width="150">
                        <template slot-scope="scope">
                            <el-button type="text" @click="goDetail(scope.row.id)">详情
                            </el-button>
                        </template>
                    </el-table-column>
                </JNPF-table>
                <pagination :total="total" :page.sync="query.currentPage"
                    :limit.sync="query.pageSize" @pagination="getList" />
            </div>
        </div>
        <Detail v-if="detailVisible" ref="Detail" @refresh="detailVisible=false" />
    </div>
</template>

<script>

import request from '@/utils/request'
import { mapGetters } from "vuex";
import dayjs from 'dayjs'
import { param } from '@/utils';
import { getDictionaryDataSelector } from '@/api/systemData/dictionary'
import Detail from './Detail'

import {
    getSuggestionsList
} from "@/api/governmentCloud/suggestions/suggestions";

export default {
    components: {
        Detail,
    },
    data() {
        return {
            query: {
                currentPage: 1,
                pageSize: 10,
                dataType: "0"
            },
            selectProps: { "label": "fullName", "value": "enCode" },
            total: 0,
            listLoading: false,
            tableData: [],


            typeList: [],
            statusList: [],
            detailVisible: false
        }
    },
    async created() {
        this.getStatusList()
        await this.getTypeList();
        this.getList()
    },
    methods: {
        goDetail(id) {
            this.detailVisible = true
            this.$nextTick(() => {
                this.$refs.Detail.init(id)
            })
        },
        getDate(time) {
            let str = time ? dayjs(time).format('YYYY-MM-DD HH:mm:ss') : '无数据'
            return str
        },
        getStatusList() {
            getDictionaryDataSelector('530731285270762117').then(res => {
                this.statusList = res.data.list
            })
        },
        getTypeList() {
            return new Promise((resolve, reject) => {
                getDictionaryDataSelector('530731173714858629').then(res => {
                    this.typeList = res.data.list
                    resolve(true)
                })
            })

        },
        getList() {
            this.listLoading = true;

            getSuggestionsList(this.query).then(res => {
                let newList = res.data.list
                if (newList.length) {
                    newList.map((item) => {
                        let list = item.type_jnpfId.split(',');
                        item.typeLength = list.length;
                        item.type = [];
                        list.map((t) => {
                            let label = this.getType(t).label;
                            let color = this.getType(t).color;
                            item.type.push({
                                label: label,
                                value: t,
                                color: color
                            });
                        });

                        let stateColor = this.getStatus(item.state_jnpfId).color;
                        let stateLabel = this.getStatus(item.state_jnpfId).label;
                        item.state = {
                            color: stateColor,
                            label: stateLabel
                        };
                    });
                }

                this.tableData = newList
                console.log(this.tableData)


                this.total = res.data.pagination.total
                this.listLoading = false
            })
        },
        getType(value) {
            let obj = {};
            this.typeList.map((item) => {
                if (item.enCode.split(',')[0] == value) {
                    obj.label = item.fullName;
                    obj.color = item.enCode.split(',')[1];
                }
            });
            return obj;
        },
        getStatus(value) {
            let obj = {};
            this.statusList.map((item) => {
                if (item.enCode.split(',')[0] == value) {
                    obj.label = item.fullName;
                    obj.color = item.enCode.split(',')[1];
                }
            });
            return obj;
        },
    }

}

</script>

<style lang="scss" scoped>
.button {
    padding: 0px 5px;
    border-radius: 3px;
    background-color: #e3eefd;
    color: #1c77f2;
    margin-right: 5px;
    height: 20px;
    line-height: 20px;
    display: inline-block;
}
.suggest-content {
    overflow: hidden; /* 确保内容不会溢出容器 */
    display: -webkit-box; /* 作为弹性伸缩盒子模型显示 */
    -webkit-line-clamp: 2; /* 限制在两行 */
    -webkit-box-orient: vertical; /* 垂直排列盒子 */
    text-overflow: ellipsis; /* 多出的文字用省略号表示 */
    white-space: normal; /* 允许文本换行 */
}
</style>