<style>
.ticketList{
  width: 100%;
  height: 100%;
  background:rgba(0, 0, 0, .5);
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ticketList .ticketList_bg{
  min-height: 756px;
  width: 422px;
  background: url('../../../assets/img/task/quanlist.png');
  background-size: 100% 100%;
  position: relative;
}
.ticketList .ticketList_close{
  position: absolute;
  right: -10px;
  top: -10px;
  cursor: pointer;
}
.ticketList .ticketList_close img{ 
  width:36px;
  height:37px;
}
.ticketList .ticketList_box{
  padding: 17px 15px;
}
.ticketList .ticketList_tit{
  width: 392px;
  /* height: 85px; */
  background: rgba(255,255,255,.68);
  border-top-left-radius: 21px;
  border-top-right-radius: 21px;
}
.ticketList .ticketList_tit .top_btn{
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 52px;
  padding: 15px 15px 5px;
  
}
.ticketList .ticketList_tit .top_btn img{
  width: 178px;
  height: 56px;
  cursor: pointer;
}
.ticketList .ticketList_tit .hebing_nav{
  border-top:2px dashed rgba(255,148,21,1);
}
.ticketList .ticketList_tit .hebing_nav .hebing{
  width:64px;
  height:20px;
  display: inline-block;
  background-color: RGBA(154, 154, 154, 1);
  text-align: center;
  line-height: 20px;
  color: white;
  border-radius: 16px;
  cursor: pointer;
  font-size: 12px;
}
.ticketList .ticketList_tit .hebing_nav .hebing.hebing2{
  background-color: #ff5656;
}
.ticketList .ticketList_tit .hebing_nav {
  display: flex;
  align-items: center;
  padding: 4px 6px;
  padding-right: 15px;
  justify-content: space-between;
}
.ticketList .el-checkbox__inner{
  border-radius: 50%;
}
.ticketList .el-checkbox-group .el-checkbox{
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 20px 10px 20px 5px;
}
.ticketList .el-checkbox__input.is-checked .el-checkbox__inner{
  background-color: white;
  border-color: rgba(255, 86, 86, 1);
} 
.ticketList .el-checkbox__input.is-indeterminate .el-checkbox__inner{
  background-color: #ff5656;
  border-color: #ff5656;
}
.ticketList .el-checkbox__input.is-checked+.el-checkbox__label {
  color: #ff5656;
}
.ticketList .el-checkbox__inner:hover {
  border-color: #ff5656;
}
.ticketList .container{
  height: 550px;
  overflow: auto;
}
.ticketList .container::-webkit-scrollbar{
  /*滚动条整体样式*/
  width: 13px;
  /*高宽分别对应横竖滚动条的尺寸*/
  height: 8px;
}
.ticketList .container::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 4px; 
  background: rgba(255, 224, 100, 1);
}
.ticketList .container::-webkit-scrollbar-track {
  /*滚动条里面轨道*/ 
  border-radius: 4px;
  background: rgba(31, 168, 176, 1);
}
.ticketList .container .item{
  width: 316px;
  height: 102px;
  background:rgba(255,255,255,1);
  border-radius:14px;
  position: relative;
  overflow: hidden;
}
.ticketList .container2 .item{
  position: relative;
  margin: 20px auto;
  overflow: hidden;
}
.ticketList .bottom_btn{
  text-align: center;
  padding: 8px ;
}
.ticketList .bottom_btn img{
  width: 185px;
  height: 64px;
  cursor: pointer;
  margin-top: 10px;
}
.ticketList .item .el-row{
  height: 100%;
  display: flex;
}
.ticketList .item .el-row .left{
  background:rgba(255,136,136,1);
  color: white;
  height: calc(100% - 32px);
  display: flex;
  align-items: flex-end;
  padding: 16px 6px
}
.ticketList .item .el-row .left .num{
  font-size: 60px;
  font-family: 'PingFangR';
  font-weight: bold;
  margin-bottom: -15px;
  position: relative;
}
.ticketList .item .el-row .left .num span{
  display: inline-block;
  width: 20px;
  height: 20px;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  position: absolute;
  right: 1px;
  top: 18px;
  background-color: #ff8888;
  border-radius: 50%;
}
.ticketList .item .el-row .right {
  padding: 11px 20px;
  line-height: 25px;
}
.ticketList .item .el-row .right ._name{
  font-size:22px;
  font-family: 'PingFangR';
  font-weight:bold;
  color:rgba(63,63,63,1);
}
.ticketList .item .el-row .right ._type{
  font-size: 16px;
  color:rgba(63,63,63,1);
  margin-top: 5px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ticketList .item .el-row .right ._btn{
  display: inline-block;
  width: 110px;
  text-align: center;
  font-size: 13px;
  color: white;
  background: rgba(255,86,86,1);
  margin-top: 5px;
  cursor: pointer;
  border-radius: 14px;
}
.ticketList .el-checkbox__inner::after{
  border: 1px solid #ff5656;
  border-left: 0;
  border-top: 0;
}
.container.container1 .item .el-row .left .num{
  margin-bottom: 16px;
}
.container.container1 .item .el-row .left .num span{
  top: -18px;
}
.container.container1 .item.disabled .el-row .left{
  background-color: RGBA(154, 154, 154, 1)
}
.container.container1 .item.disabled .el-row .left .num span{
  background-color: RGBA(154, 154, 154, 1)
}

</style>
<template>
  <div class="ticketList">
    <div class="ticketList_bg" :style="{zoom: zoom}">
      <div class="ticketList_box">
        <div class="ticketList_tit">
          <div class="top_btn">
            <div>
              <img v-if="activeNav === 1" src="../../../assets/img/task/weishiyong2.png" alt="">
              <img v-else @click="activeNav = 1" src="../../../assets/img/task/weishiyong.png" alt="">
            </div>
            <div>
              <img v-if="activeNav === 2" src="../../../assets/img/task/yishiyong2.png" alt="">
              <img v-else @click="activeNav = 2" src="../../../assets/img/task/yishiyong.png" alt="">
            </div>
          </div>
          <div v-if="activeNav === 1 && dataList.length > 1" class="hebing_nav">
            <template>
              <el-checkbox v-if="hebing === 2" :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
              <span v-else>&nbsp;</span>
            </template>
            <span @click="hebing = hebing===1 ? 2 : 1, checkedCities=[]" :class="{'hebing2': hebing===1}" class="hebing">合并</span>
          </div>
        </div>
        <div class="container container1" v-if="activeNav === 1 && hebing === 2">
          <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
            <el-checkbox v-for="(item, index) in dataList" :label="item.id" :key="index" :disabled="item.acessId === -1 || item.useState !== 1">
              <div class="item" :class="{disabled: item.acessId === -1 || item.useState !== 1}">
                <el-row>
                  <el-col :span="10">
                    <div class="left">
                      ￥<span class="num">{{item.denomination}}<span>元</span></span>
                    </div>
                  </el-col>
                  <el-col :span="14">
                    <div class="right">
                      <p class="_name">{{ticketName}}</p>
                      <p class="_type" :title="item.couponsName">{{item.couponsName}}</p>
                      <span class="_btn">立即使用</span>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </el-checkbox>
          </el-checkbox-group>
        </div>
        <div class="container container2" v-else>
          <div class="item" v-for="(item, index) in dataList"  :key="index" v-if="activeNav === 1 ? item.useState === 1 : item.useState !== 1">
            <el-row>
              <el-col :span="10">
                <div class="left">
                  ￥<span class="num">{{item.denomination}}<span>元</span></span>
                </div>
              </el-col>
              <el-col :span="14">
                <div class="right">
                  <p class="_name">{{ticketName}}</p>
                  <p class="_type" :title="item.couponsName">{{item.couponsName}}</p>
                  <span class="_btn" @click="goUrl()">立即使用</span>
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
        <div @mouseover="hebingBtn = 1" @mouseout="hebingBtn = 2" class="bottom_btn" @click="hebingTicket()">
          <img v-if="hebingBtn === 2" src="../../../assets/img/task/hebing.png" alt="">
          <img v-else src="../../../assets/img/task/hebing1.png" alt="">
        </div>
      </div>
      <div @mouseover="closeShow = 1" @mouseout="closeShow = 2" class="ticketList_close" @click="close">
        <img v-if="closeShow === 2" src="../../../assets/img/task/close.png" alt="">
        <img v-else src="../../../assets/img/task/close2.png" alt="">
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: ['ticketId', 'zoom', 'ActivityID'],
  data() {
    return{
      closeShow: 1,
      activeNav: 1,
      checkAll: false,
      checkedCities: [],
      dataList: [],
      isIndeterminate: true,
      hebing: 1,
      hebingBtn: 1,
      userInfo: {},
      tickList: [],
      ticketName: ''
    }
  },created(){
    if (this.ticketId === 3) {
      this.ticketName = '签证'
    } else if (this.ticketId === 4) {
      this.ticketName = '特价机票'
    } else if (this.ticketId === 2) {
      this.ticketName = '跟团游'
    } else if (this.ticketId === 8) {
      this.ticketName = '当地游'
    } else if (this.ticketId === 7) {
      this.ticketName = '自由行'
    } else if (this.ticketId === 9) {
      this.ticketName = '抽奖券'
    }
  },methods:{
    // 去使用优惠券
    goUrl: function (name){
      let path = '/'
      if (this.ticketName === '签证') {
        path += 'VisaHomePage' 
      } else if (this.ticketName === '特价机票') {
        path += 'TicketHome' 
      } else if (this.ticketName === '跟团游') {
        path += 'heel' 
      } else if (this.ticketName === '当地游') {
        path += 'Localtourhome' 
      } else if (this.ticketName === '自由行') {
        path += 'IndependentTravel' 
      } else if (this.ticketName === '抽奖券') {
        path += 'Home' 
      }
      this.$router.push({ path: path})
    },
    //用户合并
    hebingTicket: function () {
      if (this.checkedCities.length < 2) {
        return this.Error('请最少选择两个优惠券进行合成！');
      }
      if (this.checkedCities.length > 20) {
        return this.Error('最多选择20张优惠券进行合成！');
      }
      let msg = {
        activityId: this.ActivityID,
        coupons: this.checkedCities
      }
      this.apiJavaPost(
        "/api/mactivity/setFuseCoupon",
        msg,
        res => {
          if (res.data.resultCode == 1) {
            this.$message.success('合成成功！')
            this.getUserCoupons()
          } else {
            this.Error(res.data.message);
          }
        },
        null
      );
    },
    // 获取用户券
    getUserCoupons: function () {
      let msg = {
        activityId: this.ActivityID,
      }
      this.apiJavaPost(
        "/api/mactivity/getUserCoupons",
        msg,
        res => {
          if (res.data.resultCode == 1) {
            let data = res.data.data
            let list = []
            data.forEach(x => {
              if (x.moduleId === this.ticketId) {
                list.push(x)
              }
            });
            this.dataList = list;
          } else {
            this.Error(res.data.message);
          }
        },
        null
      );
    },
    handleCheckAllChange(val) {
      let list = [];
      this.dataList.forEach(x=>{
        if (x.acessId !== -1 && x.useState === 1) {
          list.push(x.id)
        }
      })
      this.checkedCities = val ? list : [];
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.dataList.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.dataList.length;
    },
    close: function () {
      this.$emit('closeMyWindow', 'ticket')
    },
  },mounted(){
    this.userInfo = JSON.parse(localStorage.userInfo)
    this.getUserCoupons()
  }
}
</script>