<template>
  <div>
    <div class="query-box" style="border-bottom: none;">
      <ul>
        <li>
          <template v-if="IsOperation !=1">
            <input type="button" class="fr normalBtn mb30" value="保存" @click="saveList(1)" :disabled="IsDisabled" />
            <input type="button" class="fr normalBtn mb30" value="保存草稿" @click="saveList(1)" :disabled="IsDisabled" />
          </template>
          <template v-else>
            <span style="color:red;font-size:14px;">已制单，不能在修改!</span>
            <input v-if="EditBtn" type="button" class="fr normalBtn mb30" value="保存" @click="saveList(1)" />
          </template>
        </li>
      </ul>
    </div>
    <div style="width: 100%;  overflow-y: auto;padding-bottom: 10px; height: 100%; " class="ownScrollbarStyle">
      <table border="0" cellspacing="1" cellpadding="0" class="admissionStatisticsDetailsTalbe" v-loading="loading">
        <tr>
          <th>
            公司团号
          </th>
          <th colspan="15" style="text-align:left; padding-left:8px;">
            <p class="link" @click="goUrlT('productQuery',TCNUM,'产品查询')">{{TCNUM}}</p>
          </th>
        </tr>
        <tr>
          <th width="115">游览时间</th>
          <th width="200">景点名称</th>
          <th width="70">总人数</th>
          <th width="70">游客<br />类型</th>
          <th width="70">游客<br />人数</th>
          <th width="70">使用<br />人数</th>
          <th width="70">免人数</th>
          <th width="90">单价</th>
          <th width="90">金额小计</th>
          <th width="80">返佣</th>
          <th width="100">总金额</th>
          <th width="210">付款方式/订团号</th>
          <th width="200">备注</th>
        </tr>
        <template v-for="(item,index) in DataList">
          <template v-for="(subItem,subIndex) in item.ScenicStatisticsList">
            <tr v-for="(childItem,childIndex) in subItem.TicketPriceList">
              <td v-if="childIndex==0" :rowspan="3">
                {{item.UseTimeStr}}
              </td>
              <td v-if="childIndex==0" :rowspan="3">
                <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">
                      电话：
                    </td>
                    <td style="text-align:left;">
                      {{subItem.Tel}}
                    </td>
                  </tr>
                  <tr>
                    <td width="40">
                      地址：
                    </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;">报价景点：<font style="color:red;">
                      {{subItem.ScenicOfferName}}
                      ({{subItem.ScenicOfferPrice}}/人)</font>
                  </span>
                </template>
              </td>
              <td v-if="childIndex==0" :rowspan="3">
                {{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(subItem)' @keyup.native="checkInteger(childItem,'UsePeopleNum')"></el-input>
              </td>
              <td>
                <el-input class='w50 tcenter' maxlength='2' v-model='childItem.Discount' type="number"
                  @input='calculationPrice(subItem)' @keyup.native="checkInteger(childItem,'Discount')"></el-input>
              </td>
              <td>
                <template v-if="EditBtn||LineId==90">
                  <el-input class='w135' v-model='childItem.PeoplePrice'
                    @keyup.native="checkPrice(childItem,'PeoplePrice')" type="text"></el-input>
                </template>
                <template v-else>
                  <span class="spanlink" v-if='childItem.PeoplePrice==0'
                    @click="goUrl('ticketManagement',subItem,'门票管理')">设置</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='w135' v-model='childItem.DiscountPrice'
                    @keyup.native="checkPrice(childItem,'DiscountPrice')" type="text"></el-input>
                </template>
                <template v-else>
                  <span class="spanlink" v-if='childItem.DiscountPrice==0'
                    @click="goUrl('scenicSpotInfoManage',subItem,'景区列表')">设置</span>
                  <span v-if='childItem.DiscountPrice!=0'>{{childItem.DiscountPrice}}%</span>
                </template>
              </td>
              <td v-if="childIndex==0" :rowspan="3">
                {{subItem.TotalPrice}}
              </td>
              <td v-if="childIndex==0" :rowspan="3">
                <table class="scenicTable">
                  <tr>
                    <td width="60" style="text-align:right;">
                      币种选择：
                    </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;">
                      付款方式：
                    </td>
                    <td style="text-align:left;">
                      <el-select class='w135 sel' v-model='subItem.PayStyle' :placeholder="$t('pub.pleaseSel')">
                        <el-option label='请选择' value='0'></el-option>
                        <el-option label='现付' value='1'></el-option>
                        <el-option label='签单' value='2'></el-option>
                        <el-option label='实物抵扣' value='5'></el-option>
                        <el-option label='预付' value='4'></el-option>
                        <el-option label='网订' value='12'></el-option>
                      </el-select>
                    </td>
                  </tr>
                  <tr>
                    <td width="60" style="text-align:right;">
                      订团号：
                    </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="3">
                <el-input type='textarea' rows="4" class='w170' v-model='subItem.Remarks'></el-input>
              </td>
            </tr>
          </template>
        </template>
      </table>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        currencyList: [],
        EditBtn: false, //房餐景点修改权限
        defaultSelectValue: 0,
        DataList: [],
        roomList: [],
        TCNUM: '',
        flightTotal: 0,
        GuestNum: 0,
        loading: false,
        IsOperation: '',
        //是否禁用按钮
        IsDisabled: false,
        LineId: 0, //线路编号
      }
    },
    methods: {
      personStrToWord(str) {
        if (str == 1)
          return '大人'
        if (str == 2)
          return '中人'
        if (str == 3)
          return '小人'
      },
      goUrl(path, obj, name) {
        this.$router.push({
          path: path,
          query: {
            id: obj.ID,
            blank: "y",
            tab: name
          }
        });
      },
      calculationPrice(obj) {
        let totalPrice = 0;
        obj.TicketPriceList.forEach(item => {
          totalPrice += item.PeoplePrice * (item.UsePeopleNum - item.Discount) * (1 - item.DiscountPrice / 100);
        })
        obj.TotalPrice = totalPrice.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.DataList.forEach(item => {
              item.ScenicStatisticsList.forEach(x => {
                x.PayStyle = x.PayStyle.toString();
                this.calculationPrice(x);
                if (x.CombinationNum == '' || x.CombinationNum == null) {
                  x.CombinationNum = this.$route.query.NewCombinationNum;
                }
              })
            })
          } else {
            this.$message.error(res.data.message);
          }
        }, err => {})
      },
      saveList(type) {
        this.IsDisabled = 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 => {
          if (res.data.resultCode == 1) {
            this.$message.success(res.data.message);
            this.getList();
            this.IsDisabled = false;
          } else {
            this.IsDisabled = false;
            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.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();
    },
  }

</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>