<template>
  <a-card title="限购组列表">
    <a-button
      slot="extra"
      type="primary"
      size="small"
      @click="handleAdd"
    >
      新增
    </a-button>

    <a-spin :spinning="loading">
      <a-table
        :columns="columns"
        :data-source="data"
        :row-key="record => record.id"
        :pagination="pagination"
        @change="handlePageChange"
      >
        <template
          slot="type"
          slot-scope="text, record"
        >
          {{ formatStrategy(record.round_strategy.type) }}
        </template>
        <template
          slot="description"
          slot-scope="text, record"
        >
          {{ record.round_strategy.description }} <span v-if="record.round_strategy.type ==='CUSTOM'"> (时间：{{ record.round_strategy.update_time }})</span>
        </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="handleEdit(record)"
          >
            编辑
          </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>
          <a-button
            v-if="record.round_strategy.type ==='CUSTOM'"
            size="small"
            type="primary"
            @click="handleUpdate(record)"
          >
            更新轮次
          </a-button>
        </template>

        <template
          slot="roles"
          slot-scope="roles"
        >
          <a-tag
            v-for="role in roles"
            :key="role.id"
            color="green"
          >
            {{ role.nick_name }}
          </a-tag>
        </template>
      </a-table>
    </a-spin>

    <!-- 新增账号 -->
    <AddGroup
      v-model="addVisible"
      @update="getLimitGroupList"
    >
    </AddGroup>

    <!-- 编辑账号 -->
    <EditGroup
      v-model="editVisible"
      :form-data="curentItem"
      @update="getLimitGroupList"
    ></EditGroup>
    <!-- 更新轮次 -->
    <UpdateRound
      v-model="updateVisible"
      :form-data="curentItem"
      @update="getLimitGroupList"
    ></UpdateRound>
  </a-card>
</template>

<script>
import { getLimitGroupList, activeLimitGroup, deleteLimitGroup } from '@/api/systemSetting/limitGroup'
import EditGroup from './limitGroup/EditGroup'
import AddGroup from './limitGroup/AddGroup'
import UpdateRound from './limitGroup/UpdateRound'

const columns = [
  {
    title: '名称',
    dataIndex: 'name',
    key: 'name'
  },
  {
    title: '绑定票种',
    dataIndex: 'tickets',
    key: 'tickets'
  },
  {
    title: 'IP限购数量',
    dataIndex: 'ip_limit',
    key: 'ip_limit'
  },
  {
    title: '账号限购数量',
    dataIndex: 'user_limit',
    key: 'user_limit'
  },
  {
    title: '身份证限购数量',
    dataIndex: 'identity_limit',
    key: 'identity_limit'
  },
  {
    title: '限购策略',
    dataIndex: 'round_strategy.type',
    key: 'round_strategy.type',
    scopedSlots: { customRender: 'type' }
  },
  {
    title: '轮次描述',
    dataIndex: 'round_strategy.description',
    key: 'description.description',
    scopedSlots: { customRender: 'description' }
  },
  {
    title: '限购组描述',
    dataIndex: 'description',
    key: 'description'
  },

  {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
    scopedSlots: { customRender: 'status' }
  },
  {
    title: '操作',
    dataIndex: 'operation',
    key: 'operation',
    scopedSlots: { customRender: 'operation' }
  }
]

export default {
  components: {
    AddGroup,
    EditGroup,
    UpdateRound
  },
  created () {
    this.getLimitGroupList()
  },
  data () {
    return {
      columns,
      data: [],
      pagination: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
      loading: false,
      addVisible: false,
      editVisible: false,
      updateVisible: false,

      // 当前账号对象
      curentItem: null
    }
  },
  methods: {
    formatStrategy (e) {
      switch (e) {
        case 'FIXED':
          return '永久'
        case 'DAY':
          return '按天'
        case 'WEEK':
          return '按周'
        case 'MONTH':
          return '按月'
        case 'YEAR':
          return '按年'
        default:
          return '手动更新'
      }
    },

    showUpdateDialog () {

    },
    handleActive (value) {
      const params = {}
      params.active = value.status !== 'active'
      activeLimitGroup(value.id, params).then(res => {
        this.$message.success('操作成功')
        this.getLimitGroupList()
      })
    },
    handlePageChange (page) {
      console.log('page', page)
      this.pagination.pageNum = page.current
      this.getLimitGroupList()
    },
    handleDelete (id) {
      deleteLimitGroup(id).then(res => {
        this.$message.success('删除成功')
        this.getLimitGroupList()
      })
    },
    handleAdd () {
      this.addVisible = true
    },
    handleEdit (data) {
      this.editVisible = true
      this.curentItem = data
    },
    handleUpdate (data) {
      this.updateVisible = true
      this.curentItem = data
    },
    getLimitGroupList () {
      this.loading = true
      const params = {
        pageNum: this.pagination.pageNum,
        pageSize: this.pagination.pageSize,
        total: this.pagination.total,
        status: ['active', 'inactive']
      }
      getLimitGroupList(params).then(res => {
        this.loading = false
        this.pagination.total = res.extraInfo.total
        this.data = res.extraInfo.list
        console.log('res.extraInfo.list', res.extraInfo.list)
        for (const item of this.data) {
          item.tickets = item.tickets.map(item => item.name).join('、')
        }
      })
    }
  }
}
</script>

<style scoped>
.offSale-btn{
  color: #F56C6C
}
.onSale-btn{
  color: #67C23A
}

</style>
