<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="">{{$t('scen.sc_name')}}</label>
          <el-input v-model="msg.TicketName" 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">{{$t('scen.sc_name')}}</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>{{$t('system.table_operation')}}</th>
      </tr>
      <tr v-for="item in DataList" :key="item.subCode">
        <td>
          <el-tooltip class="item" effect="dark" :content="item.TicketName" placement="top-start"
            popper-class="max-w250">
            <span class="roomName">{{item.TicketName}}</span>
          </el-tooltip>
        </td>
        <td class="DaysInfo">
          <span><i class="iconfont icon-kaoqintongji"></i>{{item.Days}}{{$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.LPrice}}</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.HPrice}}</span>
          </p>
          <p class="Ldata">{{item.HDate}}</p>
        </td>
        <td>
          <el-tooltip class="item" effect="dark" v-if="item.TicketDesc" :content="item.TicketDesc" placement="top-start"
            popper-class="max-w250">
            <span class="descripTion">{{item.TicketDesc}}</span>
          </el-tooltip>
        </td>
        <td>
          <el-button-group>
            <el-tooltip class="item" effect="dark" content="修改" placement="top-start">
              <el-button type="primary" icon="iconfont icon-Edit"
                @click="outerVisible = true,dialogTitle='修改门票',updateResturant(item.Id)"></el-button>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="报价管理" placement="top-start">
              <el-button type="primary" icon="iconfont icon-ico_shezhi"
                @click="goUrl('scenicSpotPackagePrice',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('scen.sc_mpzy')" prop="CouponsId">
          <el-select :placeholder="$t('pub.pleaseSel')" class="w300" disabled v-model="addMsg.CouponsId">
            <el-option v-for="item in TicketCouponsList" :key="item.ID" :label="item.Name" :value="item.ID">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('scen.sc_name')" prop="TicketName">
          <el-input class="w300" type="text" v-model="addMsg.TicketName" maxlength="20"></el-input>
        </el-form-item>
        <el-form-item :label="$t('scen.sc_type_name')" prop="TicketCouponsType">
          <el-select filterable v-model='addMsg.TicketCouponsType' :placeholder="$t('pub.pleaseSel')" class="w300">
            <el-option v-for='item in TickettTypeList' :label='item.Name' :value='item.ID' :key='item.ID'>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('hotel.hotel_produceDes')" prop="TicketDesc">
          <el-input class="w300" type="textarea" v-model="addMsg.TicketDesc" maxlength="200"></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='msg.total'>
    </el-pagination>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        msg: {
          pageIndex: 1,
          pageSize: 6,
          CouponsId: "",
          TicketName: "",
          Status: "-1"
        },
        addMsg: {
          Id: "0",
          CouponsId: "",
          TicketName: "",
          TicketDesc: "",
          TicketCouponsType: "",
        },
        TicketID: "",
        TickettTypeList: [],
        loading: true,
        total: 0,
        currentPage: 1,
        outerVisible: false,
        dialogTitle: "",
        noData: false,
        DataList: "",
        TicketCouponsList: "",
        rules: {
          //表单必填验证
          CouponsId: [{
            required: true,
            message: "请选择门票资源"
          }],
          TicketCouponsType: [{
            required: true,
            message: "请选择门票类型"
          }]
        },
        allCurrencyList: []
      };
    },
    methods: {
      getList() {
        this.loading = true;
        this.apipost(
          "ticketcouponsticket_post_GetPageList",
          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(
          "ticketcouponsticket_post_Set",
          this.addMsg,
          res => {
            if (res.data.resultCode == 1) {
              this.getList();
              this.Success("保存成功!");
              this.outerVisible = false;
              this.resetForm("addMsg");
            } else {
              this.Error(res.data.message);
            }
          },
          null
        );
      },
      updateResturant(Id) {
        let msg = {
          ID: Id
        };
        this.addMsg.Id = Id;
        this.apipost(
          "ticketcouponsticket_post_Get",
          msg,
          res => {
            if (res.data.resultCode == 1) {
              this.addMsg = res.data.data;
            } else {
              this.Error(res.data.message);
            }
          },
          null
        );
      },
      isDelete(ID) {
        this.$confirm('是否删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.apipost('ticketcouponsticket_post_Remove', {
            ID: ID
          }, res => {
            if (res.data.resultCode == 1) {
              this.getList()
            } else {}
          }, err => {})
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      goUrl(path, id) {
        this.$router.push({
          path: path,
          query: {
            TicketID: id,
            CouponsId: this.TicketID,
            blank: 'y',
            tab: '报价管理'
          }
        });
      },
      GetTicketType() {
        this.apipost('ticketcouponsprice_post_GetTicketType', {}, res => {
          if (res.data.resultCode == 1) {
            this.TickettTypeList = res.data.data
          }
        }, err => {})
      },
      //翻页功能按钮
      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) {
        //提交创建、修改表单
        this.TickettTypeList.forEach(item => {
          if (this.addMsg.TicketCouponsType == item.ID) {
            // HK 2020-05-06注释
            //this.addMsg.TicketName = item.Name
          }
        })
        let that = this;
        that.$refs[addMsg].validate(valid => {
          if (valid) {
            that.saveResource();
          } else {
            return false;
          }
        });
      },
      clearMsg() {
        let newMsg = {
          Id: "0",
          CouponsId: "",
          TicketName: "",
          TicketDesc: "",
          TicketCouponsType: ''
        };
        this.addMsg = newMsg;
      },
      closeChangeMachie(done) {
        //弹出框关闭初始化弹框内表单
        done();
        this.resetForm("addMsg");
        this.addMsg.CouponsId = parseInt(this.$route.query.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.msg.CouponsId = this.$route.query.id;
      this.addMsg.CouponsId = parseInt(this.$route.query.id);
      this.initResrestaurant();
      this.TicketID = this.$route.query.id;
      this.getAllCurrency();
      this.getList();
      this.GetTicketType();
    }
  };
</script>