<template>
  <div class="app-container">
    <!-- 搜索 -->
    <el-form inline label-width="100px" @submit.native.prevent>
      <el-form-item>
        <el-button type="primary" icon="Plus" plain @click="getChange()"
          v-hasPermi="['device: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 label="分类名称" prop="name" align="center" />
      <el-table-column label="状态" align="center">
        <template #default="scope">
          <el-tag :type="scope.row.status === 1 ? '' : 'danger'">
            {{ selectDictLabel(data.statusOptions, scope.row.status) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button type="primary" link @click="getChange(scope.row)" v-hasPermi="['device:class:edit']">
            编辑
          </el-button>
          <el-button type="danger" link @click="getDelete(scope.row.id)" v-hasPermi="['device:class:delete']">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 新增弹窗 -->
    <el-dialog v-model="dialogVisible" :title="title" width="500px" :before-close="getCancel">
      <el-form :model="data.form" :rules="data.rules" ref="form" label-width="100px">
        <el-form-item label="分类名称：" prop="name">
          <el-input v-model="data.form.name" placeholder="请输入分类名称" />
        </el-form-item>
        <el-form-item label="启用状态：" prop="status">
          <el-radio-group v-model="data.form.status">
            <el-radio :label="1">正常</el-radio>
            <el-radio :label="2">停用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="getCancel">取消</el-button>
        <el-button type="primary" @click="getCreate">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { list, create, edit, remove } from "@/api/device/class";

const { proxy } = getCurrentInstance();

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

const data = reactive({
  // 表单
  form: {
    name: '',
    status: 1
  },
  // 表格数据
  tableData: [],
  // 表单验证
  rules: {
    name: [
      {
        required: true,
        message: "请输入分类名称",
        trigger: "blur",
      },
    ],
    status: [
      {
        required: true,
        message: "请选择状态",
        trigger: "change",
      },
    ],
  },
  // 设备状态
  statusOptions: [{
    value: 1,
    label: '正常'
  }, {
    value: 2,
    label: '停用'
  }]
})

// 弹窗
const dialogVisible = ref(false)
// 弹窗标题
const title = ref("")

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

// 新增 / 编辑按钮
const getChange = (row) => {
  dialogVisible.value = true;
  data.form = row ? row : {
    name: '',
    status: 1
  };
  title.value = row ? "编辑" : "新增";
}

// 取消
const getCancel = () => {
  proxy.$refs.form.clearValidate();
  dialogVisible.value = false;
}

// 确定
const getCreate = () => {
  proxy.$refs.form.validate((valid) => {
    if (valid) {
      if (data.form.id) {
        // 编辑
        edit(data.form).then((res) => {
          if (res.code === 0) {
            proxy.$modal.msgSuccess("修改成功！");
            dialogVisible.value = false;
            getList();
          }
        });
      } else {
        // 新增
        create(this.form).then((res) => {
          if (res.code === 0) {
            proxy.$modal.msgSuccess("创建成功！");
            dialogVisible.value = false;
            getList();
          }
        });
      }
    } else {
      return false;
    }
  });
}

// 删除
const getDelete = (id) => {
  proxy.$modal.confirm("确定要删除?").then(() => {
    remove(id).then((res) => {
      if (res.code === 0) {
        proxy.$modal.msgSuccess("删除成功！");
        getList();
      }
    });
  }).catch(() => { });
}
</script>