<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">
            <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)">
                <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>
              <el-input v-model="item.ChangeValue" style="width:100px;" max="6"></el-input>
            </td>
            <td>
              <el-input v-model="item.ChangeRemarks" style="width:100px;" maxlength="50"></el-input>
            </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: [], //变更类型
      };
    },
    methods: {
      AddOfferObj() {
        var obj = {
          ChangeId: 0,
          OfferId: 0,
          EidtType: 0,
          DayNum: 0,
          ChangeType: "",
          ChangeValue: 0,
          ChangeRemarks: "",
        }
        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;
          }
        });
      }
    },
    created() {
      this.getChangeType();
    },
    mounted() {
      this.getOfferChange();
    }
  };
</script>