

<template>
    <div class='update-record-detail'>
        <van-nav-bar :title='title' left-arrow @click-left='backPage' />
        <div class='info'>
            <!-- <i class='iconfont wanda-nuantong2'></i> -->
            <!-- 维保 -->
            <div v-if='type === 1 ' class='container-1'>
                <div class='date'>
                    <div class='report-date'>
                        <span>填报时间</span>
                        <span>{{data.tbDate || '--'}}</span>
                    </div>
                    <div class='acceptance-date'>
                        <span>验收日期</span>
                        <span>{{data.ysDate || '--'}}</span>
                    </div>
                </div>
                <div class='detail'>{{data.matters || '--'}}</div>
                <ul class='card'>
                    <!-- <li class='title'>更换配件</li> -->
                    <li class='title'>{{data.description || '--'}}</li>
                    <li class='name-model'>配件名称型号：{{data.model||'--'}}</li>
                    <!-- <li class='cost'>费用出处：重点设备维修保养资金</li> -->
                    <li class='cost'>费用出处：{{data.source ||'--'}}</li>
                    <li class='num-amount'>
                        <span>数量: {{data.sl || '--'}}个</span>
                        <span>金额: {{data.cost ||'--'}}万元</span>
                    </li>
                </ul>
                <div class='bottom'>
                    <div class='photo' @click='showPhoto'>现场照片: {{imgList.length || '--'}}张</div>
                    <div class='task-No' @click='showTaskInfo'>任务编号: {{data.wb_gzglid || '--'}}</div>
                </div>
            </div>
            <!-- 维修 -->
            <div v-else-if='type===4' class='container-1'>
                <div class='date'>
                    <div class='report-date'>
                        <span>填报时间</span>
                        <span>{{data.tbDate || '--'}}</span>
                    </div>
                    <div class='acceptance-date'>
                        <span>验收日期</span>
                        <span>{{data.ysDate || '--'}}</span>
                    </div>
                </div>
                <div class='detail'>{{data.matters || '--'}}</div>
                <ul class='card'>
                    <!-- <li class='title'>更换配件</li> -->
                    <li class='title'>{{data.description || '--'}}</li>
                    <li class='name-model'>配件名称型号：{{data.model || '--'}}</li>
                    <!-- <li class='cost'>费用出处：重点设备维修保养资金</li> -->
                    <li class='cost'>费用出处：{{data.source || '--'}}</li>
                    <li class='num-amount'>
                        <span>数量: {{data.sl || '--'}}个</span>
                        <span>金额: {{data.cost || '--'}}万元</span>
                    </li>
                </ul>
                <div class='bottom'>
                    <div class='photo' @click='showPhoto'>现场照片: {{imgList.length || '--'}}张</div>
                    <div class='task-No' @click='showTaskInfo'>工单编号: {{data.wonum || '--'}}</div>
                </div>
            </div>
            <!--  其他事项-->
            <div v-else-if='type === 5' class='container-3'>
                <div class='deal-date'>
                    <div class='name'>处理时间:</div>
                    <div>{{data.handleDate || '--'}}</div>
                </div>
                <div class='record'>
                    <div class='name'>记录事项:</div>
                    <div>{{data.jlsx || '--'}}</div>
                </div>
                <div class='detail-location'>
                    <div class='name'>详细位置:</div>
                    <div>{{data.description || '--'}}</div>
                </div>
                <div class='deatil-info'>
                    <div class='name'>具体内容:</div>
                    <div>{{data.content || '--'}}</div>
                </div>
            </div>
            <!-- 综合事项 -->
            <div v-else-if='type === 3' class='container-4'>
                <div class='date'>
                    <div class='name'>日期:</div>
                    <div>{{data.createDate || '--'}}</div>
                </div>
                <div class='record'>
                    <div class='name'>记录事项:</div>
                    <div>{{data.recordsx || '--'}}</div>
                </div>
                <div class='work'>
                    <div class='name'>工作要求:</div>
                    <div>{{data.workyq || '--'}}</div>
                </div>
                <div class='rectification-matters'>
                    <!--  整改事项 -->
                    <div class='name'>整改事项:</div>
                    <div>{{data.zgyq || '--'}}</div>
                </div>
            </div>
        </div>
        <!-- 现场照片预览 -->
        <ImagePreview class='update-img-preview' :key='imgKey' :visible.sync='showImgPreview' :imgList='imgList' />

        <!-- 任务信息 -->
        <div class='task-info-container' v-show='showTask'>
            <van-nav-bar :title='taskText+"信息"' left-arrow @click-left='showTask = false' />
            <ul class='task-info'>
                <li>
                    <span class='name'>{{taskText}}编号:</span>
                    <span class='data'>{{taskData.No}}</span>
                </li>
                <li>
                    <span class='name'>{{taskText}}状态:</span>
                    <span class='data'>{{taskData.status}}</span>
                </li>
                <li>
                    <span class='name'>{{taskText}}描述:</span>
                    <span class='data'>{{taskData.description}}</span>
                </li>
                <li>
                    <span class='name'>填报人:</span>
                    <span class='data'>{{taskData.reporter}}</span>
                </li>
                <li>
                    <span class='name'>联系电话:</span>
                    <span class='data'>{{taskData.phone}}</span>
                </li>
                <li>
                    <span class='name'>填报时间:</span>
                    <span class='data'>{{taskData.reportDate}}</span>
                </li>
                <li>
                    <span class='name'>验收时间:</span>
                    <span class='data'>{{taskData.acceptanceDate}}</span>
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
/**
 * 说明书更新记录详情页面
 */
import Vue from 'vue'
import { NavBar } from 'vant'
Vue.use(NavBar)
import ImagePreview from '@/components/ImagePreview'
import { mapGetters } from 'vuex'
import { getUpdateDetail1, getUpdateDetail4, getUpdateDetail5, getUpdateDetail3 } from '@/api/overview'
import moment from 'moment'
export default {
    name: 'UpdateRecordDetail',
    props: {},
    components: { ImagePreview },
    data() {
        return {
            type: 1, //  1,4,5,3  维保, 维修, 其他事项, 综合事项
            title: '', //页面title
            showTask: false, //是否展示工单/任务信息 页面
            showImgPreview: false, //是否展示图片预览
            imgList: [], //图片数组
            imgKey: `img${new Date().getTime()}`,
            data: {}, //页面显示数据
            taskText: '', //    工单,任务信息 页面title
            taskData: {
                No: '--',
                status: '--',
                description: '--',
                reporter: '--',
                phone: '--',
                reportDate: '--',
                acceptanceDate: '--',
            },
        }
    },
    computed: {
        ...mapGetters(['plazaId', 'objtypeDict']),
    },
    created() {
        this.getData()
    },
    beforeMount() {},
    mounted() {
        // console.log(this.$route.params)
    },
    methods: {
        /**
         * 查询页面需要的详情信息
         */
        getData() {
            const { info } = this.$route.params
            console.log(JSON.stringify(info, null, 2))
            this.type = info.objtype
            this.title = this.objtypeDict[info.objtype]
            switch (info.objtype) {
                case 1:
                    // 维保
                    this.getUpdateDetail1Func(info)
                    break
                case 4:
                    // 维保
                    this.getUpdateDetail4Func(info)
                    break
                case 5:
                    // 其他事项
                    this.getUpdateDetail5Func(info)
                    break
                case 3:
                    // 综合事项
                    this.getUpdateDetail3Func(info)
                    break
                default:
                    break
            }
        },
        /**
         * 维保
         */
        async getUpdateDetail1Func(info) {
            let getParams = {
                id: info.objid,
                plazaId: this.plazaId,
                onlyMainAsset: true,
            }
            let res = await getUpdateDetail1({ getParams })
            console.log(res)
            let data = {}
            if (res.data) {
                data = res.data[0]
            }
            data.reportdate && (data.tbDate = moment(data.reportdate).format('YYYY-MM-DD'))
            data.sjjssj && (data.ysDate = moment(data.sjjssj).format('YYYY-MM-DD'))
            this.data = data
            console.log(this.data)
            console.log('===========')
            // 图片处理
            this.imgList = []
            if (data?.glsmsImage?.length) {
                data.glsmsImage.map((item) => {
                    this.imgList.push(item.url)
                })
            }
        },
        /**
         * 维修
         */
        async getUpdateDetail4Func(info) {
            let getParams = {
                wonum: info.objid,
                plazaId: this.plazaId,
            }
            let res = await getUpdateDetail4({ getParams })
            console.log(res)
            let data = {}
            if (res.data) {
                data = res.data[0]
            }
            data.reportdate && (data.tbDate = moment(data.reportdate).format('YYYY-MM-DD'))
            data.sjjssj && (data.ysDate = moment(data.sjjssj).format('YYYY-MM-DD'))
            this.data = data
            console.log(this.data)
            console.log('===========2')
            // 图片处理
            this.imgList = []
            if (data?.glsmsImage?.length) {
                data.glsmsImage.map((item) => {
                    this.imgList.push(item.url)
                })
            }
        },
        /**
         * 其他事项
         */
        async getUpdateDetail5Func(info) {
            let getParams = {
                id: info.objid,
                plazaId: this.plazaId,
            }
            let res = await getUpdateDetail5({ getParams })
            let data = {}
            if (res.data) {
                data = res.data[0]
            }
            data.handledate && (data.handleDate = moment(data.handledate).format('YYYY-MM-DD'))
            this.data = data
        },
        /**
         * 综合事项
         */
        async getUpdateDetail3Func(info) {
            let getParams = {
                id: info.objid,
                plazaId: this.plazaId,
            }
            let res = await getUpdateDetail3({ getParams })
            console.log(res)
            let data = {}
            if (res.data) {
                data = res.data[0]
            }
            data.createdate && (data.createDate = moment(data.createdate).format('YYYY-MM-DD'))
            this.data = data
        },
        // 返回上一个页面(项目概况)
        backPage() {
            this.$router.go(-1)
        },
        // 点击任务编号,显示任务信息
        showTaskInfo() {
            if (this.type === 5 || this.type === 3) {
                return false
            }
            let data = this.data
            console.log(data)
            // 维保有任务编号, 或者维修有工单编号, 显示
            if (this.type === 1) {
                this.taskText = '任务'
                // 维保
                this.taskData = {
                    No: data.wb_gzglid || '--', //任务编号
                    status: data.status || '--', //状态
                    description: data.description || '--', //描述
                    reporter: data.reportedby || '--', //填报人
                    phone: data.contact || '--', //联系电话
                    reportDate: data.reportdate ? moment(data.reportdate).format('YYYY-MM-DD') : '--', //填报时间
                    acceptanceDate: data.sjjssj ? moment(data.sjjssj).format('YYYY-MM-DD') : '--', //验收时间
                }
            } else if (this.type === 4) {
                this.taskText = '工单'
                // 维修
                this.taskData = {
                    No: data.wonum || '--', //工单编号
                    status: data.status || '--', //状态
                    description: data.description || '--', //描述
                    reporter: data.reportedby || '--', //填报人
                    phone: data.contact || '--', //联系电话
                    reportDate: data.reportdate ? moment(data.reportdate).format('YYYY-MM-DD') : '--', //填报时间
                    acceptanceDate: data.sjjssj ? moment(data.sjjssj).format('YYYY-MM-DD') : '--', //验收时间
                }
            }
            if (this.data.wb_gzglid || this.data.wonum) {
                this.showTask = true
            }
        },
        // 显示图片预览弹窗
        showPhoto() {
            this.imgKey = `img${new Date().getTime()}`
            console.log(1111)
            this.$nextTick(() => {
                if (this.imgList?.length) {
                    this.showImgPreview = true
                }
            })
        },
    },
}
</script>
<style lang='less' scoped>
.update-record-detail {
    width: 100%;
    height: 100%;
    background-color: #f5f6f7;
    // background-color: lightblue;
    // 下拉菜单
    /deep/.van-dropdown-menu__item {
        justify-content: flex-start !important;
        padding-left: 8px;
    }
    // 主体内容
    .info {
        width: 100%;
        height: calc(100% - 50px);
        // padding: 15px;
        overflow: auto;
        .container-1,
        .container-3,
        .container-4 {
            padding: 15px;
            background-color: #fff;
        }
        // 维修/维保
        .container-1 {
            .date {
                width: 100%;
                height: 17px;
                display: flex;
                justify-content: space-between;
                margin: 5px 0 10px 0;
                font-size: 12px;
                font-weight: 400;
                color: #666666;
                line-height: 17px;
            }
            .detail {
                width: 100%;
                height: auto;
                margin: 10px 0;
                font-size: 16px;
                font-weight: 600;
                color: #333333;
                line-height: 20px;
            }
            .card {
                width: 100%;
                height: auto;
                padding: 8px 16px;
                background: #eff0f1;
                border-radius: 4px;
                color: #666666;
                font-size: 14px;
                .title {
                    height: 20px;
                    font-size: 14px;
                    font-weight: 500;
                    color: #333333;
                    line-height: 20px;
                    margin-bottom: 8px;
                }
                .name-model,
                .cost,
                .num-amount {
                    margin-top: 4px;
                }
                .num-amount {
                    display: flex;
                    justify-content: space-between;
                }
            }
            .bottom {
                width: 100%;
                height: 17px;
                display: flex;
                justify-content: space-between;
                margin: 5px 0 10px 0;
                color: #025baa;
                line-height: 17px;
                font-size: 14px;
                font-weight: 400;
                color: #025baa;
                margin-top: 20px;
            }
        }
        .container-3 {
            .deal-date,
            .record,
            .detail-location,
            .deatil-info {
                display: flex;
                justify-content: flex-start;
                font-size: 14px;
                font-weight: 400;
                color: #666666;
                line-height: 20px;
                margin-bottom: 12px;
                div {
                    height: auto;
                }
                .name {
                    width: 70px;
                }
                .name + div {
                    flex: 1;
                    text-align: left;
                }
            }
        }
        // 综合事项
        .container-4 {
            .date,
            .record,
            .work,
            .rectification-matters {
                display: flex;
                justify-content: flex-start;
                font-size: 14px;
                font-weight: 400;
                color: #666666;
                line-height: 20px;
                margin-bottom: 12px;
                div {
                    height: auto;
                }
                .name {
                    width: 70px;
                }
                .name + div {
                    flex: 1;
                    text-align: left;
                }
            }
        }
    }
    // 全屏的任务信息
    .task-info-container {
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1000;
        background-color: #fff;
        .task-info {
            width: 100%;
            padding: 15px;
            li {
                display: flex;
                justify-content: flex-start;
                line-height: 20px;
                font-size: 14px;
                margin-bottom: 12px;
                .name {
                    color: #666666;
                    width: 70px;
                    height: auto;
                }
                .data {
                    flex: 1;
                    height: auto;
                    color: #333333;
                }
            }
        }
    }
}
</style>