<template>
  <div class="page">
    <el-card shadow="never">
      <div class="search">
        <el-form inline>
          <el-form-item>
            <el-input v-model="params.keyWord" style="width: 200px" placeholder="模板名称搜索" @keyup.enter.native="getList(1)" clearable> </el-input>
          </el-form-item>
          <el-form-item>
            <el-input v-model="params.deviceKey" style="width: 200px" placeholder="设备key搜索" @keyup.enter.native="getList(1)" clearable> </el-input>
          </el-form-item>
          <el-form-item>
            <el-select v-model="params.status" placeholder="请选择转发格式" style="width: 100px">
              <el-option label="全部状态" :value="-1"> </el-option>
              <el-option label="正常" :value="1"> </el-option>
              <el-option label="禁用" :value="0"> </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getList(1)">
              <el-icon>
                <ele-Search />
              </el-icon>
              查询
            </el-button>
            <el-button @click="resetQuery()">
              <el-icon>
                <ele-Refresh />
              </el-icon>
              重置
            </el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" v-auth="'add'" @click="addOrEdit()">
              <el-icon>
                <ele-FolderAdd />
              </el-icon>
              新增
            </el-button>
            <el-button type="danger" v-auth="'del'" :disabled="!ids.length" @click="del()">
              <el-icon>
                <ele-Delete />
              </el-icon>
              删除
            </el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange" row-key="id" v-loading="loading">
        <el-table-column type="selection" v-col="'selection'" width="55" align="center" />
        <el-table-column prop="name" v-col="'name'" label="模板名称" show-overflow-tooltip></el-table-column>
        <el-table-column prop="code" v-col="'code'" label="模板编码" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column prop="updatedAt" v-col="'updatedAt'" label="更新时间" align="center"></el-table-column>
        <el-table-column prop="status" v-col="'status'" label="状态" align="center">
          <template #default="scope">
            <el-switch v-model="scope.row.status" inline-prompt :active-value="1" :inactive-value="0" active-text="启" inactive-text="禁" @change="handleStatusChange(scope.row)"> </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="220" align="center" fixed="right" v-col="'handle'">
          <template #default="{ row }">
            <el-button size="small" text type="primary" v-auth="'detail'" @click="$refs.detailRef?.show(row)">详情</el-button>
            <el-button size="small" text type="warning" v-auth="'edit'" @click="addOrEdit(row)">编辑</el-button>
            <el-button size="small" text type="danger" v-auth="'del'" @click="del(row)">删除</el-button>
            <el-button size="small" text type="primary" v-auth="'viewbind'" @click="$refs.bindDeviceRef?.show(row)">查看及绑定设备</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-if="params.total" :total="params.total" v-model:page="params.pageNum" v-model:limit="params.pageSize" @pagination="getList()" />
      <EditForm ref="editFormRef" @getList="getList(1)"></EditForm>
      <detailVue ref="detailRef"></detailVue>
      <bindDevice ref="bindDeviceRef"></bindDevice>
    </el-card>
  </div>
</template>

<script lang="ts" setup>
import api from "/@/api/projects";
import { useSearch } from "/@/hooks/useCommon";
import { ElMessageBox, ElMessage } from "element-plus";
import EditForm from "./edit-dialog.vue";
import detailVue from "./detail.vue";
import bindDevice from "./bindDevice.vue";
import { ref } from "vue";

const editFormRef = ref();
const bindDeviceRef = ref();
const detailRef = ref();
const ids = ref<number[]>([]);

const { params, tableData, getList, loading, resetQuery } = useSearch<any[]>(api.template.list, "Data", { keyWord: "", deviceKey: "" });

getList();

const addOrEdit = (row?: any) => {
  if (row) {
    editFormRef.value.open(row);
    return;
  } else {
    editFormRef.value.open();
  }
};

// 多选框选中数据
const handleSelectionChange = (selections: any[]) => {
  ids.value = selections.map((item) => item.id);
};

const del = (row?: any) => {
  ElMessageBox.confirm(row ? `此操作将模板：“${row.name}”，是否继续?` : `此操作将${ids.value.length}个模板`, "提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  }).then(async () => {
    await api.template.del(row ? [row.id] : ids.value);
    ElMessage.success("删除成功");
    getList(1);
  });
};

const handleStatusChange = (row: any) => {
  let text = row.status === 1 ? "启用" : "停用";
  ElMessageBox.confirm("确认要" + text + "模板：【" + row.name + "】吗?", "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(function () {
      return api.template.editStatus({ id: row.id, status: row.status });
    })
    .then(() => {
      ElMessage.success(text + "成功");
    })
    .catch(function () {
      row.status = row.status === 0 ? 1 : 0;
    });
};
</script>
