<style>
.BusAccountInfo .leftDate {
  font-size: 14px;
  font-weight: bold;
  color: #333333;
  background-color: #e3e3e3;
  border-radius: 4px;
  float: left;
  width: 103px;
  height: 30px;
  text-align: center;
  margin: 20px 0 20px 20px;
  line-height: 30px;
}
.BusAccountInfo .listSpan span {
  display: inline-block;
  margin-right: 50px;
  font-size: 12px;
  color: #333333;
}
.BusAccountInfo .backBtn {
  float: right;
  margin: 20px 20px 0 0;
}
.BusAccountInfo .BusCode {
  float: left;
  width: 100px;
  height: 30px;
  background-color: #f5f5f5;
  border-radius: 4px;
  text-align: center;
  line-height: 30px;
  font-weight: bold;
  color: #333333;
  margin: 15px 0 0 20px;
  position: relative;
}
.BusAccountInfo .AccountList {
  width: 100%;
  height: 60px;
  background-color: #fff;
  margin-bottom: 10px;
  font-size: 12px;
  margin-top: 20px;
  min-width: 1125px;
}
.BusAccountInfo .nail {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background-color: #cfcfcf;
}
.BusAccountInfo .N1 {
  left: 10px;
  top: 10px;
}
.BusAccountInfo .N2 {
  right: 10px;
  top: 10px;
}
.BusAccountInfo .N3 {
  left: 10px;
  top: 20px;
}
.BusAccountInfo .N4 {
  right: 10px;
  top: 20px;
}
.BusAccountInfo .suplier {
  float: left;
  width: 10%;
  text-align: center;
  line-height: 60px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.BusAccountInfo .suplier span {
  display: inline-block;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background-color: #4cc0fc;
  margin-right: 5px;
  text-align: center;
  line-height: 26px;
}
.BusAccountInfo .suplier i {
  color: #fff;
}
.BusAccountInfo .JieSong {
  float: left;
  width: 10%;
  min-width: 150px;
  border-right: 1px dashed #d7d7d7;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 60px;
}
.BusAccountInfo .TCList {
  width: 29%;
  float: left;
  min-width: 200px;
  line-height: 60px;
  border-right: 1px dashed #d7d7d7;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.BusAccountInfo .TCList > span {
  display: inline-block;
  margin-right: 10px;
}
.BusAccountInfo .teamName {
  width: 26px;
  height: 26px;
  background-color: #ff793e;
  margin: 0 10px;
  color: #fff;
  display: inline-block;
  border-radius: 50%;
  text-align: center;
  line-height: 26px;
}
.BusAccountInfo .priceList {
  float: left;
  width: 100px;
  text-align: center;
  line-height: 60px;
}
.BusAccountInfo .CreateDate {
  float: left;
  text-align: center;
  line-height: 60px;
}
.BusAccountInfo .listSpan > span:first-child {
  margin-left: 20px;
}
.BusAccountInfo .CreateDate i {
  color: #4bca81;
  margin-right: 5px;
  position: relative;
  top: 1px;
}
.BusAccountInfo {
  overflow: auto;
}
.BusAccountInfo::-webkit-scrollbar {
  width: 4px;
  height: 8px;
}
.BusAccountInfo::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  background: #ededed;
}
.BusAccountInfo::-webkit-scrollbar-thumb {
  border-radius: 4px;
  -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);
  background: #c9c9c9;
}
._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;
}
.BusAccountInfo .mainPopDiv {
  overflow: auto;
  max-height: 200px;
}
.BusAccountInfo .mainPopDiv::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 4px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}
.BusAccountInfo .mainPopDiv::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 4px;
  -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);
  background: #c9c9c9;
}
.BusAccountInfo .mainPopDiv::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  background: #ededed;
}
</style>
<template>
  <div class='flexOne BusAccountInfo'>
    <div class="dataIn clearfix">
      <div class="leftDate">{{msg.YearStr}}{{$t('pub.year')}}{{msg.MonthStr}}{{$t('pub.month')}}</div>
      <input type="button" class="hollowFixedBtn backBtn" @click="goUrl('busAccounting')" :value="$t('pub.returnBack')" />
    </div>
    <div class="listSpan">
      <span>{{$t('restaurant.res_income')}}：￥{{TotalPrice}}</span>
      <span>{{$t('restaurant.res_outcome')}}：￥{{CostPrice}}</span>
      <span>{{$t('restaurant.res_profit')}}：￥{{Profit}}<span class="noteList">（{{$t('restaurant.res_OrderInfo')}}）</span></span>
    </div>
    <div class="tbDiv">
      <div class="AccountList clearfix" v-for="(item,index) in DataList" :key="index">
        <div class="BusCode">
          {{item.BusCode}}
          <span class="nail N1"></span>
          <span class="nail N2"></span>
          <span class="nail N3"></span>
          <span class="nail N4"></span>
        </div>
        <div class="suplier">
          <span><i class="iconfont icon-gongyingshang"></i></span>{{item.SupplierName}}
        </div>
        <div class="JieSong">
          {{item.JieSong}}
        </div>
        <div class="TCList">
          <span v-for="subItem in item.TCList">
            <el-popover popper-class="_tripDetails" width="400" trigger="hover">
              <div class="mainPopDiv">
                <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>
                    <td>{{list.CityName}}</td>
                    <td>{{list.UseTypeStr}}</td>
                    <td>{{list.TotalNumber}}</td>
                  </tr>
                </table>
              </div>
              <span slot="reference" @mouseover="getTCinfo(subItem.ID)"><span class="teamName">团</span>{{subItem.Name}}</span>
            </el-popover>
          </span>
        </div>
        <div class="priceList">
          <span class="ExchangePrice">{{item.TotalPrice}}</span>
        </div>
        <div class="priceList">
          <span class="CostPrice">-{{item.CostPrice}}</span>
        </div>
        <div class="priceList">
          <span class="ExchangePrice">{{item.Profit}}</span>
        </div>
        <div class="CreateDate">
          <i class="iconfont icon-img_shijian"></i>{{item.CreateDate}}
        </div>
      </div>
    </div>
    <div class="noData" v-show="noData">
      {{$t('system.content_noData')}}
    </div>
    <el-pagination background @current-change="handleCurrentChange" :current-page.sync="currentPage" layout="total,prev, pager, next, jumper"
      :page-size=msg.pageSize :total=total>
    </el-pagination>
  </div>
</template>
<script>
export default {
  data() {
    return {
      msg: {
        pageIndex: 1,
        pageSize: 10,
        YearStr: "",
        MonthStr: ""
      },
      noData: false,
      loading: true,
      currentPage: 1,
      total: 0,
      DataList: "",
      YearStr: "",
      MonthStr: "",
      TotalPrice: "",
      CostPrice: "",
      Profit: "",
      TCInfoList: ""
    };
  },
  methods: {
    getList() {
      this.loading = true;
      this.apipost(
        "dmcindex_get_GetBusDetails",
        this.msg,
        res => {
          this.loading = false;
          if (res.data.resultCode == 1) {
            if (res.data.data.count > 0) {
              this.total = res.data.data.count;
              this.noData = false;
              res.data.data.pageData.forEach(x => {
                x.infoShow = false;
              });
              this.DataList = res.data.data.pageData;
            } else {
              this.noData = true;
            }
          }
        },
        err => {}
      );
    },

    handleCurrentChange(val) {
      //翻页功能按钮
      this.msg.pageIndex = val;
      this.getList();
    },
    goUrl(path) {
      this.$router.push({
        path: path
      });
    },
    showTip(index) {
      this.DataList.forEach(x => {
        x.infoShow = false;
      });
      this.DataList[index].infoShow = true;
    },
    closeTip() {
      this.DataList.forEach(x => {
        x.infoShow = false;
      });
    },
    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
      );
    }
  },
  mounted() {
    this.getList();
    this.msg.YearStr = this.$route.query.YearStr;
    this.msg.MonthStr = this.$route.query.MonthStr;
    this.TotalPrice = this.$route.query.TotalPrice;
    this.CostPrice = this.$route.query.CostPrice;
    this.Profit = this.$route.query.Profit;
  }
};
</script>