<template>
  <a-card title="票种列表">
    <a-button
      slot="extra"
      size="small"
      type="primary"
      icon="plus"
      @click="addVisible=true"
    >
      新建票种
    </a-button>
    <h3 class="title">
      <b>景点票种: </b><a-radio-group
        name="radioGroup"
        v-model="currentScenic"
        @change="getTicketTypeList()"
      >
        <a-radio :value="null">
          全部
        </a-radio>
        <a-radio
          :value="item.id"
          v-for="(item,index) in scenicList"
          :key="index"
        >
          {{ item.name }}
        </a-radio>
      </a-radio-group>
    </h3>

    <a-spin :spinning="ticketTypeLoading">
      <a-table
        :columns="columns"
        :data-source="ticketTypeList"
        :pagination="pagination"
        :row-key="record => record.id"
        @change="handleTableChange"
        :scroll="{x: 1200}"
      >
        <template
          slot="name"
          slot-scope="text, record"
        >
          <ellipsis
            :length="20"
            tooltip
          >{{ record.name }}</ellipsis>
        </template>

        <template
          slot="category"
          slot-scope="text, record"
        >
          {{ record.category.name || '暂无' }}
        </template>

        <template
          slot="sale_date"
          slot-scope="text, record"
        >
          {{ record.sell_startdate }} 至 {{ record.sell_enddate }}
        </template>

        <template
          slot="sale_time"
          slot-scope="text, record"
        >
          {{ record.sale_time_start }} 至 {{ record.sale_time_end }}
        </template>
        <template
          slot="status"
          slot-scope="text, record"
        >
          <span :style="{color: record.status==='active'?'#1BAAAC':'#81A1A2'}">
            {{ record.status==='active'?'已激活':'已禁用' }}
          </span>
          &nbsp;
          <a-button
            size="small"
            :type="record.status==='active'?'danger':'default'"
            @click="handleActive(record)"
          >
            {{ record.status==='active'?'禁用':'激活' }}
          </a-button>
        </template>

        <template
          slot="operation"
          slot-scope="text, record"
        >
          <a-button
            size="small"
            type="primary"
            @click="$refs.bindBatch.show(record)"
          >
            场次管理
          </a-button>

          <a-button
            size="small"
            type="primary"
            @click="handleEdit(record.id)"
          >
            编辑
          </a-button>

          <a-popconfirm
            title="确定删除？"
            @confirm="handleDelete(record.id)"
          >
            <a-icon
              slot="icon"
              type="question-circle-o"
              style="color: red"
            />
            <a-button
              size="small"
              type="danger"
            >
              删除
            </a-button>
          </a-popconfirm>
        </template>
      </a-table>
    </a-spin>

    <!-- 新增票种 -->
    <AddModal
      v-model="addVisible"
      @update="getTicketTypeList()"
      :product="ticketProductList"
      :tags="tags"
      :scenic-list="scenicList"
      :sales-channel="salesChannel"
    ></AddModal>

    <!-- 编辑票种 -->
    <EditModal
      @update="getTicketTypeList()"
      v-model="eidtVisible"
      :id="currentTicketId"
      :product="ticketProductList"
      :tags="tags"
      :scenic-list="scenicList"
      :sales-channel="salesChannel"
    ></EditModal>

    <BindBatch
      ref="bindBatch"
      :batchList="batchList"
    ></BindBatch>
  </a-card>
</template>

<script>
import { getTicketType, deleteTicketTypeById, setTicketActive } from '@/api/ticketSetting/ticket'
import { getTicketProduct } from '@/api/ticketSetting/ticketProduct'
import { getScenic } from '@/api/ticketSetting/scenic'
import { getSalesChannel } from '@/api/ticketSetting/channel'
import { getBatchList } from '@/api/batch'

import Ellipsis from '@/components/Ellipsis'
import BindBatch from './BindBatch/index.vue'
import AddModal from './ticketList/AddModal'
import EditModal from './ticketList/EditModal'

const columns = [
  {
    title: '名称',
    dataIndex: 'name',
    key: 'name',
    scopedSlots: { customRender: 'name' }
  },
  {
    title: '销售日期',
    dataIndex: 'sale_date',
    key: 'sale_date',
    scopedSlots: { customRender: 'sale_date' }
  },
  {
    title: '销售时间',
    dataIndex: 'sale_time',
    key: 'sale_time',
    scopedSlots: { customRender: 'sale_time' }
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
    width: '160px',
    scopedSlots: { customRender: 'status' }
  },
  {
    title: '操作',
    dataIndex: 'operation',
    key: 'operation',
    width: '260px',
    fixed: 'right',
    scopedSlots: { customRender: 'operation' }
  }
]

export default {
  created () {
    this.getBatchList()
  },
  components: {
    AddModal,
    EditModal,
    Ellipsis,
    BindBatch
  },
  props: {
    tags: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      columns,
      pagination: {},
      currentChannel: null,
      currentScenic: null,
      salesChannel: [],
      scenicList: [],
      batchList: [],
      ticketTypeList: [],
      ticketTagList: [],
      ticketProductList: [],
      currentTicket: null,
      addVisible: false,
      eidtVisible: false,
      scenicLoading: false,
      ticketTypeLoading: false,
      currentTicketId: null
    }
  },
  methods: {
    handleActive (value) {
      setTicketActive(value.id, value.status !== 'active').then(res => {
        this.$message.success('操作成功')
        this.getTicketTypeList()
      })
    },
    handleEdit (id) {
      this.eidtVisible = true
      this.currentTicketId = id
    },
    handleDelete (id) {
      deleteTicketTypeById(id).then(res => {
        this.$message.success('删除成功')
        this.getTicketTypeList()
      })
    },
    handleAdd () {
      this.addVisible = true
    },
    getSalesChannel () {
      getSalesChannel().then(res => {
        this.salesChannel = res.extraInfo.list
        this.getTicketTypeList()
      })
    },
    getScenicList (params) {
      this.scenicLoading = true
      getScenic(params).then(res => {
        this.scenicLoading = false
        const getSenicList = res.extraInfo.list.filter(e => e.id !== 9999)
        this.scenicList = getSenicList
      })
    },
    getTicketTypeList () {
      this.ticketTypeLoading = true
      const params = {
        pageNum: this.pagination.current,
        channel: '',
        scenic: this.currentScenic,
        is_reservation: 1,
        type: 'batch'
      }
      getTicketType(params).then(res => {
        this.ticketTypeList = res.extraInfo.list
        this.ticketTypeLoading = false
        const pagination = { ...this.pagination }
        pagination.total = res.extraInfo.total
        this.pagination = pagination
        console.log('ticketTypeList111', this.ticketTypeList)
      })
    },
    getTicketProduct () {
      getTicketProduct({ pageSize: 9999, status: ['active'] }).then(res => {
        this.ticketProductList = res.extraInfo.list
      })
    },
    handleTableChange (pagination, filters, sorter) {
      this.pagination.current = pagination.current
      this.getTicketTypeList()
    },
    getBatchList () {
      getBatchList({ pageNum: 0, pageSize: 0, is_reservation: 1, status: ['active'] }).then(res => {
        this.batchList = res.extraInfo.list
      })
    }
  },
  mounted () {
    this.getSalesChannel()

    this.getScenicList({ pageNum: 1, pageSize: 999 })

    this.getTicketProduct()
  }
}
</script>

<style lang="scss" scoped>
.title {
  margin-bottom: 15px; font-size: 14px; position: relative; padding-left: 100px;
  b {
    margin-right: 10px; position: absolute; left: 0; top: 0;
  }
}

</style>
