<template>
    <div class="">
        <el-card :style="containerStyle" :class="{ 'box-card': source === 'visiual' }" v-if="showType == ''">
            <h3 v-if="source === 'manage'" class="h3-title">
                <!-- <img src="../../../../../assets/images/index/title-icon-sqzl.png" width="30px" height="30px" alt="" /> -->
                事件详情
            </h3>
            <div class="m-detail-main">
                <div class="m-info">
                    <div :class="['m-info-prop', { 'm-info-prop-vis': source === 'visiual' }]">
                        <span class="u-info-title-2">所属网格：</span>
                        <template v-if="!info.gridName">
                            <el-select v-model.trim="info.gridId" placeholder="请选择" clearable class="cell-width-1">
                                <el-option v-for="item in gridList" :key="item.value" :label="item.label"
                                    :value="item.value" @click.native="$emit('handelCLickGridId',item)">
                                </el-option>
                            </el-select>
                        </template>
                        <template v-else>
                            <span>{{ info.gridName|| info.agencyName }}</span>
                        </template>
                    </div>
                    <div :class="[
                        'm-info-prop',
                        { 'm-info-prop-vis': source === 'visiual' },
                    ]">
                        <span class="u-info-title-2">上报时间：</span>
                        <span>{{ info.submitTime }}</span>
                    </div>
                    <div :class="[
                        'm-info-prop',
                        { 'm-info-prop-vis': source === 'visiual' },
                    ]">
                        <span class="u-info-title-2">征集领域：</span>
                        <span>{{ info.typeCode }}</span>
                    </div>
                    <div :class="[
                        'm-info-prop',
                        { 'm-info-prop-vis': source === 'visiual' },
                    ]">
                        <span class="u-info-title-2">是否愿意公开：</span>
                        <template slot-scope="scope">
                            <span v-if="scope.row.openFlag === 0" style="color: #ff6600;">否</span>
                            <span v-else-if="scope.row.openFlag ===1">是</span>
                        </template>
                        <span>{{info.eventContent==1?'是':'否'}}</span>
                    </div>
                    <div :class="[
                        'm-info-prop',
                        { 'm-info-prop-vis': source === 'visiual' },
                    ]">
                        <span class="u-info-title-2">意见标题：</span>
                        <span>{{ info.subjectTitle }}</span>
                    </div>
                    <div :class="[
                        'm-info-prop',
                        { 'm-info-prop-vis': source === 'visiual' },
                    ]">
                        <span class="u-info-title-2">意见内容:</span>
                        <span>{{ info.eventContent }}</span>
                    </div>
                    <div :class="[
                        'm-info-prop',
                        { 'm-info-prop-vis': source === 'visiual' },
                    ]">
                        <span class="u-info-title-2">上报人：</span>
                        <span>{{ info.name }}</span>
                    </div>
                    <div :class="[
                        'm-info-prop',
                        { 'm-info-prop-vis': source === 'visiual' },
                    ]">
                        <span class="u-info-title-2">联系电话：</span>
                        <span>{{ info.mobile }}</span>
                    </div>
                    <div :class="[
                        'm-info-prop',
                        { 'm-info-prop-vis': source === 'visiual' },
                    ]" v-if="info.demandType==='chengguan'">
                        <span class="u-info-title-2">有无责任单位：</span>
                        <span>{{ info.responsibleUnit==="yes" ? "有": "无" }}</span>
                    </div>
                    <div :class="[
                        'm-info-prop',
                        { 'm-info-prop-vis': source === 'visiual' },
                    ]" v-if="info.responsibleUnit==='yes' && info.demandType==='chengguan'">
                        <span class="u-info-title-2">上报人：</span>
                        <span>{{ info.responsibleName }}</span>
                    </div>
                    <div :class="[
                        'm-info-prop',
                        { 'm-info-prop-vis': source === 'visiual' },
                    ]" v-if="info.responsibleUnit==='yes' && info.demandType==='chengguan'">
                        <span class="u-info-title-2">上报人电话：</span>
                        <span>{{ info.responsibleMobile }}</span>
                    </div>
                    <div :class="[
                        'm-info-prop',
                        { 'm-info-prop-vis': source === 'visiual' },
                    ]">
                        <span class="u-info-title-2">证件号：</span>
                        <span>{{ info.idCard ? info.idCard : "--" }}</span>
                    </div>
                    <div :class="[
                        'm-info-prop',
                        { 'm-info-prop-vis': source === 'visiual' },
                    ]">
                        <span class="u-info-title-2">选为"金点子"建议:</span>
                        <!-- <span>{{info.goldenIdeaFlag==1?'是':'否'}}</span> -->
                        <el-switch v-model="info.goldenIdeaFlag" :active-value=1 :inactive-value=0
                            active-color="#13ce66" inactive-color="#ff4949" @change="sendValue">
                        </el-switch>

                    </div>
                    <div :class="[
                        'm-info-prop',
                        { 'm-info-prop-vis': source === 'visiual' },
                    ]">
                        <span class="u-info-title-2">办理前：</span>
                        <img :src="src" :key="src" style="width: 60px; height: 60px; padding-right: 10px"
                            v-for="src in info.dealBeforeImageList" @click="watchImg(src)" />
                    </div>
                    <div :class="[
                        'm-info-prop',
                        { 'm-info-prop-vis': source === 'visiual' },
                    ]">
                        <span class="u-info-title-2">办理后</span>
                        <img :src="src" :key="src" style="width: 60px; height: 60px; padding-right: 10px"
                            v-for="src in info.dealLateImageList" @click="watchImg(src)" />
                    </div>
                    <!-- <div v-if="info.operationType === '1'" :class="[
                        'm-info-prop',
                        { 'm-info-prop-vis': source === 'visiual' },
                    ]">
                        <span class="u-info-title-2">已立项：</span>
                        <div class="line" @click="handleToProject"><i class="el-icon-view"></i> 查看项目</div>
                    </div>
                    <div v-if="info.operationType === '2'" :class="[
                        'm-info-prop',
                        { 'm-info-prop-vis': source === 'visiual' },
                    ]">
                        <span class="u-info-title-2">已转服务：</span>
                        <div class="line"><i class="el-icon-check"></i>是</div>
                    </div>
                    <div v-if="info.operationType === '3'" :class="[
                        'm-info-prop',
                        { 'm-info-prop-vis': source === 'visiual' },
                    ]">
                        <span class="u-info-title-2">已转议题：</span>
                        <div class="line" @click="handleToIssue">
                            <i class="el-icon-view"></i> 查看议题
                        </div>
                    </div>
                    <div v-if="info.satisfactionName" :class="[
                        'm-info-prop',
                        { 'm-info-prop-vis': source === 'visiual' },
                    ]">
                        <span class="u-info-title-2">满意度：</span>
                        <div>{{ info.satisfactionName }}</div>
                    </div> -->
                </div>
            </div>
            <!--
                显示关闭：
                1、状态=完成    (已评价)||(没评价&&不是本人)
                2、状态=未完成 （有操作id） -->
            <div v-if="(info.status === 'processing' && info.operationId) ||
                (info.status === 'closed_case' &&
                    (info.satisfactionName ||
                        (!info.satisfactionName && user.id != info.createdUserId)))
                " class="div-btn-info">
                <el-button size="small" @click="handleCloseEvent">关闭</el-button>
            </div>
        </el-card>
    </div>
</template>

<script>
import { requestPost } from "@/js/dai/request";
import foldText from "@/views/components/foldText";
// import projectInfo from "../../xiangmu/cpts/project-info";

function iniData() {
    return {
        user: {},
        projectPageType: "info",
        info: {},
        eventDetailCopy: {},
        showType: "",
        satisfyLevel: "",
        //满意度评价
        showSatisfy: false,
        gridList: [], //所属网格list--场所区域
        agencyId: '',
    };
}

export default {
    name: "issueInfo",
    props: {
        eventId: {
            type: String,
            default: "",
        },
        type: {
            type: String,
            default: "info",
        },

        eventDetailData: {
            type: Object,
            default() {
                return {};
            },
        },
        source: {
            //展示来源：manage  管理平台    visiual  可视化平台
            type: String,
            default: "manage",
        },
    },

    components: {
        // foldText,
        // projectInfo,
    },

    data: iniData,


    watch: {},
    created() {

     },
    computed: {
        containerStyle() {
            if (this.type === 'info') {
                return {
                    minHeight: 'calc(88vh - 50px)',
                    overflow: 'auto',
                    position: 'relative'
                }
            } else {
                return {}
            }
        }
    },
    mounted() {
        this.user = this.$store.state.user;
        if (this.eventId) {
            this.info = JSON.parse(JSON.stringify(this.eventDetailData));
            this.agencyId = this.info.agencyId
        }
        this.$EventBus.$on('handelInputEventContent', ({ type, value }) => {
            if (type === 'opinion') {
                this.info.transferAdvice = value;
            } else if (type === 'handlingReq') {
                this.info.handlingReq = value;
            }
        })
        this.loadGrid()
    },

    methods: {
        async loadGrid() {
            const url = "/gov/org/customergrid/gridoption";
            let params = {
                agencyId: this.agencyId,
                purpose: "query",
            };
            const { data, code, msg } = await requestPost(url, params);
            if (code === 0) {
                this.gridList = data;
            } else {
                this.$message.error(msg);
            }
        },
        sendValue(){
            this.$emit('update-value', this.info); // 触发事件并传递值
        },
        watchImg(src) {
            window.open(src);
        },

        handleClose() {
            this.showType = "";
        },

        handleCloseEvent() {
            this.$emit("handleClose");
        },
        async getApiData() { },
    },
};
</script>
<style lang="scss" scoped>
@import "@/assets/scss/modules/shequzhili/event-info.scss";

.flex-end {
    display: flex;
    margin-bottom: 10px;
    justify-content: flex-end;
}

.m-info {
    padding-left: 0px !important;

    .flex {
        display: flex;
        flex-direction: column;
        background-color: #ebedf0;
        padding: 0 1px 1px 0;
        box-sizing: border-box;

        .item {
            display: flex;
            justify-content: space-around;
            width: 100%;
            min-height: 30px;
            line-height: 30px;
            padding: 0;

            &>div {
                background-color: #fff;
                min-width: 25%;
                margin-left: 1px;
                margin-top: 1px;
                text-indent: 1em;
                display: flex;
                align-items: center;
            }

            &:nth-child(4) {
                margin-right: 1px;
            }

            .border-right {
                position: relative;

                &::after {
                    content: '';
                    width: 1px;
                    height: 29px;
                    background: #ebedf0;
                    position: absolute;
                    right: 3px;
                    top: 0;
                }
            }

            .flex-1 {
                flex: 1;
            }
        }
    }
}

.m-info-prop {
    margin: 25px 0 !important;
    padding-left: 0px !important;

    &::before {
        content: "";
        display: block;
        position: absolute;
        top: 9px;
        left: 0;
        width: 7px;
        height: 7px;
        background: none !important;
        border-radius: 3px;
        margin-right: 10px;
    }
}
</style>