<style>
  .changeOffer {
    width: 100%;
    text-align: center;
    margin-bottom: 20px;
    border-bottom: 1px solid #d1d1d1;
    padding: 0 20px 10px 20px;
  }

  .changeOffer .CP_ComTitle2 {
    color: #106BAF;
    font-weight: bold;
    background-color: #D1EEEE;
    white-space: nowrap;
  }

  .changeOffer .CostcomCenter {
    text-align: center;
  }

  .changeOfferTable {
    border-collapse: collapse;
  }

  .changeOfferTable tr td {
    height: 40px;
    border: 1px solid #106BAF !important;
    border-collapse: collapse;
    padding: 0 3px;
    text-align: center;
  }

  .changeOfferTable .el-input .el-input__inner {
    height: 25px !important;
    border: none;
    border-bottom: 1px solid #606266;
    padding-left: 5px !important;
  }

</style>

<template>
  <div class="changeOffer">
    <div>
      <table class="changeOfferTable">
        <tr>
          <td style="width:100px;" class="CP_ComTitle2 CostcomCenter">类别</td>
          <td style="width:100px;" class="CP_ComTitle2 CostcomCenter">变更类型</td>
          <td style="width:100px;" class="CP_ComTitle2 CostcomCenter">天数</td>
          <td style="width:100px;" class="CP_ComTitle2 CostcomCenter">原金额</td>
          <td style="width:100px;" class="CP_ComTitle2 CostcomCenter">地接金额</td>
          <td style="width:100px;" class="CP_ComTitle2 CostcomCenter">变更值</td>
          <td style="width:300px;" class="CP_ComTitle2 CostcomCenter">变更备注</td>
          <td style="width:100px;" class="CP_ComTitle2 CostcomCenter">
            <a style="color:blue;cursor:pointer;" @click="AddOfferObj()">添加</a>
          </td>
        </tr>
        <tbody>
          <tr v-for="(item,index) in dataList" :key="index">
            <td>
              <template v-if="item.EditType==1">
                行程信息
              </template>
              <template v-else>
                基础信息
              </template>
            </td>
            <td>
              <el-select v-model="item.ChangeType" style="width:100px;"
                @change="checkChangeType(item,index),getDiJiePrice(item)">
                <el-option v-for="item in changeTypeList" :key="item.Id" :label="item.Name" :value="item.Id">
                </el-option>
              </el-select>
            </td>
            <td>
              {{item.DayNum}}
            </td>
            <td>
              {{item.OldPrice}}
            </td>
            <td>
              {{item.DJPrice}}
            </td>
            <td>
              <el-input v-model="item.ChangeValue" style="width:100px;" max="6"></el-input>
            </td>
            <td>
              <el-select v-model="item.ChangeRemarks" :placeholder="$t('objFill.qingxuanzhe')">
                <el-option v-for="(cItem,cIndex) in changeRemarkList" :key="cIndex" :label="cItem.Name"
                  :value="cItem.Name"></el-option>
              </el-select>
              <template v-if="item.ChangeType==1">
                <br/>
                <el-select filterable remote :remote-method="(query) => remoteSearchAdGroup(query, item)"
                  v-model='item.ChangeContent' :placeholder="$t('objFill.qingshurujdmc')" :loading="loading">
                  <el-option v-for="(x) in item.HotelList" :key="x.ID" :label="x.Name" :value='x.Name'>
                  </el-option>
                </el-select>
              </template>
            </td>
            <td>
              <a style="color:red;cursor:pointer;" @click="DeleteOfferChange(item,index)">删除</a>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <div style="display:flex;justify-content:center;align-items:center;margin-top:20px;">
      <input type="button" class="normalBtn" @click="saveOfferChange()" :value="$t('restaurant.res_confirm')" />
      <input type="button" class="normalBtn" @click="closeOfferDig()" :value="$t('pub.closeSel')" />
    </div>
  </div>
</template>
<script>
  export default {
    props: ["qMsg"],
    data() {
      return {
        loading: false,
        dataList: [],
        changeTypeList: [], //变更类型
        changeRemarkList: [

        ]
      };
    },
    methods: {
      getHotel(subItem, HotelId) {
        subItem.HotelList.forEach(x => {
          if (x.Name == HotelId) {
            subItem.ChangeContent = x.Name
          }
        })
        this.$forceUpdate()
      },
      remoteSearchAdGroup(query, subItem) {
        if (query !== '') {
          this.loading = true;
          this.initHotel(query, subItem)
        } else {
          subItem.HotelList = []
        }
      },
      //初始化酒店列表
      initHotel(query, subItem) {
        this.apipost(
          "hotel_post_GetList", {
            Name: query
          },
          res => {
            this.loading = false
            if (res.data.resultCode == 1) {
              subItem.HotelList = res.data.data;
              this.$forceUpdate()
            }
          },
          null
        );
      },
      getDiJiePrice(item) {
        var postMsg = {
          OfferId: this.qMsg.OfferId,
          ChangeType: item.ChangeType,
          DayNum: this.qMsg.DayNum,
        };
        item.OldPrice = 0;
        item.DJPrice = 0;
        item.ChangeValue = 0;
        this.apipost(
          "dmcstatistics_post_GetGroupDayUserMoney", postMsg,
          res => {
            if (res.data.resultCode == 1) {
              var tempValue = res.data.data;
              if (tempValue) {
                item.DJPrice = Number(tempValue);
              }
              //酒店变更
              if (item.ChangeType == 1) {
                item.OldPrice = Number(this.qMsg.checkObj.HotelCostPrice);
              }
              //用车变更
              else if (item.ChangeType == 2) {
                var totalBus = Number(this.qMsg.checkObj.BusCostPrice) + Number(this.qMsg.checkObj.PassFee)
                item.OldPrice = totalBus;
              }
              //早餐变更
              else if (item.ChangeType == 3) {
                item.OldPrice = Number(this.qMsg.checkObj.BreakfastCostPrice);
              }
              //午餐变更
              else if (item.ChangeType == 4) {
                item.OldPrice = Number(this.qMsg.checkObj.LunchCostPrice);
              }
              //晚餐变更
              else if (item.ChangeType == 5) {
                item.OldPrice = Number(this.qMsg.checkObj.DinnerCostPrice);
              }
              //景点变更
              else if (item.ChangeType == 6) {
                var tempScenic = 0;
                if (this.qMsg.checkObj.ScenicList && this.qMsg.checkObj.ScenicList.length > 0) {
                  this.qMsg.checkObj.ScenicList.forEach(sItem => {
                    if (sItem.TicketName != '' || sItem.TicketId > 0) {
                      tempScenic += Number(sItem.TicketCostPrice);
                    }
                  })
                }
                item.OldPrice = Number(tempScenic);
              }
              //其他费用
              else if (item.ChangeType == 7) {
                item.OldPrice = Number(this.qMsg.checkObj.OtherPrice);
              }
              if (Number(item.DJPrice) >= Number(item.OldPrice)) {
                item.ChangeValue = Number(tempValue) - Number(item.OldPrice);
              } else {
                item.ChangeValue = Number(tempValue) - Number(item.OldPrice);
              }
            }
          }
        );
      },
      AddOfferObj() {
        var obj = {
          ChangeId: 0,
          OfferId: 0,
          EidtType: 0,
          DayNum: 0,
          ChangeType: "",
          ChangeValue: 0,
          ChangeRemarks: "",
          OldPrice: 0, //原报价项目单金额
          DJPrice: 0, //地接价格
          ChangeContent: "", //变更内容
          HotelList: [],
        }
        obj.OfferId = this.qMsg.OfferId;
        obj.EidtType = this.qMsg.EditType;
        obj.DayNum = this.qMsg.DayNum;
        this.dataList.push(obj);
      },
      //判断列表是否包含此项
      checkChangeType(item, index) {
        var flag = false;
        if (this.dataList && this.dataList.length > 0) {
          this.dataList.forEach((qitem, qIndex) => {
            if (!flag && qIndex != index) {
              if (qitem.ChangeType == item.ChangeType) {
                flag = true;
              }
            }
          })
        }
        if (flag) {
          this.Error("已存在此项变更,请选择其他变更项目!");
          item.ChangeType = '';
        }
      },
      //删除报价单变更项
      DeleteOfferChange(item, index) {
        var that = this;
        this.Confirm('是否要删除此项变更内容?', function () {
          if (item.ChangeId > 0) {
            var pMsg = {
              ChangeId: item.ChangeId
            };
            that.apipost(
              "travel_post_RemoveChangeOffer", pMsg,
              res => {
                if (res.data.resultCode == 1) {
                  that.Success(that.$t('objFill.v101.hote.shanchucg'));
                  that.getOfferChange();
                } else {
                  that.Error(that.$t('objFill.v101.hote.shanchusb'));
                }
              }
            );
          } else {
            that.dataList.splice(index, 1);
          }
        })
      },
      //关闭弹窗
      closeOfferDig() {
        this.$emit("closeDialog");
      },
      //向父组件传递选中酒店
      saveOfferChange() {
        this.apipost("travel_post_SetChangeOffer", this.dataList, res => {
          if (res.data.resultCode == 1) {
            this.getOfferChange()
            this.Success(res.data.message);
            this.$emit("success", 1);
          } else {
            this.Error(res.data.message);
          }
        });
      },
      //查询餐厅信息
      getOfferChange() {
        this.loading = true;
        var searchParmeters = {
          EditType: 0,
          OfferId: 0,
          DayNum: 0,
        };
        searchParmeters.OfferId = this.qMsg.OfferId;
        searchParmeters.EditType = this.qMsg.EditType;
        searchParmeters.DayNum = this.qMsg.DayNum;
        this.apipost("travel_post_GetChangeOfferList", searchParmeters, res => {
          this.loading = false;
          if (res.data.resultCode == 1) {
            this.dataList = res.data.data;
          }
        });
      },
      getChangeType() {
        this.apipost("travel_post_GetChangeTypeList", {}, res => {
          if (res.data.resultCode == 1) {
            this.changeTypeList = res.data.data;
          }
        });
      },
      getChangeRemark() {
        var posMsg = {
          Key: "Travel_Offer_ChangeRemark"
        };
        this.apipost("dict_get_GetDictValueCommonList", posMsg, res => {
          if (res.data.resultCode == 1) {
            this.changeRemarkList = res.data.data;
          }
        });
      }
    },
    created() {
      this.getChangeType();
      this.getChangeRemark();
    },
    mounted() {
      this.getOfferChange();
    }
  };

</script>
