<template>
    <div class="">
        <div v-if="pageTypeCopy == 'add'">
            <el-card>
                <h3 class="h3-title">
                    <img src="../../../../../assets/images/index/title-icon-zntb.png" width="30px" height="30px" alt="" />
                    新增事件
                </h3>
                <event-add ref="ref_add" @changeName="changeName" @changeMobile="changeMobile" @changeUserId="changeUserId"
                    @changeGridId="changeGridId" @changeLevel="changeLevel"></event-add>
            </el-card>

            <div class="process-form">
                <el-card>
                    <h3 class="h3-title">
                        <img alt="" width="30px" height="30px"
                            src="../../../../../assets/images/index/title-icon-chuli.png" />
                        处理
                    </h3>
                    <process-form ref="ref_processinfo_add" :demandUserId="demandUserId" :eventDetailData="eventDetailData"
                        :demandUserName="demandUserName" :demandUserMobile="demandUserMobile"
                        :gridId="gridId"></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">保存</el-button>
                    </div>
                </el-card>
            </div>
        </div>

        <div v-if="pageTypeCopy == 'dispose' || pageTypeCopy == 'info'" class="g-page">
            <!-- 面包屑放到这里-->
            <div class="tabs" v-if="pageTypeCopy == 'info'">
                <i class="el-icon-arrow-left"></i>
                <el-button class="diy-button--white" style="height: 20px" @click="handleClose">
                    查看详情</el-button>
            </div>
            <div :class="['g-total', { 'g-left': projectProcess.length > 0, 'g-left-top40': pageType == 'info' }]">
                <event-detail ref="ref_detail" :type="pageType" :eventId="eventId" :eventDetailData="eventDetailData"
                    :source="source" @handleToProject="handleToProject" @handleToDemand="handleToDemand"
                    @handleToIssue="handleToIssue" @handleClose="handleClose"></event-detail>

                <div v-if="!eventDetailData.operationId && pageTypeCopy == 'dispose'" class="process-form">
                    <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="" />
                            处理
                        </div>
                        <process-form ref="ref_processinfo_dispose" :source="source" :eventId="eventId"
                            :eventDetailData="eventDetailData"></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">保存</el-button>
                        </div>
                    </el-card>
                </div>
            </div>

            <div v-if="projectProcess.length > 0" :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" :key="item.processId" v-for="(item, index) in projectProcess"
                                :class="[index === 0 ? 'z-on' : '', { 'item-vis': source === 'visiual' }]">
                                <div class="item-row">
                                    <template v-if="item.agencyId">
                                        <div class="name">指派</div>
                                    </template>
                                    <template v-if="!item.timeLimit">
                                        <div class="name">完成并回复</div>
                                    </template>
                                    <template v-if="!item.agencyId && item.timeLimit">
                                        <div class="name">{{ 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">{{ formTimeLimit(item.timeLimit) }}</div>
                                        </div>
                                        <template v-if="item.internalFile && item.internalFile.length > 0"
                                            v-for="i in item.internalFile">
                                            <template v-if="i.type === 'image'">
                                                <div class="detail">
                                                    <div class="detail-field">图片：</div>
                                                    <div
                                                        :class="['m-info-prop', { 'm-info-prop-vis': source === 'visiual' },]">
                                                        <img :src="i.url" :key="i.url"
                                                            style="width: 50px; height: 50px; padding-right: 10px"
                                                            @click="watchImg(i.url)" />
                                                    </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">
                                            <div class="detail-field">回复内容：</div>
                                            <div class="detail-value">{{ item.publicReply }}</div>
                                        </div>
                                        <div class="detail" v-if="item.timeLimit">
                                            <div class="detail-field">办结时限：</div>
                                            <div class="detail-value">{{ formTimeLimit(item.timeLimit) }}</div>
                                        </div>
                                        <template v-if="item.internalFile && item.internalFile.length > 0"
                                            v-for="i in item.internalFile">
                                            <template v-if="i.type === 'image'">
                                                <div :class="['m-info-prop', { 'm-info-prop-vis': source === 'visiual' },]">
                                                    <span class="u-info-title-2">图片：</span>
                                                    <img :src="i.url" :key="i.url"
                                                        style="width: 150px; height: 150px; padding-right: 10px"
                                                        @click="watchImg(i.url)" />
                                                </div>
                                            </template>
                                            <template v-if="i.type === 'voice'">
                                                <div :class="['m-info-prop', { 'm-info-prop-vis': source === 'visiual' },]">
                                                    <span class="u-info-title-2">语音：</span>
                                                    <audio controls>
                                                        <source :src="i.url" type="" :key="i.url" />
                                                    </audio>
                                                </div>
                                            </template>
                                            <template v-if="i.type === 'doc'">
                                                <div :class="['m-info-prop', { 'm-info-prop-vis': source === 'visiual' },]">
                                                    <span class="u-info-title-2">语音：</span>
                                                    <audio controls>
                                                        <source :src="i.url" type="" :key="i.url" />
                                                    </audio>
                                                </div>
                                            </template>
                                        </template>
                                    </template>
                                </div>
                                <div v-else-if="item.type === 'demand'">
                                    <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">{{ formTimeLimit(item.timeLimit) }}</div>
                                        </div>
                                        <template v-if="item.internalFile && item.internalFile.length > 0"
                                            v-for="i in item.internalFile">
                                            <template v-if="i.type === 'image'">
                                                <div class="detail">
                                                    <div class="detail-field">图片：</div>
                                                    <div
                                                        :class="['m-info-prop', { 'm-info-prop-vis': source === 'visiual' },]">
                                                        <img :src="i.url" :key="i.url"
                                                            style="width: 50px; height: 50px; padding-right: 10px"
                                                            @click="watchImg(i.url)" />
                                                    </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>
                                    <div v-if="item.processName === '需求完成'">
                                        <div class="detail">
                                            <div class="detail-field">服务组织：</div>
                                            <div class="detail-value">{{ item.serviceParty }}</div>
                                        </div>
                                        <div class="detail">
                                            <div class="detail-field">实际服务时间：</div>
                                            <div class="detail-value">
                                                {{ item.actualServiceTime }}
                                            </div>
                                        </div>
                                    </div>
                                    <div v-if="item.processName === '转服务'">
                                        <div class="detail">
                                            <div class="detail-field">服务时间：</div>
                                            <div class="detail-value">{{ item.serviceTime }}</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </el-card>
            </div>
        </div>
        <div v-if="pageTypeCopy == 'demand'">
            <demand-info-origin ref="demandEditForm" :source="source" :demandRecId="eventDetailCopy.operationId"
                @close="handleCloseProject" />
        </div>
    </div>
</template>

<script>
import { requestPost } 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 "./event-detail";
import processForm from "./process-form";

let loading; // 加载动画
function iniData() {
    return {
        formData: {
            operationType: "",
        },
        eventInfoData: {},
        replayInfo: {},
        demand: {},
        project: {},
        issueInfo: {},

        //新增
        demandUserId: "",
        demandUserName: "",
        demandUserMobile: "",
        gridId: "",

        eventDetailCopy: {},

        projectProcess: [],
        projectPageType: "info",
        pageTypeCopy: "",

        issuePageType: "",
        issueDetailData: {},

        sourceType: "",

        level: ''
    };
}

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() { },
    mounted() {
        this.pageTypeCopy = this.pageType;
        if (this.pageTypeCopy !== "add") {
            this.getProjectProcess();
        }
        if (this.eventId) {
            this.eventDetailCopy = JSON.parse(JSON.stringify(this.eventDetailData));
        }
    },

    methods: {
        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;
        },
        //加载组织数据
        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;
                });
            } else {
                this.$message.error(msg);
            }
        },
        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 === "add") {
                await this.handelAdd();
            }
            if (this.pageTypeCopy === "dispose") {
                await this.handelDispose();
            }
            this.endLoading();
        },

        async handelAdd() {
            this.$refs.ref_add.getEventInfo();
            if (this.$refs.ref_add.okflag) {
                this.eventInfoData = this.$refs.ref_add.formData;
            } else {
                return false;
            }
            this.$refs.ref_processinfo_add.getProcessInfo();
            if (this.$refs.ref_processinfo_add.okflag) {
                this.formData.operationType = this.$refs.ref_processinfo_add.operationType;
                console.log(this.formData.operationType);
                this.eventInfoData.operationType = this.$refs.ref_processinfo_add.operationType;
                if (this.formData.operationType === "0" || this.formData.operationType === "6") {
                    this.replayInfo = this.$refs.ref_processinfo_add.replayInfo;
                    //回复属性赋值
                    this.eventInfoData.content = this.replayInfo.content;
                    this.eventInfoData.status = this.replayInfo.status;
                    this.eventInfoData.timeLimit = this.replayInfo.timeLimit;
                    if (this.replayInfo.categoryId) {
                        this.eventInfoData.categoryList = [];
                        this.eventInfoData.categoryList.push(this.replayInfo.categoryId);
                    }
                } else if (this.formData.operationType === "5") {
                    this.replayInfo = this.$refs.ref_processinfo_add.replayInfo;
                    //回复属性赋值
                    this.eventInfoData.content = this.replayInfo.content;
                    this.eventInfoData.status = this.replayInfo.status;
                    this.eventInfoData.timeLimit = this.replayInfo.timeLimit;
                    if (this.replayInfo.categoryId) {
                        this.eventInfoData.categoryList = [];
                        this.eventInfoData.categoryList.push(this.replayInfo.categoryId);
                    }
                } else if (this.formData.operationType === "2") {
                    this.replayInfo = {};
                    this.project = {};
                    this.demand = this.$refs.ref_processinfo_add.demand;
                    this.demand.gridId = this.eventInfoData.gridId;
                } else if (this.formData.operationType === "4") {
                    this.replayInfo = {};
                }
            }
            this.formData = {
                ...this.eventInfoData,
                replayInfo: this.replayInfo,
                project: this.project,
                demand: this.demand,
                issueInfo: this.issueInfo,
            };
            await this.submit();
        },

        async submit() {
            console.log(this.formData.operationType);
            //  (this.formData.operationType == 2 && this.demand.demandUserName) ||(this.formData.operationType == 3 && this.issueInfo.issueTitle) || (this.formData.operationType == 1 && this.project.categoryList) ||(this.formData.operationType == 0 && this.eventInfoData.content) ||
            if (
                this.formData.operationType == "4" ||
                this.formData.operationType == "5" ||
                this.formData.operationType == "6" ||
                this.formData.operationType == "0" ||
                (this.formData.operationType == 2 && this.demand.demandUserName)
            ) {
                if (Array.isArray(this.formData.gridId) && this.formData.gridId.length) {
                    if (this.level == "grid") {
                        this.formData.gridId = this.formData.gridId[this.formData.gridId.length - 1];
                        this.formData.agencyId = "";
                    } else {
                        this.formData.agencyId = this.formData.gridId[this.formData.gridId.length - 1];
                        this.formData.gridId = "";
                    }
                } else {
                    this.formData.agencyId = "";
                    this.formData.gridId = "";
                }
                const url = "/governance/icEventOld/add";
                const { formData } = this;
                const { data, code, msg } = await requestPost(url, {
                    ...formData,
                });
                if (code === 0) {
                    this.$message.success("操作成功！");
                    if (this.pageTypeCopy === "add") {
                        this.eventInfo = this.$refs.ref_add.resetData();
                    }
                    this.$emit("handleOk");
                } else {
                    this.$message.error(msg);
                }
            } else if (this.formData.operationType == "") {
                this.$message.error("请选择处理方式!");
            }
        },

        async handelDispose() {
            console.log(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;
                if (this.formData.operationType === "0" || this.formData.operationType === '5'
                    || this.formData.operationType === '6') {
                    this.project = {};
                    this.demand = {};
                    if (this.$refs.ref_processinfo_dispose.replayInfo.okflag) {
                        this.endLoading();
                        return false
                    }
                    this.replayInfo = this.$refs.ref_processinfo_dispose.replayInfo;
                    this.replayInfo.icEventId = this.eventId;
                    //回复属性赋值
                    let url = "/governance/icEventOld/reply";
                    await this.submitDispose(url, this.replayInfo);
                } else if (this.formData.operationType === "1") {
                    this.replayInfo = {};
                    this.demand = {};
                    this.project = this.$refs.ref_processinfo_dispose.project;
                    //项目的属性同事件一样
                    this.project.icEventId = this.eventId;
                    let url = "/governance/icEventOld/icEventToProject";
                    await this.submitDispose(url, this.project);
                } else if (this.formData.operationType === "2") {
                    this.project = {};
                    this.demand = this.$refs.ref_processinfo_dispose.demand;
                    //需求的属性同事件一样
                    this.demand.icEventId = this.eventId;
                    if (this.demand.gridId === '') {
                        this.demand.gridId = this.eventDetailData.gridId
                    }
                    let url = "/governance/icEventOld/icEventToDemand";
                    await this.submitDispose(url, this.demand);
                } else if (this.formData.operationType === "3") {
                    this.replayInfo = {};
                    this.demand = {};
                    this.project = {};
                    this.issueInfo = this.$refs.ref_processinfo_dispose.issueInfo;
                    //项目的属性同事件一样
                    let url = "/governance/icEventOld/icEventToIssue";
                    await this.submitDispose(url, this.issueInfo);
                } else {
                    this.$message.info("请选择一种处理方式");
                }
            } else {
                return false;
            }
        },
        async submitDispose(url, params) {
            const { data, code, msg } = await requestPost(url, {
                ...params,
            });
            if (code === 0) {
                this.$message.success("操作成功！");
                this.$emit("handleOk");
            } 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";
        },

        // 开启加载动画
        startLoading() {
            loading = Loading.service({
                lock: true, // 是否锁定
                text: "正在加载……", // 加载中需要显示的文字
                background: "rgba(0,0,0,.7)", // 背景颜色
            });
        },
        // 结束加载动画
        endLoading() {
            // clearTimeout(timer);
            if (loading) {
                loading.close();
            }
        },
        formTimeLimit(val) {
            return dateFormat(
                new Date(val * 1000),
                "yyyy-MM-dd hh:mm"
            );
        },
    },
};
</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>
