<template>
  <div class="form-wrap">
    <el-form
      class="search-box"
      ref="form"
      :model="form"
      :inline="true"
      label-width="100px"
    >
      <el-form-item
        label="名称"
        prop="keyWords1"
      >
        <el-input v-model="form.keyWords1"></el-input>
      </el-form-item>

      <el-form-item
        label="最小开始时间"
        prop="keyWords2"
      >
        <el-time-picker
          v-model="form.keyWords2"
          placeholder="最小开始时间">
        </el-time-picker>
      </el-form-item>

      <el-form-item
        label="最大开始时间"
        prop="keyWords3"
      >
        <el-time-picker
          v-model="form.keyWords3"
          placeholder="最大开始时间">
        </el-time-picker>
      </el-form-item>

      <!-- <el-form-item
        label="策略类型"
        prop="strategy"
      >
        <el-select v-model="form.strategy">
          <el-option
            label="全部"
            value=""></el-option>

          <el-option
            v-for="{label,value} in strategyMap"
            :key="value"
            :label="label"
            :value="value">
          </el-option>
        </el-select>
      </el-form-item> -->

      <el-form-item
        label="状态"
        prop="keyWords4"
      >
        <el-select v-model="form.keyWords4">
          <el-option
            label="全部"
            value=""
          ></el-option>
          <el-option
            label="激活"
            :value="1"
          ></el-option>
          <el-option
            label="禁用"
            :value="0"
          ></el-option>
        </el-select>
      </el-form-item>

      <div class="btn-wrap">
        <el-button
          type="primary"
          @click="getList"
        >
          查询
        </el-button>
        <el-button
          type="primary"
          @click="$refs.dialog.show(null,'add',seatlist)"
        >
          新增场次
        </el-button>
      </div>
    </el-form>

    <div class="table-box">
      <div class="block-title">
        场次列表
      </div>
      <el-table
        border
        stripe
        v-loading="loading"
        :data="tableData">
        <el-table-column
          prop="id"
          label="编号"
          width="120"
        >
        </el-table-column>
        <el-table-column
          prop="name"
          label="名称"
          width="120"
        >
        </el-table-column>

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

        <el-table-column
          prop="duration"
          label="时长"
          width="100"
        >
        </el-table-column>

        <el-table-column
          prop="number"
          label="数量"
          width="80"
        >
        </el-table-column>

        <el-table-column
          prop="strategy"
          label="作用类型"
          width="80"
        >
          <template slot-scope="scope">
            {{ scope.row.strategy | strategyName }}
          </template>
        </el-table-column>

        <el-table-column
          prop="strategy_content"
          label="作用详情"
        >
          <template slot-scope="scope">
            <template v-if="scope.row.strategy==='PERIOD'">
              {{ formatPeriod(scope.row.strategy_content) }}
            </template>
            <template v-if="scope.row.strategy==='WEEKDAY'">
              {{ formatWeekday(scope.row.strategy_content) }}
            </template>
          </template>
        </el-table-column>

        <el-table-column
          prop="batchConfigSeatAreaTicketTypeGetResponseContents"
          label="绑定票种"
        >
          <template slot-scope="scope">
            <el-tag
              v-for="(item,index) in scope.row.batchConfigSeatAreaTicketTypeGetResponseContents"
              :key="index">
              {{ item.ticketTypeName }}
            </el-tag>
          </template>
        </el-table-column>

        <el-table-column
          prop="status"
          label="状态"
          width="80"
        >
          <template slot-scope="scope">
            <el-tag :type="scope.row.status===1?'success':'danger'">
              {{ scope.row.status===1?'激活':'禁用' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          label="激活/禁用"
          width="90"
          prop="status">
          <template slot-scope="scope">
            <el-link
              :type="scope.row.status === 0?'primary':'danger'"
              size="small"
              @click="changeStatus(scope.row)"
            >
              {{ scope.row.status ===1?'禁用':'激活' }}
            </el-link>
          </template>
        </el-table-column>

        <el-table-column
          label="操作"
          width="180"
        >
          <template slot-scope="scope">
            <el-link
              type="primary"
              size="small"
              @click="$refs.dialog.show(scope.row,'edit',seatlist)"
            >
              编辑
            </el-link>
            <el-link
              type="primary"
              size="small"
              @click="$refs.dialog.show(scope.row,'add',seatlist)"
            >
              复制
            </el-link>
            <el-link
              type="primary"
              size="small"
              @click="$refs.bindDialog.show(scope.row,seatlist)"
              v-if="scope.row.type ==='SEAT'"
            >
              绑定座位表
            </el-link>
            <el-link
              type="primary"
              size="small"
              @click="handleDelete(scope.row.id)"
            >
              删除
            </el-link>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        background
        :current-page.sync="form.pageNum"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="form.pageSize"
        @size-change="handleSizeChange"
        layout="total, sizes, prev, pager, next, jumper"
        @current-change="getList()"
        :total="total">
      </el-pagination>
    </div>

    <Dialog
      ref="dialog"
      @update="getList"></Dialog>
    <BindDialog
      ref="bindDialog"
      @update="getList">
    </BindDialog>
  </div>
</template>

<script>
import { getBatchConfigList, deleteBatchConfig, updateBatchConfig } from '@/api/batch'
import { strategyMap, weekdayMap } from '@/assets/staticData'
import moment from 'moment'
import Dialog from './Dialog'
import BindDialog from './BindDialog'

import { getSeatConfigList } from '@/api/seat'

export default {
  created () {
    // 从其他页面跳转过来，自动查询
    this.form.keyWords1 = this.$route.params.batchName || ''

    this.getList()
    this.getSeatConfigList()
  },
  components: {
    Dialog,
    BindDialog
  },
  data () {
    return {
      form: {
        keyWords1: '',
        keyWords2: new Date(2020, 1, 1, 0, 0, 0),
        keyWords3: new Date(2020, 1, 1, 23, 59, 59),
        keyWords4: '',
        keyWords5: 'SEAT',
        strategy: '',
        pageNum: 1,
        pageSize: 10
      },
      total: 0,
      loading: false,
      tableData: [],
      seatlist: [],
      strategyMap,
      weekdayMap
    }
  },
  filters: {
    strategyName (value) {
      return strategyMap.find(i => i.value === value).label
    }
  },
  methods: {
    getSeatConfigList () {
      getSeatConfigList({ pageNum: 0, pageSize: -1 }).then(res => {
        this.seatlist = res.list
      }).finally(() => {
      })
    },
    changeStatus (e) {
      e.status = e.status ? 0 : 1
      let params = JSON.parse(JSON.stringify(e))
      updateBatchConfig(params).then(res => {
        this.$emit('update')
        this.handleClose()
      }).finally(() => {
        this.loading = false
      })
    },
    handleSizeChange (size) {
      this.form.pageSize = size
      this.getList()
    },
    getList () {
      this.loading = true
      let params = JSON.parse(JSON.stringify(this.form))

      params.keyWords2 = moment(params.keyWords2).format('HH:mm:ss')
      params.keyWords3 = moment(params.keyWords3).format('HH:mm:ss')

      getBatchConfigList(params).then(res => {
        this.tableData = res.list
        console.log('this.tableData', this.tableData)
        this.total = res.total
        // 更新全局场次信息
        this.$store.commit('SET_BATCH_LIST', res.list)
      }).finally(() => {
        this.loading = false
      })
    },
    formatPeriod (arr) {
      return arr.map(i => {
        return i.start + ' ~ ' + i.end
      }).join('、')
    },
    formatWeekday (arr) {
      return arr.map(i => {
        return this.weekdayMap[i]
      }).join('、')
    },
    handleDelete (id) {
      this.$confirm('确认删除吗', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteBatchConfig(id).then(res => {
          this.$message.success('删除成功')
          this.getList()
        })
      }).catch(() => {})
    }
  },
  mounted () {

  }
}
</script>

<style lang="scss" scoped>

</style>
