<template>
  <a-spin :spinning="ticketProductLoading">
    <a-card title="价格码列表">
      <a-table
        :columns="columns"
        :data-source="productList"
        :row-key="record => record.id"
        :pagination="false"
      >
        <template
          slot="ticket_product_id"
          slot-scope="text, record"
        >
          <a-input
            v-if="record.isNew"
            style="margin: -5px 0"
            :value="record[`ticket_product_idVal`]"
            @change="e => handleChange(e.target.value, record.id, 'ticket_product_id')"
          />
          <template v-else>
            {{ text }}
          </template>
        </template>
        <template
          slot="thirdparty_code"
          slot-scope="text, record"
        >
          <a-input
            v-if="record.isNew"
            style="margin: -5px 0"
            :value="record[`thirdparty_codeVal`]"
            @change="e => handleChange(e.target.value, record.id, 'thirdparty_code')"
          />
          <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="record.status==='active'?'danger':'primary'"
            @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 {
  updateTicketProductById,
  addTicketProduct,
  deleteTicketProductById,
  activeTicketProductById
} from '@/api/ticketSetting/ticketProduct'
import { getConfigProject } from '@/api/project'

const columns = [
  {
    title: '价格码',
    dataIndex: 'ticket_product_id',
    key: 'ticket_product_id',
    width: '200px',
    scopedSlots: { customRender: 'ticket_product_id' }
  },
  {
    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 {
  computed: {
    productList () {
      return this.$store.state.app.ticketProductList
    },
    ticketProductLoading () {
      return this.$store.state.app.ticketProductLoading
    }
  },
  data () {
    return {
      columns,
      eidtVisible: false,
      currentTicketId: 0,
      pagination: {}
    }
  },
  created () {
    getConfigProject().then(res => {
      this.whether_to_use_thirdparty_pricecode = res.extraInfo.whether_to_use_thirdparty_pricecode
      if (this.whether_to_use_thirdparty_pricecode) {
        this.columns = [
          {
            title: '价格码',
            dataIndex: 'ticket_product_id',
            key: 'ticket_product_id',
            width: '200px',
            scopedSlots: { customRender: 'ticket_product_id' }
          },
          {
            title: '第三方价格码',
            dataIndex: 'thirdparty_code',
            key: 'thirdparty_code',
            scopedSlots: { customRender: 'thirdparty_code' }
          },
          {
            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' }
          }
        ]
      }
    })
  },
  methods: {
    // 保存
    saveRow (id) {
      const target = this.productList.find(item => item.id === id)

      this.$set(target, 'updateLoading', true)
      updateTicketProductById(id, {
        description: target.descriptionVal,
        thirdparty_code: target.thirdparty_codeVal ? target.thirdparty_codeVal : undefined,
        ticket_product_id: target.ticket_product_idVal - 0
      }).then(res => {
        target.description = target.descriptionVal
        this.$set(target, 'editable', false)
        this.$set(target, 'updateLoading', false)
        this.$message.success('更新成功。')

        this.$store.dispatch('getTicketProduct')
      })
    },
    // 取消
    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, 'ticket_product_idVal', target.ticket_product_id)
    },
    // 处理删除
    handleDelete (id) {
      const target = this.productList.find(item => item.id === id)
      if (target.isNew) {
        this.productList = this.productList.filter(item => item.id !== id)
      } else {
        deleteTicketProductById(id).then(res => {
          this.$message.success('删除成功')
          // this.getTicketProduct()

          this.$store.dispatch('getTicketProduct')
        })
      }
    },
    // 提交添加
    handleAdd (id) {
      const target = this.productList.find(item => item.id === id)
      const params = {
        description: target.descriptionVal,
        thirdparty_code: target.thirdparty_codeVal ? target.thirdparty_codeVal : undefined,
        ticket_product_id: target.ticket_product_idVal - 0
      }

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

<style lang="scss" scoped>

</style>
