<template>
  <el-row :gutter="24" class="dg-vxe-table">
    <el-col :span="24">
      <el-card style="height: calc(100vh - 100px)">
        <div class="title_all"><strong class="title_left">vxeTable+form组件的demo</strong></div>
        <!-- 调用表格组件 :pager-config="tablePage" :proxy-config="tableProxy" :toolbar="tableToolbar" :edit-config="{trigger: 'click', mode: 'row', showStatus: true}" @toolbar-button-click="toolbarButtonClickEvent"-->
        <vxe-grid
          ref="xGrid"
          border
          stripe
          resizable
          highlight-hover-row
          :height="height"
          :data="tableData"
          :pager-config="tablePage"
          :columns="tableColumns"
        >
        </vxe-grid>
        <!-- 弹窗 -->
        <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible">
          <!-- 调用表单组件 -->
          <dg-form :form-data.sync="formData" :form-items="formItems" label-width="100px"> </dg-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="handleDialogForm">确 定</el-button>
          </div>
        </el-dialog>
      </el-card>
    </el-col>
  </el-row>
</template>

<script>
export default {
  name: 'DgVxeTable',

  props: {
    apiCode: {
      type: String,
      default: () => '',
    },
    height: {
      type: String,
      default: () => '',
    },
    toolbarItems: {
      type: Array,
      default: () => [],
    },
    tableItems: {
      type: Array,
      default: () => [],
    },
    formItems: {
      type: Array,
      default: () => [],
    },
  },

  data() {
    return {
      // apiCode:'testDatagoVue',
      initialData: null,
      toolbarData: {},
      formData: {},
      tableData: [],
      tablePage: {
        total: 0,
        currentPage: 1,
        pageSize: 15,
      },
      dialogTitle: '',
      dialogFormVisible: false,
    }
  },

  created() {},

  methods: {
    // 获取表格数据
    async getData() {
      let data = {
        apiCode: this.apiCode,
        // params: `command=init&limit=${this.pageSize}&start=${(this.pageNumber-1)*this.pageSize}&records=[${JSON.stringify(root)}]`
        params: `command=init&limit=${this.tablePage.pageSize}&start=${
          (this.tablePage.pageNumber - 1) * this.tablePage.pageSize
        }`,
      }
      for (let key in this.toolbarData) {
        if (this.toolbarData[key]) {
          data.params += `&${key}=${this.toolbarData[key]}`
        }
      }
      // if (this.toolbarModel.toolbarData)
      let res = await this.$api.DgJsonStore(data)
      this.initialData = res
      this.tableData = res.root
      this.tablePage.total = res.count
    },
    // 更新表格数据
    async updata(root) {
      let res = await this.$api.DgJsonStore({
        apiCode: 'testDatagoVue',
        params: `command=update&records=[${JSON.stringify(root)}]`,
      })
      this.getData()
    },
    // 新增表格数据
    async insert(root) {
      let res = await this.$api.DgJsonStore({
        apiCode: 'testDatagoVue',
        params: `command=insert&records=[${JSON.stringify(root)}]`,
      })
      this.getData()
    },
    // 删除表格数据
    async delete(root) {
      let res = await this.$api.DgJsonStore({
        apiCode: 'testDatagoVue',
        params: `command=delete&records=[${JSON.stringify(root)}]`,
      })
      this.getData()
    },
    // 表格头部按钮操作
    clickHandle(item, res, toolbarData) {
      switch (item.editer) {
        case 'search': {
          this.getData()
          break
        }
        case 'add': {
          this.dialogTitle = '新增'
          this.formData = {}
          this.dialogFormVisible = true
          break
        }
        default: {
          if (item.fn) {
            this.$emit(item.fn, item, res, toolbarData)
          }
        }
      }
    },
    // 表格中操作事件
    rowAction(action, row, index, $event) {
      switch (action.fn) {
        case 'del': {
          this.$confirm('此操作将永久删除当前记录, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'error',
          })
            .then(() => {
              let root = {
                ID: row.ID,
              }
              this.delete(root)
            })
            .catch(() => {
              this.$message({
                type: 'info',
                message: '已取消删除',
              })
            })
          break
        }
        case 'edit': {
          this.dialogTitle = '修改'
          this.formData = row
          this.dialogFormVisible = true
          break
        }
        default: {
          if (action.fn) {
            this.$emit(action.fn, action, row, index, $event)
          }
          break
        }
      }
    },
    // 改变分页操作
    handlePageChange({ currentPage, pageSize }) {
      this.tablePage.currentPage = currentPage
      this.tablePage.pageSize = pageSize
      this.getData()
    },
    // 确定提交表单
    handleDialogForm() {
      let root = this.formData
      if (this.dialogTitle === '新增') {
        this.insert(root)
      } else {
        this.updata(root)
      }
      this.dialogFormVisible = false
    },
  },
}
</script>
