<template>
  <!-- 票种管理 -->
  <a-card title="票种列表">
    <a-button
      slot="extra"
      size="small"
      type="primary"
      icon="plus"
      @click="addVisible=true"
    >
      新建票种
    </a-button>

    <a-button
      slot="extra"
      size="small"
      type="primary"
      icon="swap"
      @click="$refs.ticketSort.show()"
    >
      快速分类排序
    </a-button>

    <h3 class="title">
      <b>预约票</b>
      <a-radio-group
        name="radioGroup"
        v-model="current_is_reservation"
        @change="getTicketTypeList(true)"
      >
        <a-radio :value="1">
          是
        </a-radio>
        <a-radio :value="0">
          否
        </a-radio>
      </a-radio-group>
    </h3>

    <h3 class="title">
      <b>票种销售渠道: </b><a-radio-group
        name="radioGroup"
        v-model="currentChannel"
        @change="getTicketTypeList(true)"
      >
        <a-radio :value="null">
          全部
        </a-radio>
        <a-radio
          :value="item.id"
          v-for="(item,index) in salesChannel"
          :key="index"
        >
          {{ item.description }}
        </a-radio>
      </a-radio-group>
    </h3>

    <h3 class="title">
      <b>景点票种: </b><a-radio-group
        name="radioGroup"
        v-model="currentScenic"
        @change="getTicketTypeList(true)"
      >
        <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}"
      >
        <!-- <a-row
          slot="expandedRowRender"
          slot-scope="record"
          style="margin: 0"
        >
          <a-col
            span="6"
          >
            价格：{{ record.price }}
          </a-col>
          <a-col
            span="6"
          >
            价格码：{{ record.ticket_product_id }}
          </a-col>

          <a-col
            span="6"
          >
            最大可订：{{ record.book_max }}
          </a-col>
          <a-col
            span="6"
          >
            最小可订：{{ record.book_min }}
          </a-col>
          <a-col
            span="6"
          >
            当日可订：{{ record.is_book_today?'是':'否' }}
          </a-col>
          <a-col
            span="6"
            v-if="record.is_book_today"
          >
            当日可订截止时间：{{ record.book_today_endtime }}
          </a-col>
          <a-col
            span="6"
          >
            是否可退：{{ record.is_refund?'是':'否' }}
          </a-col>

          <a-col
            span="6"
            v-if="record.is_refund"
          >
            提前可退天数：{{ record.refund_advance_days }}
          </a-col>
          <a-col
            span="6"
            v-if="record.is_refund"
          >
            退款价格：{{ record.refund_price }}
          </a-col>

          <a-col
            span="6"
          >
            是否限制销售数量：{{ record.is_restricted_sales?'是':'否' }}
          </a-col>
          <a-col
            span="6"
            v-if="record.is_restricted_sales"
          >
            可销售数量：{{ record.sales_volume }}
          </a-col>
          <a-col
            span="6"
          >
            销售日期：{{ record.sell_startdate }} 至 {{ record.sell_enddate }}
          </a-col>
          <a-col
            span="6"
          >
            销售时间：{{ record.sale_time_start }} 至 {{ record.sale_time_end }}
          </a-col>
          <a-col
            span="6"
          >
            使用日期：{{ record.use_startdate }} 至 {{ record.use_enddate }}
          </a-col>
          <a-col
            span="6"
          >
            使用时间：{{ record.use_time_start }} 至 {{ record.use_time_end }}
          </a-col>
          <a-col
            span="6"
          >
            使用有效天数：{{ record.use_valid_days }}
          </a-col>
          <a-col
            span="6"
          >
            可提前预定天数：{{ record.book_future_days }}
          </a-col>
        </a-row> -->

        <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.priceCalendar.show(record.id)"
          >
            价格日历
          </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(true)"
      :product="ticketProductList"
      :tags="tags"
      :scenic-list="scenicList"
      :sales-channel="salesChannel"
    ></AddModal>

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

    <PriceCalendar ref="priceCalendar"></PriceCalendar>

    <!-- 票种排序 -->
    <TicketSort
      ref="ticketSort"
      @update="getTicketTypeList(true)"
    ></TicketSort>
  </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 Ellipsis from '@/components/Ellipsis'
import AddModal from './ticketList/AddModal'
import EditModal from './ticketList/EditModal'
import PriceCalendar from './PriceCalendar'
import TicketSort from './TicketSort'

const columns = [
  {
    title: '名称',
    dataIndex: 'name',
    key: 'name',
    scopedSlots: { customRender: 'name' }
  },
  {
    title: '分类',
    dataIndex: 'category',
    key: 'category',
    scopedSlots: { customRender: 'category' },
    width: '100px'
  },
  {
    title: '价格(元)',
    dataIndex: 'price',
    key: 'price',
    width: '100px'
  },
  {
    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 {
  components: {
    AddModal,
    EditModal,
    Ellipsis,
    PriceCalendar,
    TicketSort
  },
  props: {
    tags: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      project_name: localStorage.mgt_project, // 项目名
      columns,
      pagination: {},
      currentChannel: null,
      currentScenic: null,
      current_is_reservation: 0, // 是否是预约票, 默认不是
      salesChannel: [],
      scenicList: [],
      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 => {
        // console.log(res)
        this.salesChannel = res.extraInfo.list
        this.getTicketTypeList(true)
      })
    },
    getScenicList (params) {
      this.scenicLoading = true
      getScenic(params).then(res => {
        // console.log('景点列表', res)
        this.scenicLoading = false
        const getSenicList = res.extraInfo.list.filter(e => e.id !== 9999)
        this.scenicList = getSenicList
      })
    },
    getTicketTypeList (goFirst) {
      goFirst && (this.pagination.current = 1)
      this.ticketTypeLoading = true
      const params = {
        pageNum: this.pagination.current,
        channel: this.currentChannel,
        scenic: this.currentScenic,
        is_reservation: this.current_is_reservation, // 是否支持门票预约
        type: 'TICKET'
      }
      getTicketType(params).then(res => {
        this.ticketTypeList = res.extraInfo.list
        this.ticketTypeLoading = false
        const pagination = { ...this.pagination }
        pagination.total = res.extraInfo.total
        this.pagination = pagination
      })
    },
    getTicketProduct () {
      getTicketProduct({ pageSize: 9999, status: ['active'] }).then(res => {
        // console.log('价格码列表', res)
        this.ticketProductList = res.extraInfo.list
      })
    },
    setDefaultReservationStatus () {
      const taizhouProjectName = 'mianfeiyoutaizhou'
      if ([taizhouProjectName].includes(this.project_name)) {
        this.current_is_reservation = 1 // 台州免费游相关景区票种管理默认是预约票
      }
    },
    handleTableChange (pagination, filters, sorter) {
      const params = {
        pageNum: pagination.current,
        pageSize: pagination.pageSize,
        type: 'TICKET',
        is_reservation: this.current_is_reservation, // 是否支持门票预约
        channel: this.currentChannel,
        scenic: this.currentScenic
      }
      getTicketType(params).then(res => {
        this.ticketTypeList = res.extraInfo.list
        this.ticketTypeLoading = false
        const page = { ...this.pagination }
        page.total = res.extraInfo.total
        page.current = pagination.current
        this.pagination = page
      })
    }
  },
  mounted () {
    this.setDefaultReservationStatus() // 若是免费游，设置为默认预约票

    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>
