<template>
    <div class="g-main" :style="{ height: tableHeight }">
        <div class="right" v-if="!showSummary">
            <div class="title-small" id="base">任务信息
                <el-button type="text" round @click="handelClickBack" icon="el-icon-back">返回</el-button>
            </div>
            <el-form ref="form" label-position="left" :model="formData" label-width="120px"
                style="margin-left: 3%; margin-top: 30px;">
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="任务主题">
                            <div style="display: flex; align-items: center;">
                                <div>{{ formData.taskTitle}}</div>
                                <div
                                    style="display: flex;margin-left: 10px;
                                     justify-content: center; align-items: center; width: 60px; height: 20px; border: 2px solid #ADD8E6; color: #ADD8E6; font-size: 12px;">
                                    {{ formData.taskStateName }}

                                </div>
                            </div>

                        </el-form-item>
                    </el-col>
                    <el-col :span="16">
                        <el-form-item label="任务发布时间">
                            <div>{{formData.createdTime}}</div>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="任务发布部门">
                            <div>{{formData.agencyName}}</div>
                        </el-form-item>
                    </el-col>
                    <el-col :span="16">
                        <el-form-item label="任务发布人">
                            <div>{{formData.createByName}}</div>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="任务类型">
                            <div>{{formData.type || '数据填报'}}</div>
                        </el-form-item>
                    </el-col>
                    <el-col :span="16">
                        <el-form-item label="任务周期">
                            <div>{{ formData.taskPeriod === 'once' ? '一次性' : formData.taskPeriod === 'weekly' ? '每周' :
                                formData.taskPeriod === 'halfAMonth' ? '每半月' : formData.taskPeriod === 'month' ? '每月' :
                                '每季度' }}</div>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="完成时限">
                            <div><span
                                    v-if="formData.taskPeriod!=='once'">每周期的第</span>{{formData.completeLimitDay}}<span
                                    v-if="formData.taskPeriod!=='once'">天内完成</span>
                                <el-button style="margin-left: 10px;" type="text"
                                    @click="oncClickInfo('edit')">[修改]</el-button>
                            </div>

                        </el-form-item>
                    </el-col>
                    <el-col :span="8" v-if="formData.taskPeriod!=='once'">
                        <el-form-item label="任务完成有效期">
                            <div>{{formData.startTime?formData.startTime.slice(0, 10):formData.startTime
                                }}-{{formData.endTime?formData.endTime.slice(0, 10):formData.endTime }}</div>
                        </el-form-item>
                    </el-col>

                    <el-col :span="24">
                        <el-form-item label="分发人员">
                            <div style="display: flex;flex-direction: row; align-items: center;">
                                <div>{{formData.totalNum}}人</div>
                                <el-button @click="oncClickInfo('adjust')" type="text">[调整接收人员]</el-button>
                            </div>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="任务说明">
                            <div style="display: flex;flex-direction: row; align-items: center;">
                                <div>{{formData.taskIntroduction}}</div>
                                <el-button style="margin-left: 10px;" type="text"
                                    @click="oncClickInfo('edit')">[修改]</el-button>
                            </div>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div class="title-small" id="reside">任务进展情况</div>
            <div class="m-table">

                <el-table :data="tableData" border class="m-table-item"
                    style="width: 70%;margin-left: 3%; margin-top: 30px;">
                    <el-table-column label="序号" fixed="left" type="index" align="center" width="80" />
                    <el-table-column prop="taskPeriodName" align="center" :show-overflow-tooltip="true" label="任务周期">
                        <template slot-scope="scope">
                            {{taskPeriod === 'once'?'一次性':`${scope.row.taskPeriodName}`}}
                        </template>
                    </el-table-column>
                    <el-table-column prop="submitNum" align="center" width="110" label="提交进度"
                        :show-overflow-tooltip="true">
                        <template slot-scope="scope">
                            <div style="color: blue;">
                                {{ scope.row.submitNum }}/{{ scope.row.totalNum }}
                            </div>

                        </template>
                    </el-table-column>
                    <el-table-column prop="resolveNum" align="center" width="110" label="存档进度"
                        :show-overflow-tooltip="true">
                        <template slot-scope="scope">
                            <div style="color: blue;">
                                {{ scope.row.resolveNum }}/{{ scope.row.totalNum }}
                            </div>

                        </template>
                    </el-table-column>
                    <el-table-column prop="submitNum" align="center" width="110" label="提交进度"
                        :show-overflow-tooltip="true">
                        <template slot-scope="scope">
                            <div style="color: blue;">
                                {{ scope.row.submitNum }}/{{ scope.row.totalNum }}
                            </div>

                        </template>
                    </el-table-column>
                    <el-table-column prop="resolveNum" align="center" width="110" label="存档进度"
                        :show-overflow-tooltip="true">
                        <template slot-scope="scope">
                            <div style="color: blue;">
                                {{ scope.row.resolveNum }}/{{ scope.row.totalNum }}
                            </div>

                        </template>
                    </el-table-column>
                    <el-table-column fixed="right" label="操作" align="center">
                        <template slot-scope="scope">
                            <el-button @click="handelClickShowSummary(scope.row)" type="text"
                                size="small">查看</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>

        </div>
        <div v-if="showSummary" style="width: 100%;background: #ffffff;">
            <excel-summary v-if="showSummary" @close="closeSummary" :summaryDetal=summaryDetal></excel-summary>
        </div>
        <div class=''>
            <el-dialog :title="title" v-if="showPersonel" :visible.sync="showPersonel" width="50%"
                :close-on-click-modal="false">
                <acceptingPersonel v-if="showPersonel" :showType="showType" :acceptingId="formData.acceptingId"
                    :taskId="taskId" @handelPersonel="handelPersonel" :formDatas="formData"></acceptingPersonel>
            </el-dialog>

        </div>
    </div>
</template>
<script>
import { requestPost, requestGet } from "@/js/dai/request";
import acceptingPersonel from "./acceptingPersonel.vue";
import excelSummary from "./excel-summary.vue";
import { mapGetters } from 'vuex'
export default {
    data() {
        return {
            title:"",
            taskId:"",
            showType:"",
            showPersonel:false,
            showSummary:false,
            formData:{
            },
            tableData:[],
            summaryDetal:{}
        };
    },
    created() {},
    mounted() {
        this.getDetail()
        this.getTableList()
    },
    methods: {
        getDetail() {
            let parms = {
                id: this.taskId,
            };
            requestGet('/actual/base/communityOneTablePublish/getDetail', parms).then(res => {
                this.formData=res.data
            });
        },
        handelClickBack() {
            this.$emit('handleShowPage')
        },
        handelPersonel() {
            this.showPersonel = false;
            this.getDetail()
        },
        oncClickPersonel(){
            this.showType="adjust"
            this.showPersonel=true
        },
         oncClickInfo(value){
            this.taskId=this.formData.id
            this.showType=value
            if (value=="adjust") {
                this.title="调整接收人员名单"
            }else if(value === 'edit'){
                this.title = '修改'
            }
      
            this.showPersonel=true
        },
        handelClickShowSummary(value){
            console.log(value,"dslkjlksdf");
            this.showSummary = true
            this.summaryDetal=value
            
        },
        closeSummary(){
            this.showSummary = false;
            this.getDetail()
        },
        async getTableList(){
            let url = '/actual/base/communityOneTablePeriodPublish/getPeriodTaskList'
            let params = {
                taskId:this.taskId,
                pageSize:100,
                pageNo:1
            }
            let {code,msg,data} = await requestGet(url,params)
            if(code === 0){
                this.tableData = data.list
            }
        }
    },
    components:{
        acceptingPersonel,excelSummary
    },
    computed:{
        tableHeight() {
            return (this.clientHeight - 140) + 'px'

        },
        ...mapGetters(['clientHeight', 'resolution']),
    },
    props: {

        taskId: {
            type: String,
            default: ""
        },
    },
    watch: {},
}
</script>

<style lang='scss' scoped>
@import "@/assets/scss/pages/resiInfo.scss";
@import "@/assets/scss/modules/management/list-main.scss";
</style>
