<template>
    <div class="JNPF-common-layout">
        <div class="JNPF-common-layout-center">
            <el-row class="JNPF-common-search-box" :gutter="16">
                <el-form @submit.native.prevent>
                    <el-col :span="6">
                        <el-form-item label="问卷标题">
                            <el-input v-model="query.topic" placeholder="请输入问卷标题" clearable>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="状态">
                            <JnpfSelect v-model="query.status" placeholder="请选择问卷状态" clearable
                                :options="typeList" :props="methodProps">
                            </JnpfSelect>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item>
                            <el-button type="primary" icon="el-icon-search"
                                @click="getList()">查询</el-button>
                            <el-button icon="el-icon-refresh-right" @click="reset()">重置</el-button>
                        </el-form-item>
                    </el-col>
                </el-form>
            </el-row>
            <div class="JNPF-common-layout-main JNPF-flex-main">
                <div class="JNPF-common-head">
                    <div>
                        <el-button type="primary" icon="icon-ym icon-ym-btn-add"
                            @click="openAllocation()">新增
                        </el-button>
                        <el-button type="danger" icon="icon-ym el-icon-delete"
                            @click="deleteQuestion()">删除
                        </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"
                    @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="55" align="center">
                    </el-table-column>
                    <el-table-column prop="topic" label="问卷标题" align="left" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="createBy" label="创建人" align="left" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="anonymity" label="是否匿名" align="left"
                        show-overflow-tooltip>
                        <template slot-scope="scope" sortable>
                            <el-tag v-if="scope.row.anonymity" type="success">是</el-tag>
                            <el-tag v-else-if="scope.row.anonymity !== null" type="info">否</el-tag>
                            <el-tag v-else type="info">--</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="startTime" label="开始时间" align="left"
                        show-overflow-tooltip>
                        <template slot-scope="scope" sortable>
                            {{ getDate(scope.row.startTime, 'YY-MM-DD HH:mm:ss') }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="startTime" label="结束时间" align="left"
                        show-overflow-tooltip>
                        <template slot-scope="scope" sortable>
                            {{ getDate(scope.row.endTime, 'YY-MM-DD HH:mm:ss') }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="status" label="状态" align="left" show-overflow-tooltip>
                        <template slot-scope="scope" sortable>
                            <span></span>
                            <el-tag v-if="scope.row.status === '1'"
                                type="info">{{ getTypeLabel(scope.row.status) }}</el-tag>
                            <el-tag v-else-if="scope.row.status == '2'"
                                type="warning">{{ getTypeLabel(scope.row.status) }}</el-tag>
                            <el-tag v-else-if="scope.row.status === '3'"
                                type="success">{{ getTypeLabel(scope.row.status) }}</el-tag>
                            <el-tag v-else-if="scope.row.status === '4'"
                                type="danger">{{ getTypeLabel(scope.row.status) }}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" fixed="right" width="200">
                        <template slot-scope="scope">
                            <el-button type="text" @click="openAllocation(scope.row.id)">编辑
                            </el-button>
                            <el-button type="text" style="color: #e6a23c;"
                                @click="openIssuedForm(scope.row)"
                                v-if="scope.row.status === '1'">下发
                            </el-button>

                            <el-button type="text" style="color: #e6a23c;"
                                @click="openIssuedForm(scope.row)"
                                v-if="( scope.row.endTime - 600000)  > nowTime  && scope.row.status !== '1'">补发
                            </el-button>

                            <el-button type="text"
                                v-if="scope.row.status === '3' || scope.row.status === '4'"
                                @click="openStatistics(scope.row)">统计
                            </el-button>
                        </template>
                    </el-table-column>
                </JNPF-table>
                <pagination :total="total" :page.sync="query.currentPage"
                    :limit.sync="query.pageSize" @pagination="getList" />
            </div>
        </div>
        <Allocation v-if="allocationVisible" ref="Allocation" @close="closeAllocation" />
        <Statistics v-if="statisticsVisible" ref="Statistics" @close="closeStatistics" />
        <IssuedForm v-if="issuedFormVisible" ref="IssuedForm" @close='closeIssuedForm' />

    </div>
</template>

<script>

import dayjs from 'dayjs'
import { getDictionaryDataSelector } from '@/api/systemData/dictionary'

import {
    getQuestionnaireList, deleteQuestionnaire
} from "@/api/governmentCloud/questionnaireInvestigation/questionnaireInvestigation";
import Allocation from './Allocation'
import Statistics from './Statistics'
import IssuedForm from './IssuedForm'

export default {
    components: {
        Allocation,
        Statistics,
        IssuedForm
    },
    data() {
        return {
            query: {
                currentPage: 1,
                pageSize: 10,
                dataType: "0",
                topic: "",
                sidx: "-createTime",
                status: null
            },
            selectProps: { "label": "fullName", "value": "enCode" },
            total: 0,
            listLoading: false,
            tableData: [],


            typeList: [],
            statusList: [],
            allocationVisible: false,
            statisticsVisible: false,
            issuedFormVisible: false,
            selectedData: [],
            timer: null,
            nowTime: null,
            methodProps: { "label": "fullName", "value": "enCode" },
        }
    },
    async created() {
        this.nowTime = new Date().getTime();
        this.timer = setInterval(() => {
            //dayjs获取当前时间时间戳
            this.nowTime = new Date().getTime();
        }, 1000);
        await this.getQuestionType()
        this.getList()
    },
    beforeDestroy() {
        //清除定时器
        clearInterval(this.timer);
    },
    methods: {
        reset() {
            this.query = {
                currentPage: 1,
                pageSize: 10,
                dataType: "0",
                title: "",
                sidx: "-createTime",
                status: null
            }
            this.getList()
        },
        getQuestionType() {
            return new Promise((resolve, reject) => {
                getDictionaryDataSelector('603485116668316293').then(res => {
                    this.typeList = res.data.list

                    console.log(this.typeList)
                    resolve(true)
                })
            })
        },
        getTypeLabel(value) {
            let item = this.typeList.find(item => {
                return item.enCode == value
            })
            return item ? item.fullName : value
        },
        handleSelectionChange(val) {
            this.selectedData = val;
        },
        deleteQuestion() {
            console.log(this.selectedData)
            let ids = []
            this.selectedData.forEach(item => {
                ids.push(item.id)
            })
            console.log(ids)
            deleteQuestionnaire(ids).then(res => {
                if (res.code === 200) {
                    this.$message.success(res.msg)
                    this.getList()
                } else {
                    this.$message.warning(res.msg)
                }
            })
        },
        openStatistics(questionnaire) {
            this.statisticsVisible = true
            this.$nextTick(() => {
                this.$refs.Statistics.init(questionnaire || '')
            })
        },
        openAllocation(id) {
            this.allocationVisible = true
            this.$nextTick(() => {
                this.$refs.Allocation.init(id || '')
            })
        },

        openIssuedForm(row) {
            this.issuedFormVisible = true
            this.$nextTick(() => {
                this.$refs.IssuedForm.init(row)
            })
        },
        closeStatistics() {
            this.statisticsVisible = false
            this.getList()
        },
        closeAllocation() {
            this.allocationVisible = false
            this.getList()
        },
        closeIssuedForm() {
            this.issuedFormVisible = false
            this.getList()
        },
        getDate(time) {
            let str = time ? dayjs(time).format('YYYY-MM-DD HH:mm:ss') : '--'
            return str
        },
        getList() {
            this.listLoading = true;
            getQuestionnaireList(this.query).then(res => {
                if (res.code == 200) {
                    this.tableData = res.data.list
                    this.total = res.data.pagination.total
                    this.listLoading = false
                } else {
                    this.listLoading = false
                }
            })
        },
    }

}

</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>