<style>
  .busUsePrice .busList {
    width: 230px;
    height: 270px;
    float: left;
    margin: 0 10px 10px 0;
    background-color: #fff;
    border-radius: 4px;
    font-size: 12px;
    overflow: hidden;
  }

 .busUsePrice .busListTable{
   width: 98%;
   margin: 0px 2px 0px 2px;
 }
  .busUsePrice .busListTable tr td{
    height: 20px;
    line-height: 20px;
 }
  .busUsePrice .busListTop {
    width: 100%;
    position: relative;
    text-align: center;
  }

  .busUsePrice .usePricediv {
    margin: 7px 0 0 20px;
  }

  .busUsePrice .btmAddStore {
    border-top: 1px solid #d1d1d1;
    width: 100%;
    display: none;
    overflow-x: auto;
    overflow-y: auto;
    position: fixed;
    background: #f9f9f9;
    bottom: 0;
  }

  .busUsePrice .changeMsg {
    width: 80%;
  }

  .busUsePrice .changeMsg li {
    float: left;
  }

  .busUsePrice .changeMsg li:first-child {
    margin-left: 20px;
  }

  .busUsePrice .btmTitle {
    padding: 0 10px;
    margin: 20px 0 20px 25px;
    border-left: 3px solid #e95252;
    font-size: 14px;
    color: #000000;
  }

  .busUsePrice .busUsePeople .el-input__inner {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  .busUsePrice .busType {
    margin: 10px 0 0 31px;
    font-size: 14px;
    display: inline-block;
  }

  .busUsePrice .cityBtnList {
    margin: 10px 0 20px 20px;
  }

  .busUsePrice .busUserBtnList {
    width: 100%;
    text-align: center;
    margin-top: 10px;
  }

  .busUsePrice .busListTop img {
    width: 100%;
  }

  .busUsePrice .BusTypeStr {
    position: absolute;
    top: 15px;
    color: #fff;
    font-size: 25px;
    left: 63px;
  }

  .busUsePrice .UPBtn {
    width: 70px;
    height: 23px;
  }

  .busUsePrice .topNotice {
    width: 100%;
    height: 20px;
    font-size: 12px;
    text-align: left;
    margin: 20px 0;
  }

  .busUsePrice .delScien {
    position: absolute;
    right: 10px;
    top: 10px;
    display: none;
  }

  .busUsePrice .delScien:hover {
    color: #f76f6f;
    cursor: pointer;
  }

  .busUsePrice .busList:hover .delScien {
    display: block;
  }

  .busUsePrice .busDiv {
    margin-top: 20px;
  }

  .busUsePrice .busList:hover {
    box-shadow: 0px 0px 20px rgba(191, 191, 191, 1);
    transition: all linear 0.5s;
  }

  .Bus_BtnList {
    text-align: right;
    margin-bottom: 10px;
  }

  .Bus_Spacing {
    margin-left: 24px;
  }

  .busUsePrice .combottomDiv .el-select {
    width: 100%;
  }

</style>
<template>
  <div class="flexOne busUsePrice">
    <div class="query-box">
      <ul>
        <li>
          注：以下报价是提供给开团人员产生成本报价的参考依据，不作为最终的用车价格
        </li>
        <li>
          <input type="button" class="normalBtn" @click="addPanel" value="新增" />
        </li>
      </ul>
    </div>
    <div class="busDiv clearfix" v-loading="loading">
      <div class="busList" v-for="item in dataList" :key="item.subCode">
        <div class="busListTop">
          <img v-if="item.ShowBusImage" :src="item.ShowBusImage" style="width:230px;height:60px;" />
          <img v-else src="../../assets/img/suplier.jpg" style="width:230px;height:60px;" />
          <span class="BusTypeStr">{{item.BusTypeStr}}</span>
          <div class="delScien" @click="isdelete(item.Id)">
            <i class="iconfont icon-xingzhuang"></i>
          </div>
        </div>
        <table class="busListTable">
          <tr>
            <td style="width:49%;">使用人数：{{item.UseNum}}人</td>
            <td style="width:49%;">地<span class="Bus_Spacing">区</span>：{{getArea(item.AreaType)}}</td>
          </tr>
          <tr>
            <td>接送报价：{{item.ReceivePrice}}</td>
            <td>全天报价：{{item.AllDayPrice}}</td>
          </tr>
          <tr>
            <td colspan="2">
              半天报价：{{item.HalfDayPrice}}
            </td>
          </tr>
          <tr>
            <td>全天高速：{{item.AllDayHighSpeedFee}}</td>
            <td>接送高速：{{item.PickUpHighSpeedFee}}</td>
          </tr>
          <tr>
            <td>全天茶代：{{item.AllDayChaDaiFee}}</td>
            <td>接送茶代：{{item.PickUpChaDaiFee}}</td>
          </tr>
          <tr>
            <td colspan="2"><div style="height:40px; overflow-y:scroll">{{item.Remark}}</div></td>
          </tr>
        </table>
        <div class="busUserBtnList">
          <input type="button" class="normalBtn" @click="managePrice(item.Id)" value="管理报价">
        </div>
      </div>
    </div>
    <el-pagination background @current-change="handleCurrentChange" :current-page.sync="currentPage"
      layout="total,prev, pager, next, jumper" :page-size="this.msg.pageSize" :total="total">
    </el-pagination>

    <div class="combottomDiv" v-if="isShow">
      <el-row>
        <el-col :span="18">
          <div class="combottomTitle">报价管理</div>
        </el-col>
        <el-col :span="4" class="Bus_BtnList">
          <input type="button" class="hollowFixedBtn" @click="cancelPanel" value="取消" />
          <input type="button" class="normalBtn" @click="submitForm('addMsg')" value="保存" />
        </el-col>
      </el-row>
      <el-form :model="addMsg" :rules="rules" ref="addMsg" label-width="100px">
        <el-row>
          <el-col :span="5">
            <el-form-item label="地区" prop="AreaType">
              <el-select filterable placeholder="请选择" v-model="addMsg.AreaType">
                <el-option label='不限' :value="selectDefauleValue"></el-option>
                <el-option v-for="item in AreaList" :key="item.Id" :label="item.Name" :value="item.Id"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="车辆类型" prop="BusType">
              <el-select filterable placeholder="请选择" v-model="addMsg.BusType">
                <el-option v-for="item in BusTypeList" :key="item.Id" :label="item.Name" :value="item.Id"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="座位数" prop="UseNum">
              <el-input placeholder="座位数" v-model="addMsg.UseNum" @keyup.native="checkInteger(addMsg,'UseNum')"
                class="busUsePeople">
                <template slot="append">座</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="接送报价" prop="ReceivePrice">
              <el-input v-model="addMsg.ReceivePrice" @keyup.native="checkPrice(addMsg,'ReceivePrice')"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="送机报价" prop="SendPrice" style="display:none;">
              <el-input v-model="addMsg.SendPrice" @keyup.native="checkPrice(addMsg,'SendPrice')"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="全天报价" prop="AllDayPrice">
              <el-input v-model="addMsg.AllDayPrice" @keyup.native="checkPrice(addMsg,'AllDayPrice')"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="半天报价" prop="HalfDayPrice">
              <el-input v-model="addMsg.HalfDayPrice" @keyup.native="checkPrice(addMsg,'HalfDayPrice')"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5" style="display:none;">
            <el-form-item label="小时报价" prop="HourPrice">
              <el-input v-model="addMsg.HourPrice" @keyup.native="checkPrice(addMsg,'HourPrice')"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="全天高速" prop="AllDayHighSpeedFee">
              <el-input v-model="addMsg.AllDayHighSpeedFee" @keyup.native="checkPrice(addMsg,'HourPrice')"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="接送高速" prop="PickUpHighSpeedFee">
              <el-input v-model="addMsg.PickUpHighSpeedFee" @keyup.native="checkPrice(addMsg,'PickUpHighSpeedFee')">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="全天茶代" prop="AllDayChaDaiFee">
              <el-input v-model="addMsg.AllDayChaDaiFee" @keyup.native="checkPrice(addMsg,'AllDayChaDaiFee')">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="接送茶代" prop="PickUpChaDaiFee">
              <el-input v-model="addMsg.PickUpChaDaiFee" @keyup.native="checkPrice(addMsg,'PickUpChaDaiFee')">
              </el-input>
            </el-form-item>
          </el-col>

          <el-col :span="5">
            <el-form-item label="币种" prop="CurrencyId">
              <el-select filterable v-model='addMsg.CurrencyId' @change="getRate(addMsg.CurrencyId)">
                <el-option label='不限' :value="selectDefauleValue"></el-option>
                <el-option v-for="item in currencyTypeList" :key="item.ID" :value="item.ID" :label="item.Name">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="汇率" prop="CurrentRate">
              <el-input v-model="addMsg.CurrentRate" @keyup.native="checkRate(addMsg,'CurrentRate')"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="车辆图片">
              <el-upload class="avatar-uploader" :http-request="UploadImage" :multiple="false"
                accept="image/jpeg,image/gif,image/png,image/bmp" :show-file-list="false" action="">
                <img v-if="addMsg.ShowBusImage&&addMsg.ShowBusImage!=''" :src="addMsg.ShowBusImage"  
                  style="width:200px;height:100px">
                <i class="el-icon-upload2  avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="说明" prop="Remark">
              <el-input type="textarea" autosize placeholder="请输入内容" v-model="addMsg.Remark">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      var DealAreaValidate = (rule, value, callback) => {
        if (value === 0) {
          callback(new Error("请选择地区"));
        } else {
          callback();
        }
      };
      var validateCurrency = (rule, value, callback) => {
        if (value === 0) {
          callback(new Error("请选择币种"));
        } else {
          callback();
        }
      };
      return {
        total: 0,
        currentPage: 1,
        dataList: "",
        loading: false,
        isShow: false,
        BusTypeList: "",
        selectDefauleValue: 0,
        AreaList: [],
        currencyTypeList: [],
        msg: {
          pageIndex: 1,
          pageSize: 18
        },
        //表单json
        addMsg: {
          ID: 0,
          UseNum: "",
          BusType: "",
          ReceivePrice: "",
          SendPrice: "",
          AllDayPrice: "",
          HalfDayPrice: "",
          HourPrice: "",
          Remark: "",
          AreaType: 0,
          CurrencyId: 0,
          CurrentRate: 0,
          AllDayHighSpeedFee: 0, //全天高速费
          PickUpHighSpeedFee: 0, //接送高速费
          AllDayChaDaiFee: 0, //全天茶代费
          PickUpChaDaiFee: 0, //接送茶代费
          BusImage: '', //车辆图片
          ShowBusImage: "",
        },
        //表单验证
        rules: {
          AreaType: [{
            validator: DealAreaValidate,
            trigger: "change",
            required: true
          }],
          CurrencyId: [{
            validator: validateCurrency,
            trigger: "change",
            required: true
          }],
          BusType: [{
            required: true,
            message: "请选择车辆类型",
            trigger: "change"
          }],
          UseNum: [{
            required: true,
            message: "请输入人数",
            trigger: "change"
          }],
          ReceivePrice: [{
            required: true,
            message: "请输入接机价格",
            trigger: "change"
          }],
          SendPrice: [{
            required: true,
            message: "请输入送机价格",
            trigger: "change"
          }],
          AllDayPrice: [{
            required: true,
            message: "请输入全天价格",
            trigger: "change"
          }],
          HalfDayPrice: [{
            required: true,
            message: "请输入全天价格",
            trigger: "change"
          }],
          HourPrice: [{
            required: true,
            message: "请输入小时价格",
            trigger: "change"
          }],
          AllDayHighSpeedFee: [{
            required: true,
            message: "请输入全天高速价格",
            trigger: "change"
          }],
          PickUpHighSpeedFee: [{
            required: true,
            message: "请输入接送高速价格",
            trigger: "change"
          }],
          AllDayChaDaiFee: [{
            required: true,
            message: "请输入全天茶代价格",
            trigger: "change"
          }],
          PickUpChaDaiFee: [{
            required: true,
            message: "请输入接送茶代价格",
            trigger: "change"
          }]
        }
      };
    },
    methods: {
      //上传图片
      UploadImage(file) {
        let newArr = [];
        newArr.push(file.file);
        let fileName = file.file.name;
        var path = "/Upload/DMC/";
        this.UploadSelfFileT(path, newArr, x => {
          var obj = this.$DMCUtils.DMCImageObj();
          var str = x.name;
          var imgUrl = this.domainManager().ViittoFileUrl + x.data.FilePath;
          this.addMsg.BusImage = x.data.FilePath;
          this.addMsg.ShowBusImage = imgUrl;
        });
      },
      handleCurrentChange(val) {
        this.msg.pageIndex = val;
        this.initData();
      },
      resetPageIndex() {
        this.msg.pageIndex = 1;
        this.currentPage = 1;
      },
      initData() {
        this.loading = true;
        this.apipost(
          "busprice_get_GetBusPricePageList",
          this.msg,
          res => {
            this.loading = false;
            if (res.data.resultCode == 1) {
              this.dataList = res.data.data.pageData;
              this.total = res.data.data.count;
            }
          },
          null
        );
      },
      saveInfo() {
        this.apipost(
          "busprice_post_SetBusPrice",
          this.addMsg,
          res => {
            if (res.data.resultCode == 1) {
              this.initData();
              this.Success("保存成功");
              this.isShow = false;
              this.resetForm("addMsg");
            } else {
              this.Error(res.data.message);
            }
          },
          null
        );
      },
      //获取地区下拉
      getAreaList() {
        this.apipost(
          "busprice_get_GetBusAreaType", {},
          res => {
            if (res.data.resultCode == 1) {
              this.AreaList = res.data.data;
            }
          },
          null
        );
      },
      //根据ID获取地区
      getArea(AreaType) {
        var AreaName = '';
        this.AreaList.forEach(item => {
          if (item.Id == AreaType) {
            AreaName = item.Name
          }
        })
        return AreaName;
      },
      getCurrencyType() { // 币种类型
        this.apipost('financeinfo_post_GetList', {
          Name: ''
        }, res => {
          if (res.data.resultCode == 1) {
            this.currencyTypeList = res.data.data;
          }
        }, err => {})
      },

      //修改管理报价
      managePrice(ID) {
        this.addMsg.ID = ID;
        this.isShow = true;
        let msg = {
          ID: ID
        };
        this.apipost(
          "busprice_get_GetBusPrice",
          msg,
          res => {
            this.addMsg = res.data.data;
          },
          null
        );
      },
      /*获取车辆类型列表*/
      getBusTypeList() {
        this.apipost(
          "bus_get_GetBusTypeList",
          null,
          res => {
            if (res.data.resultCode == 1) {
              this.BusTypeList = res.data.data;
            }
          },
          null
        );
      },
      //币种下拉获取汇率
      getRate(ID) {
        this.currencyTypeList.forEach(x => {
          if (x.ID == ID) {
            this.addMsg.CurrentRate = x.Rate;
          }
        });
      },
      //取消
      cancelPanel() {
        this.isShow = false;
        this.resetForm("addMsg");
      },
      //添加
      addPanel() {
        this.isShow = true;
        this.addMsg.ID = 0;
        this.clearInfo();
      },
      clearInfo() {
        this.addMsg = {
          ID: 0,
          UseNum: "",
          BusType: "",
          ReceivePrice: "",
          SendPrice: "",
          AllDayPrice: "",
          HalfDayPrice: "",
          HourPrice: "",
          Remark: "",
          AreaType: 0,
          CurrencyId: 0,
          CurrentRate: 0,
          AllDayHighSpeedFee: 0,
          PickUpHighSpeedFee: 0,
          AllDayChaDaiFee: 0,
          PickUpChaDaiFee: 0,
          BusImage: ''
        };
      },
      submitForm(addMsg) {
        //提交创建、修改表单
        let that = this;
        that.$refs[addMsg].validate(valid => {
          if (valid) {
            that.saveInfo();
          } else {
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      //删除
      isdelete(ID) {
        var that = this;
        this.Confirm("是否删除?", function () {
          var msg = {
            ID: ID
          };
          that.apipost(
            "busprice_post_RemoveBusPrice",
            msg,
            res => {
              if (res.data.resultCode == 1) {
                that.initData();
              }
            },
            null
          );
        });
      }
    },
    mounted() {
      this.initData();
      this.getAreaList();
      this.getCurrencyType();
      this.getBusTypeList();
    }
  };

</script>
