<template>
    <el-container>
        <el-header class="panel_title">
            <div class="left-panel">
                厂外运输
            </div>
            <div class="right-panel">
                <!-- <div class="backMap" @click="backtoMap">
                    切换地图
                    <el-icon>
                        <Switch />
                    </el-icon>
                </div> -->
                <el-button type="primary" @click="backtoMap"> 返回地图 </el-button>
            </div>
        </el-header>
        <el-main class="nopadding">
            <el-container>
                <el-header class="searchWrap">
                    <div class="left-panel">
                        <div style="font-size: 1.8vh;">
                            车辆进出次数：<span class="totalNumber">{{ count }}</span>
                        </div>
                    </div>

                    <div class="right-panel">
                        <el-date-picker v-model="timeRange" type="datetimerange" range-separator="至"
                            start-placeholder="开始时间" end-placeholder="结束时间" @change="handleQuery" style="width: 100%"
                            clearable />
                        <el-select v-model="query.type" placeholder="车辆类型" clearable @change="handleQuery">
                            <el-option v-for="item in typeOptions" :key="item.id" :label="item.name" :value="item.id">
                            </el-option>
                        </el-select>
                        <el-input :input-style="searchInputStyle" style="width:12vw;margin:0 5px" v-model="query.search"
                            placeholder="车牌号"></el-input>
                        <el-button type="primary" icon="el-icon-search" @click="handleQuery"></el-button>
                    </div>
                </el-header>
                <el-main>
                    <scTable ref="table" :data="data" :params="params" :query="query" size="large" style=""
                        @row-click="rowClick" @dataChange="updateCount">
                        <el-table-column prop="index" label="序号"></el-table-column>
                        <el-table-column prop="bcrkbh" label="出入口编号"></el-table-column>
                        <el-table-column prop="dzbh" label="道闸编号"></el-table-column>
                        <el-table-column prop="dtgfs" label="抬杆方式"></el-table-column>
                        <el-table-column prop="jcsj" label="进厂时间"></el-table-column>
                        <el-table-column prop="ccsj" label="出厂时间"></el-table-column>
                        <el-table-column prop="gcllx" label="车俩类型"></el-table-column>
                        <el-table-column prop="hclys" label="车辆颜色"></el-table-column>
                        <el-table-column prop="cph" label="车牌号"></el-table-column>
                        <el-table-column prop="zcdjsj" label="注册登记日期"></el-table-column>
                        <el-table-column prop="lclppxh" label="车辆品牌型号"></el-table-column>
                        <el-table-column prop="fdjhm" label="发动机号码"></el-table-column>

                    </scTable>
					<el-dialog width="650px" style="border-color: var(--el-border-color-light);
					background: rgb(4, 50, 83);
                    background-color: rgb(4, 50, 83);
                    box-shadow: inset 0px 0px 30px 15px rgb(7, 79, 109)" v-model="dialogFormVisible" title="车辆运输台账详情" >
						<el-descriptions :column="3" width="600px">
							<el-descriptions-item label="出入口编号">{{ ysdata.crkbh }}</el-descriptions-item>
							<el-descriptions-item label="道闸编号">{{ ysdata.dzbh }}</el-descriptions-item>
							<el-descriptions-item label="抬杆方式">{{ ysdata.tgfs }}</el-descriptions-item>
							<el-descriptions-item label="进厂时间">{{ ysdata.jcsj }}</el-descriptions-item>
							<el-descriptions-item label="出厂时间">{{ ysdata.ccsj }}</el-descriptions-item>
							<el-descriptions-item label="车辆类型">{{ ysdata.cllx }}</el-descriptions-item>
							<el-descriptions-item label="车牌颜色">{{ ysdata.clys }}</el-descriptions-item>
							<el-descriptions-item label="车牌号">{{ ysdata.cph }}</el-descriptions-item>
							<el-descriptions-item label="注册登记日期">{{ ysdata.zcdjsj }}</el-descriptions-item>
							<el-descriptions-item label="车辆识别代码（VIN）">{{ ysdata.cpsbdm }}</el-descriptions-item>
							<el-descriptions-item label="车辆品牌型号">{{ ysdata.clppxh }}</el-descriptions-item>
							<el-descriptions-item label="发动机号码">{{ ysdata.fdjhm }}</el-descriptions-item>
							<el-descriptions-item label="燃料类型">{{ ysdata.rllx }}</el-descriptions-item>
							<el-descriptions-item label="排放阶段">{{ ysdata.pfjd }}</el-descriptions-item>
							<el-descriptions-item label="使用性质">{{ ysdata.syxz }}</el-descriptions-item>
							<el-descriptions-item label="联网状态">{{ ysdata.lwzt }}</el-descriptions-item>
							<el-descriptions-item label="进厂运输货物名称">{{ ysdata.jcyshwmc }}</el-descriptions-item>
							<el-descriptions-item label="进厂运输货物量">{{ ysdata.jchwl }}</el-descriptions-item>
							<el-descriptions-item label="出厂运输货物名称">{{ ysdata.cchwmc }}</el-descriptions-item>
							<el-descriptions-item label="出厂运输货物量">{{ ysdata.cchwl }}</el-descriptions-item>
							<el-descriptions-item label="车队名称">{{ ysdata.cdmc }}</el-descriptions-item>

							<el-descriptions-item label="进厂照片">
								<div class="demo-image__preview">
									<el-image style="width: 100px; height: 100px" :src="url" :preview-src-list="srcList">
								    </el-image>
								</div>
							</el-descriptions-item>

							<el-descriptions-item label="行驶证">
								<div class="demo-image__preview">
									<el-image style="width: 100px; height: 100px" :src="url" :preview-src-list="srcList">
								    </el-image>
								</div>
							</el-descriptions-item>
							<el-descriptions-item label="手动抬杆照片">
								<div class="demo-image__preview">
									<el-image style="width: 100px; height: 100px" :src="url" :preview-src-list="srcList">
								    </el-image>
								</div>
							</el-descriptions-item>
							<el-descriptions-item label="随车清单">{{ ysdata.sdqd }}</el-descriptions-item>
						</el-descriptions>
						<template #footer>
							<div class="dialog-footer">
								<el-button @click="dialogFormVisible = false">取消</el-button>
							</div>
						</template>
					</el-dialog>
                </el-main>
            </el-container>
        </el-main>
    </el-container>
</template>
<script>
export default {
    data() {
        return {

			data:[{index:1,
				crkbh:'123456',
				dzbh:'25356',
				tgfs:"自动",
				jcsj:"2024-08-02",
				ccsj:"2024-08-02",
				cllx:"罐车",
				clys:"白色",
				cph:"Ad1233",
				zcdjsj:"",
				cpsbdm:"",
				clppxh:"",
				fdjhm:"",
				rllx:"",
				pfjd:"国五",
				syxz:"汽油",
				lxzt:"",
				jcyshwmc:"",
				jchwl:"",
				cchwmc:"",
				cchwl:"",
				cdmc:"",
				jczp:"",
				sdqd:"",
				xsz:"",
				sdtgzp:""

}],
			dialogFormVisible:false,
			ysdata:{},
            query: {},
            count: 0,
            timeRange: [],
            cateOptions: [
                { id: 1, name: '货车' },
                { id: 2, name: '罐车' },
            ],
            typeOptions: [
                { id: 1, name: '进厂' },
                { id: 2, name: '出厂' }
            ],
            statusOptions: [
                { id: '', name: '全部' },
                { id: 10, name: '已录入' },
                { id: 20, name: '未录入' }
            ],
            type_: {
                1: '进厂',
                2: '出厂'
            },
            timeOptions: ['日', '月', '年'],
            apiObj: this.$API.enp.vehicle_access,
            params: {},
			url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
			srcList: [
				'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',

			]
        }
    },
    methods: {
        updateCount(res, tableData) {
            this.count = res.count
        },
		rowClick(row){
			this.ysdata = row;
			this.dialogFormVisible=true;
		},
        handleQuery() {
            if (this.timeRange) {
                this.query.access_time__gte = this.timeRange[0]
                this.query.access_time__lte = this.timeRange[1]
            } else {
                this.query.access_time__gte = null
                this.query.access_time__lte = null
            }
            this.$refs.table.queryData(this.query);
        },
        timeHandleQuery() { },
        carHandleQuery() { },
        backtoMap() {
            this.$emit('close')
        },
    }
}
</script>
