<style>
  .CM_look {
    padding: 4px !important;
    position: relative;
    top: 1px;
  }

</style>
<template>
  <div class="flexOne">
    <div class="query-box">
      <ul>
        <li>
          <input type="button" class="normalBtn" :value="$t('pub.addBtn')"
            @click="(isShow = true), (dialogTitle = $t('ground.xinzengjdgyfs'))" />
        </li>
      </ul>
      <el-dialog :title="dialogTitle" :visible.sync="isShow" center custom-class="w460">
        <el-form :model="addMsg" label-width="100px">
          <el-form-item :label="$t('hotel.suplier_name')" prop="Name">
            {{ SupplierName }}
          </el-form-item>
          <el-form-item :label="$t('hotel.hotel')">
            <el-select v-model="addMsg.HotelId" filterable :placeholder="$t('pub.pleaseSel')" class="w220">
              <el-option :label="$t('pub.pleaseSel')" :value="0"></el-option>
              <el-option v-for="item in HotelList" :key="item.ID" :label="item.Name" :value="item.ID">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('fnc.fkfangshi')">
            <el-select v-model="addMsg.SubPayType" filterable :placeholder="$t('pub.pleaseSel')" class="w220">
              <el-option :label="$t('pub.pleaseSel')" :value="0"></el-option>
              <el-option v-for="item in PayTypeList" :key="item.Id" :label="item.name" :value="item.Id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('hotel.hotel_StartDate')">
            <el-date-picker class="w220" type="date" v-model="addMsg.StartDate" :picker-options="pickerBeginDateBefore"
              value-format="yyyy-MM-dd" placeholder></el-date-picker>
          </el-form-item>

          <el-form-item :label="$t('hotel.hotel_EndDate')">
            <el-date-picker class="w220" type="date" v-model="addMsg.EndDate" :picker-options="pickerBeginDateAfter"
              value-format="yyyy-MM-dd" placeholder></el-date-picker>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <button class="hollowFixedBtn" @click="initData(), (isShow = false)">
            {{ $t("pub.cancelBtn") }}
          </button>
          &nbsp;
          <button class="normalBtn" type="primary" @click="SaveData()">
            {{ $t("pub.sureBtn") }}
          </button>
        </div>
      </el-dialog>
    </div>
    <table class="singeRowTable" border="0" cellspacing="0" cellpadding="0" v-loading="loading">
      <tr>
        <th>{{ $t("hotel.hotel") }}</th>
        <th>{{ $t("hotel.hotel_StartDate") }}</th>
        <th>{{ $t("hotel.hotel_EndDate") }}</th>
        <th>{{ $t("fnc.fkfangshi") }}</th>
        <th>{{ $t("system.table_operation") }}</th>
      </tr>
      <tr v-for="item in dataList">
        <td>{{ item.HotelName }}</td>
        <td>{{ item.StartDateStr }}</td>
        <td>{{ item.EndDateStr }}</td>
        <td>{{ item.SubPayTypeStr }}</td>
        <td>
          <el-tooltip class="item" effect="dark" :content="$t('system.table_edit')" placement="top-start">
            <el-button type="primary" class="iconfont icon-bianji-smal" @click="
                GetData(item.Id),
                  (isShow = true),
                  (dialogTitle = $t('ground.xinzengjdgyfs'))
              "></el-button>
          </el-tooltip>
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        msg: {
          SupplierId: 0
        },
        loading: false,
        isShow: false, //是否显示新增修改
        //供应商名称
        SupplierName: "",
        dialogTitle: this.$t("ground.xinzengjdgyfs"),
        //数据源
        dataList: [],
        HotelList: [], //酒店列表
        //添加修改供应商酒店信息
        addMsg: {
          Id: 0, //编号
          SupplierId: 0, //
          HotelId: 0,
          StartDate: "",
          EndDate: "",
          SubPayType: 0
        },
        //付款方式
        PayTypeList: [{
            name: this.$t("ground.xianfu"),
            Id: 1
          },
          {
            name: this.$t("ground.qiandan"),
            Id: 2
          },
          {
            name: this.$t("ground.shiwudk"),
            Id: 3
          },
          {
            name: this.$t("ground.yufu"),
            Id: 4
          },
          {
            name: this.$t("ground.yufukuandk"),
            Id: 5
          },
          {
            name: this.$t("ground.gongsihetzf"),
            Id: 6
          },

          {
            name: this.$t("ground.yuejie"),
            Id: 9
          },
          {
            name: this.$t("ground.lingduidydf"),
            Id: 10
          },
          {
            name: this.$t("ground.shuaka"),
            Id: 11
          },
        ],
        pickerBeginDateBefore: {
          disabledDate: time => {
            if (this.addMsg.EndDate == null) {
              return false;
            } else {
              let endTime = new Date(this.addMsg.EndDate);
              return endTime.getTime() < time.getTime();
            }
          }
        },
        pickerBeginDateAfter: {
          disabledDate: time => {
            let startTime = new Date(this.addMsg.StartDate);
            return startTime.getTime() >= time.getTime();
          }
        }
      };
    },
    mounted() {
      this.msg.SupplierId = this.$route.query.ID;
      this.addMsg.SupplierId = this.$route.query.ID;
      this.SupplierName = this.$route.query.Name;
      this.getList();
      this.getHotelList();
    },
    methods: {
      //初始化数据
      initData() {
        this.addMsg.Id = 0;
        this.addMsg.SupplierId = this.$route.query.ID;
        this.addMsg.HotelId = 0;
        this.addMsg.StartDate = "";
        this.addMsg.EndDate = "";
        this.addMsg.SubPayType = 0;
      },
      SaveData() {
        if (this.addMsg.HotelId <= 0) {
          this.Info(this.$t("ground.qingxuanzejiud"));
          return;
        }
        if (this.addMsg.SubPayType <= 0) {
          this.Info(this.$t("ground.qingxuanzefkfs"));
          return;
        }
        if (this.addMsg.StartDate == "") {
          this.Info(this.$t("ground.qingxuanzekssjs"));
          return;
        }
        if (this.addMsg.EndDate == "") {
          this.Info(this.$t("ground.qingxuanzejssjs"));
          return;
        }
        this.apipost(
          "supplier_post_SetSupplierDetailService",
          this.addMsg,
          res => {
            this.loading = false;
            if (res.data.resultCode == 1) {
              this.Success(res.data.message);
              this.initData();
              this.isShow = false;
              this.getList();
            } else {
              this.Error(res.data.message);
            }
          },
          null
        );
      },
      //根据编号获取实体
      GetData(Id) {
        this.apipost(
          "supplier_post_GetEntityService", {
            Id: Id
          },
          res => {
            this.loading = false;
            if (res.data.resultCode == 1) {
              var nData = res.data.data;
              this.addMsg.Id = nData.Id;
              this.addMsg.HotelId = nData.HotelId;
              this.addMsg.SubPayType = nData.SubPayType;
              this.addMsg.StartDate = nData.StartDateStr;
              this.addMsg.EndDate = nData.EndDateStr;
            } else {
              this.Error(res.data.message);
            }
          },
          null
        );
      },
      //获取数据
      getList() {
        this.loading = true;
        this.apipost(
          "supplier_get_GetListService",
          this.msg,
          res => {
            this.loading = false;
            if (res.data.resultCode == 1) {
              this.dataList = res.data.data;
            } else {
              this.Error(res.data.message);
            }
          },
          null
        );
      },
      //获取酒店列表
      getHotelList() {
        this.loading = true;
        this.apipost(
          "hotel_post_GetList", {
            QCountry: 651
          },
          res => {
            this.loading = false;
            if (res.data.resultCode == 1) {
              this.HotelList = res.data.data;
            } else {
              this.Error(res.data.message);
            }
          },
          null
        );
      }
    }
  };

</script>