<template>
  <div class='app-container'>
    <el-form>
      <el-form-item>
        <el-button type="primary" plain icon="Plus" @click="getDialog()"
          v-hasPermi="['business:class:add']">新增行业</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="data.tableData" v-loading="loading">
      <el-table-column label="行业ID" prop="id" align="center"></el-table-column>
      <el-table-column label="行业名称" prop="name" align="center"></el-table-column>
      <el-table-column label="创建时间" prop="createTimeStr" align="center"></el-table-column>
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button type="primary" link @click="getDialog(scope.row.id)"
            v-hasPermi="['business:class:edit']">编辑</el-button>
          <el-button type="danger" link @click="getDelete(scope.row)"
            v-hasPermi="['business:class:delete']">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total > 0" :total="total" v-model:page="data.form.pageNum" v-model:limit="data.form.pageSize"
      @pagination="getList" />

    <!-- 弹窗 -->
    <el-dialog v-model="dialogVisible" :title="title" width="500" :before-close="getClose">
      <el-form ref="dialogForm" :model="data.dialogForm">
        <el-form-item label="行业名称：" prop="name"
          :rules="[{ required: true, message: '请输入行业名称', trigger: 'blur' }, { required: true, max: 7, message: '不能超过7个字符', trigger: 'blur' }]">
          <el-input v-model="data.dialogForm.name" placeholder="请输入行业名称" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="getClose">取消</el-button>
        <el-button type="primary" @click="getSubmit">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { list, detail, submit, edit, remove } from '@/api/business/class'

let { proxy } = getCurrentInstance();

// 遮罩层
const loading = ref(false)

const data = reactive({
  // 表单
  form: {
    pageNum: 1,
    pageSize: 10
  },
  // 列表
  tableData: [],
  // 弹窗表单
  dialogForm: {}
})

// 总数据
const total = ref(0)

// 列表
function getList() {
  loading.value = true
  list(data.form).then(res => {
    if (res.code === 0) {
      data.tableData = res.data
      total.value = res.total
      loading.value = false
    }
  })
}
getList()

// 弹窗
const dialogVisible = ref(false)
// 弹窗标题
const title = ref("")
// 打开弹窗
function getDialog(id) {
  dialogVisible.value = true
  title.value = '新增'
  if (id) {
    getDetail(id)
  }
}

// 详情
function getDetail(id) {
  title.value = '编辑'
  detail(id).then(res => {
    if (res.code === 0) {
      data.dialogForm = res.data
    }
  })
}

// 关闭弹窗
function getClose() {
  dialogVisible.value = false
  data.dialogForm = {}
  proxy.$refs.dialogForm.resetFields()
}

// 新增
function getSubmit() {
  proxy.$refs['dialogForm'].validate(valid => {
    if (valid) {
      if (data.dialogForm.id) {
        edit(data.dialogForm).then(res => {
          if (res.code === 0) {
            proxy.$modal.msgSuccess('修改成功！')
            getClose()
            getList()
          }
        })
      } else {
        submit(data.dialogForm).then(res => {
          if (res.code === 0) {
            proxy.$modal.msgSuccess('提交成功！')
            getClose()
            getList()
          }
        })
      }
    } else {
      return false
    }
  })
}

// 删除
function getDelete(row) {
  proxy.$modal.confirm(`是否删除行业名称为：${row.name}的数据?`).then(() => {
    remove(row.id).then(res => {
      if (res.code === 0) {
        proxy.$modal.msgSuccess('删除成功！')
        getList()
      }
    })
  }).catch(() => { })
}

</script>