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

  .busUsePrice2 .busListTable {
    width: 98%;
    margin: 0px 2px 0px 2px;
  }

  .busUsePrice2 .busListTable tr td {
    height: 20px;
    line-height: 20px;
  }

  .busUsePrice2 .busListTop {
    width: 100%;
    position: relative;
    text-align: center;
  }

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

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

  .busUsePrice2 .changeMsg {
    width: 80%;
  }

  .busUsePrice2 .changeMsg li {
    float: left;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .busUsePrice2 .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;
  }

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

  .busUsePrice2 .linkStrle {
    cursor: pointer;
    text-decoration: underline;
    color: blue;
  }

  .busUsePriceTable {
    width: 100%;
    font-size: 14px;
    color: #333;
    background-color: #fff;
    border-collapse: collapse;
  }

  .busUsePriceTable tr th {
    background: #e6e6e6;
    height: 30px;
    font-size: 14px;
    text-align: left;
    text-indent: 15px;
    border: 1px solid #cccccc;
  }

  .busUsePriceTable tr td {
    min-height: 60px;
    height: auto;
    padding: 10px;
    font-size: 14px !important;
    border: 1px solid #cccccc;
  }

  .busUsePrice2 .busUsePriceTable .el-pagination {
    border-top: 0 !important;
  }

</style>
<template>
  <div class="flexOne busUsePrice2">
    <div class="query-box">
      <ul>
        <li>
          {{$t('ground.bzuowei')}}
        </li>
        <li>
          <input type="button" class="normalBtn" @click="addPanel" :value="$t('pub.addBtn')" />
        </li>
      </ul>
    </div>
    <div class="busDiv clearfix" v-loading="loading">
      <table class="busUsePriceTable">
        <thead>
          <tr>
            <th>
              {{$t('system.label_img')}}
            </th>
            <th>
              {{$t('pub.area')}}/{{$t('ground.busType')}}
            </th>
            <th>
              {{$t('ground.UsePCount')}}
            </th>
            <th>
              车牌号
            </th>
            <th>
              {{$t('ground.yuefen')}}
            </th>
            <th>
              {{$t('ground.jsPrice')}}
            </th>
            <th>
              {{$t('ground.AllDayPrice')}}
            </th>
            <th>
              {{$t('ground.btbj')}}
            </th>
            <th>
              公里价格
            </th>
            <th>
              {{$t('ground.qtgs')}}
            </th>
            <th>
              {{$t('ground.jsgs')}}
            </th>
            <th>
              {{$t('ground.qtchadai')}}
            </th>
            <th>
              {{$t('ground.jschadai')}}
            </th>
            <th>
              {{$t('ground.baojiaDetail')}}
            </th>
            <th>
              {{$t('admin.admin_operate')}}
            </th>
          </tr>
        </thead>
        <tbody v-for="item in dataList" :key="item.subCode">
          <tr>
            <td style="width:300px">
              <img v-if="item.ShowBusImage" :src="item.ShowBusImage" style="width:200px;height:150px;" />
              <img v-else src="../../assets/img/suplier.jpg" style="width:200px;height:150px;" />
            </td>
            <td>
              {{getArea(item.AreaType)}}- {{getBusTypeStr(item.BusType)}}
            </td>
            <td>
              {{item.UseNum}}
            </td>
            <td>
              {{item.BusNumber}}
            </td>
            <td>
              {{item.QStartDate}}
            </td>
            <td>
              {{item.ReceivePrice}}
            </td>
            <td>
              {{item.AllDayPrice}}
            </td>
            <td>
              {{item.HalfDayPrice}}
            </td>
            <td>
              {{item.KMPrice}}
            </td>
            <td>
              {{item.AllDayHighSpeedFee}}
            </td>
            <td>
              {{item.PickUpHighSpeedFee}}
            </td>
            <td>{{item.AllDayChaDaiFee}}</td>
            <td>{{item.PickUpChaDaiFee}}</td>
            <td>
              <el-popover width="590" trigger="click">
                <table width="100%" border="0" cellspacing="0" cellpadding="0">
                  <tr style="text-align:center;">
                    <th width="70">{{$t('ground.yuefen')}}</th>
                    <th width="80">{{$t('ground.jsPrice')}}</th>
                    <th width="80">{{$t('ground.AllDayPrice')}}</th>
                    <th width="80">{{$t('ground.btbj')}}</th>
                    <th width="80">公里价格</th>
                    <th width="80">{{$t('ground.qtgs')}}</th>
                    <th width="80">{{$t('ground.jsgs')}}</th>
                    <th width="80">{{$t('ground.qtchadai')}}</th>
                    <th width="80">{{$t('ground.jschadai')}}</th>
                  </tr>
                  <tr v-for="(fItem,fIndex) in item.DetailsList" :key="fIndex" style="text-align:center;">
                    <td>
                      {{fItem.MonthStr}}
                    </td>
                    <td>
                      {{fItem.S_ReceivePrice}}
                    </td>
                    <td>
                      {{fItem.S_AllDayPrice}}
                    </td>
                    <td>
                      {{fItem.S_HalfDayPrice}}
                    </td>
                    <td>
                       {{fItem.S_KMPrice}}
                    </td>
                    <td>
                      {{fItem.S_AllDayHighSpeedFee}}
                    </td>
                    <td>
                      {{fItem.S_PickUpHighSpeedFee}}
                    </td>
                    <td>
                      {{fItem.S_AllDayChaDaiFee}}
                    </td>
                    <td>
                      {{fItem.S_PickUpChaDaiFee}}
                    </td>
                  </tr>
                </table>
                <span slot="reference" style="cursor:pointer;">{{$t('fnc.xiangqing')}}
                  <i class="iconfont icon-xiaotuziCduan_1"></i>
                </span>
              </el-popover>
            </td>
            <td style="text-align:center;">
              <el-button-group size='mini'>
                <el-tooltip class="item" effect="dark" :content="$t('ground.glbaojia')" placement="top-start">
                  <el-button type="primary" class="iconfont icon-bianji-smal" @click="managePrice(item.Id)"></el-button>
                </el-tooltip>
                <el-tooltip class="item" effect="dark" :content="$t('ground.baojiaDetail')" placement="top-start">
                  <el-button type="primary" class="iconfont icon-danju1"
                    @click="goUrl('busUsePriceDetails',item.Id,'报价详情')"></el-button>
                </el-tooltip>
                <el-tooltip class="item" effect="dark" :content="$t('system.ph_shanchu')" placement="top-start">
                  <el-button type="danger" class="iconfont icon-img_delete_small" @click="isdelete(item.Id)">
                  </el-button>
                </el-tooltip>
              </el-button-group>
            </td>
          </tr>
          <tr>
            <td colspan="15">
              {{$t('pub.pubRemark')}}: {{item.Remark}}
            </td>
          </tr>
        </tbody>
        <tfoot>
          <tr>
            <td colspan="15">
              <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>
            </td>
          </tr>
        </tfoot>
      </table>
    </div>
    <div class="combottomDiv" v-if="isShow">
      <el-row>
        <el-col :span="18">
          <div class="combottomTitle">{{$t('restaurant.res_bidManage')}}</div>
        </el-col>
        <el-col :span="4" class="Bus_BtnList">
          <input type="button" class="hollowFixedBtn" @click="cancelPanel" :value="$t('pub.cancelBtn')" />
          <input type="button" class="normalBtn" @click="submitForm('addMsg')" :value="$t('pub.saveBtn')" />
        </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="$t('pub.area')" prop="AreaType">
              <el-select filterable :placeholder="$t('pub.pleaseSel')" v-model="addMsg.AreaType">
                <el-option :label="$t('pub.unlimitedSel')" :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="$t('ground.busType')" prop="BusType">
              <el-select filterable :placeholder="$t('pub.pleaseSel')" 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="$t('sm.zuoweishu')" prop="UseNum">
              <el-input :placeholder="$t('sm.zuoweishu')" 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="车牌号">
              <el-input v-model="addMsg.BusNumber"  maxlength="45"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item :label="$t('ground.jsbaojia')" 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="$t('ground.songjiBj')" 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="$t('ground.AlldayPrice')" 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="$t('ground.bantbaojia')" 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="小时报价">
              <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="公里报价">
              <el-input v-model="addMsg.KMPrice" @keyup.native="checkPrice(addMsg,'KMPrice')"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item :label="$t('ground.qtgs')" prop="AllDayHighSpeedFee">
              <el-input v-model="addMsg.AllDayHighSpeedFee" @keyup.native="checkPrice(addMsg,'AllDayHighSpeedFee')">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item :label="$t('ground.jsgs')" 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="$t('ground.qtchadai')" 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="$t('ground.jschadai')" 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="$t('hotel.hotel_Currency')" prop="CurrencyId">
              <el-select filterable v-model='addMsg.CurrencyId' @change="getRate(addMsg.CurrencyId)">
                <el-option :label="$t('pub.unlimitedSel')" :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="$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="5">
            <el-form-item :label="$t('ground.carPicture')">
              <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="$t('fnc.shuoming')" prop="Remark">
              <el-input type="textarea" autosize :placeholder="$t('pub.pleaseImport')" 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: "",
          KMPrice: 0, //公里价格
          BusNumber:"",//车牌号
        },
        //表单验证
        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: {
      goUrl(path, id, name) {
        this.$router.push({
          name: path,
          query: {
            id: id,
            blank: 'y',
            tab: name
          }
        })
      },
      //上传图片
      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;
      },
      getBusTypeStr(busType) {
        var AreaName = '';
        this.BusTypeList.forEach(item => {
          if (item.Id == busType) {
            AreaName = item.Name
          }
        })
        return AreaName;
      },
      /*获取车辆类型列表*/
      getBusTypeList() {
        this.apipost(
          "bus_get_GetBusTypeList",
          null,
          res => {
            if (res.data.resultCode == 1) {
              this.BusTypeList = res.data.data;
            }
          },
          null
        );
      },
      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
        );
      },

      //币种下拉获取汇率
      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: '',
          KMPrice: 0
        };
      },
      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>