<style>
@import "../../../assets/css/newTravelManager.css";
.QD_details {
  margin-bottom: 10px;
}
.QD_dateList {
  font-size: 12px;
  position: relative;
  top: 10px;
}
.Qu_right {
  font-size: 14px;
  margin-bottom: 10px;
}
.QD_details .Dleftname {
  margin-right: 20px;
}
.QD_details .clearfix {
  margin-bottom: 20px;
}
.QT_shenhe {
  position: fixed;
  bottom: 0;
  left: 70px;
  background-color: #fff;
  width: 95%;
  border-top: 1px solid #d1d1d1;
}
.QD_details .el-input__inner{line-height: 30px;}
.QD_bottomDiv{
    position: fixed;
    bottom: 0;
    padding: 10px;
    overflow: auto;
    font-family: 'PingFangSc-Fine';
    z-index: 999;
    min-width: 1300px;;
    width: 94%;
    background-color: #fff;
    border-top: 3px solid #38425d;
    height: 270px;
}
</style>

<template>
  <div class="QD_btmDiv">
    <div class="QD_details clearfix" v-for="(QuoItem,Qindex) in OfferCostPriceObj">
      <div class="QD_dateList">
          {{QuoItem.StartDate}}至{{QuoItem.EndDate}}
      </div>
      <div class="CP_title">
          报价单{{Qindex+1}}
      </div>
      <el-form>
        <table class="CP_comTable">
          <tr>
            <td class="CP_comBack" width="170">币种</td>
            <td v-for='(item,index) in QuoItem.OfferCostPrice.CostCurrencyList'>
              {{item.CurrencyName}}
            </td>
          </tr>
          <tr>
            <td class="CP_comBack">汇率</td>
            <td v-for='item in QuoItem.OfferCostPrice.CostCurrencyList'>
                {{item.ExchangeRate}}
            </td>
          </tr>
        </table>
        <table class="CP_comTable">
          <tr>
            <td class="CP_comBack" width="170">人数</td>
            <td v-for="item in QuoItem.OfferCostPrice.CostNumberList" :key='item.subCode'>
                {{item.PeopleNumber}}
            </td>
          </tr>
          <tr v-for="item in QuoItem.OfferCostPrice.CostCurrencyList">
            <td class="CP_comBack">地接报价（{{item.CurrencyName}}）</td>
            <td v-if="checkExists(item.CurrencyId,Qindex)" v-for="childItem in getCurrencyNumberList(item.CurrencyId,Qindex)">
                {{childItem.Money}}
            </td>
          </tr>
        </table>
        <el-form-item label="地接项目">
          <el-checkbox-group v-model="QuoItem.OfferCostPrice.LocalProject">
            <el-checkbox v-for="checkItem in checkList" :label="checkItem.Id" :key="checkItem.Id" disabled>
              {{checkItem.Name}}
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <table class="CostPriceTable">
          <tr>
            <th rowspan="2" width='100'>Day</th>
            <th rowspan="2" width="200">币种</th>
            <th rowspan="2" width='200'>酒店</th>
            <th rowspan="2" width='200'>车</th>
            <th rowspan="2" width='200'>门票</th>
            <th colspan="3" width='200'>餐</th>
          </tr>
          <tr>
            <th width="90">早</th>
            <th width="90">中</th>
            <th width="90">晚</th>
          </tr>
          <tr v-for="subItem in QuoItem.OfferCostPrice.CostLocalList" :key="subItem.subCode">
            <td align="center">{{subItem.DayNum}}</td>
            <td>
                {{getCurrencySelect(subItem.CurrencyId,Qindex)}}
            </td>
            <td>
                <span v-if="QuoItem.OfferCostPrice.isShowHotel">{{subItem.HotelName}}<span v-if="subItem.HotelName!=''">(价格：{{subItem.HotelMoney}})</span></span>  
                <span v-else>{{subItem.HotelMoney}}</span>
            </td>
            <td>
                <span v-if="QuoItem.OfferCostPrice.isShowCar">{{subItem.CarName}}<span v-if="subItem.CarName!=''">(价格：{{subItem.CarMoney}})</span></span>
                <span v-else>{{subItem.CarMoney}}</span>
            </td>
            <td>
                <span v-if="QuoItem.OfferCostPrice.isShowTicket">{{subItem.TicketName}}<span v-if="subItem.TicketName!=''">(价格：{{subItem.TicketMoney}})</span></span>
                <span v-else>{{subItem.TicketMoney}}</span>
            </td>
            <td>
                {{subItem.FoodItem[0].money}}
            </td>
            <td>
                {{subItem.FoodItem[1].money}}
            </td>
            <td>
                {{subItem.FoodItem[2].money}}
            </td>
          </tr>
        </table>
        <div class="CP_ComTitle">内陆段交通部分</div>
        <table class="CostPriceTable">
          <tr>
            <td width='50'>1</td>
            <td width='200'>内陆段机位（每人）</td>
            <td width='200'>
               {{getCurrencySelect(QuoItem.OfferCostPrice.InlandAirTicketCurrency,Qindex)}}
            </td>
            <td>
                {{QuoItem.OfferCostPrice.InlandAirTicketMoney}}
            </td>
          </tr>
          <tr>
            <td>2</td>
            <td>内陆段船票（每人</td>
            <td>
                {{getCurrencySelect(QuoItem.OfferCostPrice.InlandShipTicketCurrency,Qindex)}}
            </td>
            <td>
                {{QuoItem.OfferCostPrice.InlandShipTicketMoney}}
            </td>
          </tr>
          <tr>
            <td>3</td>
            <td>内陆段火车票（每人）</td>
            <td>
                {{getCurrencySelect(QuoItem.OfferCostPrice.InlandTrainTicketCurrency,Qindex)}}
            </td>
            <td>
                {{QuoItem.OfferCostPrice.InlandTrainTicketMoney}}
            </td>
          </tr>
        </table>
        <div class="CP_ComTitle">杂支部分</div>
        <table class="CostPriceTable">
          <tr>
            <td width='50'>1</td>
            <td width='200'>签证费（每人）</td>
            <td colspan='3'>
                {{QuoItem.OfferCostPrice.VisaMoney}}
            </td>
          </tr>
          <tr>
            <td>2</td>
            <td>保险费（每人）</td>
            <td>
                {{QuoItem.OfferCostPrice.SafeMoney}}
            </td>
          </tr>
          <tr>
            <td>3</td>
            <td>领队小费</td>
            <td>
                {{QuoItem.OfferCostPrice.LeaderTripMoney}}
            </td>
          </tr>
          <tr>
            <td>4</td>
            <td>司机、导游小费</td>
            <td>
                {{QuoItem.OfferCostPrice.DriverGuideMoney}}
            </td>
          </tr>
        </table>
        <div class="CP_ComTitle">其他支出</div>
        <table class="CostPriceTable">
          <tr>
            <td width='50'>1</td>
            <td width='200'>销售提成1%</td>
            <td colspan='3'>
                {{QuoItem.OfferCostPrice.SalesCommissionMoney}}
            </td>
          </tr>
          <tr>
            <td>2</td>
            <td>作业处提成</td>
            <td>
                {{QuoItem.OfferCostPrice.OfficeCommissionMoney}}
            </td>
          </tr>
        </table>
        <div class="CP_ComTitle">机票</div>
        <table class="CostPriceTable">
          <tr>
            <td width='50'>机票</td>
            <td>{{QuoItem.OfferCostPrice.AirTicketMoeny}}</td>
          </tr>
        </table>
        <div class="CP_ComTitle">收入</div>
        <table class="CostPriceTable">
          <tr>
            <td width='50'>1</td>
            <td width='200'>小费</td>
            <td colspan='3'>
                {{QuoItem.OfferCostPrice.TripMoney}}
            </td>
          </tr>
          <tr>
            <td>2</td>
            <td>导游人头费</td>
            <td>
                {{QuoItem.OfferCostPrice.GuidePeopleMoney}}
            </td>
          </tr>
        </table>
        <div class="CP_ComTitle">团负费</div>
        <table class="CostPriceTable">
          <tr>
            <td width='50'>KB</td>
            <td>{{QuoItem.OfferCostPrice.KBMoney}}</td>
          </tr>
        </table>

        <div class="CP_ComTitle">领队分摊部分</div>
        <table class="CostPriceTable">
          <tr>
            <td width='250'>人数</td>
            <td v-for="item in QuoItem.OfferCostPrice.CostNumberList" :key="item.subCode">
              {{item.PeopleNumber}}+1
            </td>
          </tr>
          <tr>
            <td>机票</td>
            <td v-for="item in QuoItem.OfferCostPrice.CostNumberList" :key="item.subCode">
                {{item.AirTicketMoney}}
            </td>
          </tr>
          <tr>
            <td>门票</td>
            <td v-for="item in QuoItem.OfferCostPrice.CostNumberList" :key="item.subCode">
                {{item.TicketMoney}}
            </td>
          </tr>
          <tr>
            <td>单房差</td>
            <td v-for="item in QuoItem.OfferCostPrice.CostNumberList" :key="item.subCode">
                {{item.SingleRoomMoney}}
            </td>
          </tr>
          <tr>
            <td>内陆段交通</td>
            <td v-for="item in QuoItem.OfferCostPrice.CostNumberList" :key="item.subCode">
                {{item.InlandTrafficMoney}}
            </td>
          </tr>
          <tr>
            <td>杂费</td>
            <td v-for="item in QuoItem.OfferCostPrice.CostNumberList" :key="item.subCode">
                {{item.OtherMoney}}
            </td>
          </tr>
          <tr>
            <td>小计</td>
            <td v-for="item in QuoItem.OfferCostPrice.CostNumberList" :key="item.subCode">
              {{item.SubtotalMoney}}
            </td>
          </tr>
        </table>
        <div class="Cost_Line"></div>
        <div class="CP_ComTitle Cost_Title">成本统计</div>
        <table class="CostPriceTable">
          <tr>
            <td width='250' rowspan="2" class="CP_comBack">
              人数统计
            </td>
            <td v-for="item in QuoItem.OfferCostPrice.CostNumberList" :key="item.subCode" class="CP_comBack">
              {{item.PeopleNumber}}+1
            </td>
          </tr>
          <tr>
            <td v-for="item in QuoItem.OfferCostPrice.CostNumberList" :key="item.subCode">
              {{item.TotalMoney}}
            </td>
          </tr>
        </table>
      </el-form>
       <div class="DirectRightPrice">
          <div class="dingjiaDiv">
            <span class="TMTitle"><i></i>定价</span>
          </div>
          <div>
            <div class="Dleftname"></div>
            <div class="DrightList Qu_right">
              是否支持儿童出游：<span v-if="QuoItem.QuotationPrice.IsSupportChildren==1">是</span>
                             <span v-else>否</span>
               <span style="margin-left:20px;">成本人数</span> {{QuoItem.QuotationPrice.PeopleNumber}}              
            </div>
          </div>
          <div class="clearfix">
            <div class="Dleftname">成人</div>
            <div class="DrightList">
                <el-input placeholder="" v-model="QuoItem.QuotationPrice.B2BMemberPrice" disabled class="w200 ComSeat">
                  <template slot="prepend">同业会员</template>
                </el-input>
                <el-input placeholder="" v-model="QuoItem.QuotationPrice.B2BPrice" disabled class="w200 ComSeat"> <template slot="prepend">同业</template>
                </el-input>
                <el-input placeholder="" v-model="QuoItem.QuotationPrice.B2CMemberPrice" disabled class="w200 ComSeat"> <template slot="prepend">直客会员</template>
                </el-input>
                <el-input placeholder="" v-model="QuoItem.QuotationPrice.B2CPrice" disabled class="w200 ComSeat"> <template slot="prepend">直客</template>
                </el-input>
            </div>
          </div>
          <div class="clearfix">
            <div class="Dleftname">小孩</div>
            <div class="DrightList">
                <el-input placeholder="" v-model="QuoItem.QuotationPrice.ChildNeedPrice" disabled class="w200 ComSeat">
                  <template slot="prepend">占床</template>
                </el-input>
                <el-input placeholder="" v-model="QuoItem.QuotationPrice.ChildNoNeedPrice" disabled class="w200 ComSeat">
                  <template slot="prepend">不占床</template>
                </el-input>
                <el-input placeholder="" v-model="QuoItem.QuotationPrice.BabyPrice" disabled class="w200 ComSeat">
                  <template slot="prepend">婴儿</template>
                </el-input>
                <el-input placeholder="" v-model="QuoItem.QuotationPrice.BabyChargePrice" disabled class="w200 ComSeat">
                  <template slot="prepend">附加费</template>
                </el-input>
            </div>
          </div>
          <div class="clearfix">
            <div class="Dleftname">老人</div>
            <div class="DrightList">
                <el-input placeholder="" v-model="QuoItem.QuotationPrice.OldManChargePrice" disabled class="w200 ComSeat">
                  <template slot="prepend">附加费</template>
                </el-input>
            </div>
          </div>
          <div class="clearfix">
            <div class="Dleftname">杂费</div>
            <div class="DrightList">
                <el-input placeholder="" v-model="QuoItem.QuotationPrice.VisaPrice" disabled class="w200 ComSeat">
                  <template slot="prepend">签证</template>
                </el-input>
                <el-input placeholder="" v-model="QuoItem.QuotationPrice.OtherPrice" disabled class="w200 ComSeat">
                  <template slot="prepend">杂费</template>
                </el-input>
                <el-input placeholder="" v-model="QuoItem.QuotationPrice.SingleRoomPrice"  disabled
                          class="w200 ComSeat">
                  <template slot="prepend">单房差</template>
                </el-input>
                <el-input placeholder="" v-model="QuoItem.QuotationPrice.SafeMoney" disabled class="w200 ComSeat">
                  <template slot="prepend">保险</template>
                </el-input>
            </div>
          </div>
          <!-- <div class="clearfix">
            <div class="Dleftname"></div>
            <div class="DrightList">
                <el-input placeholder="" v-model="QuoItem.QuotationPrice.AirticketMoney" disabled class="w200 ComSeat">
                  <template slot="prepend">机票</template>
                </el-input>
            </div>
          </div> -->
          <div class="clearfix">
            <div class="Dleftname">单项报价</div>
            <div class="DrightList">
                <el-input placeholder="" v-model="QuoItem.QuotationPrice.SingleDMCPrice" disabled  class="w200 ComSeat">
                  <template slot="prepend">地接价</template>
                </el-input>
            </div>
          </div>
          <!-- <div class="clearfix">
            <div class="Dleftname">优惠</div>
            <div class="DrightList">
                <el-input placeholder="" v-model="QuoItem.QuotationPrice.RebatePrice" disabled class="w200 ComSeat">
                  <template slot="prepend">同行返佣</template>
                </el-input>
                <el-input placeholder="" v-model="QuoItem.QuotationPrice.DiscountPrice" disabled class="w200 ComSeat">
                  <template slot="prepend">早鸟优惠</template>
                </el-input>
            </div>
          </div> -->
          <table class="CostPriceTable ScienTicket">
            <tr>
              <th width="400">景点名</th>
              <th>门票名</th>
              <th width="200">退款金额</th>
              <th width="150">是否退款</th>
            </tr>
            <tr v-for="scienItem in QuoItem.QuotationPrice.QuotationScenicList">
              <td>{{scienItem.CouponsName}}</td>
              <td>{{scienItem.CouponsTicketName}}</td>
              <td>
                  {{scienItem.RefundMoney}}
              </td>
              <td>
                <span v-if="scienItem.CanReundMoney==1">是</span>
                <span v-else>否</span>
              </td>
            </tr>
          </table>
      </div>
    </div>
    <div class="QD_bottomDiv" v-if="isShow">
      <el-form label-width="100px" :model="AuditInfo" :rules="rules" ref="AuditInfo">
          <el-col :span="4">
            <div style="margin:38px 0 0 50px;">
              <el-radio v-model="AuditInfo.TravelState" label="3">通过</el-radio>
              <el-radio v-model="AuditInfo.TravelState" label="4">驳回</el-radio>
            </div>
          </el-col>
          <el-col :span="10" style="margin-top:30px;">
            <el-form-item label="审批说明" prop="AuditContent">
              <el-input type="textarea" v-model="AuditInfo.AuditContent"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="3" style="margin-top:40px;">
            <button class="normalBtn" @click="isShow=false">取消</button>
            <button class="normalBtn" @click="submitForm('AuditInfo')">审核</button>
          </el-col>
        </el-form>
    </div>
    <div class="btnFixedDiv">
        <div class="toTop" @click="backTop">
          <i class="iconfont icon-huidaodingbu"></i>
        </div>
        <div class="DTSaveBtn caogao" @click="disQuo" v-if="this.Qtype==2">
          <span>点击</span>
          <span>审核</span>
        </div>
        <div class="DTSaveBtn caogao" @click="goBackPage" v-else>
          <span>点击</span>
          <span>返回</span>
        </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      //中间值
      configId: "",
      isShow: false,
      OfferCostPriceObj: "",
      checkList: [
        {
          Id: 1,
          Name: "酒店"
        },
        {
          Id: 2,
          Name: "车辆"
        },
        {
          Id: 3,
          Name: "门票"
        },
        {
          Id: 4,
          Name: "餐厅"
        }
      ],
      showHotel: false,
      showCar: false,
      showTicket: false,
      AuditInfo: {
        ID: "",
        TravelState: "3",
        AuditContent: ""
      },
      //查询参数
      Qtype: 0,
      rules: {
        AuditContent: [
          { required: true, message: "请填写审核说明", trigger: "blur" }
        ],
        TravelState: [
          { required: true, message: "请选择审批意见", trigger: "change" }
        ]
      }
    };
  },
  methods: {
    goUrl(path) {
      this.$router.push({ name: path });
    },
    //判断币种是否相等
    checkExists(CurrencyId, index) {
      var flag = false;
      if (
        this.OfferCostPriceObj != null &&
        this.OfferCostPriceObj[index].OfferCostPrice.CurrencyNumberListExt !=
          null
      ) {
        this.OfferCostPriceObj[
          index
        ].OfferCostPrice.CurrencyNumberListExt.forEach(item => {
          if (!flag && item.Key == CurrencyId) {
            flag = true;
          }
        });
        return flag;
      }
    },
    //获取币种对应 的人数报价
    getCurrencyNumberList(CurrencyId, index) {
      let currencyNumberList = [];
      let flag = false;
      if (
        this.OfferCostPriceObj != null &&
        this.OfferCostPriceObj[index].OfferCostPrice.CurrencyNumberListExt !=
          null
      ) {
        this.OfferCostPriceObj[
          index
        ].OfferCostPrice.CurrencyNumberListExt.forEach(item => {
          if (!flag && item.Key == CurrencyId) {
            flag = true;
            currencyNumberList = item.currencyNumberList;
          }
        });
        return currencyNumberList;
      }
    },
    //过滤下拉
    getCurrencySelect(CurrencyId, index) {
      var currType = "";
      if (
        this.OfferCostPriceObj != null &&
        this.OfferCostPriceObj[index].OfferCostPrice.CostCurrencyList != null
      ) {
        this.OfferCostPriceObj[index].OfferCostPrice.CostCurrencyList.forEach(
          x => {
            if (x.CurrencyId == CurrencyId) {
              currType = x.CurrencyName;
            }
          }
        );
      }
      return currType;
    },
    submitForm() {
      //提交创建、修改表单
      this.$refs["AuditInfo"].validate(valid => {
        if (valid) {
          this.saveAudit();
        } else {
          return false;
        }
      });
    },
    //提交审核
    saveAudit() {
      this.AuditInfo.ID = this.configId;
      var that=this;
      this.apipost(
        "travel_get_AuditTravelConfig",
        this.AuditInfo,
        res => {
          if (res.data.resultCode == 1) {
            that.Success("审核成功");
            that.goUrl("AuditDan");
          }
        },
        err => {}
      );
    },
    //返回顶部
    backTop() {
      var timer = setInterval(function() {
        var scrollTop = document.getElementsByClassName("flexParent")[0]
          .scrollTop;
        var ispeed = Math.floor(-scrollTop / 6);
        if (scrollTop == 0) {
          clearInterval(timer);
        }
        document.getElementsByClassName("flexParent")[0].scrollTop =
          scrollTop + ispeed;
      }, 30);
    },
    disQuo() {
      this.isShow = true;
    },
    //点击返回
    goBackPage(){
      history.go(-1);
    }
  },
  mounted() {},
  created() {
    this.configId = this.$route.query.configId;
    this.Qtype = this.$route.query.Qtype;
    var that = this;
    if (this.configId > 0) {
      let msg = { ID: this.configId };
      this.apipost(
        "travel_get_GetMyTravelInfo",
        msg,
        res => {
          if (res.data.resultCode == 1) {
            var tempData = res.data.data;
            if (tempData.OfferList != null) {
              tempData.OfferList.forEach(x => {
                var dataArr = x.OfferCostPrice.LocalProject.split(",");
                x.OfferCostPrice.LocalProject = dataArr.map(function(data) {
                  return +data;
                });
                if (x.OfferCostPrice.LocalProject.indexOf(1) > -1) {
                  x.OfferCostPrice.isShowHotel = true;
                } else {
                  x.OfferCostPrice.isShowHotel = false;
                }
                if (x.OfferCostPrice.LocalProject.indexOf(2) > -1) {
                  x.OfferCostPrice.isShowCar = true;
                } else {
                  x.OfferCostPrice.isShowCar = false;
                }
                if (x.OfferCostPrice.LocalProject.indexOf(3) > -1) {
                  x.OfferCostPrice.isShowTicket = true;
                } else {
                  x.OfferCostPrice.isShowTicket = false;
                }
              });
              this.OfferCostPriceObj = tempData.OfferList;
            }
          } else {
            this.Error(res.data.message);
          }
        },
        err => {}
      );
    }
  }
};
</script>