<style>
.busManage .hotelResource {
  width: 100%;
  min-height: 500px;
  margin-top: 20px;
}
.busManage .resourceList {
  width: 215px;
  height: 290px;
  background-color: #fff;
  border: 1px dashed #ededed;
  border-radius: 4px;
  margin: 0 20px 20px 0;
  font-size: 12px;
  color: #333333;
  float: left;
}
.busManage .resourceList:hover {
  box-shadow: 0px 0px 20px rgba(191, 191, 191, 1);
  transition: all linear 0.5s;
}
.busManage .AddressInner {
  float: right;
  width: 160px;
  height: 18px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.busManage .btnList {
  margin-top: 16px;
  text-align: center;
}
.busManage .hotelBtn {
  width: 80px;
  height: 28px;
  border-radius: 14px;
  color: #fff;
  cursor: pointer;
  background-color: #f76f6f;
}
.busManage .w150 .el-input {
  width: 150px;
}
.busManage .delScien {
  position: absolute;
  right: 10px;
  top: 10px;
  display: none;
}
.busManage .delScien:hover {
  color: #f76f6f;
  cursor: pointer;
}
.busManage .resourceList:hover .delScien {
  display: block;
}
.busManage .peiState {
  display: inline-block;
  padding-left: 10px;
  font-size: 12px;
  margin-bottom: 25px;
}
.busManage .peiState i {
  display: inline-block;
  width: 5px;
  height: 12px;
  border-radius: 3px;
  margin-right: 5px;
  position: relative;
  top: 1px;
}
.busManage .P1 {
  background-color: #e95252;
}
.busManage .P2 {
  background-color: #47bf8c;
}
.busManage .P3 {
  background-color: #2aaef2;
}
.busManage .P4 {
  background-color: #bebebe;
}
.busManage .busINfo_Top {
  width: 80%;
  height: 110px;
  margin: auto;
  border-bottom: 1px dashed #ededed;
  margin-bottom: 10px;
}
.busManage .busCode {
  width: 145px;
  height: 40px;
  background-color: #f5f5f5;
  text-align: center;
  line-height: 40px;
  border-radius: 4px;
  position: relative;
  margin: 15px auto 10px;
  font-size: 20px;
}
.busManage .busLi li {
  font-size: 12px;
  color: #666666;
  margin-left: 16px;
  margin-bottom: 10px;
}
.busManage .busLi span {
  display: inline-block;
  width: 45px;
}
.busManage .letter {
  letter-spacing: 10px;
}
.busCode span {
  display: inline-block;
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background-color: #cfcfcf;
}
.busManage .circleOne {
  left: 10px;
  top: 10px;
}
.busManage .circleTwo {
  left: 10px;
  top: 30px;
}
.busManage .circleThree {
  right: 10px;
  top: 10px;
}
.busManage .circleFour {
  right: 10px;
  top: 30px;
}
.busManage .BusStateOne {
  color: #e95252;
}
.busManage .BusStateTwo {
  color: #2aaef2;
}
.busManage .BusStateThree {
  color: #47bf8c;
}
.busManage .BusStateFour {
  background-color: #d3d3d3 !important;
  color: #999999;
}
.busManage .TCList {
  width: 145px;
  height: 50px;
  margin: auto;
  overflow: auto;
}
.busManage .TCList::-webkit-scrollbar {
  width: 4px;
  height: 8px;
}
.busManage .TCList::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  background: #ededed;
}
.busManage .TCList::-webkit-scrollbar-thumb {
  border-radius: 4px;
  -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);
  background: #c9c9c9;
}
.busManage .TCList div {
  padding: 3px;
  background-color: #ff9c00;
  color: #fff;
  border-radius: 4px;
  width: 85%;
  margin: 5px auto;
}
._tripDetails {
  padding: 0;
  box-shadow: 0px 1px 3px 0px #dedede;
}
._tripDetails .popper__arrow::after {
  border-bottom-color: #ededed !important;
}
._tripDetails table {
  padding: 10px 0 0 20px;
  background-color: #ededed;
  border-collapse: collapse;
  border: 1px solid #d2d2d2;
  font-size: 12px;
}
._tripDetails table th {
  background-color: #ededed;
  padding: 5px;
}
._tripDetails table td {
  background-color: #ffffff;
  padding: 9px 15px;
  color: #333333;
  border: 1px solid #d2d2d2;
}
._tripDetails table ._color_666 {
  color: #666666;
}
._tripDetails table tr._color_666 th {
  padding: 9px 15px;
}
.busManagePopDiv {
  overflow: auto;
  max-height: 200px;
  width: 400px;
}
.busManagePopDiv::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 4px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}
.busManagePopDiv::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 4px;
  -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);
  background: #c9c9c9;
}
.busManagePopDiv::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  background: #ededed;
}
.busCityName {
  display: inline-block;
  width: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  position: relative;
  top: 3px;
}
.busManage .Driver {
  width: 130px !important;
}
</style>
<template>
  <div class="flexOne busManage">
    <div class="query-box">
      <ul>
        <li>
          <span class="hotel_name">
            <em>车配号</em>
            <el-input maxlength="50" v-model="QueryData.BusCode" class="w150" @keyup.native.enter="selectResource"></el-input>
          </span>
        </li>
        <li>
          <span>
            <em>所属国家</em>
            <el-select v-model="QueryData.QCountry" clearable class="w150" filterable :placeholder="$t('hotel.hotel_country')">
              <el-option v-for='item in countryList' :key="item.ID" :label="item.Name" :value="item.ID">
              </el-option>
            </el-select>
          </span>
        </li>
        <li>
          <span>
            <em>车辆状态</em>
            <el-select v-model="QueryData.QBusState" class="w150" :placeholder="$t('pub.unlimitedSel')">
              <el-option :label="$t('pub.unlimitedSel')" value='0'></el-option>
              <el-option v-for="item in BusStatusArray" :key="item.Id" :label="item.Name" :value="item.Id"></el-option>
            </el-select>
          </span>
        </li>
        <li>
          <button class="hollowFixedBtn" type="button" @click="resetPageIndex(),selectResource()">{{$t('pub.searchBtn')}}</button>
        </li>
      </ul>
    </div>
    <div class="hotelResource clearfix" v-loading="loading">
      <div>
        <span class="peiState"><i class="P1"></i>未配置</span>
        <span class="peiState"><i class="P2"></i>使用中</span>
        <span class="peiState"><i class="P3"></i>已配置</span>
        <span class="peiState"><i class="P4"></i>已失效</span>
      </div>
      <div class="resourceList" v-for="item in tableData" :key="item.subCode">
        <div class="busINfo_Top">
          <div class="busCode" :class="{'BusStateOne':item.BusState==1,'BusStateTwo':item.BusState==2,'BusStateThree':item.BusState==3,'BusStateFour':item.BusState==4}">
            {{item.BusCode}}
            <span class="circleOne"></span>
            <span class="circleTwo"></span>
            <span class="circleThree"></span>
            <span class="circleFour"></span>
          </div>
          <div class="TCList">
            <div v-for="items in item.TCList" :key="items.subCode">
              <el-popover popper-class="_tripDetails" width="400" trigger="hover">
                <div class="busManagePopDiv">
                  <table width="100%" border="0" cellspacing="0" cellpadding="0" class="popTable">
                    <tr class="_color_666">
                      <th>日期</th>
                      <th>城市</th>
                      <th>用车情况</th>
                      <th>预计人数</th>
                    </tr>
                    <tr v-for="list in TCInfoList" :key="list.subCode">
                      <td>{{list.PlanDate}}</td>
                      <el-tooltip class="item" effect="dark" :content="list.CityName" placement="top-start"
                        popper-class="max-w250">
                        <td><span class="busCityName">{{list.CityName}}</span></td>
                      </el-tooltip>
                      <td>{{list.UseTypeStr}}</td>
                      <td>{{list.TotalNumber}}</td>
                    </tr>
                  </table>
                </div>
                <span slot="reference" @mouseover="getTCinfo(items.ID)">{{items.Name}}</span>
              </el-popover>
            </div>
          </div>
        </div>
        <ul class="busLi">
          <li><span>供应商</span>{{item.SupplierName}}</li>
          <li><span class="letter">电话</span>{{item.SupplierTel}}</li>
          <li><span class="letter">司机</span>
            <el-tooltip class="item" effect="dark" :content="item.DriverName+''+item.DriverTel" placement="top-start"
              popper-class="max-w250">
              <span class="busCityName Driver">
                {{item.DriverName}} （{{item.DriverTel}}）
              </span>
            </el-tooltip>
          </li>
          <li><span class="letter">车型</span>{{item.BusTypeStr}} (核载:{{item.CarrierNum}})</li>
        </ul>
        <div class="btnList">
          <button @click="goUrl('BusInfo',item.Id)" v-if="item.BusState==1||item.BusState==2" class="hotelBtn">{{$t('pub.updateMsg')}}</button>
          <button class="hotelBtn" v-if="item.BusState!=1" @click="DownLoadFile(item)">下载车配表</button>
        </div>
      </div>
    </div>
    <el-pagination background @current-change="handleCurrentChange" :current-page.sync="QueryData.currentPage" :page-size="this.QueryData.pageSize"
      layout="total,prev, pager, next, jumper" :total="QueryData.total">
    </el-pagination>
  </div>

</template>

<script>
export default {
  data() {
    return {
      countryList: "",
      tableData: [],
      BusStatusArray: "",
      loading: true,
      TCInfoList: "",
      QueryData: {
        pageIndex: 1,
        pageSize: 14,
        QCountry: "",
        QBusState: "0",
        BusCode: "",
        total: 0,
        currentPage: 1
      }
    };
  },
  methods: {
    handleCurrentChange(val) {
      this.QueryData.pageIndex = val;
      this.selectResource();
    },
    resetPageIndex() {
      this.QueryData.pageIndex = 1;
      this.QueryData.currentPage = 1;
    },
    getCountryList() {
      //获取国家
      let countryQuery = {};
      this.apipost(
        "dict_post_Destination_GetCountry",
        countryQuery,
        res => {
          this.countryList = res.data.data;
        },
        err => {}
      );
    },
    selectResource() {
      this.loading = true;
      this.apipost(
        "bus_get_GetPageList",
        this.QueryData,
        res => {
          this.loading = false;
          if (res.data.resultCode == 1) {
            this.tableData = res.data.data.pageData;
            this.QueryData.total = res.data.data.count;
          }
        },
        null
      );
    },
    //初始化车辆状态
    getBusState() {
      let msg = {};
      this.apipost(
        "bus_get_GetBusStateList",
        this.QueryData,
        res => {
          if (res.data.resultCode == 1) {
            this.BusStatusArray = res.data.data;
          }
        },
        null
      );
    },
    goUrl(path, id) {
      this.$router.push({
        path: path,
        query: {
          id: id
        }
      });
    },
    getTCinfo(ID) {
      let msg = {
        TCID: ID
      };
      this.apipost(
        "bus_order_get_GetBusOrder",
        msg,
        res => {
          if (res.data.resultCode == 1) {
            this.TCInfoList = res.data.data;
          }
        },
        null
      );
    },
    DownLoadFile(item) {
      let msg = {
        ID: item.Id
      };
      this.GetLocalFile("DownLoadBusConfig", msg, item.BusCode + ".xls");
    }
  },
  mounted() {
    this.getBusState(); //初始化车辆状态
    this.getCountryList();
    this.selectResource();
  }
};
</script>