<template>
  <div class="fullHeight" style="overflow: hidden">
    <areaTree
      :videoType="0"
      :modules="'carManage'"
      @changeCompany="changeCompany"
    ></areaTree>
    <div class="rightContent fullHeight">
      <vue-scroll>
        <div class="whiteBlock realTimeBox">
          <div class="pageTitle">实时数据</div>
          <el-date-picker
            class="searchDate"
            v-model="searchDate"
            type="date"
            placeholder="选择日期"
            value-format="yyyy-MM-dd"
            size="medium"
            @change="changeDate"
          >
          </el-date-picker>
          <div class="realTimeInner">
            <div class="item">
              <div class="itemInner itemInner1">
                <img src="@/assets/images/carIcon1.png" alt="" srcset="" />
                <div class="dataB">
                  <p>今日进场车辆</p>
                  <p class="num">{{statisticData.innum}}</p>
                </div>
              </div>
            </div>
            <div class="item">
              <div class="itemInner itemInner2">
                <img src="@/assets/images/carIcon2.png" alt="" srcset="" />
                <div class="dataB">
                  <p>今日出场车辆</p>
                  <p class="num">{{statisticData.outnum}}</p>
                </div>
              </div>
            </div>
            <div class="item">
              <div class="itemInner itemInner3">
                <img src="@/assets/images/carIcon3.png" alt="" srcset="" />
                <div class="dataB">
                  <p>白名单车辆</p>
                  <p class="num">{{statisticData.whiteNum}}</p>
                </div>
              </div>
            </div>
            <div class="item">
              <div class="itemInner itemInner4">
                <img src="@/assets/images/carIcon4.png" alt="" srcset="" />
                <div class="dataB">
                  <p>临时车辆</p>
                  <p class="num">{{statisticData.lsNum}}</p>
                </div>
              </div>
            </div>
            <div class="item">
              <div class="itemInner itemInner5">
                <img src="@/assets/images/carIcon5.png" alt="" srcset="" />
                <div class="dataB">
                  <p>在场车辆数量</p>
                  <p class="num">{{statisticData.presencenum}}</p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="listBottom">
          <div class="whiteBlock">
            <div class="pageTitle">
              <span
                class="tabItem"
                :class="dataType == 1 ? 'active' : ''"
                @click="dataType = 1;getCarPassRecord(1,1)"
                >白名单列表</span
              >
              <span
                class="tabItem"
                :class="dataType == 2 ? 'active' : ''"
                @click="dataType = 2;getCarPassRecord(1,2)"
                >黑名单列表</span
              >
            </div>
            <el-table :data="whiteOrBlackList" class="tables">
              <el-table-column
                prop="carNumber"
                :label="$t('message.carManage.carNumber')"
              >
              </el-table-column>
              <el-table-column prop="passTime" :label="'进出时间'">
                  <template slot-scope="scope">
                  {{ scope.row.passTime.split(' ')[1] }}
                </template>
              </el-table-column>
              <el-table-column prop="type" :label="'进出标识'">
                <template slot-scope="scope">
                  {{ scope.row.type == 1 ? "出" : "进" }}
                </template>
              </el-table-column>
              <el-table-column prop="location" :label="'进出位置'">
              </el-table-column>
              <el-table-column prop="carColor" :label="'车牌颜色'">
              </el-table-column>
              <!-- <el-table-column prop="imageUrl" :label="'进出场图片'">
                <template slot-scope="scope">
                  <img
                    :preview="
                      scope.row.imageUrl
                        ? $store.state.FILEURL + scope.row.imageUrl
                        : ''
                    "
                    :src="
                      scope.row.imageUrl
                        ? $store.state.FILEURL + scope.row.imageUrl
                        : ''
                    "
                    alt=""
                    height="30"
                  />
                </template>
              </el-table-column> -->
              <el-table-column prop="panoramaUrl" :label="'抓拍照片'">
                <template slot-scope="scope">
                  <img
                    :preview="
                      scope.row.panoramaUrl
                        ? $store.state.FILEURL + scope.row.panoramaUrl
                        : ''
                    "
                    :src="
                      scope.row.panoramaUrl
                        ? $store.state.FILEURL + scope.row.panoramaUrl
                        : ''
                    "
                    alt=""
                    height="30"
                  />
                </template>
              </el-table-column>
            </el-table>
            <el-pagination
              class="pagerBox"
              @current-change="handleCurrentChange1"
              :current-page="pageNo1"
              :page-size="pageSize"
              layout="total, prev, pager, next"
              :total="Number(total1)"
              background
            ></el-pagination>
          </div>
          <div class="whiteBlock">
            <div class="pageTitle">临时车辆列表</div>
            <el-table :data="temporaryCarList" class="tables">
              <el-table-column
                prop="carNumber"
                :label="$t('message.carManage.carNumber')"
              >
              </el-table-column>
              <el-table-column prop="passTime" :label="'进出时间'">
                  <template slot-scope="scope">
                  {{ scope.row.passTime.split(' ')[1] }}
                </template>
              </el-table-column>
              <el-table-column prop="type" :label="'进出标识'">
                <template slot-scope="scope">
                  {{ scope.row.type == 1 ? "出" : "进" }}
                </template>
              </el-table-column>
              <el-table-column prop="location" :label="'进出位置'">
              </el-table-column>
              <el-table-column prop="carColor" :label="'车牌颜色'">
              </el-table-column>
              <!-- <el-table-column prop="imageUrl" :label="'进出场图片'">
                <template slot-scope="scope">
                  <img
                    :preview="
                      scope.row.imageUrl
                        ? $store.state.FILEURL + scope.row.imageUrl
                        : ''
                    "
                    :src="
                      scope.row.imageUrl
                        ? $store.state.FILEURL + scope.row.imageUrl
                        : ''
                    "
                    alt=""
                    height="30"
                  />
                </template>
              </el-table-column> -->
              <el-table-column prop="panoramaUrl" :label="'抓拍照片'">
                <template slot-scope="scope">
                  <img
                    :preview="
                      scope.row.panoramaUrl
                        ? $store.state.FILEURL + scope.row.panoramaUrl
                        : ''
                    "
                    :src="
                      scope.row.panoramaUrl
                        ? $store.state.FILEURL + scope.row.panoramaUrl
                        : ''
                    "
                    alt=""
                    height="30"
                  />
                </template>
              </el-table-column>
            </el-table>
            <el-pagination
              class="pagerBox"
              @current-change="handleCurrentChange2"
              :current-page="pageNo2"
              :page-size="pageSize"
              layout="total, prev, pager, next"
              :total="Number(total2)"
              background
            ></el-pagination>
          </div>
        </div>
      </vue-scroll>
    </div>
  </div>
</template>
<script>
import areaTree from "@/components/areaTree";
import { GetDateStr } from "@/assets/js/util";
import {
  selectCarPassPageApi,
  selectCarStatisticsApi,
} from "@/assets/js/api/carManage";
export default {
  components: { areaTree },
  data() {
    return {
      temporaryCarList: [],
      whiteOrBlackList:[],
      dataType: 1,
      searchDate: "",
      searchsn: "",
      pageNo1: 1,
      pageNo2: 1,
      total1: 0,
      total2: 0,
      pageSize: 8,
      statisticData:{
          blackNum: 0,
            innum: 0,
            lsNum: 0,
            outnum: 0,
            presencenum: 0,
            whiteNum: 0
      }
    };
  },
  mounted() {
    this.searchDate = GetDateStr(0, "-");
    this.initData();
  },
  methods: {
    changeDate() {
      this.getStatisticData();
      this.getCarPassRecord(1,1);
      this.getCarPassRecord(1,3);
    },
    initData() {
      this.backArr = this.$store.state.mapBackArr;
      // 
      if (this.backArr.length > 0) {
        this.searchsn = this.backArr[this.backArr.length - 1].sn;
      } else {
        switch (Number(this.$store.state.userInfo.accountType)) {
          case 2:
            this.searchsn = this.$store.state.userInfo.headquartersSn;
            break;
          case 3:
            this.searchsn = this.$store.state.userInfo.sn;
            break;
          case 4:
            this.searchsn = this.$store.state.userInfo.sn;
            break;
        }
      }

      this.getStatisticData();
      this.getCarPassRecord(1,1);
      this.getCarPassRecord(1,3);
    },
    getStatisticData() {
      selectCarStatisticsApi({
        queryTime: this.searchDate,
        sn: this.searchsn,
      }).then((res) => {
          this.statisticData=res.result
      });
    },
    getCarPassRecord(pageNo,type) {
      selectCarPassPageApi({
        queryTime: this.searchDate,
        sn: this.searchsn,
        pageNo: pageNo,
        pageSize: this.pageSize,
        type: type,
      }).then((res) => {
          if(type==1||type==2){
              this.whiteOrBlackList=res.result.records;
              this.total1=res.result.total
          }else{
              this.temporaryCarList=res.result.records;
              this.total2=res.result.total
          }
      });
    },
    handleCurrentChange2(value) {
      this.pageNo2 = value;
      this.getCarPassRecord(value,3);
    },
    handleCurrentChange1(value) {
      this.pageNo1 = value;
      this.getCarPassRecord(value,this.dataType);
    },
    changeCompany(sn) {
      this.searchsn = sn;
    },
  },
};
</script>
<style lang="less" scoped>
.rightContent {
  width: calc(100% - 350px);
  margin-left: 20px;
  padding: 0 !important;
  float: left;
}
.searchDate {
  position: absolute;
  right: 20px;
  top: 15px;
  width: 140px;
}
.realTimeBox {
  padding: 15px;
  .realTimeInner {
    display: flex;
    margin: 35px 0 15px;
    img {
      width: 62px;
      height: 62px;
    }
    .item {
      flex: 1;
      justify-content: center;
      display: inline-flex;
    }
    .itemInner {
      width: 230px;
      height: 107px;
      border: 1px solid royalblue;
      border-radius: 11px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 15px;
      .dataB {
        margin-left: 30px;
        text-align: center;

        margin-top: 5px;
        .num {
          font-size: 26px;
        }
      }
    }
    .itemInner1 {
      border: 1px solid #44d7b6;
      background-color: rgba(68, 215, 182, 0.1);
      .num {
        color: #44d7b6;
      }
    }
    .itemInner2 {
      border: 1px solid #7a67f6;
      background-color: rgba(122, 103, 246, 0.1);
      .num {
        color: #7a67f6;
      }
    }
    .itemInner3 {
      border: 1px solid #5181f6;
      background-color: rgba(81, 129, 246, 0.1);
      .num {
        color: #5181f6;
      }
    }
    .itemInner4 {
      border: 1px solid #f67f51;
      background-color: rgba(246, 127, 81, 0.1);
      .num {
        color: #f67f51;
      }
    }
    .itemInner5 {
      border: 1px solid #f7b500;
      background-color: rgba(247, 181, 0, 0.1);
      .num {
        color: #f7b500;
      }
    }
  }
}
.listBottom {
  margin-top: 10px;
  overflow: hidden;
  height: calc(100% - 214px);
  min-height: 550px;
  .whiteBlock {
    float: left;
    width: calc(50% - 35px);
    padding: 15px;
    height: 100%;
    &:first-child {
      margin-right: 10px;
    }
  }
  .tabItem {
    cursor: pointer;
    background-color: rgba(81, 129, 246, 0.1);
    padding: 4px 12px;
    &.active {
      background-color: @--color-primary;
      color: white;
    }
  }
}
.tables{
    min-height: 450px;
}
.pagerBox{
    margin-top: 10px;
}

</style>