<template>
    <div>
        <div v-if="videoUrl">
            <custom-player
                :videoUrl="videoUrl"
                :videoImg="videoImg"
                @close="videoUrl = ''"
            />
        </div>

        <LHeader :text="text"></LHeader>
        <!-- 内容列表 -->
        <div class="con-list">
            <div class="cell-wrap">
                <p>隐患上报</p>
                <van-cell-group inset>
                    <van-row gutter="">
                        <van-col span="6"
                            ><span class="field-title">隐患单编号</span
                            >：</van-col
                        >
                        <van-col span="18">{{ hdReport.id }}</van-col>
                    </van-row>
                    <van-row gutter="">
                        <van-col span="6"
                            ><span class="field-title"
                                >所属项目：</span
                            ></van-col
                        >
                        <van-col span="18">{{ hdReport.proId }}</van-col>
                    </van-row>
                    <van-row gutter="">
                        <van-col span="6"
                            ><span class="field-title"
                                >适用范围：</span
                            ></van-col
                        >
                        <van-col span="18">{{ hdReport.hdRange }}</van-col>
                    </van-row>
                    <van-row gutter="">
                        <van-col span="6"
                            ><span class="field-title"
                                >隐患类型：</span
                            ></van-col
                        >
                        <van-col span="18">{{ hdReport.hdType }}</van-col>
                    </van-row>

                    <van-row gutter="">
                        <van-col span="6"
                            ><span class="field-title"
                                >隐患清单编号：</span
                            ></van-col
                        >
                        <van-col span="18">{{ hdReport.hdProjectId }}</van-col>
                    </van-row>
                    <van-row gutter="">
                        <van-col span="6"
                            ><span class="field-title"
                                >隐患级别：</span
                            ></van-col
                        >
                        <van-col span="18">{{ hdReport.hdLev }}</van-col>
                    </van-row>
                    <van-row gutter="">
                        <van-col span="6"
                            ><span class="field-title"
                                >隐患项目名称：</span
                            ></van-col
                        >
                        <van-col span="18">{{
                            hdReport.hdProjectName
                        }}</van-col>
                    </van-row>

                    <!-- hdProjectId -->

                    <!-- 隐藏的字段 -->
                    <div v-show="reportOpen">
                        <van-row gutter="">
                            <van-col span="6"
                                ><span class="field-title"
                                    >隐患发现时间：</span
                                ></van-col
                            >
                            <van-col span="18">{{
                                hdReport.hdDiscoveryTime
                            }}</van-col>
                        </van-row>
                        <van-row gutter="">
                            <van-col span="6"
                                ><span class="field-title"
                                    >风险源：</span
                                ></van-col
                            >
                            <van-col span="18">{{
                                hdReport.dangerSource
                            }}</van-col>
                        </van-row>
                        <van-row gutter="">
                            <van-col span="6"
                                ><span class="field-title"
                                    >风险源因素：</span
                                ></van-col
                            >
                            <van-col span="18">{{ hdReport.dangerId }}</van-col>
                        </van-row>

                        <van-row gutter="">
                            <van-col span="6"
                                ><span class="field-title"
                                    >检查部位：</span
                                ></van-col
                            >
                            <van-col span="18">{{
                                hdReport.hdPosition
                            }}</van-col>
                        </van-row>
                        <van-row gutter="">
                            <van-col span="6"
                                ><span class="field-title"
                                    >隐患描述：</span
                                ></van-col
                            >
                            <van-col span="18">{{
                                hdReport.hdDescribe
                            }}</van-col>
                        </van-row>

                        <van-row gutter="" v-if="hdReport.hdPictureList">
                            <van-col span="6"
                                ><span class="field-title"
                                    >隐患照片：</span
                                ></van-col
                            >
                            <van-col span="18">
                                <div
                                    class="detail_pic"
                                    v-for="(
                                        item, index
                                    ) in hdReport.hdPictureList"
                                    :key="index"
                                >
                                    <van-image
                                        radius="6px"
                                        width="100"
                                        height="100"
                                        :src="item.filePath"
                                        @click="imagePreview(item.filePath)"
                                    />
                                </div>
                            </van-col>
                        </van-row>

                        <van-row gutter="">
                            <van-col span="6"
                                ><span class="field-title"
                                    >隐患视频：</span
                                ></van-col
                            >
                            <van-col span="18">
                                <div
                                    class="detail_video"
                                    v-for="(
                                        item, index
                                    ) in hdReport.hdVideoList"
                                    :key="index"
                                    style="position: relative"
                                >
                                    <van-icon
                                        name="play"
                                        size="1rem"
                                        color="#fff"
                                        style="
                                            border: solid 3px #fff;
                                            position: absolute;
                                            top: 50%;
                                            left: 50%;
                                            transform: translate(-50%, -50%);
                                        "
                                    />
                                    <video
                                        :src="item.filePath"
                                        @click="videoUrl = item.filePath"
                                    />
                                </div>
                            </van-col>
                        </van-row>
                        <van-row gutter="" v-if="hdReport.hdExpirationTime">
                            <van-col span="6"
                                ><span class="field-title"
                                    >隐患到期时间：</span
                                ></van-col
                            >
                            <van-col span="18">{{
                                hdReport.hdExpirationTime
                            }}</van-col>
                        </van-row>
                        <van-row gutter="" v-if="hdReport.rectificationUser">
                            <van-col span="6"
                                ><span class="field-title"
                                    >隐患整改人：</span
                                ></van-col
                            >
                            <van-col span="18">{{
                                hdReport.rectificationUser
                            }}</van-col>
                        </van-row>
                    </div>
                </van-cell-group>
                <!-- 展开 -->
                <div class="more" @click="reportReverse">
                    {{ reportOpenText }}
                </div>
            </div>
            <!-- {{hdConfirm}} -->
            <div class="journal-wrap" v-if="hdConfirm.length > 0">
                <p>隐患认定</p>
                <van-cell-group inset>
                    <van-steps direction="vertical" :active="99999">
                        <van-step
                            v-for="(item, index) in hdConfirm"
                            :key="index"
                        >
                            <div class="step-wrap">
                                <van-row>
                                    <van-col span="24"
                                        ><div class="info-title">
                                            隐患认定
                                        </div></van-col
                                    >
                                </van-row>
                                <van-row gutter="">
                                    <van-col span="9"
                                        ><span class="field-title"
                                            >隐患确认信息：</span
                                        ></van-col
                                    >
                                    <van-col span="15">{{
                                        item.confirmResult == 0
                                            ? "退回"
                                            : "通过"
                                    }}</van-col>
                                </van-row>
                                <van-row
                                    gutter=""
                                    v-if="item.rectificationUser"
                                >
                                    <van-col span="7"
                                        ><span class="field-title"
                                            >隐患整改人：</span
                                        ></van-col
                                    >
                                    <van-col span="17">{{
                                        item.rectificationUser
                                    }}</van-col>
                                </van-row>
                                <van-row
                                    gutter=""
                                    v-if="item.rectificationReview"
                                >
                                    <van-col span="7"
                                        ><span class="field-title"
                                            >隐患复查人：</span
                                        ></van-col
                                    >
                                    <van-col span="17">{{
                                        item.rectificationReview
                                    }}</van-col>
                                </van-row>
                                <van-row gutter="" v-if="item.endTime">
                                    <van-col span="9"
                                        ><span class="field-title"
                                            >整改截止时间：</span
                                        ></van-col
                                    >
                                    <van-col span="15">{{
                                        item.endTime
                                    }}</van-col>
                                </van-row>

                                <van-row gutter="">
                                    <van-col span="7"
                                        ><span class="field-title"
                                            >认定意见：</span
                                        ></van-col
                                    >
                                    <van-col span="17">{{
                                        item.confirmOpinion
                                    }}</van-col>
                                </van-row>
                            </div>
                        </van-step>
                    </van-steps>
                </van-cell-group>
                <div class="more" @click="confirmReverse">
                    {{ confirmOpenText }}
                </div>
            </div>
            <div class="journal-wrap" v-if="hdMajorApproveList.length > 0">
                <p>审批信息</p>
                <van-cell-group inset>
                    <van-steps direction="vertical" :active="99999">
                        <van-step
                            v-for="(item, index) in hdMajorApproveList"
                            :key="index"
                        >
                            <div class="step-wrap">
                                <van-row>
                                    <van-col span="24"
                                        ><div class="info-title">
                                            审批信息
                                        </div></van-col
                                    >
                                </van-row>
                                <van-row>
                                    <van-col span="6"
                                        ><span class="field-title"
                                            >审批人：</span
                                        ></van-col
                                    >
                                    <van-col span="18">{{
                                        item.userName
                                    }}</van-col>
                                </van-row>
                                <van-row>
                                    <van-col span="6"
                                        ><span class="field-title"
                                            >结果：</span
                                        ></van-col
                                    >
                                    <van-col span="18">{{
                                        item.isResult == 1 ? "通过" : "退回"
                                    }}</van-col>
                                </van-row>
                                <van-row>
                                    <van-col span="6"
                                        ><span class="field-title"
                                            >部门：</span
                                        ></van-col
                                    >
                                    <van-col span="18">{{
                                        item.deptName
                                    }}</van-col>
                                </van-row>
                                <van-row>
                                    <van-col span="6"
                                        ><span class="field-title"
                                            >时间：</span
                                        ></van-col
                                    >
                                    <van-col span="18">{{
                                        item.createTime
                                    }}</van-col>
                                </van-row>
                                <van-row v-if="item.thinkHdLev">
                                    <van-col span="9"
                                        ><span class="field-title"
                                            >认定隐患级别：</span
                                        ></van-col
                                    >
                                    <van-col
                                        span="10
                  "
                                        >{{ item.thinkHdLev }}</van-col
                                    >
                                </van-row>
                                <van-row v-if="item.details">
                                    <van-col span="8"
                                        ><span class="field-title"
                                            >审批意见：</span
                                        ></van-col
                                    >
                                    <van-col
                                        span="16
                  "
                                        >{{ item.details }}</van-col
                                    >
                                </van-row>
                            </div>
                        </van-step>
                    </van-steps>
                </van-cell-group>
                <!-- 展开 -->
                <div
                    class="more"
                    @click="majorReverse"
                    v-show="hdMajorApproveList.length > 0"
                >
                    {{ majorOpenText }}
                </div>
            </div>
            <div class="change-wrap" v-if="hdRectificationList.length > 0">
                <p>隐患整改</p>
                <van-cell-group
                    inset
                    v-for="(item, index) in hdRectificationList"
                    :key="index"
                >
                    <van-row gutter="">
                        <van-col span="6"
                            ><span class="field-title"
                                >整改详情描述：</span
                            ></van-col
                        >
                        <van-col span="18">{{ item.details }}</van-col>
                    </van-row>
                    <van-row gutter="">
                        <van-col span="6"
                            ><span class="field-title"
                                >隐患照片：</span
                            ></van-col
                        >
                        <van-col span="18">
                            <div
                                class="detail_pic"
                                v-for="(itemTwo, index) in item.hdPictureList"
                                :key="index"
                            >
                                <van-image
                                    radius="0.16rem"
                                    width="100"
                                    height="100"
                                    :src="itemTwo.filePath"
                                    @click="imagePreview(itemTwo.filePath)"
                                />
                            </div>
                        </van-col>
                    </van-row>
                    <van-row gutter="" v-if="item.hdVideoList">
                        <van-col span="6"
                            ><span class="field-title"
                                >隐患视频：</span
                            ></van-col
                        >
                        <van-col span="18">
                            <div
                                class="detail_video"
                                v-for="(itemTwo, index) in item.hdVideoList"
                                :key="index"
                                 style="position: relative"
                            >
                                <van-icon
                                        name="play"
                                        size="1rem"
                                        color="#fff"
                                        style="
                                            border: solid 3px #fff;
                                            position: absolute;
                                            top: 50%;
                                            left: 50%;
                                            transform: translate(-50%, -50%);
                                        "
                                    />
                                <video
                                    :src="itemTwo.filePath"
                                    @click="videoUrl = itemTwo.filePath"
                                ></video>
                            </div>
                        </van-col>
                    </van-row>
                    <van-row gutter="">
                        <van-col span="6"
                            ><span class="field-title"
                                >创建时间：</span
                            ></van-col
                        >
                        <van-col span="18">{{ item.creatTime }}</van-col>
                    </van-row>
                </van-cell-group>
            </div>

            <div class="review-wrap" v-if="hdReviewList.length > 0">
                <p>整改复查</p>
                <van-cell-group
                    inset
                    v-for="(item, index) in hdReviewList"
                    :key="index"
                >
                    <van-row gutter="">
                        <van-col span="6">
                            <span class="field-title"> 复查结果 </span>
                        </van-col>
                        <van-col span="18">{{
                            item.reviewResult == 1 ? "合格" : "不合格"
                        }}</van-col>
                    </van-row>
                    <van-row gutter="" v-if="item.reviewDetails">
                        <van-col span="6"
                            ><span class="field-title">
                                {{
                                    item.reviewResult == 1
                                        ? "复查结论："
                                        : " 退回原因："
                                }}
                            </span></van-col
                        >
                        <van-col span="18">{{ item.reviewDetails }}</van-col>
                    </van-row>
                    <van-row gutter="" v-if="item.hdPictureList['length']">
                        <van-col span="6"
                            ><span class="field-title"
                                >复查照片：</span
                            ></van-col
                        >
                        <van-col span="18">
                            <div
                                class="detail_pic"
                                v-for="(itemTwo, index) in item.hdPictureList"
                                :key="index"
                            >
                                <van-image
                                    radius="0.16rem"
                                    width="100"
                                    height="100"
                                    :src="itemTwo.filePath"
                                    @click="imagePreview(itemTwo.filePath)"
                                />
                            </div>
                        </van-col>
                    </van-row>
                </van-cell-group>
            </div>

            <div class="journal-wrap">
                <p>日志信息</p>
                <van-cell-group inset>
                    <van-steps
                        direction="vertical"
                        :active="99999"
                        v-if="hdLogList.length > 0"
                    >
                        <van-step
                            v-for="(item, index) in hdLogList"
                            :key="index"
                        >
                            <div class="step-wrap">
                                <van-row>
                                    <van-col span="24"
                                        ><div class="info-title">
                                            {{ item.createTime }}
                                        </div></van-col
                                    >
                                </van-row>
                                <van-row>
                                    <van-col span="6"
                                        ><span class="field-title"
                                            >操作人：</span
                                        ></van-col
                                    >
                                    <van-col span="18">{{
                                        item.userName
                                    }}</van-col>
                                </van-row>
                                <van-row>
                                    <van-col span="6"
                                        ><span class="field-title"
                                            >节点：</span
                                        ></van-col
                                    >
                                    <van-col span="18">{{
                                        item.logNode
                                    }}</van-col>
                                </van-row>
                                <van-row>
                                    <van-col span="6"
                                        ><span class="field-title"
                                            >结果：</span
                                        ></van-col
                                    >
                                    <van-col span="18">{{
                                        item.logResult
                                    }}</van-col>
                                </van-row>
                                <van-row>
                                    <van-col span="6"
                                        ><span class="field-title"
                                            >部门：</span
                                        ></van-col
                                    >
                                    <van-col span="18">{{
                                        item.deptName
                                    }}</van-col>
                                </van-row>
                            </div>
                        </van-step>
                    </van-steps>
                    <div
                        style="text-align: center"
                        v-if="hdLogList.length == 0"
                    >
                        暂无数据
                    </div>
                </van-cell-group>
                <!-- 展开 -->
                <div
                    class="more"
                    @click="journalReverse"
                    v-show="hdLogList.length > 0"
                >
                    {{ journalOpenText }}
                </div>
            </div>

            <div class="supervise-wrap">
                <p>督办信息</p>
                <van-cell-group inset>
                    <van-steps
                        direction="vertical"
                        :active="99999"
                        v-if="instructionsList.length > 0"
                    >
                        <van-step
                            v-for="(item, index) in instructionsList"
                            :key="index"
                        >
                            <div class="step-wrap">
                                <van-row>
                                    <van-col span="24"
                                        ><div class="info-title">
                                            督办信息
                                        </div></van-col
                                    >
                                </van-row>
                                <van-row>
                                    <van-col span="6"
                                        ><span class="field-title"
                                            >督办人：</span
                                        ></van-col
                                    >
                                    <van-col span="18">{{
                                        item.userName
                                    }}</van-col>
                                </van-row>
                                <van-row>
                                    <van-col span="6"
                                        ><span class="field-title"
                                            >时间：</span
                                        ></van-col
                                    >
                                    <van-col span="18">{{
                                        item.createTime
                                    }}</van-col>
                                </van-row>
                                <van-row>
                                    <van-col span="6"
                                        ><span class="field-title"
                                            >部门：</span
                                        ></van-col
                                    >
                                    <van-col span="18">{{
                                        item.deptName
                                    }}</van-col>
                                </van-row>
                                <van-row>
                                    <van-col span="6"
                                        ><span class="field-title"
                                            >结果：</span
                                        ></van-col
                                    >
                                    <van-col span="18">{{
                                        item.instructionsContent
                                    }}</van-col>
                                </van-row>
                            </div>
                        </van-step>
                    </van-steps>

                    <div
                        style="text-align: center"
                        v-if="instructionsList.length == 0"
                    >
                        暂无数据
                    </div>
                </van-cell-group>
                <!-- 展开 -->
                <div
                    class="more"
                    @click="superviseReverse"
                    v-show="instructionsList.length > 0"
                >
                    {{ superviseOpenText }}
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import LHeader from "@/components/header.vue";
import { getFun, postFun } from "@/service/table.js";
import { ImagePreview } from "vant";
import { standBookDetail, deal } from "@/service/danger";
import customPlayer from "@/components/video";
export default {
    components: {
        LHeader,
        customPlayer,
    },
    data() {
        return {
            videoImg: "12",
            // 视屏播放
            videoUrl: "",
            id: "",
            text: "隐患详情",
            reportOpen: false,
            reportOpenText: "展开 ▼",
            journalOpen: false,
            journalOpenText: "展开 ▼",
            superviseOpen: false,
            superviseOpenText: "展开 ▼",
            confirmOpen: false,
            confirmOpenText: "展开 ▼",
            majorOpen: false,
            majorOpenText: "展开 ▼",

            hdReport: "",
            hdConfirm: [],
            hdMajorApproveList: [], // 重大隐患审批
            beifenhdMajorList: [],
            hdRectificationList: [],
            hdReviewList: [],
            hdLogList: [],
            beifenhdLogList: [],
            instructionsList: [],
            beifeninstructionsList: [],
        };
    },
    created() {
        if (this.$route.params.detailTitle) {
            this.text = this.$route.params.detailTitle;
        }
        this.id = this.$route.params.id;
        if (this.id) {
            this.postDetail();
        }
    },
    methods: {
        imagePreview(item) {
            ImagePreview({ closeable: true, images: [item] });
        },
        // 请求台账信息
        postDetail() {
            this.$toast.loading({
                message: "加载中...",
                forbidClick: true,
                loadingType: "spinner",
                duration: 0,
            });
            postFun(`/hdreport/hdDetailsApp/${this.id}`)
                .then((res) => {
                    this.$toast.clear();
                    this.hdReport = res.data.hdReport;
                    this.hdLogListAll = res.data.hdConfirm;
                    this.hdConfirm = this.hdLogListAll.slice(-1);
                    this.hdRectificationList = res.data.hdRectificationList;
                    this.hdReviewList = res.data.hdReviewList;
                    this.beifenhdMajorList = res.data.hdMajorApproveList;
                    this.hdMajorApproveList = this.beifenhdMajorList.slice(-1);
                    this.beifenhdLogList = res.data.hdLogList;
                    this.hdLogList = this.beifenhdLogList.slice(-1);
                    this.beifeninstructionsList = res.data.instructionsList;
                    this.instructionsList =
                        this.beifeninstructionsList.slice(-1);
                })
                .catch((err) => {
                    console.log(err);
                    this.$toast.clear();
                    this.$toast.fail("加载失败,请稍后再试");
                });
        },

        // 上报信息显示或隐藏
        reportReverse() {
            this.reportOpen = !this.reportOpen;
            if (this.reportOpen) {
                this.reportOpenText = "收起 ▲";
            } else {
                this.reportOpenText = "展开 ▼";
            }
        },
        // 隐患认定显示或隐藏
        confirmReverse() {
            this.confirmOpen = !this.confirmOpen;
            if (this.confirmOpen) {
                //   显示所有数据
                this.confirmOpenText = "收起 ▲";
                // 显示所有数据
                this.hdConfirm = this.hdLogListAll;
            } else {
                this.confirmOpenText = "展开 ▼";
                // 只显示第一个数据
                this.hdConfirm = this.hdLogListAll.slice(-1);
            }
        },
        // 重大隐患信息显示或隐藏
        majorReverse() {
            this.majorOpen = !this.majorOpen;
            if (this.majorOpen) {
                //   显示所有数据
                this.majorOpenText = "收起 ▲";
                // 显示所有数据
                this.hdMajorApproveList = this.beifenhdMajorList;
            } else {
                this.majorOpenText = "展开 ▼";
                // 只显示第一个数据
                this.hdMajorApproveList = this.beifenhdMajorList.slice(-1);
            }
        },

        // 日志信息显示或隐藏
        journalReverse() {
            this.journalOpen = !this.journalOpen;
            if (this.journalOpen) {
                //   显示所有数据
                this.journalOpenText = "收起 ▲";
                // 显示所有数据
                this.hdLogList = this.beifenhdLogList;
            } else {
                this.journalOpenText = "展开 ▼";
                // 只显示第一个数据
                this.hdLogList = this.beifenhdLogList.slice(-1);
            }
        },
        // 督办信息显示或隐藏
        superviseReverse() {
            this.superviseOpen = !this.superviseOpen;
            if (this.superviseOpen) {
                //   显示所有数据
                this.superviseOpenText = "收起 ▲";
                this.instructionsList = this.beifeninstructionsList;
            } else {
                //   只渲染一条数据
                this.superviseOpenText = "展开 ▼";
                this.instructionsList = this.beifeninstructionsList.slice(-1);
            }
        },
    },
    beforeDestroy(){
        this.videoUrl='';
    }
};
</script>
<style lang="less" scoped>
/* @import url(); 引入css类 */
.con-list {
    padding: 10px 10px 0.533333rem;
    background-color: #f0f1f5;
    .cell-wrap {
        position: relative;
    }
    p {
        font-size: 0.4rem;
        font-weight: none;
        padding-left: 0.16rem;
        margin: 0.186667rem 0;
        color: #7f7f7f;
    }
    .van-cell-group--inset {
        margin: 0;
        margin-bottom: 10px;
        padding: 10px;
        font-size: 13px;
        position: relative;
        .van-row {
            margin-bottom: 0.133333rem;
            line-height: 0.64rem;
        }
    }
    .confirm-wrap {
        position: relative;
    }
    .journal-wrap {
        position: relative;
    }
    .supervise-wrap {
        position: relative;
    }
    .info-title {
        color: #2980f7;
        font-weight: none;
    }
    .field-title {
        color: black;
        font-weight: none;
    }
    .more {
        position: absolute;
        bottom: 0.32rem;
        right: 15px;
        color: #2a80f7;
        font-weight: none;
        z-index: 99;
    }
    .detail_pic {
        margin: 0 0.266667rem 0.266667rem 0;
        height: 100px !important;
        width: 100px !important;
        float: left;
        border-radius: 6px;
        overflow: hidden;
        box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
    }
    .detail_video {
        width: 2.666667rem;
        height: 2.666667rem;
        margin:0 0.266667rem 0.266667rem 0;
        float: left;
        overflow: hidden;
        box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
        border-radius: 6px;
        overflow: hidden;
       
    }
}

// 调整播放器样式
.video-js .vjs-icon-placeholder {
    width: 100%;
    height: 100%;
    overflow: hidden;
    //  display: block;
}
.vjs_video_1251-dimensions.vjs-fluid {
    padding-top: 4.25%;
}
</style>
