<template>
  <div>
    <div class="query-box" style="border-bottom: none;">
      <ul>
        <li>
          <span>
            <em>{{$t('system.table_ssLine')}}</em>
            <el-select class="w150" v-model="msg.LineId" filterable :placeholder="$t('pub.pleaseSel')"
              @change="getLineTeamList(msg.LineId)">
              <el-option :label="$t('pub.unlimitedSel')" :value="0"></el-option>
              <el-option v-for="item in LineList" :label="item.LineName" :value="item.LineID" :key="item.LineID">
              </el-option>
            </el-select>
          </span>
        </li>
        <li>
          <span>
            <em>{{$t('advmanager.v_xilie')}}</em>
            <el-select v-model="msg.LineteamId" filterable :placeholder="$t('pub.pleaseSel')">
              <el-option :label="$t('pub.unlimitedSel')" :value='0'></el-option>
              <el-option v-for="item in LineTeamList" :label='item.LtName' :value='item.LtID' :key='item.LtID'>
              </el-option>
            </el-select>
          </span>
        </li>
        <li>
          <span>
            <em>{{$t('visa.v_tuanhao')}}</em>
            <el-input v-model='msg.TCNUM'></el-input>
          </span>
        </li>
        <li><span><em>{{$t('sm.Date')}}</em>
            <el-date-picker v-model='msg.StartDate' class='w135' value-format="yyyy-MM-dd" type="date"></el-date-picker>
            -
            <el-date-picker v-model='msg.EndDate' class='w135' value-format="yyyy-MM-dd" type="date"></el-date-picker>
          </span>
        </li>
        <li>
          <input type="button" class="normalBtn" :value="$t('pub.searchBtn')" @click="getList();resetPageIndex()" />
        </li>
      </ul>
    </div>
    <div style="width: 100%;  overflow-x: auto;padding-bottom: 10px; ">
      <table border="0" cellspacing="1" cellpadding="0" class="ShoppingTable"
        style="border: 1px solid rgb(230, 230, 230);min-width: 1600px" v-loading="loading">
        <tr>
          <th width="115">{{$t('active.ad_xuhao')}}</th>
          <th width="100">{{$t('sm.chufadi')}}</th>
          <th width="110">{{$t('salesModule.CompanyNum')}}</th>
          <th width="100">{{$t('leader.leader_Leader')}}</th>
          <th width="100">{{$t('leader.leader_Guide')}}</th>
          <th width="190">{{$t('ground.dm')}}</th>
          <th width="60">{{$t('ground.jdrs')}}</th>
          <th width="70">{{$t('sm.company')}}</th>
          <th width="70">{{$t('fnc.a_zongjine')}}</th>
          <th width="80">{{$t('ground.ldyj')}}<br />({{$t('fnc.yingfu')}})</th>
          <th width="80">{{$t('ground.dyyj')}}<br />({{$t('fnc.yingfu')}})</th>
          <th width="80">{{$t('hotel.hotel_CurrentRate')}}</th>
          <th width="80">{{$t('ground.pingzheng')}}</th>
          <th width="80">{{$t('hotel.hotel_Order')}}</th>
        </tr>
        <tr v-if="shopDataList.length==0">
          <td colspan="22">{{$t('system.content_noData')}}</td>
        </tr>
        <tbody v-for="(outItem,outindex) in shopDataList" :class="{roomReservationsSplitTrCss:outindex%2!=0}"
          v-if="outItem.PriceShopList.length>0">
          <template v-for="(item,index) in outItem.PriceShopList">
            <template v-for="(subItem,subIndex) in item.ShopDetailsList">
              <tr>
                <td :rowspan="outItem.rowspanCount" v-if="index==0&&subIndex==0">
                  {{outItem.NewCombinationNum}}
                </td>
                <template v-if="outItem.TCList.length==1">
                  <td :rowspan="outItem.rowspanCount" v-if="index==0&&subIndex==0">
                    {{subItem.StartCityNames}}
                  </td>
                  <td :rowspan="outItem.rowspanCount" v-if="index==0&&subIndex==0">
                    {{subItem.TCNUMS}}
                  </td>
                  <td :rowspan="outItem.rowspanCount" v-if="index==0&&subIndex==0">
                    {{subItem.LeaderName}}
                  </td>
                  <td :rowspan="outItem.rowspanCount" v-if="index==0&&subIndex==0">
                    {{subItem.GuideName}}
                  </td>
                </template>
                <template v-else>
                  <td>
                    {{subItem.StartCityNames}}
                  </td>
                  <td>
                    {{subItem.TCNUMS}}
                  </td>
                  <td>
                    {{subItem.LeaderName}}
                  </td>
                  <td>
                    {{subItem.GuideName}}
                  </td>
                </template>
                <td :rowspan="item.ShopDetailsList.length" v-if='subIndex==0' width="180"
                  style="word-wrap:break-word ;">
                  {{item.ShopName}}
                </td>
                <td width="60">
                  {{subItem.EnterNum}}
                </td>
                <td width="70">
                  {{subItem.BName}}
                </td>
                <td width="70">
                  {{subItem.TotalMoney}}
                </td>
                <td width="80">
                  {{subItem.LeaderCommission}}
                </td>
                <td width="80">
                  {{subItem.GuideCommission}}
                </td>
                <td width="80" :rowspan="item.ShopDetailsList.length" v-if='subIndex==0'>
                  {{subItem.DMCRate}}
                </td>
                <td width="80" :rowspan="item.ShopDetailsList.length" v-if='subIndex==0'>
                  <p v-for="(img, imgIndex) in subItem.dmcImageList" title="点击下载" @click="downLoadPZ(img)"
                    v-if="img !== ''" style="cursor: pointer;color:blue;">{{ '凭证' + (imgIndex + 1)}}</p>
                </td>
                <td :rowspan="outItem.rowspanCount" v-if="index==0&&subIndex==0">
                  <div>
                    <p style="cursor: pointer;color:blue;" @click="isShowFinaceDailog=true,CurrentOutItem=outItem">
                      {{$t('ground.scdanju')}}</p>
                  </div>
                </td>
              </tr>
            </template>
          </template>
        </tbody>
        <tbody v-else v-for="(outItem,outindex) in shopDataList">
          <tr>
            <td>
              {{outItem.NewCombinationNum}}
            </td>
            <td>
            </td>
            <td>
            </td>
            <td>
            </td>
            <td>
            </td>
            <td width="180"></td>
            <td width="60"></td>
            <td width="70"></td>
            <td width="70"></td>
            <td width="80"></td>
            <td width="80"></td>
            <td width="80"> </td>
            <td width="80"></td>
            <td></td>
          </tr>
        </tbody>

      </table>
      <el-pagination background @current-change="handleCurrentChange" :current-page.sync="msg.currentPage"
        layout="total,prev, pager, next, jumper" :page-size="msg.pageSize" :total="msg.total"></el-pagination>
    </div>
    <el-dialog title="生成财务单据" :visible.sync="isShowFinaceDailog" custom-class='w400' center>
      <template>
        <el-form label-width="100px">
          <el-form-item :label="$t('fnc.fkfangshi')">
            <el-select v-model="PayType">
              <el-option :label="$t('ground.cgfukuan')" :value="1" :key="1"></el-option>
              <el-option :label="$t('ground.zjcfk')" :value="2" :key="2"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <button class="hollowFixedBtn"
            @click="isShowFinaceDailog=false,CurrentOutItem={}">{{$t('pub.cancelBtn')}}</button>
          <button class="normalBtn" type="primary" @click="CreateBill()">{{$t('pub.sureBtn')}}</button>
        </div>
      </template>
    </el-dialog>
    <a id='blankLink1' target="_blank" style="display:none">1</a>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        loading: false,
        msg: {
          pageIndex: 1,
          pageSize: 8,
          //购物店
          SelectType: 7,
          LineId: 0,
          LineteamId: 0,
          StartDate: '',
          TCNUM: "",
          EndDate: '',
          currentPage: 1,
          total: 0,
        },
        PayType: 1, //付款方式
        LineList: [],
        LineTeamList: [],
        shopDataList: [],
        //是否显示
        isShowFinaceDailog: false,
        //当前点击的对象
        CurrentOutItem: {},
      }
    },
    methods: {
      downLoadPZ: function (src) {
        let dom = document.querySelector("#blankLink1")
        dom.href = src;
        dom.click();
      },
      stringToArr(str) {
        return str.split(',')
      },
      getLineList() {
        this.apipost("line_post_GetAllList", {}, res => {
          if (res.data.resultCode == 1) {
            this.LineList = res.data.data;
          } else {
            this.$message.error(res.data.message);
          }
        });
      },
      //获取系列列表
      getLineTeamList(lineId) {
        this.LineTeamList = [];
        this.apipost(
          "team_post_GetList", {
            lineID: lineId,
            isTOOP: 1
          },
          res => {
            if (res.data.resultCode == 1) {
              this.msg.LineteamId = 0;
              this.LineTeamList = res.data.data;
            }
          }
        );
      },
      goUrlR(path, obj, title) {
        this.$router.push({
          name: path,
          query: {
            "ID": obj,
            blank: 'y',
            tab: title
          }
        })
      },
      goUrlT(path, obj, title) {
        this.$router.push({
          name: path,
          query: {
            "id": obj,
            blank: 'y',
            tab: title
          }
        })
      },
      goHuiZhi(TCIDS, LeaderName, GuideName, StartCityNames, TCIDEN) {
        this.$router.push({
          name: 'ShoppingReceipt',
          query: {
            LeaderName: LeaderName,
            GuideName: GuideName,
            StartCityNames: StartCityNames,
            blank: 'y',
            TCID: TCIDS,
            TCIDEN: TCIDEN
          }
        });
      },
      goUrl(path, obj, title) {
        this.$router.push({
          name: path,
          query: {
            "id": obj.TCIDS,
            'TCNUM': obj.TCNUMS,
            'flightTotal': obj.TotalSeat,
            'GuestNum': obj.CommonReport.HouseStatistics.RealityNum,
            'NewCombinationNum': obj.NewCombinationNum,
            blank: 'y',
            tab: title
          }
        })
      },
      handleCurrentChange(val) {
        this.msg.pageIndex = val;
        this.getList();
      },
      resetPageIndex() {
        this.msg.pageIndex = 1;
        this.currentPage = 1;
      },
      getList() {
        this.loading = true;
        this.apipost('dmcstatistics_post_GetShopCombinationNumService', this.msg, res => {
          this.loading = false
          if (res.data.resultCode == 1) {
            this.msg.total = res.data.data.count;
            let shopDataList = res.data.data.pageData;
            shopDataList.forEach(x => {
              x.PriceShopList.forEach(z => {
                z.imgList = (z.Credentials && z.Credentials.length > 0) ? z.Credentials.split(",") :
                  '';
              });
            });
            this.shopDataList = shopDataList;
          } else {
            this.$message.error(res.data.message)
          }
        }, err => {})
      },
      //生成单据
      CreateBill() {
        var that = this;
        this.Confirm('是否生成财务单据？', function () {
          that.loading = true;
          var nMsg = {
            TCIDs: that.CurrentOutItem.TCIDs,
            PayType: that.PayType,
            uid: that.getLocalStorage().EmployeeId
          };
          let fileName = "生成[" + that.CurrentOutItem.NewCombinationNum + "]购物店数据.xls";
          that.GetLocalFile("dmcstatistics_post_ShopCreateBillAndExport", nMsg, fileName,
            res => {
              that.loading = false;
              this.isShowFinaceDailog = false;
              that.Success("导入成功!");
              that.getList();
            });
        });
      },
    },
    mounted() {
      let myDate = new Date();
      let nowDate =
        myDate.getFullYear() +
        "-" +
        parseInt(myDate.getMonth() + 1) +
        "-" +
        myDate.getDate();
      this.msg.StartDate = nowDate;
      //this.msg.TCNUM="NRTMF06190601A";
      this.getLineList();
      this.getList();
    },
  }

</script>

<style scoped>
  .roomReservationsSplitTrCss td {
    background: #eee !important;
  }

  .more_td>div {
    height: 40px;
    border-bottom: 1px solid rgb(204, 204, 204);
  }

  .more_td>div:last-child {
    border-bottom: 0;
  }

  .ShoppingTable {
    width: 100%;
    font-size: 12px;
    color: #333;
    margin: auto;
    border-collapse: collapse;
    background-color: #fff;
  }

  .ShoppingTable td {
    border: 1px solid #d1d1d1;
    text-align: center;
    padding: 10px 0;
  }

  .ShoppingTable th {
    background-color: #E6E6E6;
    height: 35px;
  }

  .SponeTable td:first-child {
    border-left: 0;
  }

  .SponeTable td:last-child {
    border-right: 0;
  }

</style>
