<template>
  <div>
    <a-card title="场次列表">
      <a-spin :spinning="loading">
        <a-table
          :columns="columns"
          :data-source="dataList"
          :pagination="pagination"
          :row-key="record => record.id"
          @change="handleTableChange"
        >
          <template
            slot="strategy"
            slot-scope="text, record"
          >
            {{ record.strategy | strategyName }}
          </template>

          <template
            slot="duration"
            slot-scope="text, record"
          >
            {{ record.duration | duration }}
          </template>
          <template
            slot="type"
            slot-scope="text, record"
          >
            {{ record.type==='SEAT'?'有座':record.type==='NOSEAT'?'无座':'已删除' }}
          </template>

          <template
            slot="strategy_content"
            slot-scope="text, record"
          >
            <template v-if="record.strategy==='PERIOD'">
              {{ formatPeriod(record.strategy_content) }}
            </template>
            <template v-if="record.strategy==='WEEKDAY'">
              {{ formatWeekday(record.strategy_content) }}
            </template>
          </template>

          <template
            slot="status"
            slot-scope="text, record"
          >
            <a-tag :color="record.status==='active'?'green':'red'">
              {{ record.status==='active'?'已激活':'已禁用' }}
            </a-tag>
          </template>
          <template
            slot="color"
            slot-scope="text, record"
          >
            <a-tag :color="record.color" @click="showColorModal(record)">
              {{ record.color }}
            </a-tag>
          </template>

          <template
            slot="operation"
            slot-scope="text, record"
          >
            <a-button
              size="small"
              type="primary"
              @click="showColorModal(record)"
            >
              设置颜色
            </a-button>
            <a-button
              size="small"
              type="primary"
              v-if="record.type==='NOSEAT'"
              @click="$refs.bindTicket.show(record)"
            >
              绑定票种
            </a-button>

          </template>
        </a-table>
      </a-spin>
      <BindTicket
        ref="bindTicket"
        :ticketList="ticketList"
      ></BindTicket>
    </a-card>
    <a-modal
      title="设置场次颜色"
      :visible="colorVisible"
      :confirm-loading="confirmLoading"
      @ok="handleOk"
      @cancel="handleClose"
    >
      <div class="color-block">
        颜色：
        <el-color-picker
          v-model="batchColor"
        ></el-color-picker>
        <div
          class="color-label"
          :style="{color: batchColor}"
        >
          {{ batchColor }}
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script>
import { getTicketType } from '@/api/ticketSetting/ticket'
import { setBatchColor, getBatchList } from '@/api/batch'
import BindTicket from './BindTicket'
import mixins from './mixins'

const columns = [
  {
    title: '名称',
    dataIndex: 'name',
    key: 'name',
    width: 120,
    scopedSlots: { customRender: 'name' }
  },
  {
    title: '开始时间',
    dataIndex: 'start_time',
    key: 'start_time',
    width: 100
  },
  {
    title: '时长',
    dataIndex: 'duration',
    key: 'duration',
    width: 100,
    scopedSlots: { customRender: 'duration' }
  },
  {
    title: '数量',
    dataIndex: 'sales_limit',
    key: 'sales_limit',
    width: 80
  },
  {
    title: '是否有座',
    dataIndex: 'type',
    key: 'type',
    width: 80,
    scopedSlots: { customRender: 'type' }
  },
  {
    title: '策略',
    dataIndex: 'strategy',
    key: 'strategy',
    width: 100,
    scopedSlots: { customRender: 'strategy' }
  },
  {
    title: '策略详情',
    dataIndex: 'strategy_content',
    key: 'strategy_content',
    scopedSlots: { customRender: 'strategy_content' }
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
    width: 100,
    scopedSlots: { customRender: 'status' }
  },
  {
    title: '颜色',
    dataIndex: 'color',
    key: 'color',
    width: 100,
    scopedSlots: { customRender: 'color' }
  },
  {
    title: '操作',
    dataIndex: 'operation',
    key: 'operation',
    width: 160,
    fixed: 'right',
    scopedSlots: { customRender: 'operation' }
  }
]

export default {
  mixins: [mixins],
  components: {
    BindTicket
  },
  data () {
    return {
      columns,
      loading: false,
      colorVisible: false, // 设置颜色弹窗
      dataList: [],
      batchColor: null, // 场次颜色
      currentBatch: {}, // 当前选中场次
      ticketList: [],
      pagination: {},
      params: {
        pageNum: 1,
        pageSize: 10
      }
    }
  },
  created () {
    this.getList()
    this.getTicketList()
  },
  methods: {
  // 关闭颜色设置弹窗
    handleClose () {
      this.colorVisible = false
      this.batchColor = null
    },

    // 展示颜色设置弹窗
    showColorModal (item) {
      this.colorVisible = true
      this.currentBatch = item
      this.batchColor = this.currentBatch.color
    },

    // 设置颜色
    handleOk () {
      setBatchColor(this.currentBatch.id, this.batchColor).then((res) => {
        this.$message.success('操作成功')
        this.colorVisible = false
        this.getList()
      })
    },

    getList () {
      this.loading = true
      getBatchList(this.params).then(res => {
        this.dataList = res.extraInfo.list

        const pagination = { ...this.pagination }
        pagination.total = res.extraInfo.total

        this.pagination = pagination
      }).finally(() => {
        this.loading = false
      })
    },
    getTicketList () {
      getTicketType({ pageNum: 0, pageSize: 0, type: 'batch' }).then(res => {
        this.ticketList = res.extraInfo.list
      })
    },
    handleTableChange (pagination, filters, sorter) {
      this.params.pageNum = pagination.current
      this.params.pageSize = pagination.pageSize

      this.getList()
    }
  }
}
</script>

<style lang="scss" scoped>
.color-block{
  display: flex;
  align-items: center;
  .color-label{
    margin-left: 10px;
  }
}

</style>
