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

    <a-spin :spinning="loading">
      <a-table
        :columns="columns"
        :data-source="data"
        :row-key="record => record.id"
        :pagination="pagination"
        @change="handlePageChange"
      >
        <template
          slot="purchase_strategy"
          slot-scope="text, record"
        >
          {{ formatStrategy(record.purchase_strategy.type) }}
        </template>
        <template
          slot="create_time"
          slot-scope="text, record"
        >
          {{ moment(record.create_time).format('YYYY-MM-DD HH:mm:ss') }}
        </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>
        </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="getGoodsGroupList"
    >
    </AddGroup>

    <!-- 编辑账号 -->
    <EditGroup
      v-model="editVisible"
      :form-data="curentItem"
      @update="getGoodsGroupList"
    ></EditGroup>
  </a-card>
</template>

<script>
import { getGoodsGroupList, activeGoodsGroup, deleteGoodsGroup } from '@/api/ticketSetting/goodsGroup'
import EditGroup from './goodsGroup/EditGroup'
import AddGroup from './goodsGroup/AddGroup'
import moment from 'moment'

const columns = [
  {
    title: '名称',
    dataIndex: 'name',
    key: 'name'
  },
  {
    title: '商品限购策略',
    dataIndex: 'purchase_strategy',
    key: 'purchase_strategy',
    scopedSlots: { customRender: 'purchase_strategy' }
  },
  {
    title: '描述',
    dataIndex: 'description',
    key: 'description'
  },
  {
    title: '创建时间',
    dataIndex: 'create_time',
    key: 'create_time',
    scopedSlots: { customRender: 'create_time' }
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
    scopedSlots: { customRender: 'status' }
  },
  {
    title: '操作',
    dataIndex: 'operation',
    key: 'operation',
    scopedSlots: { customRender: 'operation' }
  }
]

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

      // 当前账号对象
      curentItem: null
    }
  },
  methods: {
    moment,
    formatStrategy (e) {
      switch (e) {
        case 'NONE':
          return '无'
        case 'SAME_DATE':
          return '只可与票种同日期一起购买'
        default:
          return ''
      }
    },
    handleActive (value) {
      const params = {}
      params.active = value.status !== 'active'
      activeGoodsGroup(value.id, params).then(res => {
        this.$message.success('操作成功')
        this.getGoodsGroupList()
      })
    },
    handlePageChange (page) {
      console.log('page', page)
      this.pagination.pageNum = page.current
      this.getGoodsGroupList()
    },
    handleDelete (id) {
      deleteGoodsGroup(id).then(res => {
        this.$message.success('删除成功')
        this.getGoodsGroupList()
      })
    },
    handleAdd () {
      this.addVisible = true
    },
    handleEdit (data) {
      this.editVisible = true
      this.curentItem = data
    },
    handleUpdate (data) {
      this.updateVisible = true
      this.curentItem = data
    },
    getGoodsGroupList () {
      this.loading = true
      const params = {
        pageNum: this.pagination.pageNum,
        pageSize: this.pagination.pageSize,
        total: this.pagination.total,
        status: ['active', 'inactive']
      }
      getGoodsGroupList(params).then(res => {
        this.loading = false
        this.pagination.total = res.extraInfo.total
        this.data = res.extraInfo.list
      })
    }
  }
}
</script>

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

</style>
