<style>
.ticketManagement .singeRowTable tr:nth-child(n + 2):hover {
  background-color: white;
  box-shadow: 0px 0px 14px 0px #adadad;
  z-index: 10;
  position: relative;
}

.ticketManagement .DaysInfo span {
  display: inline-block;
  background-color: #2aaef2;
  color: white;
  border-radius: 4px;
  padding: 0 10px;
  height: 30px;
  line-height: 30px;
}

.ticketManagement .DaysInfo span i {
  margin-right: 10px;
}

.ticketManagement .singeRowTable tr:nth-child(n + 2) {
  height: 80px;
  text-align: center;
}

.ticketManagement .detailsIT .singeRowTable tr:nth-child(n + 2):hover {
  background-color: white;
  box-shadow: 0px 0px 14px 0px #adadad;
  z-index: 10;
  position: relative;
}

.ticketManagement .Ldata {
  color: #333333;
  margin-top: 5px;
}

.ticketManagement .LP {
  color: #e95252;
}

.ticketManagement .HP {
  color: #2aaef2;
  text-align: left;
  font-size: 14px;
  font-weight: bold;
  padding-left: 5px;
  display: inline-block;
}

.ticketManagement .T1 {
  text-align: right;
  color: #666666;
  display: inline-block;
}

.ticketManagement .T2 {
  text-align: left;
  color: #e95252;
  font-size: 14px;
  font-weight: bold;
  padding-left: 5px;
  display: inline-block;
}

.ticketManagement .descripTion {
  border-radius: 4px;
  width: 266px;
  text-align: left;
  padding: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  /*! autoprefixer: off */
  -webkit-box-orient: vertical;
  /* autoprefixer: on */
  -webkit-line-clamp: 2;
}

.ticketManagement .singeRowTable tr:nth-child(n + 2):hover .descripTion {
  background-color: #ededed;
}

.ticketManagement .roomName {
  display: inline-block;
  width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
  padding-left: 20px;
}

.ticketManagement .w300 .el-textarea__inner {
  height: 140px;
}

.ticketManagement .el-dialog--center .el-dialog__body {
  padding: 25px 25px 0;
}
</style>
<template>
  <div class='flexOne ticketManagement'>
    <div class="query-box">
      <ul>
        <li>
          <label class="">类型名称</label>
          <el-input v-model="msg.CarName" maxlength="30" @keyup.native.enter="getList"></el-input>
        </li>
        <li>
          <input type="button" class="hollowFixedBtn" :value="$t('pub.searchBtn')"
            @click="getList(), resetPageIndex()" />
          <input type="button" class="normalBtn" @click="outerVisible = true, dialogTitle" :value="$t('pub.addBtn')" />
        </li>
      </ul>
    </div>
    <table class="singeRowTable centerTable" border="0" cellspacing="0" cellpadding="0" v-loading="loading"
      style="border-collapse:separate;border-spacing:0px 10px;table-layout:fixed;">
      <tr>
        <th width="200">包车名称</th>
        <th width="200">{{ $t('scen.sc_bjts') }}</th>
        <th>{{ $t('scen.sc_dj') }}</th>
        <th>{{ $t('scen.sc_gj') }}</th>
        <th width="300">{{ $t('hotel.hotel_remark') }}</th>
        <th>操作人</th>
        <th>{{ $t('system.table_operation') }}</th>
      </tr>
      <tr v-for="item in DataList" :key="item.subCode">
        <td>
          <el-tooltip class="item" effect="dark" :content="item.CarName" placement="top-start" popper-class="max-w250">
            <span class="roomName">{{ item.CarName }}</span>
          </el-tooltip>
        </td>
        <td class="DaysInfo">
          <span><i class="iconfont icon-kaoqintongji"></i>{{ item.PriceNum }}{{ $t('hotel.hotel_item') }}</span>
        </td>
        <td>
          <p class="clearfix">
            <!-- <span class="tit_name T1">{{getCurrencyCode(item.CurrencyId)}}</span> -->
            <span class='tit_name T2'>{{ item.MinPrice }}</span>
          </p>
          <!-- <p class="Ldata">{{item.LDate}}</p> -->
        </td>
        <td>
          <p class="clearfix">
            <!-- <span class="tit_name T1">{{getCurrencyCode(item.CurrencyId)}}</span> -->
            <span class='tit_name HP'>{{ item.MaxPrice }}</span>
          </p>
          <!-- <p class="Ldata">{{item.HDate}}</p> -->
        </td>
        <td>
          <el-tooltip class="item" effect="dark" v-if="item.Description" :content="item.Description"
            placement="top-start" popper-class="max-w250">
            <span class="descripTion">{{ item.Description }}</span>
          </el-tooltip>
        </td>
        <td>
          {{ item.UpdateByName }}
          <p style="color: #6E6E6E;">{{ item.UpdateTime }}</p>
        </td>
        <td>
          <el-button-group>
            <el-tooltip class="item" effect="dark" :content="$t('pub.updateMsg')" placement="top-start">
              <el-button type="primary" icon="iconfont icon-Edit"
                @click="outerVisible = true, dialogTitle = '修改包车', updateResturant(item)"></el-button>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" :content="$t('restaurant.res_bidManage')" placement="top-start">
              <el-button type="primary" icon="iconfont icon-ico_shezhi"
                @click="goUrl('CharteringPackagePrice', item.Id)"></el-button>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" :content="$t('system.table_delete')" placement="top-start">
              <el-button type="danger" icon="el-icon-delete" @click="isDelete(item.Id)"></el-button>
            </el-tooltip>
          </el-button-group>
        </td>
      </tr>
    </table>
    <!-- 添加包车 -->
    <el-dialog custom-class='w500' :visible.sync="outerVisible" :title="dialogTitle" center
      :before-close="closeChangeMachie">
      <el-form :model="addMsg" :rules="rules" ref="addMsg" label-width="110px">
        <el-form-item :label="$t('objFill.chanpinglx')" prop="CarName">
          <el-input class="w300" type="text" v-model="addMsg.CarName" maxlength="20"></el-input>
        </el-form-item>
        <el-form-item label="最大乘坐人数" prop="PeopleNum">
          <el-input-number v-model="addMsg.PeopleNum" :min="1" label="最大乘坐人数"></el-input-number>
        </el-form-item>
        <el-form-item :label="$t('hotel.hotel_produceDes')" prop="">
          <el-input class="w300" type="textarea" v-model="addMsg.Description" maxlength="300"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <button class="hollowFixedBtn" @click="resetForm('addMsg'), outerVisible = false">{{
          $t('pub.cancelBtn')
        }}</button>
        &nbsp;
        <button class="normalBtn" type="primary" @click="submitForm('addMsg')">{{ $t('pub.saveBtn') }}</button>
      </div>
    </el-dialog>
    <div class="noData" v-show="noData">
      {{ $t('system.content_noData') }}
    </div>
    <el-pagination background @current-change="handleCurrentChange" :current-page.sync="currentPage"
      layout="total,prev, pager, next, jumper" :page-size='msg.pageSize' :total='total'>
    </el-pagination>
  </div>
</template>
<script>
export default {
  data() {
    return {
      msg: {
        pageIndex: 1,
        pageSize: 6,
        ProductId: "",
        CarName: "",
        Status: "-1"
      },
      addMsg: {
        Id: "0",
        ProductId: "",
        CarName: "",
        Description: "",
        PeopleNum: "",
      },
      ProductId: "",
      loading: true,
      total: 0,
      currentPage: 1,
      outerVisible: false,
      dialogTitle: "",
      noData: false,
      DataList: "",
      TicketCouponsList: "",
      rules: {
        //表单必填验证
        CarName: [{
          required: true,
          message: "请输入产品名称",
          trigger: "blur"
        }],
        PeopleNum: [{
          required: true,
          message: "请请输入最大可乘坐人数"
        }]
      },
      allCurrencyList: [],
      querys: null
    };
  },
  methods: {
    getList() {
      this.loading = true;
      this.apipost(
        "CarSingle_post_GetCarSingleTypePageList",
        this.msg,
        res => {
          this.loading = false;
          if (res.data.resultCode == 1) {
            this.total = res.data.data.count;
            this.DataList = res.data.data.pageData;
            this.noData = !this.total > 0;
          }
        },
        null
      );
    },
    saveResource() {
      this.apipost(
        "CarSingle_post_SetCarSingleType",
        this.addMsg,
        res => {
          if (res.data.resultCode == 1) {
            this.getList();
            this.Success(this.$t('tips.baocunchenggong'));
            this.outerVisible = false;
            this.resetForm("addMsg");
          } else {
            this.Error(res.data.message);
          }
        },
        null
      );
    },
    updateResturant(item) {
      this.addMsg = {
        Id: item.Id,
        ProductId: this.ProductId,
        CarName: item.CarName,
        Description: item.Description,
        PeopleNum: item.PeopleNum,
      }
    },
    isDelete(ID) {
      this.$confirm(this.$t('tips.shifoushanchu'),  this.$t('tips.tips'), {
        confirmButtonText: this.$t('pub.sureBtn'),
        cancelButtonText: this.$t('pub.cancelBtn'),
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: this.$t('tips.shanchuchenggong')
        });
        this.apipost('CarSingle_post_DelCarSingleType', {
          CarTypeId: ID
        }, res => {
          if (res.data.resultCode == 1) {
            this.getList()
          } else { }
        }, err => { })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: this.$t('tips.cancleDelete')
        });
      });
    },
    goUrl(path, id) {
      let data = {
        CarId: id,
        ProductId: this.ProductId,
      }
      this.$router.push({
        path: path,
        query: {
          obj: JSON.stringify(data),
          blank: 'y',
          tab: this.$t('restaurant.res_bidManage')
        }
      });
    },
    //翻页功能按钮
    handleCurrentChange(val) {
      this.msg.pageIndex = val;
      this.getList();
    },
    //查询初始化页码
    resetPageIndex() {
      this.msg.pageIndex = 1;
      this.currentPage = 1;
    },
    //初始化包车资源
    initResrestaurant() {
      let msg = {};
      this.apipost(
        "ticketcoupons_post_GetList",
        msg,
        res => {
          if (res.data.resultCode == 1) {
            this.TicketCouponsList = res.data.data;
          }
        },
        null
      );
    },
    submitForm(addMsg) {
      //提交创建、修改表单
      let that = this;
      that.$refs[addMsg].validate(valid => {
        if (valid) {
          that.saveResource();
        } else {
          return false;
        }
      });
    },
    clearMsg() {
      let newMsg = {
        Id: "0",
        ProductId: this.addMsg.ProductId,
        CarName: "",
        TicketDesc: "",
        TicketCouponsType: ''
      };
      this.addMsg = newMsg;
    },
    closeChangeMachie(done) {
      //弹出框关闭初始化弹框内表单
      done();
      this.resetForm("addMsg");
      // this.addMsg.ProductId = parseInt(this.querys.id);
    },
    resetForm(formName) {
      this.clearMsg();
      this.$refs[formName].resetFields();
    },
    //获取所有币种
    getAllCurrency() {
      this.apipost(
        "financeinfo_post_GetList", {},
        res => {
          if (res.data.resultCode == 1) {
            this.allCurrencyList = res.data.data;
          }
        },
        err => { }
      );
    },
    //获取币种编码
    getCurrencyCode(currencyId) {
      let currencyCode = "CNY";
      this.allCurrencyList.forEach(x => {
        if (x.ID == currencyId) {
          currencyCode = x.Code;
        }
      });
      return currencyCode;
    }
  },
  mounted() {
    this.querys = JSON.parse(this.$route.query.obj)
    this.msg.ProductId = this.querys.id;
    // this.addMsg.CarName = this.querys.Name
    this.dialogTitle = this.querys.Name
    this.addMsg.ProductId = parseInt(this.querys.id);
    this.initResrestaurant();
    this.ProductId = this.querys.id;
    this.getAllCurrency();
    this.getList();
  }
};
</script>