<style scoped>
  .admissionStatisticsDetailsTalbe {
    table-layout: fixed;
  }

  .admissionStatisticsDetailsTalbe thead tr th {
    position: sticky;
    top: 0;
    z-index: 10;
  }

</style>
<template>
  <div>
    <div class="query-box" style="border-bottom: none;">
      <ul>
        <li>
          <template v-if="IsOperation !=1">
            <el-button type="primary" class="fr normalBtn mb30" :loading="saveLoading" @click="saveList(1)">
              {{$t('pub.saveBtn')}}</el-button>
          </template>
          <template v-else>
            <span style="color:red;font-size:14px;">{{$t('objFill.v101.hote.yizhidbnzxg')}}</span>
            <el-button type="primary" class="fr normalBtn mb30" v-if="EditBtn&&currentUserInfo.EmployeeId==615"
              :loading="saveLoading" @click="saveList(1)">{{$t('pub.saveBtn')}}</el-button>
          </template>
        </li>
      </ul>
    </div>
    <div style="width: 100%;  overflow-x: auto;padding-bottom: 10px; " class="ownScrollbarStyle"
      :style="{height: boxHeight + 'px'}">
      <table border="0" cellspacing="1" cellpadding="0" class="admissionStatisticsDetailsTalbe" v-loading="loading">
        <thead>
          <tr>
            <th>
              {{$t('salesModule.CompanyNum')}}
            </th>
            <th colspan="15" style="text-align:left; padding-left:8px;">
              <p class="link" @click="goUrlT('productQuery',TCNUM,'产品查询')"
                style="text-decoration:underline;cursor:pointer;">{{TCNUM}}</p>
            </th>
          </tr>
          <tr>
            <th width="115">{{$t('ground.youlanshijian')}}</th>
            <th width="250">{{$t('visaT.jdname')}}</th>
            <th width="70">{{$t('objFill.zongrenshu')}}</th>
            <th width="70">{{$t('objFill.youke')}}<br />{{$t('advmanager.v_type')}}</th>
            <th width="70">{{$t('objFill.youke')}}<br />{{$t('admin.admin_personNumber')}}</th>
            <th width="70">{{$t('objFill.shiyong')}}<br />{{$t('admin.admin_personNumber')}}</th>
            <th width="70">{{$t('ground.mianrenshu')}}</th>
            <th width="120">{{$t('fnc.danjia')}}</th>
            <th width="90">{{$t('objFill.jingexj')}}</th>
            <th width="120">{{$t('hotel.hotel_commission')}}</th>
            <th width="100">{{$t('fnc.a_zongjine')}}</th>
            <th width="210">{{$t('ground.fkfsdth')}}</th>
            <th width="200">{{$t('pub.pubRemark')}}</th>
          </tr>
        </thead>
        <tbody>
          <template v-for="(item,index) in DataList">
            <template v-for="(subItem,subIndex) in item.ScenicStatisticsList">
              <tr v-for="(childItem,childIndex) in subItem.TicketPriceList" :key="`s_`+index+subIndex+childIndex">
                <td v-if="childIndex==0" :rowspan="subItem.TicketPriceList.length">
                  {{item.UseTimeStr}}
                </td>
                <td v-if="childIndex==0" :rowspan="subItem.TicketPriceList.length">
                  <table class="scenicTable">
                    <tr>
                      <td colspan="2" style="text-align:left;padding-left:8px;">
                        <span class="spanlink" @click="goUrl('ticketManagement',subItem,'门票管理')">
                          {{subItem.ScenicName}}
                        </span>
                      </td>
                    </tr>
                    <tr>
                      <td width="40">
                        {{$t('hotel.table_tel')}}：
                      </td>
                      <td style="text-align:left;">
                        {{subItem.Tel}}
                      </td>
                    </tr>
                    <tr>
                      <td width="40">
                        {{$t('admin.admin_address')}}：
                      </td>
                      <td style="text-align:left;">
                        {{subItem.Address}}
                      </td>
                    </tr>
                  </table>
                  <template v-if="subItem.ScenicOfferPrice&& subItem.ScenicOfferPrice>0">
                    <br />
                    <span style="font-weight:bold;font-size:14px;">{{$t('objFill.baojiajingdian')}}:<font
                        style="color:red;">
                        {{subItem.ScenicOfferName}}
                        ({{subItem.ScenicOfferPrice}}<template v-if="subItem.IsScenicChange">
                          <el-tooltip :content="subItem.ScenicChangeRemark">
                            <font style="color:blue;">
                              <template v-if="subItem.ScenicChangeValue>0">
                                +{{subItem.ScenicChangeValue}}
                              </template>
                              <template v-else>
                                {{subItem.ScenicChangeValue}}
                              </template>
                            </font>
                          </el-tooltip>
                        </template>/{{$t('hotel.hotel_people')}})</font>
                    </span>
                  </template>
                </td>
                <td v-if="childIndex==0" :rowspan="subItem.TicketPriceList.length">
                  {{subItem.UseAccount}}
                </td>
                <td>
                  {{personStrToWord(childItem.PeopleType)}}
                </td>
                <td>
                  {{childItem.PeopleNum}}
                </td>
                <td>
                  <el-input class='w50 tcenter' v-model='childItem.UsePeopleNum' type="number"
                    @input='calculationPrice()' @keyup.native="checkInteger(childItem,'UsePeopleNum')"></el-input>
                </td>
                <td>
                  <el-input class='w50 tcenter' maxlength='2' v-model='childItem.Discount' type="number"
                    @input='calculationPrice()' @keyup.native="checkInteger(childItem,'Discount')"></el-input>
                </td>
                <td>
                  <template v-if="EditBtn||LineId==90">
                    <el-input class='w100' v-model='childItem.PeoplePrice'
                      @keyup.native="checkPrice(childItem,'PeoplePrice')" @input='calculationPrice()' type="text">
                    </el-input>
                  </template>
                  <template v-else>
                    <span class="spanlink" v-if='childItem.PeoplePrice==0'
                      @click="goUrl('ticketManagement',subItem,'门票管理')">{{$t('leader.leader_Set')}}</span>
                    <span v-else>
                      {{childItem.PeoplePrice}}
                    </span>
                  </template>
                </td>
                <td>
                  {{(childItem.UsePeopleNum-childItem.Discount)*childItem.PeoplePrice}}
                </td>
                <td>
                  <template v-if="EditBtn||LineId==90">
                    <el-input class='w50 tcenter' v-model='childItem.DiscountPrice'
                      @keyup.native="checkPrice(childItem,'DiscountPrice')" @input='calculationPrice()' type="text">
                    </el-input>
                  </template>
                  <template v-else>
                    <span class="spanlink" v-if='childItem.DiscountPrice==0'
                      @click="goUrl('scenicSpotInfoManage',subItem,'景区列表')">{{$t('leader.leader_Set')}}</span>
                    <span v-if='childItem.DiscountPrice!=0'>{{childItem.DiscountPrice}}%</span>
                  </template>
                </td>
                <td v-if="childIndex==0" :rowspan="subItem.TicketPriceList.length">
                  {{subItem.TotalPrice}}
                </td>
                <td v-if="childIndex==0" :rowspan="subItem.TicketPriceList.length">
                  <table class="scenicTable">
                    <tr>
                      <td width="60" style="text-align:right;">
                        {{$t('objFill.v101.bizhongxz')}}：
                      </td>
                      <td style="text-align:left;">
                        <el-select class='w135 sel' filterable v-model='subItem.CurrencyId'>
                          <el-option v-for='item in currencyList' :label='item.Name' :value='item.ID' :key='item.ID'>
                          </el-option>
                        </el-select>
                      </td>
                    </tr>
                    <tr>
                      <td width="60" style="text-align:right;">
                        {{$t('hotel.hotel_payType')}}：
                      </td>
                      <td style="text-align:left;">
                        <el-select class='w135 sel' v-model='subItem.PayStyle' :placeholder="$t('pub.pleaseSel')">
                          <el-option :label="$t('objFill.qingxuanzhe')" :value='0'></el-option>
                          <el-option :label="$t('objFill.xianfu')" :value='1'></el-option>
                          <el-option :label="$t('objFill.qiandan')" :value='2'></el-option>
                          <el-option :label="$t('objFill.shiweidikou')" :value='5'></el-option>
                          <el-option :label="$t('objFill.yufu')" :value='4'></el-option>
                          <el-option :label="$t('objFill.wangding')" :value='12'></el-option>
                          <el-option :label="$t('ground.enterpriseAlipay')" :value='15'></el-option>
                        </el-select>
                      </td>
                    </tr>
                    <tr>
                      <td width="60" style="text-align:right;">
                        {{$t('objFill.v101.hote.dingtuanh')}}：
                      </td>
                      <td style="text-align:left;">
                        <el-input class='w135' v-model='subItem.CombinationNum' type="text"></el-input>
                      </td>
                    </tr>
                  </table>
                </td>
                <td v-if="childIndex==0" :rowspan="subItem.TicketPriceList.length">
                  <el-input type='textarea' rows="4" class='w170' v-model='subItem.Remarks'></el-input>
                </td>
              </tr>
            </template>
          </template>
        </tbody>
        <tfoot>
          <tr>
            <td>
            </td>
            <td>
            </td>
            <td>
            </td>
            <td>
            </td>
            <td>
            </td>
            <td>
            </td>
            <td>
            </td>
            <td>
            </td>
            <td colspan="2">
              合计
            </td>
            <td>
              <font style="color:red;font-weight:bold;">
                {{sTotalPrice}}
              </font>
            </td>
            <td>
            </td>
            <td>
            </td>
          </tr>
        </tfoot>
      </table>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        currencyList: [],
        EditBtn: false, //房餐景点修改权限
        defaultSelectValue: 0,
        DataList: [],
        roomList: [],
        TCNUM: '',
        flightTotal: 0,
        GuestNum: 0,
        loading: false,
        IsOperation: '',
        saveLoading: false,
        LineId: 0, //线路编号
        currentUserInfo: {},
        sTotalPrice: 0, //合计
        boxHeight: 0,
      }
    },
    methods: {
      personStrToWord(PeopleType) {
        var resultStr = "";
        if (this.LineId == 90) {
          if (PeopleType == 1) {
            resultStr = "门票";
          } else if (PeopleType == 2) {
            resultStr = "小交通";
          } else if (PeopleType == 3) {
            resultStr = "";
          }
        } else {
          if (PeopleType == 1) {
            resultStr = this.$t('objFill.darens')[0];
          } else if (PeopleType == 2) {
            resultStr = this.$t('objFill.darens')[1];
          } else if (PeopleType == 3) {
            resultStr = this.$t('objFill.xiaoren');
          }
        }
        return resultStr;
      },
      //页面跳转[小写]
      goUrlT(path, obj, title) {
        this.$router.push({
          name: path,
          query: {
            id: obj,
            blank: 'y',
            tab: title
          }
        });
      },
      goUrl(path, obj, name) {
        this.$router.push({
          path: path,
          query: {
            id: obj.ID,
            blank: "y",
            tab: name
          }
        });
      },
      calculationPrice() {
        var tempPrice = 0;
        if (this.DataList && this.DataList.length > 0) {
          this.DataList.forEach(rItem => {
            if (rItem.ScenicStatisticsList && rItem.ScenicStatisticsList.length > 0) {
              rItem.ScenicStatisticsList.forEach(sItem => {
                var totalPrice = 0;
                if (sItem.TicketPriceList && sItem.TicketPriceList.length > 0) {
                  sItem.TicketPriceList.forEach(tItem => {
                    totalPrice += tItem.PeoplePrice * (tItem.UsePeopleNum - tItem.Discount) * (1 - tItem
                      .DiscountPrice / 100);
                  });
                }
                sItem.TotalPrice = totalPrice.toFixed(2);
                tempPrice += Number(totalPrice);
              });
            }
          });
        }
        this.sTotalPrice = tempPrice.toFixed(2);
      },
      getCurrencyList: function () {
        this.apipost("financeinfo_post_GetList", {
          Name: ""
        }, res => {
          if (res.data.resultCode === 1) {
            let data = res.data.data;
            this.currencyList = data
          }
        }, null)
      },
      getList() {
        this.loading = true;
        this.apipost('dmcstatistics_get_GetScenicStaticsDetail', {
          TCIDs: this.$route.query.id
        }, res => {
          this.loading = false;
          if (res.data.resultCode == 1) {
            this.DataList = res.data.data.ScenicList;

            this.IsOperation = res.data.data.IsOperation;
            this.calculationPrice();
          } else {
            this.$message.error(res.data.message);
          }
        }, err => {})
      },
      saveList(type) {
        this.saveLoading = true;
        if (type == 0) {
          this.DataList.forEach(item => {
            item.ScenicStatisticsList.forEach(insideItem => {
              insideItem.OrderState = 0;
              insideItem.TicketPriceList.forEach(subItem => {
                if (!subItem.Discount) {
                  subItem.Discount = 0;
                }
                if (!subItem.UsePeopleNum) {
                  subItem.UsePeopleNum = 0;
                }
              });
            })
          })
        }
        if (type == 1) {
          this.DataList.forEach(item => {
            item.ScenicStatisticsList.forEach(insideItem => {
              insideItem.OrderState = 1;
              insideItem.TicketPriceList.forEach(subItem => {
                if (!subItem.Discount) {
                  subItem.Discount = 0;
                }
                if (!subItem.UsePeopleNum) {
                  subItem.UsePeopleNum = 0;
                }
              });
            })
          })
        }
        this.apipost('dmcstatistics_get_SetTicketOrder', this.DataList, res => {
          this.saveLoading = false;
          if (res.data.resultCode == 1) {
            this.$message.success(res.data.message);
            this.getList();
          } else {
            this.$message.error(res.data.message);
          }
        }, err => {})
      },
      CheckAuth() {
        var actionCode = this.$AuthCode.EditRoomDinnerTIcket;
        this.CheckUserAuth(actionCode, res => {
          if (res.data.resultCode == 1 && res.data.data == 1) {
            this.EditBtn = true;
          }
        });
      },
    },
    mounted() {
      this.currentUserInfo = this.getLocalStorage();
      this.CheckAuth();
      this.TCNUM = this.$route.query.TCNUM;
      this.flightTotal = this.$route.query.flightTotal;
      if (this.$route.query.LineId) {
        this.LineId = this.$route.query.LineId;
      }
      this.GuestNum = this.$route.query.GuestNum;
      this.getList();
      this.getCurrencyList();
      let height = window.innerHeight - 65 - 55;
      this.boxHeight = height;
    },
  }

</script>
<style>
  .admissionStatisticsDetailsTalbe {
    border-collapse: collapse;
    background: #fff;
    text-align: center;
  }

  .admissionStatisticsDetailsTalbe tr th {
    background: #eee;
    height: 40px;
    font-size: 12px;
    color: #333;
    border: 1px solid #d1d1d1;
  }


  .admissionStatisticsDetailsTalbe tr td {
    font-size: 12px;
    height: 25px;
    line-height: 25px;
    border: 1px solid #d1d1d1;
  }

  .admissionStatisticsDetailsTalbe tr td input {
    height: 20px !important;
    padding: 0 !important;
    text-align: center;
  }

  .admissionStatisticsDetailsTalbe tr td .sel input {
    height: 34px !important;
  }

  .admissionStatisticsDetailsTalbe tr td .spanlink:hover {
    text-decoration: underline;
    cursor: pointer;
  }

  .admissionStatisticsDetailsTalbe .scenicTable {
    border: none;
  }

  .admissionStatisticsDetailsTalbe .scenicTable tr td {
    border: none;
  }

</style>
