<template>
  <a-card title="会员类型">
    <a-button
      slot="extra"
      size="small"
      type="primary"
      icon="plus"
      @click="$refs.editModal.show()"
    >
      新建会员类型
    </a-button>

    <h3 class="title">
      <b>会员销售渠道: </b><a-radio-group
        name="radioGroup"
        v-model="currentChannel"
        @change="getTicketTypeList"
      >
        <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"
      >
        <a-radio :value="null">
          全部
        </a-radio>
        <a-radio
          :value="item.id"
          v-for="(item,index) in scenicList"
          :key="index"
        >
          <a-badge :status="item.status==='active'?'success':'error'"/>{{ 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"
      >
        <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_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-row>

        <template
          slot="name"
          slot-scope="text, record"
        >
          <ellipsis
            :length="20"
            tooltip
          >{{ record.name }}</ellipsis>
        </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.editModal.show(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>

    <!-- 编辑票种 -->
    <EditModal @update="getTicketTypeList" ref="editModal" type="MEMBER">
    </EditModal>
  </a-card>
</template>

<script>
import { getTicketType, deleteTicketTypeById, setTicketActive } from '@/api/ticketSetting/ticket'

import Ellipsis from '@/components/Ellipsis'
import EditModal from './memberTypeList/EditModal'

const columns = [
  {
    title: '名称',
    dataIndex: 'name',
    key: 'name',
    scopedSlots: { customRender: 'name' }
  },
  {
    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: '160px',
    scopedSlots: { customRender: 'operation' }
  }
]

export default {
  components: {
    EditModal,
    Ellipsis
  },
  props: {
    tags: {
      type: Array,
      default: () => []
    }
  },
  created () {
    this.$store.dispatch('getLimitGroupList')
  },
  computed: {
    salesChannel () {
      return this.$store.state.app.salesChannel
    },
    scenicList () {
      return this.$store.state.app.scenicList
    }
  },
  data () {
    return {
      columns,
      pagination: {},
      currentChannel: null,
      currentScenic: null,
      ticketTypeList: [],
      ticketTagList: [],
      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.$refs.editModal.show(id)
    },
    handleDelete (id) {
      deleteTicketTypeById(id).then(res => {
        this.$message.success('删除成功')
        this.getTicketTypeList()
      })
    },
    handleAdd () {
      this.addVisible = true
    },
    getTicketTypeList () {
      this.ticketTypeLoading = true
      const params = {
        channel: this.currentChannel,
        scenic: this.currentScenic,
        type: 'MEMBER'
      }
      getTicketType(params).then(res => {
        this.ticketTypeList = res.extraInfo.list
        this.ticketTypeLoading = false
        const pagination = { ...this.pagination }
        pagination.total = res.extraInfo.total
        pagination.current = 1
        this.pagination = pagination
      })
    },
    handleTableChange (pagination, filters, sorter) {
      const params = {
        type: 'MEMBER',
        pageNum: pagination.current,
        pageSize: pagination.pageSize,
        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.getTicketTypeList()
  }
}
</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>
