<template>
  <el-card class="box-card">
    <div class="devicemenu">
      <el-space wrap :size="15">
        <el-button type="primary" @click="handleEdit(state.addFormData)"
          >新增</el-button
        >
        <el-input
          v-model="state.searchCategory"
          placeholder="字典类别"
          style="width: 180px"
          size="small"
        />
        <el-input
          v-model="state.searchName"
          placeholder="字典名称"
          style="width: 180px"
          size="small"
        />
        <el-button type="primary" @click="search">查询</el-button>
      </el-space>
    </div>
    <el-table
      :data="state.TableData"
      stripe
      style="width: 100%"
      height="calc(100% - 42px)"
    >
      <!-- <el-table-column type="index" width="50" /> -->
      <el-table-column
        prop="name"
        label="字典名称"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="category"
        label="字典分类"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="code"
        label="字典编码"
        align="center"
      ></el-table-column>
      <!-- <el-table-column prop="orderno" label="顺序号" align="center"></el-table-column> -->
      <el-table-column prop="enabled" label="是否可用" align="center">
        <template #default="scope">
          {{ scope.row.enabled == 1 ? "是" : "否" }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180" align="center">
        <template #default="scope">
          <el-button
            type="text"
            icon="el-icon-edit"
            @click="handleEdit(scope.row)"
            >编辑</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        background
        layout="total, prev, pager, next"
        hide-on-single-page
        :current-page="query.page"
        :page-size="query.limit"
        :total="pageTotal"
        @current-change="handlePageChange"
      ></el-pagination>
    </div>
  </el-card>
  <!-- dialog编辑弹出框 -->
  <el-dialog v-model="editVisible" width="40%">
    <el-form :model="editFormData" label-width="80px">
      <el-form-item label="字典名称">
        <el-input v-model="editFormData.name"></el-input>
      </el-form-item>
      <el-row :gutter="24">
        <el-col :span="12">
          <el-form-item label="字典分类">
            <el-input v-model="editFormData.category"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="字典编码">
            <el-input v-model="editFormData.code"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="12">
          <el-form-item label="顺序号">
            <el-input v-model="editFormData.orderno"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="是否可用">
            <el-switch
              v-model="editFormData.enabled"
              class="ml-2"
              active-color="#13ce66"
              inactive-color="#ff4949"
              :active-value="1"
              :inactive-value="0"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="editVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveEdit">确 定</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup>
import { ref, onMounted, reactive } from "vue";
import { ElMessage } from "element-plus";
import { get_datadictionary, post_saveorupdate } from "/@/api/api.js";
onMounted(() => {
  getTableData();
});
let editFormData = ref({});
let editVisible = ref(false); //传感点

let state = reactive({
  TableData: "",
  searchName: "",
  searchCategory: "",
  addFormData: {
    category: "",
    code: "",
    name: "",
    orderno: 1,
    enabled: 1,
  },
});
const query = reactive({
  page: 1,
  limit: 10,
});
let pageTotal = ref(0);
const search = async () => {
  getTableData();
};
// getTableData
const getTableData = async () => {
  const { data } = await get_datadictionary(
    query.page,
    query.limit,
    state.searchName,
    state.searchCategory
  );
  //   console.warn(data);
  pageTotal.value = data.total;
  state.TableData = data.records;
};

// 编辑
const handleEdit = (row) => {
  editFormData.value = row;
  editVisible.value = true;
};
//add
const postSaveorupdate = async () => {
  const res = await post_saveorupdate(editFormData.value);
  if (res.code == 200) {
    ElMessage.success(`操作成功!`);
    editVisible.value = false;
  } else {
    ElMessage.success(res.msg);
  }
  getTableData();
};
// 保存编辑
const saveEdit = async () => {
  postSaveorupdate();
};

// 分页导航
const handlePageChange = (val) => {
  query.page = val;
  getTableData();
};
</script>
<style lang="scss" scoped>
.devicemenu {
  margin-bottom: 10px;
}
.el-card :deep {
  height: 100%;
  .el-card__body {
    height: calc(100% - 40px);
  }
}
</style>
