<template>
    <div class="detail" v-loading="loading">
        <KVTable title="基本信息" :list="basicInfo" :rightButton="rightButton">
            <template #slotValue="slot">
                <template v-if="slot.row.type === 1">
                    <div class="detail-map" @click="onShowPositionMap">
                        {{ slot.row.value }}
                        <i class="el-icon-location blueFont"></i>
                    </div>
                </template>
                <template v-else-if="slot.row.type === 2">
                    <el-tag v-if="slot.row.value == 'NOTICED'" type="warning">已通知</el-tag>
                    <el-tag v-else-if="slot.row.value == 'PUNISHMENTED'" type="danger">已处罚</el-tag>
                    <el-tag v-else type="success">已挪车</el-tag>
                </template>
                <template v-else-if="slot.row.type === 3">
                    <el-scrollbar>
                        <template v-for="(url, index) in slot.row.value">
                            <el-image :key="index" class="pic" :src="url" :preview-src-list="slot.row.value"></el-image>
                        </template>
                    </el-scrollbar>
                </template>
                <template v-else>
                    {{ slot.row.value }}
                </template>
            </template>
        </KVTable>
        <KVTable class="mt" title="违法告知信息" :list="illegalInfo">
            <template #slotValue="slot">
                <template v-if="slot.row.type === 1">
                    <el-image v-if="slot.row.value" class="pic" :src="slot.row.value[0]" :preview-src-list="slot.row.value"></el-image>
                </template>
                <template v-else>
                    {{ slot.row.value }}
                </template>
            </template>
        </KVTable>
        <KVTable class="mt" title="简易处罚信息" :list="punishmentInfo">
            <template #slotValue="slot">
                <template v-if="slot.row.type === 1">
                    <el-image v-if="slot.row.value" class="pic" :src="slot.row.value[0]" :preview-src-list="slot.row.value"></el-image>
                </template>
                <template v-else>
                    {{ slot.row.value }}
                </template>
            </template>
        </KVTable>

        <show-map v-if="showMapCoor" :show.sync="showPositionMap" title="违法地点" :coor="showMapCoor"></show-map>
    </div>
</template>

<script>
import KVTable from '@/component/KVTable';
import ShowMap from '@/component/ShowMap';

import { getOne, getNoticeMessage, getPunishmentMessage } from '@/api/punishment';
import { formatDate, handleProblemImgs, notEmpty } from '@/utils/tool';
import punishmentMixin from '@/mixin/punishment';

export default {
    components: {
        KVTable,
        ShowMap,
    },
    data () {
        return {
            basicInfo: [],
            rightButton: {},
            illegalInfo: [],
            punishmentInfo: [],
            loading: false,
            detailData: null,
            showPositionMap: false,
            showMapCoor: null,
        }
    },
    mixins: [punishmentMixin],
    computed: {
        pid() {
            return this.$route.params.pid
        }
    },
    mounted () {
        if (this.pid) {
            this.initData();
        }
    },
    methods: {
        initData() {
            this.loading = true;
            getOne(this.pid).then(res => {
                this.detailData = res;
                this.generateInfo(res);

                getNoticeMessage(res.id).then(res1 => {
                    let val = '';
                    if (res1 && res1.data && res1.data.length > 0) {
                        val = res1.data[0].message_content;
                    }
                    this.generateNoticeInfo(val);
                });

                getPunishmentMessage(res.id).then(res2 => {
                    let val = '';
                    if (res2 && res2.data && res2.data.length > 0) {
                        val = res2.data[0].message_content;
                    }
                    this.generatePunishmentInfo(val);
                });

                this.loading = false;
            });
        },
        generateInfo(data) {
            const pictures = [];
            if (notEmpty(data.pictures)) {
                data.pictures.split(',').map(imageId => {
                    const url = handleProblemImgs(imageId);
                    if (notEmpty(url)) {
                        pictures.push(url);
                    }
                });
            }
            this.basicInfo = [
                {
                    label: '检查时间：',
                    value: data && formatDate(data.inspection_time, true) || '',
                },
                {
                    label: '违法类型：',
                    value: data && this.parseVehicleModel(data.vehicle_model) || '',
                },
                {
                    label: '执法机构：',
                    value: data && data.enforce_org_name || ''
                },
                {
                    label: '检查人员：',
                    value: data && data.create_user_name || 0,
                },
                {
                    label: '违法地点：',
                    value: data && data.inspection_location || '',
                    type: 1,
                },
                {
                    label: '违法状态：',
                    value: data && data.processing_status || 0,
                    type: 2,
                },
                {
                    label: '车主姓名：',
                    value: data && data.vehicle_owner_name || '',
                },
                {
                    label: '联系方式：',
                    value: data && data.vehicle_owner_phone || '',
                },
                {
                    label: '现场照片：',
                    value: pictures,
                    type: 3,
                    row: true,
                },
            ];
        },
        generateNoticeInfo(msg) {
            let url = null;
            if (this.detailData && this.detailData.illegal_notice > 0) {
                url = [handleProblemImgs(this.detailData.illegal_notice+'') || ''];
            }
            this.illegalInfo = [
                {
                    label: '违法告知短信：',
                    value: msg || '',
                    row: true,
                },
                {
                    label: '违法行为告知单：',
                    value: url,
                    row: true,
                    type: 1,
                },
            ];
        },
        generatePunishmentInfo(msg) {
            let url = null;
            if (this.detailData && this.detailData.simple_penalty_decision > 0) {
                url = [handleProblemImgs(this.detailData.simple_penalty_decision+'') || ''];
            }
            // MOVED-规定时限内移离车辆，不进行处罚，UN_MOVED-规定时限内未移离车辆，简易处罚并通知
            let res = '待移离';
            if (this.detailData.move_result) {
                res = this.detailData.move_result == 'MOVED' ? '规定时限内移离车辆，不进行处罚' : '规定时限内未移离车辆，简易处罚并通知';
            }
            this.punishmentInfo = [
                {
                    label: '移离情况：',
                    value: res,
                    row: true,
                },
                {
                    label: '处罚通知短信：',
                    value: msg || '',
                    row: true,
                },
                {
                    label: '简易处罚决定书：',
                    value: url,
                    row: true,
                    type: 1,
                },
            ];
        },
        onShowPositionMap() {
            if (this.detailData) {
                const lat = parseFloat(this.detailData.inspection_location_latitude);
                const lng = parseFloat(this.detailData.inspection_location_longitude);
                this.showMapCoor = {
                    lat: lat,
                    lng: lng,
                }
                this.showPositionMap = true;
            }
        },
    }
}
</script>

<style lang="scss">
.custom-dialog-info {
    .el-row {
        margin-top: 10px;
    }
    .el-col:first-child {
        text-align: right;
        color: #888888;
    }
    .el-col:last-child {
        padding-left: 15px;
        color: #343435;
    }
}
</style>

<style lang="scss" scoped>
.pic {
    width: 100px; 
    height: 100px;
}
.pic:not(:first-child) {
    margin-left: 10px;
}
.notice {
    font-size: 14px;
    &>div:not(:first-child) {
        padding-left: 10px;
    }
    &>div:last-child {
        margin-top: 10px;
    }
}
.detail-map {
    cursor: pointer;
}
</style>