<template>
  <a-spin :spinning="loading">
    <a-card title="票种分类列表">
      <a-table
        :columns="columns"
        :data-source="productList"
        :row-key="record => record.id"
        :pagination="false"
      >
        <template
          slot="name"
          slot-scope="text, record"
        >
          <a-input
            v-if="record.isNew"
            style="margin: -5px 0"
            :value="record[`nameVal`]"
            @change="e => handleChange(e.target.value, record.id, 'name')"
          />
          <template v-else>
            {{ text }}
          </template>
        </template>

        <template
          slot="seq"
          slot-scope="text, record"
        >
          <a-input
            v-if="record.editable"
            style="margin: -5px 0"
            :value="record[`seqVal`]"
            @change="e => handleChange(e.target.value, record.id, 'seq')"
          />
          <template v-else>
            {{ text }}
          </template>
        </template>

        <template
          slot="description"
          slot-scope="text, record"
        >
          <a-input
            v-if="record.editable"
            style="margin: -5px 0"
            :value="record[`descriptionVal`]"
            @change="e => handleChange(e.target.value, record.id, 'description')"
          />
          <template v-else>
            {{ text }}
          </template>
        </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="dashed"
            @click="handleActive(record.id)"
          >
            <template v-if="record.status==='active'">
              <a-icon type="close-circle" /> 禁用
            </template>
            <template v-else>
              <a-icon type="check-circle" /> 激活
            </template>
          </a-button>
        </template>
        <template
          slot="operation"
          slot-scope="text, record"
        >
          <template v-if="record.editable">
            <span v-if="record.isNew">
              <a-button
                size="small"
                type="primary"
                @click="handleAdd(record.id)"
              >
                添加
              </a-button>
              <a-divider type="vertical" />
              <a-popconfirm
                title="是否要删除此行？"
                @confirm="handleDelete(record.id)"
              >
                <a-button
                  size="small"
                  type="danger"
                >
                  删除
                </a-button>
              </a-popconfirm>
            </span>
            <span v-else>
              <a-button
                size="small"
                type="primary"
                :loading="record.updateLoading"
                @click="saveRow(record.id)"
              >
                保存
              </a-button>
              <a-divider type="vertical" />
              <a-button
                size="small"
                type="primary"
                @click="cancel(record.id)"
              >
                取消
              </a-button>
            </span>
          </template>
          <span v-else>
            <a-button
              size="small"
              type="primary"
              @click="handleEdit(record.id)"
            >
              编辑
            </a-button>
            <a-divider type="vertical" />
            <a-popconfirm
              title="确定要删除吗？"
              @confirm="handleDelete(record.id)"
            >
              <a-button
                size="small"
                type="danger"
              >
                删除
              </a-button>
            </a-popconfirm>
          </span>
        </template>
      </a-table>
      <a-button
        style="width: 100%; margin-top: 16px; margin-bottom: 8px"
        type="dashed"
        icon="plus"
        @click="newItem"
      >
        新增票种分类
      </a-button>
    </a-card>
  </a-spin>
</template>

<script>
import {
  getTicketCategory,
  updateTicketCategoryById,
  addTicketCategory,
  deleteTicketCategoryById,
  activeTicketCategoryById
} from '@/api/ticketSetting/ticketCategory'

const columns = [
  {
    title: '票种分类',
    dataIndex: 'name',
    key: 'name',
    width: '200px',
    scopedSlots: { customRender: 'name' }
  },
  {
    title: '排序',
    dataIndex: 'seq',
    key: 'seq',
    scopedSlots: { customRender: 'seq' }
  },
  {
    title: '描述',
    dataIndex: 'description',
    key: 'description',
    scopedSlots: { customRender: 'description' }
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
    width: '200px',
    scopedSlots: { customRender: 'status' }
  },
  {
    title: '操作',
    dataIndex: 'operation',
    key: 'operation',
    width: '200px',
    scopedSlots: { customRender: 'operation' }
  }
]

export default {

  data () {
    return {
      columns,
      loading: false,
      eidtVisible: false,
      currentTicketId: 0,
      pagination: {},
      productList: []
    }
  },
  created () {
    this.getTicketCategory()
  },
  methods: {
    // 获取价格码列表
    getTicketCategory () {
      this.loading = true
      // 不分页
      getTicketCategory({ pageSize: 9999 }).then(res => {
        this.productList = res.extraInfo.list
        this.pagination = {
          total: res.extraInfo.total,
          current: 1
        }
        this.loading = false
      })
    },
    // 保存
    saveRow (id) {
      const target = this.productList.find(item => item.id === id)

      this.$set(target, 'updateLoading', true)
      updateTicketCategoryById(id, {
        seq: target.seqVal - 0,
        description: target.descriptionVal,
        name: target.nameVal - 0
      }).then(res => {
        target.description = target.descriptionVal
        target.seq = target.seqVal
        this.$set(target, 'editable', false)
        this.$set(target, 'updateLoading', false)
        this.$message.success('更新成功。')
        this.getTicketCategory()
      })
    },
    // 取消
    cancel (id) {
      const target = this.productList.find(item => item.id === id)
      this.$set(target, 'editable', false)
    },
    // 表单改变
    handleChange (value, id, col) {
      const target = this.productList.find(item => item.id === id)
      // 使用一个新字段记录新值，保存后更新到原有字段上
      this.$set(target, `${col}Val`, value)
    },
    // 编辑
    handleEdit (id) {
      const target = this.productList.find(item => item.id === id)
      this.$set(target, 'editable', !target.editable)
      this.$set(target, 'descriptionVal', target.description)
      this.$set(target, 'seqVal', target.seq)
      this.$set(target, 'nameVal', target.name)
    },
    // 处理删除
    handleDelete (id) {
      const target = this.productList.find(item => item.id === id)
      if (target.isNew) {
        this.productList = this.productList.filter(item => item.id !== id)
      } else {
        deleteTicketCategoryById(id).then(res => {
          this.$message.success('删除成功')
          this.getTicketCategory()
        })
      }
    },
    // 提交添加
    handleAdd (id) {
      const target = this.productList.find(item => item.id === id)
      const params = {
        seq: target.seqVal,
        description: target.descriptionVal,
        name: target.nameVal
      }

      addTicketCategory(params).then(res => {
        this.$message.success('添加成功')
        this.getTicketCategory()
      })
    },
    handleActive (id) {
      const target = this.productList.find(item => item.id === id)
      activeTicketCategoryById(id, !(target.status === 'active')).then(res => {
        this.$message.success('操作成功。')
        this.getTicketCategory()
      })
    },
    // 新增价格码表单
    newItem () {
      this.productList.push({
        id: new Date().getTime(),
        name: '',
        seq: 0,
        description: '',
        editable: true,
        isNew: true
      })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
