<template>
	<div class="flexOne">
		<div class="query-box">
			<ul>
				<li><span><em>车辆类型</em><el-select  filterable  v-model='msg.CarType' >
							        <el-option :label="$t('pub.unlimitedSel')" value='0'></el-option>
									<el-option v-for='item in companyList' 
										:label='item.Name'
										:value='item.Id'
										:key='item.Id'>
									</el-option>
								  </el-select>
					</span></li>
                <li><span><em>车辆名称</em><el-input v-model='msg.CarName'  class="permiss-input"></el-input></span></li>
                <li><span><em>车辆品牌</em><el-input v-model='msg.BrandName'  class="permiss-input"></el-input></span></li>
				<li>
					<input type="button" class="hollowFixedBtn" :value="$t('pub.searchBtn')" @click="resetPageIndex(),getList()" />
					<input type="button" class="normalBtn" value="新增" @click="CommonJump('dzaddcar')" />
				</li>
			</ul>
		</div>

		<el-table :data="dataList" stripe style="width: 100%" max-height="700" v-loading='loading'>
			<el-table-column fixed prop="Id" label="Id" width="80"> </el-table-column>
			<el-table-column  prop="CarName" label="名称">
                <template slot-scope="scope">
                    <div style="display: flex;align-items: center;">
                        <div class="app-image" :style="{backgroundImage:'url(' + scope.row.CarLogo + ')',backgroundSize:'cover'}"></div>
                        <div flex="dir:left cross:center">
                        {{scope.row.CarName}}
                        </div>
                    </div>
                    
                  </template>    
            </el-table-column>
			<el-table-column  prop="CarTypeName" label="类型"> </el-table-column>
			<el-table-column  prop="CarModel" label="型号"> </el-table-column>
			<el-table-column  prop="CarColor" label="颜色"> </el-table-column>
			<el-table-column  prop="BrandName" label="品牌"> </el-table-column>
			<el-table-column  prop="CarNo" label="车牌号"> </el-table-column>
			<el-table-column  prop="GuestNum" label="荷载人数"> </el-table-column>
			<el-table-column  prop="ImageList" label="图片列表"> 
                <template slot-scope="scope">
                    <div style="display: flex;align-items: center;">
                        <div class="app-image" :style="{backgroundImage:'url(' + scope.row.ImageList[0] + ')',backgroundSize:'cover'}"></div>
                        <div v-if='scope.row.ImageList.length>2' @click='lookgd(scope.row)' style="cursor:pointer;color:#409EFF">查看更多</div>
                    </div>
                    
                </template>    
            </el-table-column>
			<el-table-column  prop="UpdateByName" label="创建人"> 
                <template slot-scope="scope">
                    
                    <div flex="dir:left cross:center">
                        {{scope.row.UpdateByName}}
                    </div>
                    <div flex="dir:left cross:center">
                        {{scope.row.UpdateDate}}
                    </div>
                </template>    
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="120" >
                <template slot-scope="scope">
                  <el-tooltip class="item" effect="dark" content="编辑" placement="top" >
                    <img src="../../../assets/img/setup/edit.png" alt="" class="imgstyle" @click="Edit(scope.row)">
                  </el-tooltip>
                  <el-tooltip class="item" effect="dark" content="删除" placement="top" >
                    <img src="../../../assets/img/setup/del.png" alt="" class="imgstyle" @click="delete_b(scope.row)">
                  </el-tooltip>
                </template>
              </el-table-column>
		
		</el-table>
		<el-pagination background @current-change="handleCurrentChange" :current-page.sync="currentPage" layout="total,prev, pager, next, jumper" :page-size=msg.pageSize :total=total>
		</el-pagination>
        <el-dialog title="图片列表" :visible.sync="changeState" width="1240px">
            <div style="display: flex;flex-direction: row;flex-wrap: wrap;">
              <img v-for="(x, index) in CarPic" :key="index" style="width:200px;height:200px;margin: 10px" :src="x" alt="">
            </div>
        </el-dialog>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				
				loading:true,
				//分页
				total: 0,
				pageSize: '',
				currentPage: 1,
                changeState:false,
				//请求数据
				msg: {
					pageIndex: 1,
					pageSize: 15,
					CarType: '0',
					CarName: '',
					BrandName: '',
					
				},
			
				//返回数据
				dataList: [],
				companyList: [],
                CarPic:[]
			}
		},
		methods: {
			
			getCompany() {
				this.apipost('car_get_GetCarCustomTypeEnumList', {}, res => {
					if(res.data.resultCode == 1) {
						this.companyList = res.data.data;
					}
				}, err => {})
			},
            lookgd(row){
                this.changeState = true;
                this.CarPic = row.ImageList
            },
			
		
			getList() {
				this.loading=true
				
					
				this.apipost('car_get_GetCarInfoPageList', this.msg, res => {
					if(res.data.resultCode == 1) {
						this.loading=false
						this.$nextTick(() => {
						this.dataList = res.data.data.pageData;
						 });						
						this.total = res.data.data.count;
					}

				}, err => {})
			},
			handleCurrentChange(val) {
				this.msg.pageIndex = val;
				this.getList();
			},
			resetPageIndex() {
				this.msg.pageIndex = 1;
				this.currentPage = 1
			},
            Edit(row){
                this.$router.push("/dzaddcar?obj="+encodeURIComponent(JSON.stringify(row)))
            },
            delete_b(row){
				let that=this;
				that.Confirm("是否删除", function () {
					that.apipost('car_post_DelCarInfo', {CarId:row.Id}, res => {
						if(res.data.resultCode == 1) {
							that.$message.success(res.data.message)
							that.getList()
						} else {
							that.$message.error(res.data.message)	
						}
					}, err => {})
				});
			},
		},
		mounted() {
			
			this.getList()
			this.getCompany()
		}
	}
</script>

<style>
	.el-table .el-table__row {
		font-size: 12px!important;
	}
	
	.el-table__row td {
		padding: 5px 0;
	}
	.has-gutter tr th,.el-table th.is-leaf{background:#EAEAEA!important;} 	
     .app-image{
        background-position: center center;
        width: 50px;
        height: 50px;
        border-radius:0%;
        float: left;
        margin-right: 8px;
    }
</style>