<template>
  <view class="fullHeight">
    <headers :showBack="true" themeType>
      <view class="headerName">
        车辆管理
      </view>
    </headers>
    <view class="menuBox">
      <view v-if="type !== 'supplier'" class="menuItem" @click="changeMenu(0)" :class="tabIndex==0?'active':''">
         进出记录
       </view>
      <view class="menuItem" @click="changeMenu(1)" :class="tabIndex==1?'active':''">
        黑白名单
      </view>
    </view>
    <view class="" v-if="tabIndex==0">
      <view class="selectContent selectContent2">
        <input class="selectVideoBox" type="text" confirm-type="search" v-model="carNumber" placeholder="搜索车牌号"
               @confirm="inOutList=[];getInOutList()"/>
        <picker mode="date" @change="changeDate" fields="day" :value="searchDate" style="margin-left:15px">
          <view class="selectVideoBox">
            <text class="videoName">{{ searchDate }}</text>
            <uni-icons class="arrow" type="arrowdown" size="15"></uni-icons>
          </view>
        </picker>
      </view>
      <view class="blockBoxRecord" v-for="(item,index) in inOutList" :key="index">
        <view class="alarmItem">
          <text class="label">车牌号：</text>
          <text class="value">{{ item.carNumber }}</text>
        </view>
        <view class="alarmItem">
          <text class="label">进出时间：</text>
          <text class="value">{{ item.passTime }}</text>
        </view>
        <view class="alarmItem">
          <text class="label">进出标识：</text>
          <text class="value">{{ item.type == 1 ? '出' : '进' }}</text>
        </view>
        <view class="alarmItem">
          <text class="label">进出位置：</text>
          <text class="value">{{ item.location }}</text>
        </view>
        <view class="alarmItem">
          <text class="label">车牌颜色：</text>
          <text class="value">{{ item.carColor }}</text>
        </view>
        <view class="alarmItem">
          <text class="label">进出场图片：</text>
          <text class="value">
            <image v-if="item.imageUrl"
                   :src="item.imageUrl?url_config+'image/'+item.imageUrl:''" class="profile_photo"
                   @click="previewImg(url_config+'image/'+item.imageUrl)"></image>
          </text>
        </view>
        <view class="alarmItem">
          <text class="label">全景图片：</text>
          <text class="value">
            <image v-if="item.panoramaUrl"
                   :src="item.panoramaUrl ? url_config+'image/'+item.panoramaUrl : ''"
                   class="profile_photo"
                   @click="previewImg(url_config+'image/'+item.panoramaUrl)"></image>
          </text>
        </view>
      </view>
      <view class="placeholderBox" v-if="inOutList.length==0">
        <image src="/static/noData.png" mode="" class="noDataImg"></image>
        <view class="text">
          暂无数据
        </view>
      </view>
    </view>
    <view class="" v-if="tabIndex==1">
      <view class="selectContent selectContent2">
        <view class="selectBox">
          <input class="selectInput" confirm-type="search" type="text" v-model="carNumber" placeholder="请搜索车牌号"
                 @confirm="carList=[];getEnvironmentDev()"/>
        </view>
        <!--        <picker :range="carTypeArr" range-key="name" @change="changeCarType" :value="isBlack"-->
        <!--                style="margin-left:15px">-->
        <!--          <view class="selectVideoBox">-->
        <!--            <text class="videoName">{{ carTypeArr[isBlack].name }}</text>-->
        <!--            <uni-icons class="arrow" type="arrowdown" size="15"></uni-icons>-->
        <!--          </view>-->
        <!--        </picker>-->
      </view>
      <view class="blockBox" v-for="(item,index) in carList" :key="index" @click="goAdd(item.id)">
        <view class="alarmItem">
          <text class="label">车牌号：</text>
          <text class="value">{{ item.carNumber }}</text>
        </view>
        <view class="alarmItem">
          <text class="label">车辆颜色：</text>
          <text class="value">{{ item.carColor }}</text>
        </view>
        <view class="alarmItem">
          <text class="label">车辆类型：</text>
          <text class="value">{{ item.carTypeName }}</text>
        </view>

        <view class="alarmItem">
          <text class="label">司机姓名：</text>
          <text class="value">{{ item.driverWorkerName }}</text>
        </view>
        <view class="alarmItem">
          <text class="label">司机电话：</text>
          <text class="value">{{ item.driverTelephone }}</text>
        </view>
        <view class="alarmItem">
          <text class="label">固定/临时车辆：</text>
          <text class="value">{{ item.carModuleType == "1" ? "固定" : "临时" }}</text>
        </view>
        <view class="alarmItem" v-if="type !== 'supplier'" style="width: 100%;">
          <text class="label">企业名称：</text>
          <text class="value">{{ item.enterpriseName }}</text>
        </view>
        <view class="alarmItem">
          <text class="label">车辆图片：</text>
          <text class="value">
            <image v-if="item.carPhotosUrl"
                   :src="JSON.parse(item.carPhotosUrl)[0]?url_config+'image/'+JSON.parse(item.carPhotosUrl)[0].url:''"
                   class="profile_photo"
                   @click="previewImg(url_config+'image/'+JSON.parse(item.carPhotosUrl)[0].url)"></image>
          </text>
        </view>
        <text class="tags" :class="item.isBlack?'black':''">{{ item.isBlack ? '黑名单' : '白名单' }}</text>
      </view>
      <view class="placeholderBox" v-if="carList.length==0">
        <image src="/static/noData.png" mode="" class="noDataImg"></image>
        <view class="text">
          暂无数据
        </view>
      </view>
    </view>
    <image v-if="type !== 'supplier'" v-show="tabIndex==1" src="/static/addImg.png" class="addImg"
           @click="goAdd('')"></image>
  </view>
</template>

<script>
import headers from "../../../components/headers/headers.vue"
import {
  GetDateStr
} from "../../../static/js/util.js"

export default {
  components: {
    headers
  },
  data() {
    return {
      projectDetail: '',
      carList: [],
      inOutList: [],
      currentDevDetail: {},
      searchDate: '',
      tabIndex: 0,
      pageNo: 1,
      pageSize: 20,
      loadStatus: 'more',
      isLoadMore: false,
      carNumber: '',
      carTypeArr: [{
        name: '全部车辆',
        value: -1
      },
        {
          name: '白名单',
          value: 0
        },
        {
          name: '黑名单',
          value: 1
        }
      ],
      isBlack: 0,
      type: ""
    };
  },
  onShow() {
    // uni.redirectTo({
    //     url: '/pages/projectEnd/carManage/index'
    // });
  },
  onLoad(option) {
    if (option.type) {
      // 判断是不是供应商跳转过来
      this.type = option.type
    }
  },
  mounted() {

    this.projectDetail = JSON.parse(uni.getStorageSync('projectDetail'))
    this.searchDate = GetDateStr(0, '-')
    this.loadData()
  },
  onReachBottom() {
    if (!this.isLoadMore) { //此处判断，上锁，防止重复请求
      this.isLoadMore = true
      this.pageNo += 1
      this.loadData()
    }
  },
  onPullDownRefresh() {
    this.pageNo = 1
    this.carList = [];
    this.inOutList = []
    this.loadData()
  },
  methods: {
    goAdd(id) {
      if (this.type === 'supplier') {
        return
      }
      uni.navigateTo({
        url: './addCar?id=' + id
      })

    },
    previewImg(url) {
      uni.previewImage({
        urls: [url]
      })
    },
    changeCarType(e) {
      this.isBlack = e.target.value;
      this.pageNo = 1;
      this.carList = []
      this.getEnvironmentDev()
    },
    changeDate(e) {
      this.searchDate = e.target.value
      this.pageNo = 1;
      this.inOutList = []
      this.getInOutList()
    },
    changeMenu(index) {
      this.tabIndex = index;
      this.carList = [];
      this.inOutList = [];
      this.pageNo = 1;
      this.loadData()
    },
    loadData() {
      switch (this.tabIndex) {
        case 0:
          this.getInOutList()
          break;
        case 1:
          this.getEnvironmentDev()
          break;
      }
    },
    //获取进出列表
    getInOutList() {
      var that = this
      this.sendRequest({
        url: "xmgl/carPassRecord/list",
        data: {
          projectSn: this.projectDetail.projectSn,
          pageNo: this.pageNo,
          pageSize: this.pageSize,
          startTime: this.searchDate,
          endTime: this.searchDate,
          devSn: '',
          carNumber: this.carNumber,
        },
        method: "post",
        success(res) {
          that.inOutList = that.inOutList.concat(res.result.records)
          if (res.result.records.length < that.pageSize) { //判断接口返回数据量小于请求数据量，则表示此为最后一页
            that.isLoadMore = true
            that.loadStatus = 'nomore'
          } else {
            that.isLoadMore = false
            // that.loadStatus='more'
          }
          uni.stopPullDownRefresh()
        }
      })
    },
    //获取设备
    getEnvironmentDev() {
      var that = this
      var type = this.isBlack == 0 ? '' : this.isBlack - 1
      this.sendRequest({
        url: "xmgl/carInfo/selectCarList",
        data: {
          projectSn: this.projectDetail.projectSn,
          carNumber: this.carNumber,
          isBlack: type,
          pageNo: this.pageNo,
          pageSize: this.pageSize
        },
        method: "POST",
        success: (res) => {
          that.carList = [
            ...that.carList,
            ...res.result.records
          ]
          console.log(this.carList)
          if (res.result.records.length < that.pageSize) { //判断接口返回数据量小于请求数据量，则表示此为最后一页
            that.isLoadMore = true
            that.loadStatus = 'nomore'
          } else {
            that.isLoadMore = false
            // that.loadStatus='more'
          }
          uni.stopPullDownRefresh()
        }
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.menuBox {
  display: flex;
  align-items: center;
  height: 36px;
  font-size: 15px;
  background-color: white;
  margin-top: -1px;
  position: relative;
  z-index: 999;
  //border-bottom: 1px solid rgba(194, 194, 194, 0.2);

  .menuItem {
    flex: 1;
    text-align: center;
    &.active {
      color: rgba(43, 141, 243, 1);
    }
  }
}
.blockBoxRecord{
	box-shadow: 0 4px 24px 0px rgba(212, 220, 236, 0.69);
	border-radius: 8px;
	margin: 15px;
	padding: 15px;
	position: relative;
	display: flex;
	flex-wrap: wrap;
	// flex-direction: column;
	.alarmItem {
	  font-size: 14px;
	  position: relative;
	  padding: 15rpx 0;
	  width: 100%;
	  overflow: hidden;
	  display: flex;
	
	  .label {
	    opacity: 0.6;
	    display: inline-block;
	    vertical-align: top;
	    white-space: nowrap;
	
	  }
	
	  .value {
	    white-space: nowrap;
	    overflow: hidden;
	    text-overflow: ellipsis;
	  }
	}
}
.blockBox {
  box-shadow: 0 4px 24px 0px rgba(212, 220, 236, 0.69);
  border-radius: 8px;
  margin: 15px;
  padding: 15px;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  // flex-direction: column;
  .alarmItem {
    font-size: 14px;
    position: relative;
    padding: 15rpx 0;
    width: 50%;
    overflow: hidden;
    display: flex;
  
    .label {
      opacity: 0.6;
      display: inline-block;
      vertical-align: top;
      white-space: nowrap;
  
    }
  
    .value {
      // white-space: nowrap;
      // overflow: hidden;
      // text-overflow: ellipsis;
    }
  }
}

.selectContent {
  text-align: center;
  //margin-top: 15px;
  .selectBox {
    margin: 0 20rpx;
    background-color: #eeeeef;
    border-radius: 12rpx;
    padding: 15rpx 20rpx;
    width: 100%;
  }

  .selectInput {
    width: 100%;
    text-align: left;
    font-size: 28rpx;
  }
}

.selectVideoBox {
  border: 1px solid rgba(42, 43, 91, 0.2);
  border-radius: 18px;
  height: 35px;
  font-size: 15px;

  display: inline-block;

  .videoName {
    padding: 0 12px 0 15px;
    // border-right: 1px solid rgba(42, 43, 91, 0.2);
    line-height: 35px;
    height: 35px;
  }

  .arrow {
    padding: 0 12px 0 2px;
  }
}

.arrow {
  margin-left: 10px;
}


.alarmIcon {
  width: 20px;
  height: 20px;
}


.blockTitle {
  text-align: center;
}


.selectContent2 {
  display: flex;
  align-items: center;
  justify-content: center;
}


.profile_photo {
  width: 30px;
  height: 30px;
}

.tags {
  position: absolute;
  right: 15px;
  top: 0;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  box-shadow: 0 4px 13px 0px rgba(125, 126, 160, 0.39);
  font-size: 13px;
  padding: 2px 5px;
}

.black {
  background-color: #c1c1c1;
  box-shadow: 0 4px 13px 0px rgba(193, 193, 193, 0.69);
  color: white;
}

.addImg {
  position: fixed;
  bottom: 15px;
  right: 15px;
  width: 62px;
  height: 62px;
}
</style>
