<template>
    <div class="">
        <div v-if="pageTypeCopy == 'dispose' || pageTypeCopy == 'info' || pageTypeCopy == 'assign'|| pageTypeCopy == 'check' || pageTypeCopy == 'return'" class="g-page">
            <!-- 面包屑放到这里-->
            <div class="tabs" @click="handleClose">
                <i class="el-icon-arrow-left"></i>
                <el-button class="diy-button--white" style="height: 20px">
                    查看详情</el-button>
            </div>
            <div :class="['g-total', { 'g-left': projectProcess.length > 0, 'g-left-top40': pageType == 'info' }]"
                style="z-index: 1;">
                <event-detail ref="ref_detail"  @update-value="handleValue"  :type="pageType" :eventId="eventId" :eventDetailData="eventDetailData"
                    :eventDetailDatasource="source" @handleToProject="handleToProject" @handleToDemand="handleToDemand"
                    @handleToIssue="handleToIssue" @handleClose="handleClose"></event-detail>
                <div class="process-form" v-if="pageTypeCopy == 'dispose' || pageTypeCopy == 'assign' ||pageTypeCopy == 'check' ||pageTypeCopy == 'return'">
                    <el-card :class="{ 'box-card': source === 'visiual' }">
                        <div :class="['process-title', { 'process-title-vis': source === 'visiual' },]">
                            <!-- <img src="../../../../../assets/images/index/title-icon-chuli.png" width="30px"
                                height="30px" alt="">  -->
                                {{ pageTypeCopy === 'assign' ? '指派' : pageTypeCopy === 'return' ? '退件' :'办理' }}
                        </div>
                        <process-form ref="ref_processinfo_dispose" :source="source" :eventId="eventId"
                            :eventDetailData="eventDetailData" :pageType="pageTypeCopy" :replayDetailObj="replayDetailObj"></process-form>

                        <div class="div-btn">
                            <el-button size="small" @click="handleClose">关闭</el-button>
                            <el-button style="margin-left: 20px" type="primary" size="small"
                                @click="handleComfirm">{{this.pageType=="assign"?"确认指派":"保存"}}</el-button>
                        </div>
                    </el-card>
                </div>
            </div>

            <div  :class="['g-right', pageType == 'info' ? 'g-right-top40' : '']">
                <el-card :class="{ 'box-card': source === 'visiual' }"
                    style="min-height: calc(88vh - 50px); overflow: auto">
                    <div class="m-process">
                        <div :class="['process-title', { 'process-title-vis': source === 'visiual' },]">
                            <!-- <img src="../../../../../assets/images/index/title-icon-cljz.png" width="30px" height="30px"
                                alt="" /> -->
                            办理进展
                        </div>
                        <div class="list">
                            <div class="item" :class="[index === 0 ? 'z-on' : '', { 'item-vis': source === 'visiual' },
                            ]" :key="item.processId" v-for="(item, index) in projectProcess">
                                <div class="item-row">
                                    <!-- <template v-if="item.agencyId">
                                        <div class="name">指派</div>
                                    </template>
                                    <template v-else>
                                        <div class="name">{{ item.processName }}</div>
                                    </template> -->
         
                                    <template>
                                        <div class="name">{{ (item.processName!=null && item.processName!='')?item.processName:'办理中' }}</div>
                                    </template>
                
                                    <div class="date">
                                        {{ item.processTime }}
                                    </div>
                                </div>
                                <div v-if="item.type === 'event'">
                                    <template v-if="item.agencyId">
                                        <div class="detail">
                                            <div class="detail-field">操作人：</div>
                                            <div class="detail-value">{{ item.departmentName }}</div>
                                        </div>
                                        <div class="detail">
                                            <div class="detail-field">指派部门：</div>
                                            <div class="detail-value">{{ item.agencyName }}</div>
                                        </div>
                                        <div class="detail">
                                            <div class="detail-field">转办意见：</div>
                                            <div class="detail-value">{{ item.publicReply }}</div>
                                        </div>
                                        <div class="detail" >
                                            <div class="detail-field">响应时限：</div>
                                            <div class="detail-value">{{ item.contactTime }}</div>
                                        </div>
                                        <div class="detail">
                                            <div class="detail-field">办结时限：</div>
                                            <div class="detail-value">{{ formTimeLimit(item.timeLimit) }}</div>
                                        </div>
                                        <div class="detail" v-if="item.examineContent">
                                            <div class="detail-field">备注说明：</div>
                                            <div class="detail-value">{{ item.examineContent }}</div>
                                        </div>
                                        <template v-if="item.internalFile && item.internalFile.length > 0"
                                            v-for="i in item.internalFile">
                                            <template v-if="i.attachmentType === 'image'">
                                                <div class="detail">
                                                    <div class="detail-field">图片：</div>
                                                    <div
                                                        :class="['m-info-prop', { 'm-info-prop-vis': source === 'visiual' },]">
                                                        <img :src="i.attachmentUrl" :key="i.attachmentUrl"
                                                            style="width: 50px; height: 50px; padding-right: 10px"
                                                            @click="watchImg(i.attachmentUrl)" />
                                                    </div>
                                                </div>
                                            </template>
                                            <template v-if="i.type === 'voice'">
                                                <div class="detail">
                                                    <div class="detail-field">录音：</div>
                                                    <div
                                                        :class="['m-info-prop', { 'm-info-prop-vis': source === 'visiual' },]">
                                                        <audio controls>
                                                            <source :src="i.url" type="" :key="i.url" />
                                                        </audio>
                                                    </div>
                                                </div>
                                            </template>
                                            <template v-if="i.type === 'doc'">
                                                <div class="detail">
                                                    <div class="detail-field">附件：</div>
                                                    <div
                                                        :class="['m-info-prop', { 'm-info-prop-vis': source === 'visiual' },]">
                                                        <a :href="i.url">{{ i.name }}</a>
                                                    </div>
                                                </div>
                                            </template>
                                        </template>
                                    </template>
                                    <template v-else>
                                        <div class="detail">
                                            <div class="detail-field">操作人：</div>
                                            <div class="detail-value">{{ item.departmentName }}</div>
                                        </div>
                                        <div class="detail" v-if="item.processName!='已退件'&&item.processName!='已审核归档'">
                                            <div class="detail-field">办理说明：</div>
                                            <div class="detail-value">{{ item.publicReply }}</div>
                                        </div>

                                        <div class="detail" v-if="item.respondent">
                                            <div class="detail-field">答复人：</div>
                                            <div class="detail-value">{{ item.respondent }}</div>
                                        </div>
                                        <div class="detail" v-if="item.respondentPhone">
                                            <div class="detail-field">答复电话：</div>
                                            <div class="detail-value">{{ item.respondentPhone }}</div>
                                        </div>

                                        <div class="detail" v-if="item.processName=='已办结'&&item.solveState!==''&&item.solveState!==null">
                                            <div class="detail-field">问题解决情况：</div>
                                            <div class="detail-value">{{ solveState.find(v => v.value ==item.solveState).label }}</div>
                                        </div>
                                        <div class="detail" v-if="item.processName=='已办结'&&item.solveEstimated!==''">
                                            <div class="detail-field">预计解决时间：</div>
                                            <div class="detail-value">{{ item.solveEstimated }}</div>
                                        </div>


                                        <div class="detail" v-if="item.timeLimit">
                                            <div class="detail-field">办结时限：</div>
                                            <div class="detail-value">{{ formTimeLimit(item.timeLimit) }}</div>
                                        </div>

                                        <div class="detail" v-if="item.processName==='已审核归档'&&item.examine!==''&&item.examine!==null">
                                            <div class="detail-field">审核结果：</div>
                                            <div class="detail-value">{{ examine.find(v => v.value ==item.examine).label }}</div>
                                        </div>
                                       

                                        <div class="detail" v-if="item.examineContent">
                                            <div class="detail-field">备注说明：</div>
                                            <div class="detail-value">{{ item.examineContent }}</div>
                                        </div>

                                        <div class="detail" v-if="item.confirmSolved!==''&&item.confirmSolved!==null&&item.processName==='已审核归档'">
                                            <div class="detail-field">问题是否已解决：</div>
                                            <div class="detail-value">{{ confirmSolved.find(v => v.value ==item.confirmSolved).label }}</div>
                                        </div>

                                        <div class="detail" v-if="item.satisfactionResult!==''&&item.satisfactionResult!==null&&item.processName==='已审核归档'">
                                            <div class="detail-field">回访满意度结果：</div>
                                            <div class="detail-value">{{ satisfactionResult.find(v => v.value ==item.satisfactionResult).label }}</div>
                                        </div>

                                        <div class="detail" v-if="item.processName==='已退件'">
                                            <div class="detail-field">是否已联系：</div>
                                            <div class="detail-value">{{ item.returnLoseContact===1?'已联系当事人':'未联系当事人' }}</div>
                                        </div>
                                        <div class="detail" v-if="item.processName==='已退件'">
                                            <div class="detail-field">建议办理部门：</div>
                                            <div class="detail-value">{{ item.returnSuggestDeptName }}</div>
                                        </div>
                                        <div class="detail" v-if="item.processName==='已退件'">
                                            <div class="detail-field">退件原因：</div>
                                            <div class="detail-value">{{ item.returnReason }}</div>
                                        </div>

                                        <div class="detail" v-if="item.irregularity!==''&&item.irregularity!==null&&item.irregularity!==''&&item.irregularity!==null">
                                            <div class="detail-field">填报不合规诉求：</div>
                                            <div class="detail-value">{{ irregularity.find(v => v.value ==item.irregularity).label }}</div>
                                        </div>
                                        <div class="detail" v-if="item.nonComplianceType!==''&&item.nonComplianceType!==null&&item.irregularity!==''&&item.irregularity!==null">
                                            <div class="detail-field">不合规诉求类型：</div>
                                            <div class="detail-value">{{ nonComplianceType.find(v => v.value ==item.nonComplianceType).label }}</div>
                                        </div>
                                        <div class="detail" v-if="item.irregularity!==''&&item.irregularity!==null">
                                            <div class="detail-field">不合规诉求说明：</div>
                                            <div class="detail-value">{{ item.nonComplianceNote }}</div>
                                        </div>

                                        <template v-if="item.internalFile && item.internalFile.length > 0"
                                            v-for="i in item.internalFile">
                                            <template v-if="i.attachmentType === 'image'">
                                                <div
                                                    :class="['m-info-prop', { 'm-info-prop-vis': source === 'visiual' },]">
                                                    <span class="u-info-title-2">图片：</span>
                                                    <img :src="i.attachmentUrl" :key="i.attachmentUrl"
                                                        style="width: 150px; height: 150px; padding-right: 10px"
                                                        @click="watchImg(i.attachmentUrl)" />
                                                </div>
                                            </template>
                                            <template v-if="i.attachmentType === 'voice' || i.attachmentType === 'video'">
                                                <div
                                                    :class="['m-info-prop', { 'm-info-prop-vis': source === 'visiual' },]">
                                                    <span class="u-info-title-2">录音：</span>
                                                    <audio controls>
                                                        <source :src="i.attachmentUrl" type="" :key="i.attachmentUrl" />
                                                    </audio>
                                                </div>
                                            </template>
                                            <template v-if="i.attachmentType === 'doc'">
                                                <div
                                                    :class="['m-info-prop', { 'm-info-prop-vis': source === 'visiual' },]">
                                                    <span class="u-info-title-2">录音：</span>
                                                    <audio controls>
                                                        <source :src="i.attachmentUrl" type="" :key="i.attachmentUrl" />
                                                    </audio>
                                                </div>
                                            </template>
                                        </template>
                                    </template>
                                </div>
                            </div>
                        </div>
                    </div>
                </el-card>
            </div>
        </div>
    </div>
</template>
<script>
import { examine, confirmSolved, satisfactionResult, solveState, irregularity, nonComplianceType } from "@/js/columns/constants";
import { requestPost,requestGet } from "@/js/dai/request";
import { Loading } from "element-ui"; // 引入Loading服务
import foldText from "@/views/components/foldText";
// import projectInfoOrigin from "../../xiangmu/cpts/project-info";
import demandInfoOrigin from "@/views/modules/communityService/measure/info";
// import issueInfoOrigin from "../../issue/cpts/issue-info";
import dateFormat from "dai-js/tools/dateFormat";
// import eventAdd from "./add";
import eventDetail from "./eventDetail";
import processForm from "./process-form";

let loading; // 加载动画
function iniData() {
    return {
        formData: {
            operationType: "",
        },
        eventInfoData: {},
        examine: [],
        confirmSolved: [],
        satisfactionResult: [],
        solveState: [],
        irregularity: [],
        nonComplianceType: [],
        replayInfo: {},
        demand: {},
        project: {},
        issueInfo: {},
        //新增
        demandUserId: "",
        demandUserName: "",
        demandUserMobile: "",
        gridId: "",
        eventDetailCopy: {},
        projectProcess: [],
        projectPageType: "info",
        pageTypeCopy: "",
        issuePageType: "",
        issueDetailData: {},
        sourceType: "",
        goldenIdeaFlag:'',
        level: '',
        replayDetailObj:{},
        newgoldList:{}
    };
}
export default {
    name: "projectInfo",
    props: {
        eventId: {
            type: String,
            default: "",
        },
        pageType: {
            type: String,
            default: "",
        },
        eventDetailData: {
            type: Object,
            default() {
                return {};
            },
        },
        source: {
            //展示来源：manage  管理平台    visiual  可视化平台
            type: String,
            default: "manage",
        },
    },
    components: {
        // foldText,
        // eventAdd,
        eventDetail,
        processForm,
        // projectInfoOrigin,
        // demandInfoOrigin,
        // issueInfoOrigin,
    },
    data: iniData,
    computed: {},
    watch: {
        eventId() {
            let data = iniData();
            Object.keys(data).forEach((k) => {
                this[k] = data[k];
            });
            // this.getApiData();
        },
    },
    created() {
        console.log(this.pageType,"sdlkfjlk");
        
        this.examine = examine
        this.confirmSolved = confirmSolved
        this.satisfactionResult = satisfactionResult
        this.solveState = solveState
        this.irregularity = irregularity
        this.nonComplianceType = nonComplianceType
        if(this.pageType === 'check'){
            this.replayDetail()
        }
        this.pageTypeCopy = this.pageType;
        this.getProjectProcess();
        if (this.eventId) {
            this.eventDetailCopy = JSON.parse(JSON.stringify(this.eventDetailData));
        }
    },
    mounted() {
        
        
        
    },
    methods: {
        handleValue(val) {
            console.log(val,"ds;lfk;dfl ");
            this.newgoldList=val
            if (val.goldenIdeaFlag) {
                this.goldenIdeaFlag=1
            }else{
                this.goldenIdeaFlag=0
            }
  
        },
        changeName(val) {
            this.demandUserName = val;
        },
        changeMobile(val) {
            this.demandUserMobile = val;
        },
        changeUserId(val) {
            this.demandUserId = val;
        },
        changeGridId(val) {
            this.gridId = val;
        },
        changeLevel(val) {
            this.level = val;
        },
        watchImg(src) {
            window.open(src);
        },
        
        //加载组织数据
        async getProjectProcess() {
            const url = "/governance/icEventOld/process";
            const { data, code, msg } = await requestPost(url, {
                icEventId: this.eventId,
            });
            if (code === 0) {
                this.projectProcess = data.map((item) => {
                    item.processTime = dateFormat(
                        new Date(item.processTime * 1000),
                        "yyyy-MM-dd hh:mm"
                    );
                    return item;
                });
                console.log(this.projectProcess,"skfdjskljdf");
                
            } else {
                this.$message.error(msg);
            }
        },
        formTimeLimit(val) {
            return dateFormat(
                new Date(val * 1000),
                "yyyy-MM-dd hh:mm"
            );
        },
        getEventInfo() {
            this.$refs.ref_add.getEventInfo();
            if (this.$refs.ref_add.okflag) {
                this.eventInfoData = this.$refs.ref_add.formData;
            } else {
                return false;
            }
        },
        async handleComfirm() {
            this.startLoading();
            if (this.pageTypeCopy === "dispose" ||this.pageTypeCopy === "assign" || this.pageTypeCopy === "check" || this.pageTypeCopy === "return" ) {
                await this.handelDispose();
            }
            this.endLoading();
        },

        async handelDispose() {
            console.log("handelDispose......");
            console.log("okflag:"+this.$refs.ref_processinfo_dispose.okflag);
            
            this.$refs.ref_processinfo_dispose.getProcessInfo();
            if (this.$refs.ref_processinfo_dispose.okflag) {
                this.formData.operationType = this.$refs.ref_processinfo_dispose.operationType;
                this.replayInfo = this.$refs.ref_processinfo_dispose.replayInfo;
                this.replayInfo.icEventId = this.eventId;
                this.replayInfo.eventId = this.eventId;
                await this.submitDispose('/governance/icEventOld/reply', this.replayInfo);
 
            } else {
                return false;
            }
        },
        async submitDispose(url, params) {
            console.log(params,"lknnkjk");
  
            const { data, code, msg } = await requestPost(url, {
                ...params,
            });
            if (code === 0) {
             await   this.icEventOldupdate('/governance/icEventOld/update')
                this.$message.success("操作成功！");

                this.$emit("handleOk");
            } else {
                this.$message.error(msg);
            }
        },
        

        async icEventOldupdate(url) {
            console.log("sdfl;sdm.fm ",this.eventId);
            
            const params={
                goldenIdeaFlag:this.goldenIdeaFlag,
                icEventId:this.newgoldList.icEventId
            }
            const { data, code, msg } = await requestPost(url, params);
            if (code === 0) {
            } else {
                this.$message.error(msg);
            }
        },
        handleClose() {
            if (this.pageTypeCopy === "add") {
                this.eventInfo = this.$refs.ref_add.resetData();
            }
            this.$emit("handleClose");
        },
        handleToProject(type) {
            if (this.eventDetailCopy.status === "processing") {
                this.projectPageType = "edit";
            } else {
                this.projectPageType = "info";
            }
            this.sourceType = "event";
            this.pageTypeCopy = "project";
        },
        handleToDemand() {
            // if (this.eventDetailCopy.status === 'processing') {
            //   this.projectPageType = 'edit'
            // } else {
            //   this.projectPageType = 'info'
            // }
            this.pageTypeCopy = "demand";
        },
        async handleToIssue() {
            const url = "/governance/manage/votingissuedetail";
            const { data, code, msg } = await requestPost(url, {
                issueId: this.eventDetailCopy.operationId,
            });
            if (code === 0) {
                this.issueDetailData = { ...data };
            } else {
                this.$message.error(msg);
            }

            if (this.issueDetailData.issueStatus === "voting") {
                this.issuePageType = "dispose";
            } else {
                this.issuePageType = "info";
            }
            this.pageTypeCopy = "issue";
        },
        handleCloseProject() {
            this.getProjectProcess();
            this.pageTypeCopy = "info";
        },
        async replayDetail(){
            console.log(this.eventDetailCopy);
            const url = `/governance/icEvent/replayDetail/${this.eventDetailData.icEventId}`;
            const { data, code, msg } = await requestGet(url);
            if (code === 0) {
                this.replayDetailObj = { ...data };
                console.log(this.replayDetailObj,'seeeee');
            } else {
                this.$message.error(msg);
            }
        },
        // 开启加载动画
        startLoading() {
            loading = Loading.service({
                lock: true, // 是否锁定
                text: "正在加载……", // 加载中需要显示的文字
                background: "rgba(0,0,0,.7)", // 背景颜色
            });
        },
        // 结束加载动画
        endLoading() {
            // clearTimeout(timer);
            if (loading) {
                loading.close();
            }
        },
    },
};
</script>
<style lang="scss" scoped>
@import "@/assets/scss/modules/shequzhili/event-info.scss";
.tabs {
    position: absolute;
    margin-left: 30px;
    height: 50px;
    line-height: 50px;
    .diy-button--white {
        border: none !important;
        color: rgba(0, 0, 0, 0.65) !important;
        height: 30px !important;
        padding: 0 12px !important;
        margin-left: 10px;
    }
}
.list {
    &> :last-child {
        border: none !important;
    }
    &> :first-child {
        .name {
            // background: url("../../../../../assets/images/index/bubble.png") no-repeat;
            color: #fff !important;
            padding: 0px 10px 3px 13px !important;
            background-size: 100% 100%;
            border: none !important;
        }
    }
}
.g-left-top40 {
    margin-top: 40px;
}
.g-right-top40 {
    margin-top: 40px;
}
</style>
