<template>
  <a-card title="景点列表">
    <span slot="extra">
      <a-button
        size="small"
        type="primary"
        icon="swap"
        @click="$refs.scenicSort.show()"
      >
        景点排序
      </a-button>

      <a-button
        size="small"
        type="primary"
        icon="plus"
        @click="addVisible=true"
      >
        新建景点
      </a-button>
    </span>

    <!-- 表格 -->
    <a-spin :spinning="scenicLoading">
      <a-table
        :columns="columns"
        :data-source="scenicList"
        :pagination="pagination"
        :row-key="record => record.id"
        @change="handleTableChange"
      >
        <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-button
            size="small"
            type="primary"
            @click="$refs.bindTerm.show(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>
      </a-table>
    </a-spin>

    <!-- 新增景点弹窗 -->
    <AddModal
      :tags="tags"
      v-model="addVisible"
      @update="handleUpdate"
    ></AddModal>

    <!-- 新增景点弹窗 -->
    <EditModal
      :id="curentId"
      :tags="tags"
      v-model="editVisible"
      @update="handleUpdate"
    ></EditModal>

    <BindTerm ref="bindTerm"></BindTerm>

    <ScenicSort ref="scenicSort" @update="handleUpdate"></ScenicSort>
  </a-card>
</template>

<script>
import { getScenic, deleteScenic, setScenicActive } from '@/api/ticketSetting/scenic'
import ScenicSort from './scenicList/ScenicSort'
import AddModal from './scenicList/AddModal'
import EditModal from './scenicList/EditModal'
import BindTerm from './scenicList/BindTerm'

const columns = [
  {
    title: '名称',
    dataIndex: 'name',
    key: 'name',
    width: '200px'
  },
  {
    title: '地址',
    dataIndex: 'address',
    key: 'address'
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
    width: '160px',
    scopedSlots: { customRender: 'status' }
  },
  {
    title: '操作',
    dataIndex: 'operation',
    key: 'operation',
    width: '220px',
    scopedSlots: { customRender: 'operation' }
  }
]

export default {
  props: {
    tags: {
      type: Array,
      default: () => []
    }
  },
  created () {
    this.getScenicList({})
  },
  components: {
    AddModal,
    EditModal,
    BindTerm,
    ScenicSort
  },
  data () {
    return {
      columns,
      pagination: {},
      addVisible: false,
      editVisible: false,
      scenicLoading: false,
      scenicList: [],
      curentId: 0
    }
  },
  methods: {
    handleActive (value) {
      setScenicActive(value.id, value.status !== 'active').then(res => {
        this.$message.success('操作成功')
        this.getScenicList({
          pageNum: this.pagination.current,
          pageSize: this.pagination.pageSize
        })
      })
    },
    handleAdd () {
      this.addVisible = true
    },
    handleEdit (data) {
      this.editVisible = true
      this.curentId = data.id
    },
    handleDelete (id) {
      deleteScenic(id).then(res => {
        this.$message.success('删除成功')
        this.getScenicList({ pageNum: this.pagination.current, pageSize: this.pagination.pageSize })

        this.$store.dispatch('getScenicList')
      })
    },
    handleUpdate () {
      this.getScenicList({ pageNum: this.pagination.current, pageSize: this.pagination.pageSize })

      this.$store.dispatch('getScenicList')
    },
    getScenicList (params) {
      this.scenicLoading = true
      getScenic(params).then(res => {
        // console.log('景点列表', res)
        this.scenicLoading = false
        const getSenicList = res.extraInfo.list.filter(e => e.id !== 9999)
        this.scenicList = getSenicList
        const pagination = { ...this.pagination }
        pagination.total = res.extraInfo.total
        this.pagination = pagination
      })
    },
    handleTableChange (pagination, filters, sorter) {
      const params = {
        pageNum: pagination.current,
        pageSize: pagination.pageSize
      }
      this.pagination = pagination
      this.getScenicList(params)
    }
  }
}
</script>

<style scoped>

</style>
