<template>
  <div class="listWrap search-list-wrap">
    <div class="top-title">
      场次选择
      <div>
        <el-date-picker
          style="width:140px"
          :clearable="false"
          :picker-options="pickerOptions"
          @change="handleDateChange"
          v-model="playDate"
          type="date"
          placeholder="选择日期时间">
        </el-date-picker>

        <el-button
          style="margin:0 0 0 10px"
          type="primary"
          size="small"
          @click="getBatchList">
          更新
        </el-button>
      </div>
    </div>
    <div class="table-wrap">
      <el-table
        v-loading="batchLoading"
        ref="singleTable"
        max-height="200px"
        :data="batchList"
        highlight-current-row
        @current-change="handleBatchChange"
        border
        stripe>
        <el-table-column
          prop="name"
          label="场次名称"
        >
        </el-table-column>

        <el-table-column
          prop="startTime"
          label="开始时间"
          width="70px"
        >
        </el-table-column>

        <el-table-column
          prop="endTime"
          label="结束时间"
          width="70px"
        >
        </el-table-column>

        <el-table-column
          prop="leftNums"
          label="剩余数量"
          width="70px"
        >
        </el-table-column>
      </el-table>
    </div>

    <div
      class="top-title"
      v-if="scheduleList&&scheduleList.length">
      班次选择<b>【 {{ currentSchedule.schedule_name }} 】</b>
    </div>
    <div
      class="table-wrap"
      v-if="scheduleList&&scheduleList.length">
      <el-table
        max-height="200px"
        ref="scheduleTable"
        :data="scheduleList"
        highlight-current-row
        @current-change="handleScheduleChange"
        border
        stripe>
        <el-table-column
          prop="schedule_name"
          label="班次名称"
        >
        </el-table-column>
        <el-table-column
          prop="leftNums"
          label="剩余数量"
          width="70px"
        >
        </el-table-column>
      </el-table>
    </div>

    <div class="top-title">
      选择票种 <b v-if="currentBatch">【 {{ currentBatch.name }} 】</b>
    </div>

    <div
      class="list-wrap custom-scroll"
      v-loading="loading">
      <div style="padding:0 10px 10px">
        <TagSelector
          v-model="selectedTag"
          @change="getTicketList"></TagSelector>
        <div>
          <el-radio
            v-model="categoryType"
            label="">
            全部
          </el-radio>
          <el-radio
            v-model="categoryType"
            :label="1">
            散客
          </el-radio>
          <el-radio
            v-model="categoryType"
            :label="2">
            团体
          </el-radio>
        </div>
      </div>

      <div
        class="noData"
        v-if="!ticketList.length">
        暂无数据
      </div>
      <ul class="list-content">
        <li
          class="list-item"
          :style="{padding:'15px 10px 15px 5px'}"
          :class="{
            active:currentTicket.id===item.id,
            active2:item.isTop && currentTicket.id!==item.id
          }"
          v-for="(item,index) in ticketList"
          :key="index"
          @click="changeTicket(item)">
          <h5 class="title">
            <span
              @click.stop="showTicketInfo(item)"
              style="margin-right: 30px;">
              {{ item.name }}
            </span>
            <i
              v-if="item.isTopTicket"
              style="margin-right: 10px;"
              class="el-icon-collection-tag"></i>
            <el-button
              v-if="currentTicket.id===item.id && !item.isTopTicket"
              @click="setTopTicket(item.id)"
              type="text">
              置顶
            </el-button>
            <el-button
              v-if="currentTicket.id===item.id && item.isTopTicket"
              @click="cancelTopTicket()"
              type="text">
              取消置顶
            </el-button>
          </h5>
          <span
            class="price"
            v-if="item.price">
            <b>{{ item.price }}</b> 元
          </span>
          <span
            class="price"
            v-else>
            无今日价格
          </span>
        </li>
      </ul>
    </div>

    <ElDialog
      :title="ticketDetail.name"
      width="600px"
      v-model="ticketInfoVisible">
      <TicketInfo :data="ticketDetail"></TicketInfo>
    </ElDialog>
  </div>
</template>

<script>
import { getBatchList, getBacthTicketList } from '@/api/batch'
import TicketInfo from '../common/TicketInfo'
import ElDialog from '@/components/Dialog'
import moment from 'moment'
import TagSelector from '../common/TagSelector.vue'

export default {
  components: {
    ElDialog,
    TicketInfo,
    TagSelector
  },
  data () {
    return {
      selectedTag: '',
      ticketInfoVisible: false,
      batchLoading: false,
      loading: false,
      playDate: new Date(),
      batchList: [],
      categoryType: '', // 当前类型，散客or团体
      ticketList: [],
      currentBatch: null,
      currentSchedule: null,
      currentTicket: null,
      ticketDetail: {},
      pickerOptions: {
        disabledDate (time) {
          let startTime = moment().format('YYYY-MM-DD') + ' 00:00:00'
          return moment(time).isBefore(startTime)
        }
      }
    }
  },
  created () {
    this.getBatchList(moment().format('YYYY-MM-DD'))
  },
  computed: {
    scheduleList () {
      return this.currentBatch ? this.currentBatch.scheduleBatchList : null
    }
  },
  watch: {
    categoryType (val) {
      this.getTicketList()
      this.$emit('categoryTypeChange', val)
    }
  },
  methods: {
    handleDateChange (data) {
      this.$emit('dateChange', moment(data).format('YYYY-MM-DD'))
      this.getBatchList()
    },
    changeTicket (ticket) {
      this.currentTicket = ticket
      this.$emit('update', ticket)
      this.$emit('input', ticket)
    },

    // 置顶
    setTopTicket (id) {
      this.$localStore.set('topTicket', id)
      this.$message.success('置顶成功')
      this.getTicketList()
    },
    // 取消置顶
    cancelTopTicket () {
      this.$localStore.set('topTicket', null)
      this.$message.success('取消置顶成功')
      this.getTicketList()
    },
    getBatchList () {
      this.batchLoading = true

      getBatchList({ keyWords1: moment(this.playDate).format('YYYY-MM-DD') }).then(res => {
        this.batchList = res.list.filter(i => {
          i.endTime = moment(i.startTime, 'HH:mm:ss').add(moment.duration(i.duration)).format('HH:mm:ss')
          return i.leftNums > 0
        })
        if (this.batchList.length > 0) {
          const currentBatchId = this.$localStore.get('currentBatchId')
          const currentBatch = this.batchList.find(i => i.batch_config_id === currentBatchId)

          this.handleBatchChange(currentBatch || this.batchList[0])
        } else {
          this.ticketList = []
          this.$emit('update', null)
          this.$emit('input', null)
        }
      }).finally(() => {
        this.batchLoading = false
      })
    },
    showTicketInfo (data) {
      this.ticketInfoVisible = true
      this.ticketDetail = data
    },
    handleScheduleChange (val) {
      if (!val) return
      // 缓存班次信息
      this.$localStore.set('currentScheduleId', val.schedule_config_id)
      this.currentSchedule = val
      this.$nextTick(() => {
        this.$refs.scheduleTable.setCurrentRow(val)
        this.$emit('scheduleChange', val)
      })
    },
    handleBatchChange (val) {
      if (!val) return

      // 缓存场次信息
      this.$localStore.set('currentBatchId', val.batch_config_id)
      this.currentBatch = val
      this.$refs.singleTable.setCurrentRow(val)
      this.$emit('batchChange', val)
      this.$emit('scheduleChange', null)
      if (val.scheduleBatchList && val.scheduleBatchList.length) {
        const currentScheduleId = this.$localStore.get('currentScheduleId')
        const selectSchedule = val.scheduleBatchList.find(i => i.schedule_config_id === currentScheduleId)
        if (this.currentBatch.scheduleBatchList.length) {
          this.handleScheduleChange(selectSchedule || val.scheduleBatchList[0])
        }
      }

      this.getTicketList()
    },
    getTicketList () {
      getBacthTicketList({ batchId: this.currentBatch.batch_config_id, tagId: this.selectedTag }).then(res => {
        this.ticketList = res.list || []
        if (this.categoryType) {
          this.ticketList = this.ticketList.filter(i => i.category === this.categoryType)
        }
        // 置顶数据处理
        const topTicketId = this.$localStore.get('topTicket')
        let topTicketIndex = this.ticketList.findIndex(i => i.id === topTicketId)
        if (topTicketIndex > -1) {
          const topTicketArr = this.ticketList.splice(topTicketIndex, 1)
          const topTicket = topTicketArr[0]
          topTicket.isTopTicket = true
          this.ticketList.unshift(topTicket)
        }
        // this.currentTicket = this.ticketList[0]

        // this.$emit('update', this.currentTicket)
        // this.$emit('input', this.currentTicket)
      }).finally(() => {
        this.loading = false
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.listWrap {
  height: 100%; overflow: hidden;  background: #fff;  border-radius: 5px; box-shadow: 0 0 10px rgba(0, 0, 0, .2);

  ::v-deep .el-table__body td {
    cursor: pointer;
  }

  ::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td,.el-table__body tr.hover-row > td,.el-table__body tr.hover-row.el-table__row--striped > td {
    background: hsla(55, 94%, 80%, .514);
  }

  ::v-deep .el-table__body tr.current-row > td {
    background: #f7ce60 !important;
  }
}
.top-title {
  display: flex;  padding: 10px 10px; font-size: 16px;  line-height: 1.4;color: $blue; background: rgb(238, 238, 238); justify-content: space-between; align-items: center;
  .right-btn{
    display: flex;
  }
}
.table-wrap {
  padding: 10px;
}
.list-content{
  .title{
    padding-left: 10px;
  }
}

.noData{
  text-align: center; padding: 10px; color: #666; font-size: 14px;
}
</style>
