<template>
    <el-dialog custom-class="par-detail-dialog" v-model="visible" :destroy-on-close="true">
        <div class="detail-dialog-header">
            <img v-if="type === 'route'" src="~@/assets/images/patrolAndRescue/route.png" />
            <img v-else-if="type === 'video'" src="~@/assets/images/patrolAndRescue/video.png" />
            <span class="detail-dialog-title">{{ title }}</span>
        </div>
        <div class="detail-dialog-body">
            <el-table stripe :data="tableData" style="width: 100%" height="630" @row-click="handleRowClick">
                <el-table-column type="index" label="序号" width="60" align="center" />
                <el-table-column prop="roadName" label="所属路段" width="140" align="center" />
                <el-table-column prop="teamName" label="巡检队伍" min-width="120" align="center" />
                <el-table-column prop="startPatrolName" label="开始巡检站" min-width="120" align="center" />
                <el-table-column prop="endPatrolName" label="结束巡检站" min-width="120" align="center" />
                <el-table-column prop="planType" label="巡检类型" width="140" align="center">
                    <template #default="scope">
                        <span>{{xjlxxjrw.find(item => item.value == scope.row.planType)?.name}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="inspectUsersName" label="巡检人" width="140" align="center" show-overflow-tooltip />
                <el-table-column prop="taskStatus" label="巡检状态" width="140" align="center">
                    <template #default="scope">
                        <span>{{xczt.find(item => item.value == scope.row.taskStatus)?.name}}</span>
                    </template>
                </el-table-column>

            </el-table>
            <div class="detail-page-wrapper">
                <el-pagination v-model:current-page="queryData.pageBean.page"
                    v-model:page-size="queryData.pageBean.pageSize" popper-class="detail-page__popper"
                    :page-sizes="[10, 20, 50, 100]" background layout="total, sizes, prev, pager, next"
                    :total="queryData.pageBean.total" @size-change="handleSizeChange"
                    @current-change="handleCurrentChange" />
            </div>
        </div>
        <detail-dialog ref="detailDialog"></detail-dialog>
    </el-dialog>
</template>
<script>
import SectionTitle from '@/components/common/sectionTitle.vue'
import { getRoadPatrolList, getDictByCode } from "@/api/patrolAndRescue";
import detailDialog from './detailDialog.vue'
import moment from 'moment'
export default {
    name: 'recordDialog',
    components: { SectionTitle, detailDialog },
    data() {
        return {
            visible: false,
            title: '道路巡查',
            type: 'route',
            xjlxxjrw: [], // 巡检类型xjlx-xjrw
            xczt: [], // 巡检状态xc_zt
            tableData: [],
            queryData: {
                "pageBean": {
                    "page": 1,
                    "pageSize": 10,
                    "showTotal": true,
                    "total": 0,
                },
                "querys": [
                    {
                        "group": "main",
                        "operation": "BETWEEN",
                        "parentGroup": "",
                        "property": "t.CREATE_TIME_",
                        "relation": "AND",
                        "value": [moment().format('YYYY-MM-DD 00:00:00'), moment().format('YYYY-MM-DD 23:59:59')]
                        //"value": ""//[moment("2025-03-15").format('YYYY-MM-DD 00:00:00'), moment("2025-03-15").format('YYYY-MM-DD 23:59:59')]
                    },
                    {
                        "group": "main",
                        "operation": "IN",
                        "parentGroup": "",
                        "property": "t.TASK_STATUS_",
                        "relation": "AND",
                        "value": [2, 3, 4, 5]
                    }
                ],
                "sorter": [
                    {
                        "direction": "DESC",
                        "property": "t.CREATE_TIME_"
                    }
                ]
            }
        }
    },
    methods: {
        show(type) {
            this.getDict()
            this.type = type
            this.title = type === 'route' ? '道路巡查' : '视频巡检'
            this.getData()
            this.visible = true
        },
        getDict() {
            const formData = new FormData()
            formData.append('codes', 'xjlx-xjrw,xc_zt')
            getDictByCode(formData)
                .then((res) => {
                    if (res) {
                        this.xjlxxjrw = res[`xjlx-xjrw`] || []
                        this.xczt = res.xc_zt || []
                    }
                })
        },
        getData() {
            if (this.type === 'route') {
                getRoadPatrolList(this.queryData).then(res => {
                    this.tableData = res.rows || []
                    this.queryData.pageBean.total = res.total
                    this.queryData.pageBean.page = res.page
                    this.queryData.pageBean.pageSize = res.pageSize
                })
            } else {
                getVideoPatrolList().then(res => {
                    this.tableData = res.data
                })
            }
        },
        handleRowClick(row) {
            this.$nextTick(() => {
                this.$refs.detailDialog.show(row)
            })
        },
        handleSizeChange(val) {
            this.queryData.pageBean.pageSize = val
            this.getData()
        },
        handleCurrentChange(val) {
            this.queryData.pageBean.page = val
            this.getData()
        },
        hide() {
            this.visible = false
        },
    },
}
</script>
<style lang="scss">
.par-detail-dialog.el-dialog {
    margin-top: 8vh !important;
    width: 1400px !important;
    height: 800px !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    background: url('@/assets/images/layout/common/marker-dilog-bg.png') no-repeat;
    background-size: cover;
    background-size: 100% 100%;

    .el-dialog__header {
        padding: 0 !important;
    }

    .el-dialog__headerbtn {
        top: 10px;
        right: 0px;
        z-index: 99;
    }

    .el-icon-close:before {
        font-size: 20px !important;
        color: #fff;
    }

    .el-dialog__body {
        padding: 0 20px 20px 20px !important;
        width: 100%;
        height: 100%;
        position: relative;
        overflow: hidden;
        box-sizing: border-box;
    }

    .detail-dialog-header {
        width: 240px;
        height: 60px;
        margin-left: 20px;
        display: flex;
        align-items: center;
        overflow: hidden;

        img {
            width: 18px;
            height: 18px;
            margin-right: 10px;
        }

        .detail-dialog-title {
            font-weight: 700;
            font-size: 18px;
            color: #FFFFFF;
        }
    }

    .detail-dialog-body {
        height: 720px;
        overflow-x: hidden;
        overflow-y: auto;
        margin-top: 20px;

        .el-table {
            background-color: transparent !important;

        }

        .el-table--border::after,
        .el-table--group::after,
        .el-table::before {
            background-color: transparent !important;
        }

        .el-table th {
            background-color: #024288 !important;
            font-weight: 700;
            font-size: 14px;
            color: #FFFFFF;
            line-height: 18px;
        }

        .el-table th.is-leaf {
            border-bottom: none;
        }

        .el-table tr {
            background-color: transparent !important;
            font-weight: 400;
            font-size: 14px;
            color: #FFFFFF;
            line-height: 18px;
        }

        .el-table td {
            border-bottom: none;
        }

        .el-table--striped .el-table__body tr.el-table__row--striped td {
            background: #08366c !important;
        }

        .el-table--enable-row-hover .el-table__body tr:hover>td {
            background-color: #0d4483 !important;
        }
    }

    .detail-page-wrapper {
        width: 100%;
        text-align: right;
        margin-top: 12px;

        .el-pagination__total {
            color: #CCE6FF !important;
        }

        .el-pagination.is-background .btn-next,
        .el-pagination.is-background .btn-prev,
        .el-pagination.is-background .el-pager li {
            color: #CCE6FF !important;
            background-color: transparent !important;
        }

        .el-pagination.is-background .el-pager li:not(.disabled).active {
            background-color: #00adff !important;
            color: #fff !important;
        }

        .ellipsis {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    }
}

.detail-page__popper.el-select__popper.el-popper {
    background-color: #00285a !important;

    .el-select-dropdown__item {
        color: #fff;
    }
}
</style>
