<template>
    <div>
        <div class="option">
            <el-row>
                <div class="header">
                    <div class="title">
                        <span>|</span>
                        <span>基本信息</span>
                    </div>
                    <slot name="optionRight">
                        <div v-if="rightButton">
                            <el-button size="mini" round icon="el-icon-arrow-left" @click="back">{{ rightButton.title ?
                                rightButton.title : '返回'}}
                            </el-button>
                        </div>
                    </slot>
                </div>
            </el-row>

            <el-row>

                <el-row>
                    <el-col :span="3">
                        <div class="label">
                            记录编号
                        </div>
                    </el-col>
                    <el-col :span="9">
                        <div class="value margin-row">
                            {{ objData.media_id?objData.media_id:"-" }}
                        </div>
                    </el-col>
                    <el-col :span="3">
                        <div class="label">
                            记录时间
                        </div>
                    </el-col>
                    <el-col :span="9">
                        <div class="value margin-row">
                          {{
                            recordTime
                          }}
                        </div>
                    </el-col>
                </el-row>


                <el-row>
                    <el-col :span="3">
                        <div class="label">
                            执法地点
                        </div>
                    </el-col>
                    <el-col :span="9">
                        <div class="value margin-row pointer">
                            {{ objData.address?objData.address:"-" }}
                            <i class="blueFont el-icon-location" @click="showMapVisible=true"></i>
                        </div>
                    </el-col>
                    <el-col :span="3">
                        <div class="label">
                            拍摄时长
                        </div>
                    </el-col>
                    <el-col :span="9">
                        <div class="value margin-row">
                            {{ objData.video_period? this.formatSeconds(objData.video_period):"-" }}
                        </div>
                    </el-col>
                </el-row>


                <el-row>
                    <el-col :span="3">
                        <div class="label">
                            执法设备
                        </div>
                    </el-col>
                    <el-col :span="9">
                        <div class="value margin-row">
                            {{ objData.device_name?objData.device_name:"-" }}
                        </div>
                    </el-col>
                    <el-col :span="3">
                        <div class="label">
                            唯一标识
                        </div>
                    </el-col>
                    <el-col :span="9">
                        <div class="value margin-row">
                            {{ objData.device_index_code?objData.device_index_code:"-" }}
                        </div>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="3">
                        <div class="label">
                            执法机构
                        </div>
                    </el-col>
                    <el-col :span="9">
                        <div class="value margin-row">
                            {{ objData.org_name?objData.org_name:"-" }}
                        </div>
                    </el-col>
                    <el-col :span="3">
                        <div class="label">
                            使用人员
                        </div>
                    </el-col>
                    <el-col :span="9">
                        <div class="value margin-row">
                            {{ objData.use_person_name?objData.use_person_name:"-" }}
                        </div>
                    </el-col>
                </el-row>


                <el-row>
                    <el-col :span="3">
                        <div class="label">
                            任务关联
                        </div>
                    </el-col>
                    <el-col :span="21">
                        <div class="value margin-row">
                            <span v-if="objData.enfore_job_id">已关联</span>
                            <span v-else>未关联</span>
                        </div>
                    </el-col>
                </el-row>

            </el-row>

        </div>
        <div class="option" style="margin-top: 20px">

            <el-row>
                <el-row>
                    <div class="header">
                        <div class="title">
                            <span>|</span>
                            <span>任务信息</span>
                        </div>
                    </div>
                </el-row>
                <el-row>
                    <el-col :span="3">
                        <div class="label">
                            任务编号
                        </div>
                    </el-col>
                    <el-col :span="9">
                        <div class="value margin-row pointer" v-if="objData.enfore_job_id">
                            {{ objData.enforce_job.job_no }}
                            <span class="blueFont" @click="showJobDetail">[查看详情]</span>
                        </div>
                        <div class="value margin-row" v-else>
                            <span class="blueFont">-</span>
                        </div>
                    </el-col>
                    <el-col :span="3">
                        <div class="label">
                            被检查单位
                        </div>
                    </el-col>
                    <el-col :span="9">
                        <div class="value margin-row pointer" v-if="objData.enfore_job_id">
                            {{ objData.enforce_job.enforce_obj_name }}
                            <span class="blueFont" @click="showEnforceObjDetail">[查看详情]</span>
                        </div>
                        <div class="value margin-row" v-else>
                            <span class="blueFont">-</span>
                        </div>
                    </el-col>
                </el-row>
            </el-row>
        </div>

        <div class="option" style="margin-top: 20px">
            <el-row>
                <el-row>
                    <div class="header">
                        <div class="title">
                            <span>|</span>
                            <span>视频信息</span>
                        </div>
                    </div>
                </el-row>
                <el-row>
                    <video-show-video :id="objData.id" v-if="loadOk">

                    </video-show-video>
                </el-row>
            </el-row>
        </div>
        <el-dialog title="执法地点" :visible.sync="showMapVisible" append-to-body>
            <place-map v-if="showMapVisible" ref="map" :address.sync="objData.address"
                       :showTool="false"
                       @hidePlace="showMapVisible=false"></place-map>
        </el-dialog>
    </div>
</template>

<script>
    import KVTableV2 from '@/component/KVTableV2'
    import {jobMixin} from '@/mixin/job'
    import {resourceMixin} from '@/mixin/resource'
    import {formatDate} from '@/utils/tool'
    import {getVideoDetail} from '@/api/device'
    import OrgInfo from "@/component/OrgInfo";
    import PlaceMap from '@/component/PlaceMap.vue'
    import VideoShowVideo from "@/component/VideoShowVideo";
    import moment from 'moment';

    export default {
        components: {
            VideoShowVideo,
            PlaceMap
        },
        mixins: [jobMixin, resourceMixin],
        data() {
            return {
                basicInfo: [],
                showMapVisible: false,
                initOk: false,
                basicInfoV2: {
                    orgInfo: {
                        enforce_obj_id: '-',
                        enforce_obj_name: '-'
                    },
                    enforce_obj_address: '-',
                    enforce_org_name: '-',
                    executor_names: '-',
                    parseJobType: '-',
                    last_enforce_date: '-',
                    job_no: '-',
                    parseAuditStatusV2: '-',
                    notification_audit_user_name: '-',
                    approve_time: '-',
                    deadline_problems: {
                        report_content: '-',
                        job_result_content: '-',
                        job_desc: '-',

                    }
                },
                rightButton: {},
                recentDatas: [],
                orgVisible: false,
                staticDatas: [
                    {
                        icon: 'el-icon-time',
                        name: '检查耗时',
                        value: '5:40'
                    },
                    {
                        icon: 'el-icon-data-analysis',
                        name: '通勤耗时',
                        value: '5:40'
                    },
                    {
                        icon: 'el-icon-pie-chart',
                        name: '检查总数',
                        value: '15项'
                    },
                    {
                        icon: 'el-icon-document-delete',
                        name: '不合格数',
                        value: '1项'
                    },
                    {
                        icon: 'el-icon-document-checked',
                        name: '合格数',
                        value: '14项'
                    },
                    {
                        icon: 'el-icon-video-camera',
                        name: '执法视频',
                        value: '查看'
                    }
                ],
                nodes: [],
                addressMap: false,
                addressTitle: '',
                itemMap: {},
                objData: {
                    address: "",
                    create_time: "",
                    create_user_id: "",
                    device_id: 1,
                    device_name: "",
                    device_number: "",
                    enforce_job: {
                        enforce_obj_name: '',
                        enforce_obj_id: '',
                        job_type: ''
                    },
                    enfore_job_id: 1,
                    hik_device_id: "",
                    id: 1,
                },
                loadOk: false
            }
        },
        computed: {
            jobId() {
                return this.$route.query.id
            },
            recordTime() {
                return this.objData.video_begin_time ? moment(this.objData.video_begin_time).format("YYYY-MM-DD HH:mm:ss") : "-"
            }
        },
        mounted() {
            this.getJobDetail()
        },
        methods: {
            formatDate,
            showEnforceObjDetail() {
                this.$router.push({
                    path: '/resource/detail',
                    query: {
                        id: this.objData.enforce_job.enforce_obj_id
                    }
                })
            },
            showJobDetail() {
                let jobType = this.objData.enforce_job.job_type;
                //NORMAL, SPECIAL, REPORT, TOWNS, OTHER
                switch (jobType) {
                    case "NORMAL": {
                        this.$router.push({
                            path: '/monitor/random/detail',
                            query: {
                                id: this.objData.enforce_job.id
                            }
                        })
                        break;
                    }
                    case "SPECIAL": {
                        this.$router.push({
                            path: '/monitor/special/detail',
                            query: {
                                id: this.objData.enforce_job.id
                            }
                        })
                        break;
                    }
                    case "REPORT": {
                        this.$router.push({
                            path: '/monitor/report/detail',
                            query: {
                                id: this.objData.enforce_job.id
                            }
                        })
                        break;
                    }
                    case "TOWNS": {
                        this.$router.push({
                            path: '/monitor/hometown/detail',
                            query: {
                                id: this.objData.enforce_job.id
                            }
                        })
                        break;
                    }
                    case "OTHER": {
                        this.$router.push({
                            path: '/monitor/other/detail',
                            query: {
                                id: this.objData.enforce_job.id
                            }
                        })
                        break;
                    }
                }
                // this.$message.success(jobType);
            },
            getJobDetail() {
                getVideoDetail(this.jobId).then(res => {
                    this.objData = res;
                    this.loadOk = true;
                })
            },
            formatSeconds(value) {
                let result = parseInt(value)
                let h = Math.floor(result / 3600) < 10 ? '0' + Math.floor(result / 3600) : Math.floor(result / 3600)
                let m = Math.floor((result / 60 % 60)) < 10 ? '0' + Math.floor((result / 60 % 60)) : Math.floor((result / 60 % 60))
                let s = Math.floor((result % 60)) < 10 ? '0' + Math.floor((result % 60)) : Math.floor((result % 60))
                result = `${h}:${m}:${s}`;
                return result
            },
            getAppointmentFontColor(status) {
                if (status === 'NOT') {
                    return 'danger'
                }
                if (status === 'SENDING') {
                    return 'yellowFont'
                }
                return 'success'
            },
            getJobStatusFontColor(status) {
                if (status === 'REJECT') {
                    return 'danger'
                }
                if (status === 'DOING') {
                    return 'blueFont'
                }
                if (status === 'ARCHIVED') {
                    return 'success'
                }
                return 'yellowFont'
            },
            //查看被检查组织
            showOrg(id) {
                this.orgId = id;
                this.orgVisible = true;
                //this.$message.warning(id)
            },
            orgInfo(res) {
                //  console.log(res)
                if (res.enforce_obj && res.enforce_obj_name && res.enforce_obj_id) {
                    let data = new Array();
                    data.push(res.enforce_obj_id);
                    data.push(res.enforce_obj_name);
                    return data;
                }
                return '-';
            },
            generateBasicInfo(res) {
                const mainUser = res.executors && res.executors.length > 0 ? res.executors[0] : null;
                const secondUser = res.executors && res.executors.length > 1 ? res.executors[1] : null;
                //单位
                this.basicInfoV2.orgInfo.enforce_obj_id = res.enforce_obj_id || '-';
                this.basicInfoV2.orgInfo.enforce_obj_name = res.enforce_obj_name || '-';
                this.basicInfoV2.enforce_obj_address = res.enforce_obj && res.enforce_obj.enforce_obj_address || '-';

                this.basicInfoV2.enforce_org_name = res.enforce_org_name || '-';
                this.basicInfoV2.executor_names = res.executor_names || '-';
                this.basicInfoV2.parseJobType = this.parseJobType(res.job_type) || '-';
                this.basicInfoV2.last_enforce_date = this.formatDate(res.last_enforce_date) || '-';
                this.basicInfoV2.job_no = res.job_no || '-';
                this.basicInfoV2.parseAuditStatusV2 = this.parseAuditStatusV2(res.notification_audit_status) || '-';
                this.basicInfoV2.notification_audit_user_name = res.notification_audit_user_name || '-';
                this.basicInfoV2.approve_time = this.formatDate(res.approve_time, true) || '-';
                // this.basicInfoV2.deadline_problems = res.notification_audit_user_name || '-';


                this.basicInfo = [
                    {
                        label: '被检查单位：',
                        value: this.orgInfo(res),
                        type: 1
                    },
                    {
                        label: '单位地址：',
                        value: res.enforce_obj && res.enforce_obj.enforce_obj_address || '-',
                        type: 2
                    },
                    {
                        label: '执法机构：',
                        value: res.enforce_org_name,
                    },
                    {
                        label: '检查人员：',
                        value: res.executor_names,
                    },
                    {
                        label: '任务类型：',
                        value: this.parseJobType(res.job_type) || '-'
                    },
                    {
                        label: '检查时间：',
                        value: res.last_enforce_date || '-'
                    },
                    {
                        label: '任务编号：',
                        value: res.job_no || '-'
                    },
                    {
                        label: '审批状态：',
                        value: this.parseAuditStatusV2(res.notification_audit_status) || '-',
                        type: 4,
                        color: this.getJobStatusFontColor(res.notification_audit_status)
                    },
                    {
                        label: '审批人：',
                        value: res.notification_audit_user_name || '-'
                    },
                    {
                        label: '审批时间：',
                        value: formatDate(res.approve_time, true) || '-'
                    },
                    {
                        label: '限改问题：',
                        value: res.deadline_problems || '-',
                        row: true
                    },
                    {
                        label: '检查情况：',
                        value: res.job_result_remark || '-',
                        type: 8,
                        row: true
                    },
                ]
            },
            deadlineProblemsFormat(data) {
                // return list;
                let list = ['-'];
                // let html='';
                // list.forEach(item=>{
                //     html+=item+'&nbsp;&nbsp;&nbsp;'
                // })
                if (data && data.length > 0) {
                    list = data;
                }
                return data;
            },
            back() {
                this.$router.back()
            },
            showMap(address) {
                this.addressTitle = address
                this.addressMap = true
                this.$nextTick(() => {
                    // eslint-disable-next-line no-undef
                    const map = new AMap.Map('container', {
                        resizeEnable: true,
                        animateEnable: true,
                        zoom: 16
                    })
                    // eslint-disable-next-line no-undef
                    this.marker = new AMap.Marker({
                        map: map,
                        icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png',
                    })
                    // eslint-disable-next-line no-undef
                    AMap.plugin('AMap.PlaceSearch', () => {
                        // eslint-disable-next-line no-undef
                        let placeSearch = new AMap.PlaceSearch({
                            pageSize: 1, // 单页显示结果条数
                            pageIndex: 1, // 页码
                            extensions: 'all',
                        })
                        placeSearch.search(address, (status, result) => {
                            if (status === 'complete' && result.poiList.pois && result.poiList.pois.length > 0) {
                                let l = result.poiList.pois[0].location
                                // eslint-disable-next-line no-undef
                                this.marker.setPosition(new AMap.LngLat(l.lng, l.lat))
                                // eslint-disable-next-line no-undef
                                map.setCenter(new AMap.LngLat(l.lng, l.lat))
                            }
                        })
                    })
                })

            }
        }
    }
</script>

<style lang="scss" scoped>
    @import '@/styles/variables.scss';

    .option {
        padding: 16px;
        background-color: #FFFFFF;
        border-radius: 10px;

        .header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
        }

        .title {
            color: #000000;
            margin-bottom: 15px;

            & > span:first-child {
                color: $blueColor;
                font-weight: bolder;
                margin-right: 8px;
            }
        }
    }

    .table {
        padding: 15px 20px;
    }

    .label {
        background-color: #F7F8FA;
        border: 1px solid #E6E6E6;
        padding: 10px;
        text-align: right;
    }

    .label:nth-child(1) {
        margin-left: -1px;
    }

    .value {
        border: 1px solid #E6E6E6;
        padding: 10px;
        text-align: left;
        margin-left: -1px;
    }

    .margin-row {
        margin-top: 1px;
    }


    .el-row {
        width: 100% !important;
    }

    .imgdiv {
        width: 130px;
        height: 130px;
        position: relative;
        left: 70%;
        bottom: 145px;
        opacity: 0.5;
        border-radius: 50%;

        img {
            width: 130px;
            height: 130px;
        }
    }

    .mt {
        margin-top: 20px;
        padding-bottom: 20px;
    }

    .statistic {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .node {
        padding-bottom: 20px;

        .header {
            display: flex;
            justify-content: flex-start;
            align-items: center;

            .node-name {
                font-size: 16px;
                color: #343435;
                font-weight: bold;
            }

            .node-detail {
                margin-left: 15px;
                font-size: 13px;
                color: #888888;
                max-width: 600px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
        }
    }
</style>
