<style scoped>
.combottomDiv {
  width: inherit;
}

.lineMG .query_box {
  font-size: 12px;
  padding: 29px 0;
  padding-right: 30px;
  display: flex;
  justify-content: space-between;
}

.lineMG .el-switch.is-checked .el-switch__core {
  border-color: #4bca81;
  background-color: #4bca81;
}

.lineMG .addCompany {
  width: 440px;
  max-height: 600px;
}

.lineMG .addCompany .el-dialog__body {
  height: 486px;
  overflow: auto;
}

.lineMG .query_box div label {
  display: inline-block;
  min-width: 80px;
  text-align: right;
  font-style: normal;
  margin: 0 20px 0 0;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

input[type="number"] {
  -moz-appearance: textfield;
}

.lineType {
  width: 51px;
  height: 24px;
  display: inline-block;
  text-align: center;
  line-height: 24px;
  margin-top: 25px;
  border-radius: 4px;
  background-color: #ff9c00;
  color: #ffffff;
}

.lineMG .LMTable tr {
  height: 70px;
  text-align: center !important;
  background-color: #fff;
}

.comPanyNum {
  font-size: 14px;
  color: #333333;
  display: inline-block;
  font-weight: bold;
  cursor: pointer;
  margin-bottom: 5px;
  text-decoration: underline;
}

.comPanyNum:hover {
  color: #e95252;
}

.zhicai:first-child {
  margin-top: 23px;
}

.zhicai {
  color: #47bf8c;
}

.partCompany {
  padding: 0;
  box-shadow: 0px 1px 3px 0px #dedede;
}

.partCompany .popper__arrow::after {
  border-bottom-color: #ededed !important;
}

.partCompany table {
  padding: 10px 0 0 20px;
  background-color: #ededed;
  border-collapse: collapse;
  border: 1px solid #d2d2d2;
  font-size: 12px;
}

.partCompany table th {
  background-color: #ededed;
  padding: 5px;
}

.partCompany table td {
  background-color: #ffffff;
  padding: 9px 15px;
  color: #333333;
  border: 1px solid #d2d2d2;
}

.partCompany table td._d_name {
  background-color: #ededed;
}

.partCompany table ._color_666 {
  color: #666666;
}

.partCompany table tr._color_666 th {
  padding: 9px 15px;
}

.LineName {
  display: inline-block;
  width: 170px;
  margin: 30px 0 0 20px;
  text-align: left;
}

.lineMG .LM_Back {
  background-color: #f2f2f2;
}

.redType {
  color: #e95252;
}

.lineMG .tbDiv {
  overflow-y: auto;
}

.departListDiv {
  width: 100%;
  height: 200px;
  overflow-y: auto;
}

.lineMG .tbDiv::-webkit-scrollbar {
  width: 4px;
  height: 8px;
}

.lineMG .tbDiv::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  background: #ededed;
}

.lineMG .tbDiv::-webkit-scrollbar-thumb {
  border-radius: 4px;
  -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);
  background: #c9c9c9;
}

.departListDiv::-webkit-scrollbar {
  width: 4px;
  height: 8px;
}

.departListDiv::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  background: #ededed;
}

.departListDiv::-webkit-scrollbar-thumb {
  border-radius: 4px;
  -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);
  background: #c9c9c9;
}

.LMTable {
  width: 100%;
  font-size: 12px;
}

.lineMG .LMTable tr th {
  border-bottom: 1px solid #d1d1d1;
}

.lineMG .tbDiv .LMTable td {
  border-bottom: 1px solid #d1d1d1;
  border-right: 1px solid #d1d1d1;
  position: relative;
  text-align: center;
  padding: 5px;
  min-width: 250px;
}

.lineMG .tbDiv table {
  padding-right: 80px;
  margin-top: 10px;
  border-top: 1px solid #d1d1d1;
  border-left: 1px solid #d1d1d1;
  border-right: 1px solid #d1d1d1;
}

.upFentan {
  text-decoration: underline;
  cursor: pointer;
  position: absolute;
  right: 13px;
  top: 32%;
}

.subCountryList {
  width: 150px;
  text-align: left;
  display: inline-block;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  top: 3px;
}

.lineMG ._addLineTB tr {
  height: 40px !important;
}

.saveCompanyBtn {
  margin-top: 20px;
}

.setItem {
  cursor: pointer;
  text-decoration: underline;
  position: absolute;
  right: 13px;
  top: 32%;
}

._LMComdiv {
  float: left;
  width: 32%;
  text-align: left;
  margin-top: 20px;
}

.LineRank {
  width: 24px;
  height: 24px;
  background-color: #2aaef2;
  border-radius: 50%;
  text-align: center;
  line-height: 24px;
  color: #fff;
  margin: 15px auto 5px;
}

.lineMG .joinDepart {
  display: inline-block;
  margin-right: 50px;
  text-align: left;
  float: left;
  width: 180px;
}

.lineMG .LM_Rank {
  text-align: center;
}

._LowDisMoney {
  text-align: left;
  margin: 20px 0 0 25px;
}

.LM_Btcontent {
  margin-left: 20px;
}

.LM_ul li {
  height: 78px;
  margin: 20px 0 0px 0px;
  transition: linear all 0.5s;
  background-color: #fff;
  font-size: 12px;
  border: 1px solid #dddddd;
  overflow: hidden;
  position: relative;
}

.LM_BTNList {
  margin-top: 25px;
}

.lineMG .el-button-group .el-button {
  padding: 5px;
}

.lineMG .LM_ul>li:hover {
  box-shadow: 0px 0px 20px rgba(191, 191, 191, 1);
  transition: all linear 0.5s;
}

.lineMG .el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: auto;
}

.SP_datePicker .el-input__inner {
  padding-right: 0 !important;
}

.SP_AddTicket {
  margin: 10px 10px 0 30px;
}
</style>
<template>
  <div class="flexOne lineMG">
    <div class="query-box">
      <ul>
        <li>
          <span>
            <em>时间</em>
            <el-date-picker class="w150" type="date" v-model='msg.QDate' value-format="yyyy-MM-dd" placeholder="">
            </el-date-picker>
          </span>
        </li>
        <li>
          <input type="button" class="hollowFixedBtn" :value="$t('pub.searchBtn')"
            @click="resetPageIndex(), initDataTable()" />
          <input type="button" class="normalBtn" :value="$t('pub.addBtn')"
            @click="clearInfo(), isShowDIv = true, divTitle = '新增报价'" />
        </li>
      </ul>
    </div>
    <div class="commonContent" v-loading="loading">
      <ul class="LM_ul">
        <li v-for="(item, index) in tableData" :key="index">
          <el-row :gutter="10">
            <el-col :span="3">
              <span class="LineName">{{ item.StartDate }} 至 {{ item.EndDate }}</span>
            </el-col>
            <el-col :span="2">
              <div class="_LowDisMoney">
                <div>成本价</div>
                {{ item.CostPrice }}
              </div>
            </el-col>
            <el-col :span="2">
              <div class="_LowDisMoney">
                <div>库存</div>
                <div>{{ item.Inventory }}</div>
              </div>
            </el-col>
            <el-col :span="2">
              <div class="_LowDisMoney">
                <div>B2B价格</div>
                <div>{{ item.B2BPrice }}</div>
              </div>
            </el-col>
            <el-col :span="2">
              <div class="_LowDisMoney">
                <div>B2C价格</div>
                <div>{{ item.B2CPrice }}</div>
              </div>
            </el-col>
            <el-col :span="2">
              <div class="_LowDisMoney">
                <div>内部价格</div>
                <div>{{ item.SalesPrice }}</div>
              </div>
            </el-col>
            <el-col :span="3">
              <div class="_LowDisMoney">
                <div>机场</div>
                <div>{{ item.AirportName }}</div>
              </div>
            </el-col>
            <el-col :span="2">
              <div class="_LowDisMoney">
                <div>备注</div>
                <div>{{ item.Remark }}</div>
              </div>
            </el-col>
            <el-col :span="2">
              <div class="_LowDisMoney">
                <div>币种</div>
                <div>{{ getCurrencyName(item.CurrencyId ) }}</div>
              </div>
            </el-col>
            <el-col :span="2">
              <div class="_LowDisMoney">
                <div>汇率</div>
                <div>{{ item.CurrentRate }}</div>
              </div>
            </el-col>
            <el-col :span="2">
              <div class="LM_BTNList">
                <el-tooltip class="item" effect="dark" :content="$t('system.table_edit')" placement="top-start">
                  <el-button type="primary" circle icon="el-icon-edit"
                    @click="isShowDIv = true, divTitle = '修改报价', updateData(item)"></el-button>
                </el-tooltip>
                <el-tooltip class="item" effect="dark" :content="$t('system.table_delete')" placement="top-start">
                  <el-button type="danger" circle icon="el-icon-delete" @click="isdelete(item.Id)"></el-button>
                </el-tooltip>
              </div>
            </el-col>
          </el-row>
        </li>
      </ul>
      <div class="noData" v-show="noData">
        {{ $t('system.content_noData') }}
      </div>
    </div>
    <div class="combottomDiv" v-if="isShowDIv">
      <div class="combottomTitle">{{ divTitle }}</div>
      <div class="">
        <el-form :model="addMsg" :rules="rules" ref="addMsg" label-width="100px">
          <el-col :span="4">
            <el-form-item :label="$t('hotel.hotel_StartDate')" prop="StartDate">
              <el-date-picker class="SP_datePicker" :clearable="false" v-model='addMsg.StartDate' type="date"
                :picker-options="addPickerBeginDateBefore" value-format="yyyy-MM-dd" placeholder="">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item :label="$t('hotel.hotel_EndDate')" prop="EndDate">
              <el-date-picker class="SP_datePicker" :clearable="false" v-model='addMsg.EndDate' type="date"
                value-format="yyyy-MM-dd" :picker-options="addPickerBeginDateAfter" placeholder="">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item :label="$t('hotel.hotel_CostPrice')" prop="CostPrice">
              <el-input v-model="addMsg.CostPrice" @keyup.native="checkPrice(addMsg, 'CostPrice')"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item :label="$t('hotel.hotel_Inventory')" prop="Inventory">
              <el-input type="text" maxlength="8" v-model="addMsg.Inventory"
                @keyup.native="checkInteger(addMsg, 'Inventory')"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item :label="$t('hotel.hotel_B2BPrice')" prop="B2BPrice">
              <el-input type="text" v-model="addMsg.B2BPrice" @keyup.native="checkPrice(addMsg, 'B2BPrice')"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item :label="$t('hotel.hotel_B2CPrice')" prop="B2CPrice">
              <el-input type="text" v-model="addMsg.B2CPrice" @keyup.native="checkPrice(addMsg, 'B2CPrice')"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item :label="$t('hotel.hotel_SalesPrice')" prop="SalesPrice">
              <el-input type="text" v-model="addMsg.SalesPrice"
                @keyup.native="checkPrice(addMsg, 'SalesPrice')"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="机场" prop="AirportId" v-if="dataInfo.CarType == 1 || dataInfo.CarType == 2">
              <el-select v-model="addMsg.AirportId" filterable placeholder="请选择机场">
                <!-- <el-option :label="$t('pub.unlimitedSel')" :value='SelectDefaultValue'></el-option> -->
                <el-option v-for="item in AirportList" :key="item.AirportId" :label="item.AirportName"
                  :value="item.AirportId"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item :label="$t('hotel.hotel_Currency')" prop="CurrencyId">
              <el-select placeholder="请选币种" filterable @change="getCurrentRate(addMsg.CurrencyId)"
                v-model="addMsg.CurrencyId">
                <el-option :label="$t('pub.unlimitedSel')" :value='SelectDefaultValue'></el-option>
                <el-option v-for="item in allCurrencyList" :key="item.ID" :label="item.Name" :value="item.ID">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item :label="$t('hotel.hotel_CurrentRate')" prop="CurrentRate">
              <el-input v-model='addMsg.CurrentRate' @keyup.native="checkRate(addMsg, 'CurrentRate')"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item :label="$t('hotel.hotel_remark')" prop="Remark">
              <el-input type="textarea" v-model="addMsg.Remark"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <div style="position: absolute;right: 10px;top: 12px;">
              <button type="success" class="normalBtn subPrice" @click="submitForm('addMsg')">{{ comBtnText }}</button>
              <input type="button" class="normalBtn" @click="isShowDIv = false" value="取消" />
            </div>
          </el-col>
        </el-form>
      </div>
    </div>
    <el-pagination background @current-change="handleCurrentChange" :current-page.sync="msg.currentPage"
      layout="total,prev, pager, next, jumper" :page-size="msg.pageSize" :total="msg.total">
    </el-pagination>
  </div>
</template>
<script>
export default {
  data() {
    var validateCurrent = (rule, value, callback) => {
      if (value === 0) {
        callback(new Error("请选择币种"));
      }
    };
    return {
      querys: null,
      //供应商列表
      AirportList: [],
      //门票编号
      ProductId: "",
      //景点编号
      CarId: "",
      //是否自定(自定-不需要选择供应商，)
      IsSelfBook: false,
      //提交报价中
      comBtnText: "保存",
      //新增数据
      addMsg: {
        ID: 0,
        CarId: 0,
        ProductId: 0,
        StartDate: "",
        EndDate: "",
        Inventory: 0,//库存数量
        B2BPrice: 0.0,//B2B价格
        B2CPrice: 0.0,//B2C价格
        SalesPrice: 0.0,//内部价格
        Remark: "",
        CostPrice: 0.0,//成本价格

        CurrencyId: 0,//币种
        CurrentRate: 0.0,//汇率
        AirportId: '',//机场ID （接送机才有）
      },
      rules: {
        //表单必填验证
        StartDate: [
          {
            required: true,
            message: "开始日期必填",
            trigger: "change"
          }
        ],
        EndDate: [
          {
            required: true,
            message: "结束日期必填",
            trigger: "change"
          }
        ],
        CostPrice: [
          {
            required: true,
            message: "请输入成本价",
            trigger: "change"
          },
          {
            pattern: this.$commonUtils.Regex.el_Isdecimal,
            message: "请输入两位小数"
          }
        ],
        Inventory: [
          {
            required: true,
            message: "请输入库存",
            trigger: "change"
          },
          {
            pattern: this.$commonUtils.Regex.el_isInteger,
            message: "请输入正确的数字"
          }
        ],
        B2BPrice: [
          {
            required: true,
            message: "请输入B2B价格",
            trigger: "change"
          },
          {
            pattern: this.$commonUtils.Regex.el_Isdecimal,
            message: "请输入两位小数"
          }
        ],
        B2CPrice: [
          {
            required: true,
            message: "请输入B2C价格",
            trigger: "change"
          },
          {
            pattern: this.$commonUtils.Regex.el_Isdecimal,
            message: "请输入两位小数"
          }
        ],
        SalesPrice: [
          {
            required: true,
            message: "请输入成本价格",
            trigger: "change"
          },
          {
            pattern: this.$commonUtils.Regex.el_Isdecimal,
            message: "请输入两位小数"
          }
        ],
        AirportId: [
          {
            required: true,
            message: "请选择机场",
            trigger: "change"
          },
        ],
        CurrencyId: [
          // {
          //   validator:validateCurrent,
          //   trigger: "change"
          // }
        ],
        CurrentRate: [
          {
            required: true,
            message: "请输输入汇率",
            trigger: "change"
          }
        ]
      },
      msg: {
        pageIndex: 1,
        pageSize: 14,
        CarId: 0,
        ProductId: 0,
        QDate: "",
        // EndDate: "",
        total: 0,
        currentPage: 1
      },
      tableData: [],
      isShowDIv: false,
      loading: true,
      noData: false,
      SelectDefaultValue: 0,
      //所有币种
      allCurrencyList: [],
      addPickerBeginDateBefore: {
        disabledDate: time => {
          let endTime = new Date(this.addMsg.EndDate);
          return endTime.getTime() < time.getTime();
        }
      },
      addPickerBeginDateAfter: {
        disabledDate: time => {
          // let startTime = new Date(this.addMsg.StartDate);
          let startTime = new Date(this.getBeforeDate(1,new Date(this.addMsg.StartDate).Format("yyyy-MM-dd")));
          return startTime.getTime() >= time.getTime();
        }
      },
      dataInfo: null
    };
  },
  methods: {
    //初始化列表数据
    initDataTable() {
      this.loading = true;
      this.apipost(
        "CarSingle_post_GetCarSinglePricePageList",
        this.msg,
        res => {
          this.loading = false;
          if (res.data.resultCode == 1) {
            this.msg.total = res.data.data.count;
            this.tableData = res.data.data.pageData;
            this.noData = !this.msg.total > 0;
          }
        },
        null
      );
    },
    resetPageIndex() {
      this.msg.pageIndex = 1;
      this.msg.currentPage = 1;
    },
    handleCurrentChange(val) {
      this.msg.pageIndex = val;
      this.initDataTable();
    },
    //重置信息
    clearInfo() {
      this.addMsg.Id = 0;
      this.addMsg.Inventory = "";
      this.addMsg.B2BPrice = "";
      this.addMsg.B2CPrice = "";
      this.addMsg.SalesPrice = "";
      this.addMsg.Remark = "";
      this.addMsg.CostPrice = "";
      this.addMsg.StartDate = "";
      this.addMsg.EndDate = "";
      this.addMsg.CurrencyId = 0;
      this.addMsg.CurrentRate = "";
      this.addMsg.AirportId = "";
    },
    //修改报价信息
    updateData(item) {
      this.addMsg = {
        Id: item.Id,
        CarId: this.CarId,
        ProductId: this.ProductId,
        StartDate: item.StartDate,
        EndDate: item.EndDate,
        Inventory: item.Inventory,//库存数量
        B2BPrice: item.B2BPrice,//B2B价格
        B2CPrice: item.B2CPrice,//B2C价格
        SalesPrice: item.SalesPrice,//内部价格
        Remark: item.Remark,
        CostPrice: item.CostPrice,//成本价格

        CurrencyId: item.CurrencyId,//币种
        CurrentRate: item.CurrentRate,//汇率
        AirportId: item.AirportId,
      }
    },
    //获取所有币种
    getAllCurrency() {
      this.apipost(
        "financeinfo_post_GetList",
        {},
        res => {
          if (res.data.resultCode == 1) {
            this.allCurrencyList = res.data.data;
          }
        },
        err => { }
      );
    },
    //获取当前下拉选中币种汇率
    getCurrentRate(currencyId) {
      this.addMsg.CurrentRate = 0.0;
      this.allCurrencyList.forEach(x => {
        if (x.ID == currencyId) {
          this.addMsg.CurrentRate = x.Rate;
        }
      });
    },
    //获取去币种名
    getCurrencyName(currencyId) {
      let currencyName = "";
      this.allCurrencyList.forEach(x => {
        if (x.ID == currencyId) {
          currencyName = x.Name + "(" + x.Code + ")";
        }
      });
      return currencyName;
    },
    //HK新增查询条件
    initAirport() {
      this.apipost(
        "CarSingle_post_GetCarSingleAirportList",
        { ProductId: this.ProductId },
        response => {
          if (response.data.resultCode == 1) {
            this.AirportList = response.data.data;
          }
        },
        null
      );
    },
    // 获取产品详情
    getInfo() {
      this.apipost(
        "CarSingle_post_GetCarSingleProductInfo",
        {
          ProductId: this.ProductId
        },
        res => {
          if (res.data.resultCode == 1) {
            this.dataInfo = res.data.data;
          }
        }
      );
    },
    //提交景点报价
    hotelOfferSet() {
      let that = this
      this.addMsg.ProductId = this.ProductId;
      this.addMsg.CarId = this.CarId;
      let msg = []
      msg.push(this.addMsg)
      this.apipost(
        "CarSingle_post_SetCarSinglePrice",
        msg,
        res => {
          if (res.data.resultCode == 1) {
            that.initDataTable();
            that.Success("保存成功！");
            that.isShowDIv = false;
            that.resetForm("addMsg");
            // this.goUrl('CharteringProductList', this.CarId);
          } else {
            this.Error(res.data.message);
          }
        },
        null
      );
    },
    isdelete(Id) {
      var that = this;
      that.Confirm("是否删除?", function () {
        that.apipost(
          "ticketcouponsprice_post_Remove",
          {
            PriceId: Id
          },
          res => {
            if (res.data.resultCode == 1) {
              that.Success("删除成功！");
              that.initDataTable();
              // that.goUrl('ticketManagement', that.CarId);
            } else {
              that.Error(res.data.message);
            }
          },
          null
        );
      });
    },
    //提交创建、修改表单
    submitForm(addMsg) {
      let that = this;
      that.$refs[addMsg].validate(valid => {
        if (valid) {
          that.hotelOfferSet();
        } else {
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    //获取供应商是否显示
    getSuplier() {
      this.apipost(
        "ticketcoupons_post_Get",
        {
          ID: this.CarId
        },
        res => {
          if (res.data.resultCode == 1) {
            this.IsSelfBook = res.data.data.IsSelfBook;
          }
        }
      );
    },
    goUrl(path, id) {
      this.$router.push({
        name: path,
        query: {
          id: id
        }
      });
    },
  },
  mounted() {
    if (this.$route.query && this.$route.query.obj) {
      this.querys = JSON.parse(this.$route.query.obj)
      this.CarId = this.querys.CarId;
      this.ProductId = this.querys.ProductId;
      this.msg.CarId = this.querys.CarId;
      this.msg.ProductId = this.querys.ProductId;
    }

    this.getSuplier();
    this.initAirport();
    this.getAllCurrency();
    this.initDataTable();
    this.getInfo()
  }
};
</script>