<template>
  <div>
    <m-filter :option="filter" @search="handleSearch" />
    <m-table
      class="mt-3"
      :loading="loading"
      :headers="headers"
      :items="items"
      :total="total"
      :show-select="false"
      :is-tools="false"
      :page-info="pageInfo"
      @pageHandleChange="pageHandleChange"
      @sort="handleSort"
    >
      <template #status="{ item }">
        <v-chip small :color="item.status === 'active' ? 'success' : 'error'">{{ item.status === 'active' ? '已启用' : '已禁用'}}</v-chip>
      </template>
      <template #navBtn>
        <v-btn class="buttons" rounded elevation="5" color="primary" @click="handleAdd">
          <v-icon left>mdi-plus</v-icon>
          新增解析
        </v-btn>
      </template>
      <template #actions="{ item }">
        <v-btn color="primary" text @click="handleEdit(item)">编辑</v-btn>
        <v-btn :color="item.status === 'active' ? 'warning' : 'success'" text @click="handleStatus(item)">
          {{ item.status === 'active' ? '禁用' : '启用'}}
        </v-btn>
        <!-- <v-btn color="error" text @click="handleDelete(item)">删除</v-btn> -->
      </template>
    </m-table>
    <ImageImportEdit ref="imageImportEditRefs" @refresh="init()"></ImageImportEdit>
  </div>
</template>

<script>
import MFilter from '@/components/Filter'
import MTable from '@/components/List/table.vue'
import ImageImportEdit from '../components/imageImportEdit'
import {
  getBusinessCard,
  updateBusinessCardStatus
} from '@/api/dataOrigin'
export default {
  name: 'image-import',
  components: { MFilter, MTable, ImageImportEdit },
  data () {
    return {
      loading: false,
      show: false,
      filter: {
        list: [
          { type: 'textField', value: '', label: '名称', key: 'name' },
          { type: 'autocomplete', value: null, label: '选择', key: 'type', items: [] }
        ]
      },
      queryData: {
        name: null
      },
      headers: [
        { text: '姓名（中）', align: 'start', value: 'name_zh' },
        { text: '姓名（英）', align: 'start', value: 'name_en' },
        { text: '职位', align: 'start', value: 'title_en' },
        { text: '酒店/公司', align: 'start', value: 'hotel_zh' },
        { text: '创建日期', align: 'start', value: 'created_at' },
        { text: '状态', align: 'start', value: 'status' },
        { text: '操作', align: 'start', value: 'actions' }
      ],
      items: [],
      orders: [],
      pageInfo: {
        size: 10,
        current: 1
      },
      total: 1
    }
  },
  created () {
    this.init()
  },
  methods: {
    async init () {
      this.loading = true
      try {
        const { data } = await getBusinessCard()
        this.items = data
      } catch (error) {
        this.$snackbar.error(error)
      } finally {
        this.loading = false
      }
    },
    handleSearch (val) {
      Object.assign(this.queryData, val)
      this.pageInfo.current = 1
      this.init()
    },
    handleAdd () {
      this.$refs.imageImportEditRefs.open()
    },
    async handleEdit (item) {
      this.$refs.imageImportEditRefs.open(item)
    },
    async handleStatus (item) {
      try {
        if (item.status === 'active') {
          await this.$confirm('提示', '是否禁用该名片？')
        }
        await updateBusinessCardStatus({
          status: item.status === 'active' ? 'inactive' : 'active'
        }, item.id)
        this.$snackbar.success('更新成功')
        this.init()
      } catch (error) {
        this.$snackbar.error(error)
      }
    },
    handleDelete (item) {
      this.$confirm('提示', `是否删除 [ ${item.name} ]`)
        .then(async () => {
          try {
            this.$snackbar.success('删除成功')
            this.init()
          } catch (error) {
            this.$snackbar.error('删除失败')
          }
        })
    },
    handleSubmit () {},
    pageHandleChange (page) {
      this.pageInfo.current = page
      this.init()
    },
    handleSort (val) {
      this.orders = val
      this.init()
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
