<template>
  <div class="form-wrap">
    <div class="table-box">
      <div class="block-title">
        票种分组管理
        <el-button
          type="primary"
          icon="el-icon-refresh"
          :loading="loading"
          :disabled="loading"
          style="margin-right:10px"
          @click="getList"
        >
          刷新
        </el-button>
        <el-button
          type="primary"
          style="margin-right:10px"
          @click="showDialog('add')"
        >
          新增
        </el-button>
      </div>

      <el-table
        border
        stripe
        v-loading="loading"
        :data="tableData"
      >
        <el-table-column
          prop="id"
          label="编号"
          width="80"
        >
        </el-table-column>
        <el-table-column
          prop="name"
          label="分组名称"
        >
        </el-table-column>
        <el-table-column
          prop="description"
          label="描述"
        >
        </el-table-column>
        <el-table-column
          label="票种数量"
          width="100"
        >
          <template slot-scope="scope">
            {{ scope.row.ticketTypes ? scope.row.ticketTypes.length : 0 }}
          </template>
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="创建时间"
          width="180"
        >
        </el-table-column>
        <el-table-column
          label="操作"
          width="220"
        >
          <template slot-scope="scope">
            <el-link
              type="primary"
              size="small"
              @click="showDialog('edit', scope.row)"
            >
              编辑
            </el-link>
            <el-link
              type="primary"
              size="small"
              @click="assignTickets(scope.row)"
            >
              分配票种
            </el-link>
            <el-link
              type="primary"
              size="small"
              @click="handleDelete(scope.row.id)"
            >
              删除
            </el-link>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        background
        :current-page.sync="form.pageNum"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="form.pageSize"
        @size-change="handleSizeChange"
        layout="total, sizes, prev, pager, next, jumper"
        @current-change="getList()"
        :total="total">
      </el-pagination>
    </div>

    <Dialog
      ref="dialog"
      @update="getList"
    ></Dialog>

    <TicketAssignDialog
      ref="ticketAssignDialog"
      @update="getList"
    ></TicketAssignDialog>
  </div>
</template>

<script>
import { getTicketTypeGroupList, deleteTicketTypeGroup } from '@/api/ticketTypeGroup'
import Dialog from './Dialog'
import TicketAssignDialog from './TicketAssignDialog'

export default {
  components: {
    Dialog,
    TicketAssignDialog
  },
  data () {
    return {
      form: {
        pageNum: 1,
        pageSize: 10
      },
      loading: false,
      total: 0,
      tableData: []
    }
  },
  created () {
    this.getList()
  },
  methods: {
    getList () {
      this.loading = true
      let params = JSON.parse(JSON.stringify(this.form))
      getTicketTypeGroupList(params).then(res => {
        this.tableData = Array.isArray(res?.data) ? res.data : (res?.data?.records || [])
        this.total = res?.data?.total || this.tableData.length
      }).finally(() => {
        this.loading = false
      })
    },
    handleSizeChange (size) {
      this.form.pageSize = size
      this.getList()
    },
    showDialog (type, row) {
      this.$refs.dialog.show(type, row)
    },
    assignTickets (row) {
      this.$refs.ticketAssignDialog.show(row)
    },
    handleDelete (id) {
      this.$confirm('确认删除该分组吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteTicketTypeGroup([id]).then(res => {
          this.$message.success('删除成功')
          this.getList()
        })
      }).catch(() => {})
    }
  }
}
</script>

<style lang="scss" scoped>
.form-wrap {
  .el-input,.el-select,.el-date-editor,.el-date-editor.el-input,.el-input-number {
    width: 300px;
  }
}
</style>
