<template>
    <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">
                        {{ basicInfoV2.orgInfo.enforce_obj_name }}
                        <span class="blueFont" @click="showEnforceObjDetail">[查看详情]</span>
                    </div>
                </el-col>
                <el-col :span="3">
                    <div class="label">
                        单位地址
                    </div>
                </el-col>
                <el-col :span="9">
                    <div class="value margin-row">
                        {{ basicInfoV2.enforce_obj_address }}
                        <i class="blueFont el-icon-location" @click="showMapVisible=true"></i>
                    </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">
                        {{ basicInfoV2.enforce_org_name }}
                    </div>
                </el-col>
                <el-col :span="3">
                    <div class="label">
                        检查人员
                    </div>
                </el-col>
                <el-col :span="9">
                    <div class="value margin-row">
                        {{ basicInfoV2.executor_names }}
                    </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">
                        {{ basicInfoV2.parseJobType }}
                    </div>
                </el-col>
                <el-col :span="3">
                    <div class="label">
                        检查时间
                    </div>
                </el-col>
                <el-col :span="9">
                    <div class="value margin-row">
                        {{ basicInfoV2.start_time }}
                    </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">
                        {{ basicInfoV2.job_no }}
                    </div>
                </el-col>
                <el-col :span="3">
                    <div class="label">
                        审批状态
                    </div>
                </el-col>
                <el-col :span="9">
                    <div class="value margin-row">
                       <span :class="this.getJobStatusFontColor(basicInfoV2.parseAuditStatusV2)">
                        {{ basicInfoV2.parseAuditStatusV2 }}
                           </span>
                    </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">
                        {{ basicInfoV2.notification_audit_user_name }}
                    </div>
                </el-col>
                <el-col :span="3">
                    <div class="label">
                        审批时间
                    </div>
                </el-col>
                <el-col :span="9">
                    <div class="value margin-row">
                        {{ basicInfoV2.notification_audit_time }}
                    </div>
                </el-col>
            </el-row>

            <el-row type="flex">
                <el-col :span="3">
                    <div class="label" style="height:100px;line-height: 100px">
                        限改问题
                    </div>
                </el-col>
                <el-col :span="21">
                    <div class="value margin-row" style="height:100px;overflow-y: scroll"
                         v-if="this.objData.job_type=='OTHER'">
                        <p>
                            {{ this.objData.job_desc }}:
                        </p>
                        <p>
                            {{ this.objData.job_result_content }}
                        </p>
                    </div>
                    <div class="value margin-row" style="height:100px;overflow-y: scroll"
                         v-else-if="this.objData.job_type=='REPORT'">
                        <p>
                            {{ this.objData.report_content }}:
                        </p>
                        <p>
                            {{ this.objData.job_result_content }}
                        </p>
                    </div>
                    <div class="value margin-row" style="height:100px;overflow-y: scroll" v-else>
                        <span v-for="(item,index) in this.objData.approveDetails" :key="index">
                            <p>
                                {{ index+1 }}. {{ item.problem }}
                            </p>
                            <p>
                               {{ item.check_desc.toString() }}
                            </p>
                        </span>
                    </div>
                </el-col>
            </el-row>


        </el-row>

        <el-dialog title="单位地址" :visible.sync="showMapVisible" append-to-body>
            <place-map v-if="showMapVisible" ref="map" :address.sync="basicInfoV2.enforce_obj_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 {getApproveDetail, getOneJobStatistics} from '@/api/job'
    import OrgInfo from "@/component/OrgInfo";
    import PlaceMap from '@/component/PlaceMap.vue'

    export default {
        components: {
            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: '-',
                    notification_audit_time: '-',
                    start_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: {
                    job_type: ''
                }
            }
        },
        computed: {
            jobId() {
                return this.$route.query.id
            }
        },
        mounted() {
            this.getJobDetail()
        },
        methods: {
            formatDate,
            showEnforceObjDetail() {
                this.$router.push({
                    path: '/resource/detail',
                    query: {
                        id: this.objData.enforce_obj_id
                    }
                })
            },
            getJobDetail() {
                if (this.jobId) {
                    getApproveDetail(this.jobId).then(res => {
                        if (res) {
                            this.objData = res;
                            this.generateBasicInfo(res)
                            if (res.check_nodes) {
                                res.check_nodes.map(node => {
                                    if (node.items && node.items.length > 0) {
                                        const items = []
                                        node.items.map(item => {
                                            const obj = Object.assign({}, item)
                                            obj.item_id = item.id
                                            obj.checkResult = item.check_result === 1 ? '合格' : (item.check_result === 2 ? '不合格' : '不涉及')
                                            if (item.hanbook) {
                                                obj.enforce_class = item.hanbook.enforce_class
                                                obj.enforce_item = item.hanbook.enforce_item
                                                obj.enforce_method = item.hanbook.enforce_method
                                                obj.hanbook = undefined
                                            }
                                            if (item.item_type === '1' && item.item_content) {
                                                obj.enforce_class = '其它'
                                                obj.enforce_item = item.item_content
                                            }
                                            items.push(obj)
                                        })
                                        node.items = items
                                    }
                                })
                                this.nodes = res.check_nodes
                            }
                        }

                        getOneJobStatistics(this.jobId).then(result => {
                            console.log('result: ', 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.notification_audit_time = this.formatDate(res.notification_audit_time, true) || '-';
                this.basicInfoV2.start_time = this.formatDate(res.start_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.notification_audit_time, true) || '-'
                    },
                    {
                    label: '检查时间：',
                    value: formatDate(res.start_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>
