<style>
.leaderPayTable {
  width: 100%;
  margin: 10px auto;
  text-align: center;
  font-size: 12px;
  color: #333;
  border-collapse: collapse;
  background-color: #fff;
  border: 1px solid #d1d1d1;
}
.leaderPayTable th {
  background: #e6e6e6;
  padding: 8px 0;
  color: #333;
  border: 1px solid #d1d1d1;
  font-weight: bold;
}
.leaderPayTable tr td {
  background-color: #fff;
  padding: 8px 0;
  height: 32px;
  border: 1px solid #d1d1d1;
}
.LeaderPrintDiv .LeaderTitle {
  padding: 10px;
  text-align: left;
}
.leaderPayTable .itemName {
  text-align: left;
  padding: 0 10px;
}
@media print {
  .LeaderPrintDiv .btnListDiv {
    display: none;
  }
}
.comTotal {
  text-align: left;
  padding-left: 30px !important;
}
.LeaderPrintDiv {
  width: 100%;
  position: absolute;
}
.LeaderPrintDiv .childDiv {
  width: 1000px;
  margin: 0 auto;
}
.LeaderPrintDiv .childDiv ._Titles {
  font-size: 14px;
}
.wLeader2 .el-textarea__inner {
  height: 130px;
}
.LeaderPrintDiv .btnListDiv {
  margin: 20px auto;
  text-align: center;
}
.LeaderPrintDiv .leader2Btn {
  color: #fff;
  padding: 0 15px;
  height: 30px;
  background: #e95252;
  border: 1px solid #e95252;
  cursor: pointer;
  border-radius: 15px;
}
.cursorpointer{cursor: pointer;}
.text-decoration{text-decoration: underline;}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}
 
input[type="number"] {
    -moz-appearance: textfield;
}
.w150{
    width: 150px !important;
}
</style>

<template>
  <div class="LeaderPrintDiv">
    <div class="childDiv">
      <table border="0" cellspacing="1" class="leaderPayTable">
        <tr>
          <th width="130">团号</th>
          <th width="250">行程名称</th>
          <th width="110">出发时间</th>
          <th width="90">行程天数</th>
          <th width="90">成人</th>
          <th width="90">占床小孩</th>
          <th width="90">不占床小孩</th>
          <th width="90">婴儿人数</th>
          <th width="110">人数</th>
          <th width="110">领队</th>
        </tr>
        <tr v-for="item in nav">
          <td>{{item.NewCombinationNum}}</td>
          <td class="_Titles">{{item.Titles}}</td>
          <td>{{item.StartDateStr}}</td>
          <td>{{item.DayNum}}</td>
          <td>{{item.CommonReport.HouseStatistics.ManNum}}人</td>
          <td>{{item.CommonReport.HouseStatistics.NeedBed}}人</td>
          <td>{{item.CommonReport.HouseStatistics.NoNeedBed}}人</td>
          <td>{{item.CommonReport.HouseStatistics.BabyNum}}人</td>
          <td>{{item.CommonReport.HouseStatistics.RealityNum}}人</td>
          <td>{{item.GuideName}}</td>
        </tr>
        <tr v-if="!nav.length">
            <td colspan="10">暂无数据</td>
        </tr>
      </table>
      <table border="0" cellspacing="1" class="leaderPayTable">
        <tbody>
          <tr>
            <th>项目类型</th>
            <th>项目内容</th>
            <th>实付金额</th>
            <th>备注</th>
          </tr>
          <template v-for="(item,index) in dataList.ScenicList">
            <tr>
              <td v-if="index==0" :rowspan="dataList.ScenicList.length">景点门票</td>
              <td>
                <div
                  class="itemName"
                  v-for="subItem in item.ScenicStatisticsList"
                >{{subItem.ScenicName}}</div>
              </td>
              <td>
                <div
                  v-for="subItem in item.ScenicStatisticsList"
                >{{subItem.TotalPrice}} {{subItem.CurrencyStr}}</div>
              </td>
              <td>
                <template v-for="(sitem,sindex) in item.ScenicStatisticsList">{{sitem.Remarks}}</template>
              </td>
            </tr>
          </template>
          <tr v-for="(item,index) in dataList.BusList">
            <td v-if="index==0" :rowspan="dataList.BusList.length">交通</td>
            <td>
              {{item.ParkExplain}}
              <!-- <span v-if='index==0'>接机</span>
                            <span v-if='index!=0&&index!=dataList.BusList.length-1'>{{item.AirportPickUpStr}}</span>
              <span v-if='index==dataList.BusList.length-1'>送机</span>-->
            </td>
            <td>{{moneyFormat(item.TotalPrice)}} {{item.CurrencyStr}}</td>
            <td>{{item.Remarks}}</td>
          </tr>
          <template v-for="(item,index) in dataList.DiningList">
            <tr class="splitP ScenicTr">
              <td v-if="index==0" :rowspan="dataList.DiningList.length">餐饮</td>
              <td>
                <div
                  class="itemName"
                  v-for="subItem in item.DiningSummaryList"
                >{{subItem.NewDiningName}}</div>
              </td>
              <td>
                <div
                  v-for="subItem in item.DiningSummaryList"
                >{{subItem.TotalPrice}} {{subItem.CurrencyStr}}</div>
              </td>
              <td>
                <template v-for="(sitem,sindex) in item.DiningSummaryList">{{sitem.Remarks}}</template>
              </td>
            </tr>
          </template>
          <template v-for="(item,index) in dataList.HotelList">
            <tr>
              <td v-if="index==0" :rowspan="dataList.HotelList.length">酒店</td>
              <td width="30%">
                <div class="itemName">{{item.NewHotelName}}</div>
              </td>
              <td>{{item.TotalPrice}} {{item.CurrencyStr}}</td>
              <td>{{item.Remarks}}</td>
            </tr>
          </template>
          <tr v-if="(dataList.ScenicList && !dataList.ScenicList.length) || 
          (dataList.BusList && !dataList.BusList.length) || 
          (dataList.DiningList && !dataList.DiningList.length) ||
          (dataList.HotelList && !dataList.HotelList.length)">
              <td colspan="4">暂无数据</td>
          </tr>
        </tbody>
      </table>
      <table border="0" cellspacing="1" class="leaderPayTable">
        <tr>
          <th>类型</th>
          <th>金额</th>
        </tr>
        <tr v-show="totalList.SelfPayingExpendTotalPrice>0">
          <td>自费支出</td>
          <td>{{moneyFormat(totalList.SelfPayingExpendTotalPrice)}}</td>
        </tr>
        <tr v-show="totalList.SelfPayingIncomeTotalPrice>0">
          <td>自费收入</td>
          <td>{{moneyFormat(totalList.SelfPayingIncomeTotalPrice)}}</td>
        </tr>
        <!-- <tr v-show="totalList.IncomeTotalPrice>0">
          <td>消费收入</td>
          <td>{{moneyFormat(totalList.IncomeTotalPrice)}}</td>
        </tr> -->
        <tr
          v-show="(totalList.ExpendTotalPrice-totalScenicPrice-totalTrafficPrice-totalDinnerPrice-totalHotelPrice)>0"
        >
          <td>其他费用</td>
          <td>{{moneyFormat(totalList.ExpendTotalPrice-totalScenicPrice-totalTrafficPrice-totalDinnerPrice-totalHotelPrice)}}</td>
        </tr>
        <tr v-show="totalScenicPrice>0">
          <td>景点门票</td>
          <td>{{moneyFormat(totalScenicPrice)}}</td>
        </tr>
        <tr v-show="totalTrafficPrice>0">
          <td>交通</td>
          <td>{{moneyFormat(totalTrafficPrice)}}</td>
        </tr>
        <tr v-show="totalDinnerPrice>0">
          <td>餐饮</td>
          <td>{{moneyFormat(totalDinnerPrice)}}</td>
        </tr>
        <tr v-show="totalHotelPrice>0">
          <td>酒店</td>
          <td>{{moneyFormat(totalHotelPrice)}}</td>
        </tr>
      </table>
      <table border="0" cellspacing="1" class="leaderPayTable" v-if="TotalPriceData.length>0">
        <tr>
          <th>币种</th>
          <th>预付合计</th>
          <th>实际领款</th>
          <th>实付合计</th>
          <th>领队退款</th>
        </tr> 
        <tr
          v-for="item in TotalPriceData"
          v-if="item.PlanPrice > 0 || item.PlanTotalPrice > 0 || item.ExpendTotalPrice > 0"
        >
          <td>{{item.CurrencyStr}}</td>
          <td>{{moneyFormat(item.PlanPrice)}}</td>
          <td>{{moneyFormat(item.PlanTotalPrice)}}</td>
          <td>{{moneyFormat(item.ExpendTotalPrice)}}</td>
          <td>{{moneyFormat(item.PlanTotalPrice - item.ExpendTotalPrice)}}</td>
        </tr>
        <tr v-if="!TotalPriceData.length">
            <td colspan="5">暂无数据</td>
        </tr>
      </table>
      <table class="leaderPayTable" border="0" cellspacing="1" cellpadding="0">
        <tr>
          <th width="80">单号</th>
          <th>挂账金额</th>
          <th>挂账类型</th>
          <th>挂账对象</th>
          <th>单据状态</th>
          <th>创建时间</th>
          <th>创建人</th>
        </tr>
        <template v-for="(item, index) in TotalNav">
            <tr v-for="(subItem, subIndex) in item.FinanceList">
                <td>
                    <span>{{subItem.FrID}}</span>
                </td>
                <td>
                    <span>{{subItem.Money}}</span>
                </td>
                <td>
                    <span>{{subItem.TypeName}}</span>
                </td>
                <td>
                    <span>{{subItem.RemitterName}}：{{subItem.AccountNumber}}</span>
                </td>
                <td>
                    <span>{{subItem.StatusStr}}</span>
                </td>
                <td>
                    <span>{{subItem.CreateDate}}</span>
                </td>
                <td>
                    <span>{{subItem.CreateByStr}}</span>
                </td>
            </tr>
        </template>
        <tr v-if="!TotalNav.FinanceList || !TotalNav.FinanceList.length">
            <td colspan="7">暂无数据</td>
        </tr>
      </table>
      <table class="leaderPayTable" border="0" cellspacing="1" cellpadding="0">
        <tr>
          <th width="140">团号</th>
          <th width="200">实际领款</th>
          <th>结算金额</th>
          <th>结算财务单号</th>
          <th>操作</th>
        </tr>
        <tr v-for="(item, index) in TotalNav">
          <td>{{item.TCNUMS}}</td>
          <td style="padding: 5px 20px; height: 40px;    border: none;">
            <p style="margin: 0;text-align: left">
              已领款：
              <span style="color: red;">{{moneyFormat(item.LeaderGetPrice)}}</span>
            </p>
            <div  style="margin: 0;text-align: left">
                财务单号：
                <template v-for="(subItem, subIndex) in item.FinanceIds">
                    <p style="margin: 0;text-align: left">
                        <span
                            class="cursorpointer text-decoration"
                            @click="goFncUrl('FinancialDocumentsDetail', subItem.FinanceId)"
                        >{{subItem.FinanceId}}</span>&nbsp;&nbsp;
                        <span
                            class="cursorpointer text-decoration"
                            @click="goFncUrl('Application', subItem.FinanceId)"
                            v-if="subItem.IsPublic === 4"
                        >申请书</span> &nbsp;&nbsp;
                        <span
                            class="cursorpointer text-decoration"
                            @click="goFncUrl('DebitNote', subItem.FinanceId)"
                        >借支单</span>
                    </p>
                </template>
            </div>
          </td>
          <td>
              <span v-if="item.LeaderClosePrice > 0">实际结算金额: {{item.LeaderClosePrice}}</span>
              &nbsp;&nbsp;
              <el-input
                size="mini"
                class="w150"
                type="number"
                v-model="item.LeaderGetPriceT"></el-input>
          </td>
          <td>
            <p v-for="(subItem, subIndex) in item.FinanceCloseList" style=" margin: 0;">
              <span
                    class="cursorpointer text-decoration"
                    @click="goFncUrl('FinancialDocumentsDetail', subItem.FinanceId)"
                >{{subItem.FinanceId}}</span>&nbsp;&nbsp;
            </p>
          </td>
          <td width="80" class="_zhidan">
            <input  v-if="dataList.LeaderApply && dataList.LeaderApply.Status && dataList.LeaderApply.Status==2"
              type="button"
              value="制单"
              class="leader2Btn"
              @click="goZhiDan(item)"
            >
          </td>
        </tr>
        <tr v-if="!TotalNav && !TotalNav.length">
            <td colspan="5">暂无数据</td>
        </tr>
      </table>
      <template
        v-if="dataList.LeaderApply && dataList.LeaderApply.Status && dataList.LeaderApply.Status==1"
      >
        <el-input
          type="textarea"
          placeholder="请输入备注信息"
          v-model="dataList.LeaderApply.AccountForReason"
          class="wLeader2"
        />
      </template>
      <div class="btnListDiv">
        <input
          type="button"
          class="leader2Btn"
          @click="AuditOrder(2)"
          value="审核通过"
          v-show="dataList.LeaderApply.Status==1"
        >
        <input
          type="button"
          class="leader2Btn"
          @click="AuditOrder(1)"
          value="审核不通过"
          v-show="dataList.LeaderApply.Status==1"
        >
        <input type="button" class="leader2Btn" value="打印" @click="printTable()">
        <input type="button" class="leader2Btn" value="查看详情" @click="Lookdetails()">
      </div>
    </div>
    <a :href="blankUrl" id="blankLink" target="_blank" style="display:none">1</a>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isUpdate: false,
      loading: false,
      msg: {
        TCIDs: "",
        NewCombinationNum: ""
      },
      nav: [],
      dataList: {LeaderApply: {Status: 0}},
      //合计景点
      totalScenicPrice: 0,
      //合计餐饮
      totalDinnerPrice: 0,
      //合计酒店
      totalHotelPrice: 0,
      //合计交通
      totalTrafficPrice: 0,
      allTotal: 0,

      totalList: [],
      isShowRemark: false,
      TotalPriceData: [],
      blankUrl: "",
      TotalNav: [],
    };
  },
  methods: {
    goZhiDan: function(obj) {
      let id = [59];
      let TCIDARR = [obj.TCIDS];
      let orderObj = {
        OrderID: 0,
        OrderSource: 8,
        Obj: {},
        SourceID: 0,
        CostType: 57,
        TCIDList: TCIDARR,
        Money: obj.LeaderGetPriceT,
        TCNUMS: obj.TCNUMS
      }; 
      let fullPath = `/ChoiceAddFinancialDocuments?Type=${2}&templateID=${JSON.stringify(id)}&companyID=${obj.OutBranchId}&orderObj=${JSON.stringify(orderObj)}&blank=y&tab=领队报账`;
      let dom = document.querySelector("#blankLink");
      dom.href = `http://${window.location.host}/#${fullPath}`;
      dom.click();
    },
    goFncUrl: function(path, id) {
    //   this.$router.push({ name: path, query: { id: id, blank: "y" } });
      let fullPath = `/${path}?id=${id}&blank=y&tab=`;
      let dom = document.querySelector("#blankLink");
      dom.href = `http://${window.location.host}/#${fullPath}`;
      dom.click();
    },
    getNavT() {
        let _this = this
      this.apipost(
        "dmcstatistics_post_GetHotelStaticsByTCIDs",
        { TCIDs: this.$route.query.id },
        res => {
          if (res.data.resultCode == 1) {
            let TotalNav = res.data.data;
            TotalNav.forEach(x => {
              TotalNav.LeaderGetPriceT = 0; 
            }); 
            this.TotalNav = TotalNav;
          } else {
            this.$message.error(res.data.message);
          }
        },
        err => {}
      );
    },
    //获取数据
    getList() {
      this.loading = true;
      this.apipost(
        "dmcstatistics_post_GetNewLeaderPayStatics",
        this.msg,
        res => {
          this.loading = false;
          if (res.data.resultCode == 1) {
            this.dataList = res.data.data;
            this.dataList.HotelList.forEach(x => {
              this.totalHotelPrice += parseFloat(x.TotalPrice);
            });
            this.dataList.BusList.forEach(x => {
              this.totalTrafficPrice += parseFloat(x.TotalPrice);
            });
            this.dataList.ScenicList.forEach(x => {
              this.totalScenicPrice += parseFloat(
                x.ScenicStatisticsList[0].TotalPrice
              );
            });
            this.dataList.DiningList.forEach(x => {
              this.totalDinnerPrice += parseFloat(
                x.DiningSummaryList[0].TotalPrice
              );
            });
            this.allTotal = (
              this.totalHotelPrice +
              this.totalTrafficPrice +
              this.totalScenicPrice +
              this.totalDinnerPrice
            ).toFixed(2);
            this.isShowRemark = true;
          } else {
            this.Error(res.data.message);
          }
        },
        err => {}
      );
    },
    //获取顶部数据
    getNav() {
      this.apipost(
        "dmcstatistics_post_GetNewStaticsByTCIDs",
        {
          TCIDs: this.$route.query.id
        },
        res => {
          if (res.data.resultCode == 1) {
            this.nav = res.data.data;
          } else {
            this.Error(res.data.message);
          }
        },
        err => {}
      );
    },
    // 获取总金额
    getTotalPrice: function() {
      this.apipost(
        "dmcstatistics_post_GetNewTotalPrice",
        {
          TCIDs: this.$route.query.id
        },
        res => {
          if (res.data.resultCode == 1) {
            this.TotalPriceData = res.data.data;
          } else {
            this.Error(res.data.message);
          }
        },
        err => {}
      );
    },
    //获取总额
    getTotal(obj) {
      let totalPrice = 0;
      obj.forEach(x => {
        totalPrice += x.UserNum * x.UnitPrice;
      });
      return totalPrice;
    },
    //打印
    printTable() {
      window.print();
    },
    //获取总额
    getTotalMoney() {
      this.apipost(
        "dmcstatistics_post_GetTotalPrice",
        {
          TCIDs: this.$route.query.id
        },
        res => {
          if (res.data.resultCode == 1) {
            this.totalList = res.data.data;
          } else {
            this.Error(res.data.message);
          }
        },
        err => {}
      );
    },
    //审核
    AuditOrder(type) {
      if (
        type == 1 &&
        (this.dataList.LeaderApply.AccountForReason == null ||
          this.dataList.LeaderApply.AccountForReason == "")
      ) {
        this.Error("请填写备注信息");
        return;
      }
      this.dataList.LeaderApply.Status = type;
      let msg = this.dataList.LeaderApply;
      this.apipost(
        "dmcstatistics_post_AuditLeaderapply",
        msg,
        res => {
          if (res.data.resultCode == 1) {
            this.Success(res.data.message);
          } else {
            this.Error(res.data.message);
          }
        },
        err => {}
      );
    },
    Lookdetails() {
      console.log(this.$route.query.id);
      console.log(this.$route.query.NewCombinationNum);
      let fullPath = `/leaderPay?id=${this.$route.query.id}&NewCombinationNum=${
        this.$route.query.NewCombinationNum
      }&isUpdate=${true}&blank=y&tab=领队报账`;
      let dom = document.querySelector("#blankLink");
      dom.href = `http://${window.location.host}/#${fullPath}`;
      //console.log(that.$refs.blankLink.click())
      dom.click();
      // this.$router.push({
      //   name: 'leaderPay',
      //   query: {
      //     id: this.$route.query.id,
      //     NewCombinationNum:this.$route.query.NewCombinationNum,
      //     isUpdate: true,
      //     blank: 'y',
      //     tab: '领队报账'
      //   }
      // })
    }
  },
  created() {},
  mounted() {
    this.isUpdate = this.$route.query.isUpdate;
    this.msg.TCIDs = this.$route.query.id;
    this.getNav();
    this.getList();
    this.getTotalMoney();
    this.getTotalPrice();
    this.getNavT();
  }
};
</script>