<template>
  <div class="form-wrap">
    <el-form
      class="search-box"
      ref="form"
      :model="form"
      :inline="true"
      label-width="100px"
    >
      <el-form-item
        label="日期范围"
        prop="date"
      >
        <el-date-picker
          :clearable="false"
          style="width:220px"
          @change="handleDateChange"
          v-model="dateRange"
          :picker-options="pickerOptions"
          type="datetimerange"
          placeholder="选择日期时间"
          :default-time="['00:00:00', '23:59:59']">
        </el-date-picker>
      </el-form-item>

      <el-form-item
        label="场次列表"
        prop="keyList1"
      >
        <el-select
          collapse-tags
          v-model="form.keyList1"
          multiple>
          <el-option
            v-for="item in batchList"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <div class="btn-wrap">
        <el-button
          type="primary"
          @click="getList"
        >
          查询
        </el-button>
      </div>
    </el-form>

    <div class="table-box">
      <div class="block-title">
        场次列表
        <el-button
          type="primary"
          @click="$refs.uniteBatch.show()"
        >
          统一排班
        </el-button>
      </div>
      <el-table
        border
        stripe
        v-loading="loading"
        :data="tableData">
        <el-table-column
          prop="batchConfig"
          label="场次信息"
          width="160"
          fixed
        >
          <template slot-scope="scope">
            <ul>
              <li>
                <b>场次名称：</b>{{ scope.row.batchConfig.name }}
              </li>
              <li>
                <b>开始时间：</b>{{ scope.row.batchConfig.startTime }}
              </li>
              <li>
                <b>场次时长：</b>{{ scope.row.batchConfig.duration }}
              </li>
            </ul>
          </template>
        </el-table-column>

        <el-table-column
          min-width="120"
          v-for="(item,index) in dateArray"
          :key="index"
          :label="item"
          class-name="item-wrap"
        >
          <template slot-scope="scope">
            <el-tooltip
              placement="top"
              :disabled="!(scope.row.batchNumberList[index]&&scope.row.batchNumberList[index].batchTicketTypes&&scope.row.batchNumberList[index].batchTicketTypes.length)">
              <div slot="content">
                <ul v-if="scope.row.batchNumberList[index]">
                  <li
                    v-for="(v,i) in scope.row.batchNumberList[index].batchTicketTypes"
                    :key="i">
                    票种:{{ v.ticketTypeName }} 库存:{{ v.num }} 剩余数量:{{ v.left_num }}
                  </li>
                </ul>
              </div>
              <div
                class="item"
                :class="{active:scope.row.batchNumberList[index].status}"
                v-if="scope.row.batchNumberList[index]">
                <span class="num">
                  {{ scope.row.batchNumberList[index].number }} 张
                </span>
                <span class="left_num">
                  剩余 {{ scope.row.batchNumberList[index].leftNums }} 张
                </span>
                <span
                  class="status-icon"
                  :class="scope.row.batchNumberList[index].status?'active':'inactive'">
                </span>
              </div>
            </el-tooltip>

            <div
              class="control-btn"
              v-if="scope.row.batchNumberList[index]">
              <el-button
                style="width:80%"
                type="primary"
                size="mini"
                @click="$refs.dialog.show({...scope.row.batchNumberList[index],batch_date:item,batchConfig:scope.row.batchConfig})">
                编辑
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <Dialog
      ref="dialog"
      :all-schedule-list="scheduleList"
      @update="getList"></Dialog>

    <UniteBatch
      ref="uniteBatch"
      @update="getList"
      :all-schedule-list="scheduleList"
      :batch-list="batchList"></UniteBatch>
  </div>
</template>

<script>
import Dialog from './Dialog'
import { getBatchListMultiDate, getBatchConfigList } from '@/api/batch'
import { getScheduleList } from '@/api/scheduleConfig'
import UniteBatch from './UniteBatch'

import moment from 'moment'

let min = ''
let max = ''

export default {
  computed: {
    dateArray () {
      let diff = this.dateRange[1].getTime() - this.dateRange[0].getTime()
      let days = Math.round(diff / (24 * 60 * 60 * 1000))

      let dayArr = []
      for (let i = 0; i < days; i++) {
        dayArr.push(moment(this.dateRange[0]).add(i, 'day').format('YYYY-MM-DD'))
      }
      return dayArr
    }
  },
  components: {
    Dialog,
    UniteBatch
  },
  data () {
    return {
      loading: false,
      dateRange: [new Date(moment().startOf('day').valueOf()), new Date(moment().endOf('day').add(6, 'day').valueOf())],
      form: {
        keyWords1: '2020-02-27',
        keyWords2: '2020-03-01'
      },
      tableData: [],
      scheduleList: [],
      batchList: [],
      pickerOptions: {
        disabledDate (time) {
          if (!min || !max) {
            return false
          }
          return time.getTime() >= max || time.getTime() <= min
        },
        onPick ({ maxDate, minDate }) {
          // 设置最大和最小可选择范围，14天
          max = minDate.getTime() + 14 * 24 * 60 * 60 * 1000
          min = minDate.getTime() - 14 * 24 * 60 * 60 * 1000

          if (maxDate && minDate) {
            max = ''
            min = ''
          }
        }
      }
    }
  },
  created () {
    getBatchConfigList({ pageSize: -1, pageNum: 0 }).then(res => {
      this.batchList = res.list
    })
    this.getList()
    this.getScheduleList()
  },
  methods: {
    getScheduleList () {
      getScheduleList({ pageSize: 9999 }).then(res => {
        this.scheduleList = res.list
      }).finally(() => {
        this.loading = false
      })
    },
    getList () {
      this.loading = true
      this.form.keyWords1 = moment(this.dateRange[0]).format('YYYY-MM-DD')
      this.form.keyWords2 = moment(this.dateRange[1]).format('YYYY-MM-DD')
      getBatchListMultiDate(this.form).then(res => {
        this.tableData = res.list
      }).finally(() => {
        this.loading = false
      })
    },
    handleDateChange (e) {
      this.getList()
    }
  }
}
</script>

<style lang="scss" scoped>
.el-table {
  ::v-deep .item-wrap {
    position: relative; overflow: hidden;

    .item {
      position: absolute; top: 0;left: 0;display: flex; width: 100%;height: 100%; flex-direction: column; transition: all .3s; align-items: center; justify-content: center;

      .num {
        font-size: 14px;  font-weight: bold; color: $blue;
      }
    }

    .control-btn {
      position: absolute; bottom: 0;left: 0;width: 100%; background: rgba(49, 77, 138, 0.2);transition: all .3s; transform: translateY(40px); padding: 5px 0; text-align: center;
      ::v-deep .el-button + .el-button {
        margin-left:5px;
      }
    }

    &:hover {
      .item {
        transform: translateY(-40px);
      }
      .control-btn {
        transform: translateY(0);
      }
    }

    .status-icon {
      position: absolute; top: 5px; right: 5px;width: 10px; height: 10px;border-radius: 50%;
      &.active {
        background: rgb(197, 253, 183); border: 1px solid rgb(71, 185, 43);
      }
      &.inactive {
        background: rgb(184, 184, 184); border: 1px solid rgb(121, 121, 121);
      }
    }
  }

  ::v-deep .el-table__row.hover-row td {
    background: hsla(55, 92%, 75%, .2);
  }
}

</style>
