<template>
  <DialogSelf
    title="维护号位"
    :visible="value"
    @onConfirm="handleClose"
    @onCancel="handleClose"
    width="30%"
  >
    <div class="post-header">
      <el-button type="primary" icon="el-icon-plus" @click="createPost"
        >新增号位</el-button
      >
      <el-button
        type="danger"
        icon="el-icon-delete"
        :disabled="checkedList.length < 1"
        @click="deleteData(checkedList.map((item) => item.id))"
        >删除选中</el-button
      >
    </div>
    <TableLayout
      @selection-change="selectionChange"
      @size-change="pageSizeChange"
      @current-change="pageChange"
      :selection="true"
      :pageInfo="pageInfo"
      size="mini"
      :column="column"
      :data="tableData"
      stripe
      style="width: 100%"
    >
      <template v-slot:action="props">
        <el-button
          type="text"
          icon="el-icon-edit"
          @click="editorPost(props.row)"
          >编辑号位</el-button
        >
        <el-button
          style="color: red"
          type="text"
          icon="i-j-ksap-shanchu"
          @click="deleteData([props.row.id])"
          >删除</el-button
        >
      </template>
    </TableLayout>
    <DialogSelf
      v-if="isEditor"
      :title="formInfo?.id ? '编辑号位' : '新增号位'"
      :visible="isEditor"
      width="20%"
      @onCancel="isEditor = null"
      @onConfirm="transcation"
      :actionBarOption="{
        confirmLoading: editorConfirmLoading,
      }"
    >
      <el-form :rules="rules" label-width="60px" ref="form" :model="formInfo">
        <el-form-item label="名称" prop="name">
          <el-input v-model="formInfo.name"></el-input>
        </el-form-item>
        <el-form-item label="键值" prop="keycode">
          <el-input v-model="formInfo.keycode"></el-input>
        </el-form-item>
      </el-form>
    </DialogSelf>
  </DialogSelf>
</template>

<script>
import { TableLayout } from '@/components/layout'
import {
  getPostPageApi,
  createPostApi,
  editorPostApi,
  deletePostApi
} from '@/api/training/post'
import DialogSelf from '@/components/layout/DialogLayout.vue'
export default {
  props: {
    value: {
      type: Boolean,
      default: () => true
    }
  },
  data () {
    return {
      // 表格数据
      tableData: [],
      // 页面详情
      pageInfo: {
        currentPage: 1,
        pageSize: 10,
        total: 0
      },
      editorConfirmLoading: false,
      // 新增数据的校验规则
      rules: {
        name: [{ required: true, message: '请输入号位名称', trigger: 'blur' }],
        keycode: [
          { required: true, message: '请输入号位键值', trigger: 'blur' }
        ]
      },
      // 新建/编辑号位的信息
      formInfo: null,
      // 是否正在新增或编辑号位
      isEditor: false,
      // 当前选中的号位列表
      checkedList: [],
      // 表格格式
      column: [
        {
          prop: 'name',
          label: '号位名称',
          align: 'center',
          'show-overflow-tooltip': true,
          width: 220
        },
        {
          prop: 'keycode',
          label: '号位键值',
          align: 'center',
          'show-overflow-tooltip': true,
          width: 130
        },
        { prop: 'action', label: '操作', align: 'center' }
      ]
    }
  },
  components: {
    DialogSelf,
    TableLayout
  },
  mounted () {
    this.getList()
  },
  methods: {
    // 关闭弹框
    handleClose () {
      this.$emit('input', false)
    },
    /**
     * @param {object} data
     * 编辑号位
     */
    editorPost (data) {
      this.isEditor = true
      this.formInfo = JSON.parse(JSON.stringify(data))
    },
    // 创建号位
    createPost () {
      this.isEditor = true
      this.formInfo = {}
    },
    /**
     * @param {Array[number]} data
     * 删除号位
     */
    deletePost (data) {},

    /**
     *
     * 获取号位列表
     */
    async getList () {
      const { data } = await getPostPageApi(this.pageInfo)
      this.tableData = data.data
      this.pageInfo.total = data.total
    },
    // 选中数据
    selectionChange (e) {
      this.checkedList = e
    },
    // 页面改变
    pageChange (e) {
      this.pageInfo.currentPage = e
      this.getList()
    },
    // 页面大小改变
    pageSizeChange (e) {
      this.pageInfo.currentPage = 1
      this.pageInfo.pageSize = e
      this.getList()
    },

    // 处理新增或编辑数据
    async transcation () {
      try {
        this.editorConfirmLoading = true
        this.formInfo.id
          ? await editorPostApi(this.formInfo.id, this.formInfo)
          : await createPostApi(this.formInfo)
        this.isEditor = false
        this.pageInfo.currentPage = 1
        this.editorConfirmLoading = false
        this.getList()
      } catch (error) {
        this.editorConfirmLoading = false
      }
    },
    async deleteData (ids) {
      await deletePostApi(ids)
      this.$message.success('删除成功')
      this.getList()
      // console.log(res)
    }
  }
}
</script>

<style lang="scss" scoped>
.post-header {
  width: 100%;
  display: flex;
  justify-content: right;
  margin-bottom: 10px;
}
</style>
