<template>
  <div class="app-container">
    <div style="background-color: #fff;padding: 20px;border-radius: 10px;">
      <p style="margin: 0; font-weight: 800;font-size: 16px;color: #343434;display: flex;align-items: center;margin-bottom: 20px;">
        <img src="../../../assets/images/icon_htgl_btzs.png" alt="" style="width: 16px;height: 20px;">
       <span style="margin-left: 10px;">违停管理</span>
      </p>
      <div style="background: #F3F3F3;padding: 20px 15px; padding-bottom: 0;margin-bottom: 20px;">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="88px">
          <el-row>

            <el-col :span="24">
              <el-col :span="8">
                <el-form-item label="车牌号码" prop="plateNumber">
                        <el-input
                          v-model="queryParams.plateNumber"
                          placeholder="请输入车牌号码"
                          clearable
                          @keyup.enter.native="handleQuery"
                        />
                      </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="门牌号" prop="visitPortal">
                        <el-select  v-model="queryParams.visitPortal" placeholder="请选择门牌号" >
                          <el-option
                           @click.native="itneg(dict)"
                            v-for="dict in houseInfoLise"
                            :key="dict.houseId"
                            :label="dict.detailedAddress"
                            :value="dict.houseId"
                          />
                        </el-select>
                      </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="手机号码" prop="mobileNumber">
                        <el-input
                          v-model="queryParams.mobileNumber"
                          placeholder="请输入手机号码"
                          clearable
                          @keyup.enter.native="handleQuery"
                        />
                      </el-form-item>
              </el-col>
            </el-col>
            <el-col :span="24">
              <el-col :span="8">
                <el-form-item label="人员姓名" prop="visitName">
                        <el-input
                          v-model="queryParams.visitName"
                          placeholder="请输入人员姓名"
                          clearable
                          @keyup.enter.native="handleQuery"
                        />
                      </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="车辆类型" prop="carType">
                        <el-select v-model="queryParams.carType" placeholder="请选择车辆类型 1：小区车辆 2：外来车辆" clearable>
                          <el-option
                            v-for="dict in dict.type.car_type"
                            :key="dict.value"
                            :label="dict.label"
                            :value="dict.value"
                          />
                        </el-select>
                      </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="黑名单" prop="isBlack">
                        <el-select v-model="queryParams.isBlack" placeholder="请选择是否黑名单" clearable>
                          <el-option
                            v-for="dict in dict.type.sys_yes_no"
                            :key="dict.value"
                            :label="dict.label"
                            :value="dict.value"
                          />
                        </el-select>
                      </el-form-item>
              </el-col>
            </el-col>
          </el-row>
          <el-form-item class="butt bnjle">
            <el-button type="primary"   @click="handleQuery">搜索</el-button>
            <el-button   @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
      </div>


      <div class="casr " >
              <el-row :gutter="10" class="mb8" style="width:100%;">
                <!-- <el-col :span="1.5">
                  <div style="font-weight: bold;font-size: 14px;color: #343434; display: flex;align-items: center;">
                    当夜全选
                  </div>
                </el-col> -->
                <el-col :span="1.5">
                  <el-button
                    type="primary"
                    plain
                    size="mini"
                    @click="handleAdd"
                    v-hasPermi="['wuYe:illegalParking:add']"
                  >添加</el-button>
                </el-col>
                <!-- <el-col :span="1.5">
                  <el-button
                    type="success"
                    plain
                    size="mini"
                    :disabled="single"
                    @click="handleUpdate"
                    v-hasPermi="['system:post:edit']"
                  >修改</el-button>
                </el-col>
                <el-col :span="1.5">
                  <el-button
                    type="danger"
                    plain
                    size="mini"
                    :disabled="multiple"
                    @click="handleDelete"
                    v-hasPermi="['system:post:remove']"
                  >删除</el-button>
                </el-col> -->
                <el-col :span="1.5">
                  <el-button
                    type="warning"
                    plain
                    size="mini"
                    @click="handleExport"
                    v-hasPermi="['wuYe:illegalParking:export']"
                  >导出</el-button>
                </el-col>
                <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
              </el-row>
              <div  class="casr infinite-list" :style="dynamicStyle">
                <el-row :gutter="10" v-if="illegalParkingList.length !=0" style="width: 100%;margin-left: 0;">
                  <el-col :span="6" v-for="(item,index) in illegalParkingList" :key="index" >
                    <!-- @click="isac(item)" -->
                    <div v-if="isshoe"  :class=" item.isnum ==true ? 'ingwe' :'' " style="position: relative; background-color: #fff;box-shadow: 0px 0px 10px 0px #CDCDCD;border-radius: 4px;margin-bottom: 10px;">
                      <div style="display: flex; align-items: center;padding: 15px 20px;padding-bottom: 0;" class="ingsek">
                        <el-carousel :interval="4000"  arrow="hover" height="150px;width:100%;" indicator-position="none" >
                            <el-carousel-item  v-for="(itemg,index) in item.imgs" :key="index" v-if="item.imgs.length !=0" >
                                                     										<div style="position: relative;" @click="imge(itemg)">
                                              <!-- defaultSettings.urls+baseUrl +itemt.url -->
                                                     											<img :src="defaultSettings.urls+baseUrl +itemg.url" alt="" style="width: 100%;height: 150px;">
                                                     											<p style="position: absolute;bottom: 0;left: 0;font-weight: 500; height: 34px;background-color: rgba(0,0,0,.5);color: #fff;font-size: 12px;width: 100%;padding-left: 10px;line-height: 34px;margin: 0;">登记时间:{{itemg.time}}</p>
                                                     										</div>
                            </el-carousel-item>
                            <el-carousel-item   v-if="item.imgs.length ==0">
                                   <div style="position: relative;" >
                                              <!-- defaultSettings.urls+baseUrl +itemt.url -->
                                   <img src="../../../assets/images/zwshuj.png" alt="" style="width: 100%;height: 150px;">
                                   <p style="position: absolute;bottom: 0;left: 0;font-weight: 500; height: 34px;background-color: rgba(0,0,0,.5);color: #fff;font-size: 12px;width: 100%;padding-left: 10px;line-height: 34px;margin: 0;">登记时间:{{item.createTime}}</p>
                                             <!-- <p style="position: absolute;bottom: 0;left: 0;font-weight: 500; height: 24px;background-color: rgba(0,0,0,.5);color: #fff;font-size: 14px;width: 100%;padding-left: 10px;line-height: 24px;margin: 0;">{{itemt.title}}</p> -->
                                   </div>
                            </el-carousel-item>
                          </el-carousel>
                      </div>
                      <div class="goe renyuangs" style="padding: 0 20px;margin-top: 10px;">
                        <p>
                          车牌号码：{{item.plateNumber == null?'暂无数据' : item.plateNumber}}
                        </p>
                        <p>关联房号：{{item.visitPortal == null?'暂无数据' : item.visitPortal}}</p>
                        <p>
                          手机号码：{{item.mobileNumber == null?'暂无数据' : item.mobileNumber}}
                        </p>
                        <!-- <p>
                          登记时间：{{item.createTime == null?'暂无数据' : item.createTime}}
                        </p> -->
                        <p>
                          人员姓名：{{item.visitName == null?'暂无数据' : item.visitName}}
                        </p>
                        <div style="margin-top: 10px;">
                          车辆类型：<dict-tag :options="dict.type.car_type" :value="item.carType"/>
                        </div>
                        <div >
                          黑名单：<dict-tag :options="dict.type.sys_yes_no" :value="item.isBlack"/>
                        </div>
                      </div>
                      <div class="bortt tongty" style="justify-content: space-between;">
                        <p v-if="item.isBlack == 'Y'" style="cursor: pointer;overflow: hidden;text-overflow: ellipsis; white-space: nowrap;"> <span v-hasPermi="['wuYe:illegalParking:cancel']" @click="handleUpdatef(item)" style="color: #ffba00; cursor: pointer;">解除黑名单</span>  </p>
                        <!-- <span @click="handleUpdatef(item)">查看</span> -->
                        <p style="cursor: pointer;border-left: 1px solid #DADADA;border-right: 1px solid #DADADA;"><span  v-hasPermi="['wuYe:illegalParking:edit']" @click="handleUpdate(item)" style="color: #1890ff;">修改</span></p>
                        <p  style="cursor: pointer;;">
                         <!-- <span   style="cursor: pointer;;margin: 0 5px;color:rgb(218, 218, 218);">|</span> -->
                         <span v-hasPermi="['wuYe:illegalParking:remove']" style="color:red" @click="handleDelete(item)">删除</span>
                         </p>
                      </div>
                      <img v-if="item.isnum == true" src="../../../assets/images/icon_htgl_kp_gx.png" alt="" style="width: 35px;height: 35px;position: absolute;bottom: 0;right: 0;">
                    </div>
                  </el-col>
                </el-row>
                <div style="margin-top: 20px;display: flex;justify-content: center;align-items: center;" v-if="illegalParkingList.length ==0">
                   <img   src="../../../assets/images/zwshjbig.png" alt="" style="">
                </div>
              </div>
      </div>


      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>

    <!-- 添加或修改岗位对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="640px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-row>
          <el-col :span="24" class="unimg">

          </el-col>

          <el-col :span="12" class="ngeshimg" style="position: relative;">
            <el-form-item label="车牌号码" prop="plateNumber">
              <el-input v-model="form.plateNumber" placeholder="请输入车牌号码" />
              <image-uploadshib @uploadedSuccessfully="uploadedSuccessfully" :typeg = "2" :limit="1" v-model="form.photo"/>
              <!-- <image-uploadshib :typeg = "3" :limit="1" v-model="form.illegalPhoto"/> -->
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="门牌号" prop="visitPortal">
               <el-select v-model="form.visitPortal" placeholder="请选择门牌号" clearable>
                 <el-option
                  @click.native="itnegadd(dict)"
                   v-for="dict in houseInfoLise"
                   :key="dict.houseId"
                   :label="dict.detailedAddress"
                   :value="dict.houseId"
                 />
               </el-select>
            </el-form-item>
            <!-- <el-form-item label="关联门户" prop="visitPortal">
             <el-input v-model="form.visitPortal" placeholder="请输入关联门户" />
            </el-form-item> -->
          </el-col>
          <el-col :span="12">
            <el-form-item label="手机号码" prop="mobileNumber">
                      <el-input v-model="form.mobileNumber" placeholder="请输入手机号码" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="人员姓名" prop="visitName">
              <el-input v-model="form.visitName" placeholder="请输入人员姓名" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="车辆类型" prop="carType">
                      <el-select v-model="form.carType" placeholder="请选择车辆类型">
                        <el-option
                          v-for="dict in dict.type.car_type"
                          :key="dict.value"
                          :label="dict.label"
                          :value="dict.value"
                        ></el-option>
                      </el-select>
                    </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="备注" prop="remark">
              <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
            </el-form-item>
          </el-col>
          <el-col :span="24" class="unimg">
            <el-form-item label="违章照片" prop="illegalPhoto">
              <image-upload v-model="form.illegalPhoto"/>
            </el-form-item>
          </el-col>

        </el-row>



      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <el-dialog title="查看图片" :visible.sync="openi" width="640px" append-to-body>
      <!-- +baseUrl -->
       <img :src="defaultSettings.urls +imgurl" alt="" style="width: 100%;height: 350px;">
      </el-dialog>
  </div>
</template>

<script>
import { listIllegalParking, getIllegalParking, delIllegalParking, addIllegalParking, updateIllegalParking,cancelh } from "@/api/wuguan/illegalParking";
import { listHouseInfo,listNoPage, getHouseInfo, delHouseInfo, addHouseInfo, updateHouseInfo } from "@/api/wuguan/houseInfo";
import { listCar, getCar, delCar, addCar, updateCar } from "@/api/wuguan/car";
import 'videojs-flash'
const defaultSettings = require("@/settings.js");
export default {
  name: "Post",
  dicts: ['sys_yes_no', 'car_type'],
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      baseUrl: process.env.VUE_APP_BASE_API,
      defaultSettings:defaultSettings,
      // 违章停车登记表格数据
      illegalParkingList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
                pageSize: 10,
                plateNumber: null,
                portalId: null,
                visitPortal: null,
                mobileNumber: null,
                visitName: null,
                illegalPhoto: null,
                carType: '1',
                isBlack: 'N',
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        plateNumber: [
                  { required: true, message: "车牌号码不能为空", trigger: "blur" }
                ],
      portalId: [
                  { required: true, message: "门户id不能为空", trigger: "blur" }
                ],
                visitPortal: [
                  { required: true, message: "关联门户不能为空", trigger: "blur" }
                ],
                mobileNumber: [
                  { required: true, message: "手机号码不能为空", trigger: "blur" }
                ],
      },
      activeName:'first',
      videoState: false, // 视频播放状态
      poster:true,
      controls:true,
      videoData:{},
       player: null,
       isshoe:true,
       houseInfoLise:[],
       openi:false,
       imgurl:'',
       carList:[],
   tableMaxHeight:'200',
     };
   },
   computed: {
     dynamicStyle() {
       return {
         overflowY:'auto',
         height: this.tableMaxHeight+ 'px',
         paddingTop:'10px'
       }
     }
     },
  created() {
    this.getList();
    this.getListhouvr()
  window.onresize = () => {
  	      this.changeTableMaxHeight()
  	    }
  	    this.changeTableMaxHeight()
  },
  mounted() {
  	window.onresize = () => {
  	          this.changeTableMaxHeight()
  	        }
  	        this.changeTableMaxHeight()
  },
  beforeDestroy() {
      if (this.player) {
        this.player.dispose()
      }
    },
  methods: {
    /** 查询岗位列表 */
    getList() {
      this.loading = true;

      listIllegalParking(this.queryParams).then(response => {
        this.illegalParkingList  = response.rows;
        this.illegalParkingList .filter(rou=>{
          rou.imgs = []
          // console.log(rou.imgs, rou.illegalPhoto.split(','))
          if(rou.illegalPhoto != null && rou.illegalPhoto != '') {
           rou.illegalPhoto = rou.illegalPhoto.split(',')
           rou.illegalPhoto.filter(rout=>{
             let sngse = {'url':rout,'time':rou.createTime}
             rou.imgs.push(sngse)
           })
          }
          if(rou.children != null){
            rou.children.filter(routt=>{
              routt.illegalPhoto = routt.illegalPhoto.split(',')
               routt.illegalPhoto.filter(routti =>{
                 let sngse = {'url':routti,'time':routt.createTime}
                 rou.imgs.push(sngse)
               })
            })

          }

          rou.isnum = false
        })
        // this.getge(this.postList)s
        this.total = response.total;
        this.loading = false;
      });
    },
    getListhouvr() {
       listNoPage().then(response => {
         this.houseInfoLise  = response.rows;
       });
     },
     uploadedSuccessfully(row){
       row.filter(rou=>{
         this.form.plateNumber = rou.plateNumber
         this.getListcd(rou.plateNumber)
       })
     },
     /** 查询车辆*/
     getListcd(row) {
       // this.loading = true;
       let sgse={'plateNumber':row}
       listCar(sgse).then(response => {
         this.carList  = response.rows;
          if(this.carList.length != 0){
            this.carList.filter(rou=>{
              this.form.visitPortal = rou.detailedAddress
              this.form.portalId = rou.houseId
              this.form.mobileNumber = rou.residentPhone
            })
          }
       });
     },

    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
              illegalParkingId: null,
              plateNumber: null,
              portalId: null,
              visitPortal: null,
              mobileNumber: null,
              visitName: null,
              illegalPhoto: null,
              carType: '1',
              isBlack: null,
              createBy: null,
              createTime: null,
              updateBy: null,
              updateTime: null,
              remark: null
            };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.queryParams.carType = null
      this.queryParams.portalId = null
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.illegalParkingId)
      this.single = selection.length!=1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加违停信息";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
            const illegalParkingId = row.illegalParkingId || this.ids
            getIllegalParking(illegalParkingId).then(response => {
              this.form = response.data;
              this.open = true;
              this.title = "修改违章停车登记";
            });
    },
    // 解除黑名单
    handleUpdatef(row){
      this.reset();
            const illegalParkingId = row.illegalParkingId || this.ids
            let nse={'illegalParkingId':row.illegalParkingId,'plateNumber':row.plateNumber,'isBlack':'N'}
            cancelh(nse).then(response => {
              this.form = response.data;
            });
    },
    /** 提交按钮 */
    submitForm: function() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.illegalParkingId != null) {
                      updateIllegalParking(this.form).then(response => {
                        this.$modal.msgSuccess("修改成功");
                        this.open = false;
                        this.getList();
                      });
                    } else {
                      addIllegalParking(this.form).then(response => {
                        this.$modal.msgSuccess("新增成功");
                        this.open = false;
                        this.getList();
                      });
                    }
        }
      });
    },
    /** 删除按钮操作 */
        handleDelete(row) {
          const illegalParkingIds = row.illegalParkingId || this.ids;
          this.$modal.confirm('是否确认删除违章停车登记编号为"' + illegalParkingIds + '"的数据项？').then(function() {
            return delIllegalParking(illegalParkingIds);
          }).then(() => {
            this.getList();
            this.$modal.msgSuccess("删除成功");
          }).catch(() => {});
        },
    /** 导出按钮操作 */
    handleExport() {
      this.download('wuYe/illegalParking/export', {
        ...this.queryParams
      }, `illegalParking_${new Date().getTime()}.xlsx`)
    },

      handleClick(){

      },
    isac(val){
      console.log(5,val)
      val.isnum = !val.isnum
      this.isshoe = false
      this.isshoe = true
    },
    itneg(item){
      this.queryParams.portalId = item.houseId
      this.queryParams.visitPortal = item.detailedAddress
    },
    itnegadd(item){
      this.form.portalId = item.houseId
      this.form.visitPortal = item.detailedAddress
      console.log(item)
    },
    imge(row){
      this.openi = true
      this.imgurl = row
    },
    // 获取屏幕高度
    showFilterForm () {
          this.filterActive = !this.filterActive
          this.changeTableMaxHeight()
        },

        changeTableMaxHeight () {
          let height = document.body.offsetHeight // 网页可视区域高度
          // if (this.filterActive) {
          //   this.tableMaxHeight = height - 320
          // } else {
            this.tableMaxHeight = height - 150
          // }
          console.log(height)
        }


  }
};
</script>
<style  lang="scss">
  .ngeshimg{
    .el-upload--picture-card{
      width: 36px;
      height: 36px;
      line-height: 36px;
      position: absolute;
      top:0;
      right: 0;
    }
    .component-upload-image{
      position: absolute;
      top:0;
      right: 0;
    }

    .el-upload--picture-card i{
      font-size: 20px;
    }
    .el-upload-list--picture-card .el-upload-list__item{
      width: 58px;
      height: 36px;
      position: absolute;
      top:0;
      right: -10px;
    }
  }
  .ingsek{
   .el-carousel__container{
  	 height: 150px;
   }
   .el-carousel--horizontal{
     width: 100%;
   }
  }
  .unimg{
    .el-upload--picture-card{
      width:102px;
      height: 102px;
      line-height: 102px;
    }
    .el-upload-list--picture-card .el-upload-list__item{
      width:102px;
      height: 102px;
    }
  }

  .bnjle{
    margin-left: 20px;
  }
  .butt{
    .el-button--small{
      padding: 9px 23px !important;
      font-size: 14px;
    }
  }
  .casr{
    .el-tabs__item.is-active{
      color: #196CFF;
    }
    .el-tabs--card > .el-tabs__header .el-tabs__item{
      padding: 0  30px !important;
    }
  }
  .el-table .el-table__header-wrapper th{
    background-color:#F5F6F8;
    color:#343434;
  }
  .el-table{
    color:#343434;
  }
</style>
<style scoped lang="scss">
  .goe{
    p{
      margin: 0;
      font-weight: 800;
      font-size: 16px;
      color: #161616;
      margin-top: 10px;
      margin-bottom: 3px;
      padding: 0 10px;
      overflow: hidden;
      text-overflow: ellipsis;
      display:-webkit-box; //作为弹性伸缩盒子模型显示。
      -webkit-box-orient:vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
      -webkit-line-clamp:1; //显示的行
    }
    p:nth-child(2){

    }
  }
  .ingwe{
    border: 2px solid #196CFF;
  }
  .renyuangs{
    p{
      font-weight: 500;
      font-size: 14px;
      color: #161616;
      padding: 0;
    }
    div{
      margin-bottom: 10px;
      font-weight: 500;
      font-size: 14px;
      color: #161616;
      padding: 0;
      display: flex;
    }
  }
  .tongty{
    display: flex;
    align-items: center;
  }
  .bortt{
    border-top: 1px solid #DADADA;
    margin-top: 15px;

    p{
      margin: 0;
      font-weight: bold;
      font-size: 14px;
      color: #5F8BF4;
      width:50%;
      padding: 10px;
      text-align: center;
    }
  }
  </style>


