<template>
  <div class="page-container row-container">

    <section class="list-part-container" style="flex: 2">
      <!-- 搜索区域 -->
      <el-form class="list-search-container" :model="queryParams" ref="queryRef" :inline="true">
        <el-form-item class="section-title" label="设备档案管理" />
        <el-form-item label="设备类别:" prop="equipmentCategoryId">
          <el-select-v2 v-model="queryParams.equipmentCategoryId" clearable filterable :options="parentCategories"
            placeholder="设备类别" @change="handleRefreshEquipment" />
        </el-form-item>
        <el-form-item label="设备名称：">
          <el-input placeholder="请输入设备名称" v-model.trim="queryParams.equipmentName" @keydown.enter.prevent clearable
            style="width: 180px" />
        </el-form-item>
        <el-form-item label="设备编码：">
          <el-input placeholder="请输入设备编码" v-model.trim="queryParams.equipmentCode" @keydown.enter.prevent clearable
            style="width: 180px" />
        </el-form-item>
        <el-form-item>
          <el-button type="info" icon="Search" @click="handleRefreshEquipment">搜索</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="Plus" @click="handleShowEquipmentDetailDialog(null)"
            v-hasPermi="['business:equipment:add']">新增</el-button>
        </el-form-item>
        <!-- <el-form-item>
          <el-button
            :disabled="selections.length == 0"
            type="warning"
            icon="Download"
            @click="handleDownloadQrCode"
            >下载设备档案二维码</el-button
          >
        </el-form-item> -->
      </el-form>
      <!-- 列表区域 -->
      <div class="el-table-container">
        <div class="el-table-inner-container">
          <el-table ref="equipmentTable" v-loading="equipmentLoading" row-key="id"
            @selection-change="handleSelectionChange" :data="equipmentDetailList" height="100%">
            <el-table-column type="selection" width="40" align="center" :reserve-selection="true" />
            <el-table-column label="行号" type="index" width="50" align="center" />
            <el-table-column label="设备编码" prop="equipmentCode" width="120" align="center" />
            <el-table-column label="设备类别" prop="categoryName" width="120" align="center" />
            <el-table-column label="设备名称" prop="equipmentName" width="250" align="center" />
            <el-table-column label="归属部门" prop="belongingDeptAlias" width="100" align="center" />
            <el-table-column label="使用部门" prop="usageDeptAlias" width="100" align="center" />
            <el-table-column label="设备状态" prop="equipmentStatusCode" width="100" align="center">
              <template #default="scope">
                <dict-tag :options="equipment_status" :value="scope.row.equipmentStatusCode" />
              </template>
            </el-table-column>
            <el-table-column label="虚拟设备" prop="isVirtualEquipment" width="100" align="center">
              <template #default="scope">
                <dict-tag :options="yes_no" :value="scope.row.isVirtualEquipment" />
              </template>
            </el-table-column>
            <el-table-column label="备注" prop="remark" align="center" />
            <el-table-column label="操作" width="150" align="center">
              <template #default="scope">
                <el-button v-hasPermi="['business:equipment:edit']" link type="warning" icon="Edit"
                  @click="handleShowEquipmentDetailDialog(scope.row.id)">
                  编辑
                </el-button>
                <el-button v-hasPermi="['business:equipment:remove']" link type="danger" icon="Delete"
                  @click="handleDeleteEquipmentDetail(scope.row.id)">
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <pagination v-show="equipmentTotal > 0" :total="equipmentTotal" v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize" @pagination="getEquipmentList" />
    </section>
    <!-- 设备档案管理表单 -->
    <equipment-detail-form ref="detailRef" @handleSaveSuccess="handleRefreshDetail" />
  </div>
</template>

<script setup name="Equipment">
import equipmentDetailForm from "./formDetail";
import {
  listCategories,
  detailList,
  delDetails,
} from "@/api/business/equipment";
const { proxy } = getCurrentInstance();
const webHost = import.meta.env.VITE_APP_PRODUCTION_API;
/**字典数组 */
const { equipment_status } = proxy.useDict("equipment_status");
const { yes_no } = proxy.useDict("yes_no");
/** 设备档案管理 */
const selections = ref([]);
const equipmentTable = ref(null);
const equipmentTotal = ref(0);
const equipmentDetailList = ref([]);
const equipmentLoading = ref(false);
const parentCategories = ref([])
/** 设备类别 查询对象 */
const queryEquipmentCategoryParams = ref({
  name: "",
});

/** 设备档案 查询对象 */
const queryParams = ref({
  categoryId: 0,
  keywords: "",
  pageNum: 1,
  pageSize: 10,
});

/****************************************************  生命周期函数区  ****************************************************/
onMounted(() => {
  getEquipmentList();
});
/****************************************************  方法区  ****************************************************/

/** 打开设备档案详情表单 */
const handleShowEquipmentDetailDialog = (id) => {
  if (id) {
    var detailInfo = equipmentDetailList.value.filter((item) => item.id !== id);
    var equipmentCodeIds = detailInfo.map((item) => item.equipmentCode);
  } else {
    var equipmentCodeIds = equipmentDetailList.value.map(
      (item) => item.equipmentCode
    );
  }

  let data = {
    id: id,
    equipmentCode: equipmentCodeIds,
  };
  proxy.$refs.detailRef.open(data);
};

/**删除设备明细 */
const handleDeleteEquipmentDetail = (id) => {
  proxy.$modal
    .confirm("确定删除数据项？")
    .then(() => {
      delDetails(id).then(res => {
        if (res.code === 200) {
          proxy.$modal.msgSuccess("操作成功！");
          getEquipmentList()
        }
      });
    })
    .catch(() => { });
};

/****************************** 设备档案 事件处理区 ******************************/

/** 搜索按钮操作 */
function handleRefreshEquipment() {
  getEquipmentList();
}
/** 获取设备档案列表 */
const getEquipmentList = () => {
  equipmentLoading.value = true;
  detailList(queryParams.value).then((res) => {
    equipmentDetailList.value = res.rows;
    equipmentLoading.value = false;
    equipmentTotal.value = res.total;
  });
  listCategories({}).then(response => {
    parentCategories.value = response.data
  })
};
//刷新设备档案管理
function handleRefreshDetail() {
  getEquipmentList();
}
/**
 * 列表checkbox列选择 事件
 */
function handleSelectionChange(selection) {
  selections.value = selection;
}
/** 设备档案管理二维码 */
function handleDownloadQrCode() {
  /** 批量下载二维码 */
  for (var i = 0; i < selections.value.length; i++) {
    // window.open(webHost + selections.value[i].qcCode)

    var link = document.createElement("a");
    link.href = webHost + selections.value[i].qcCode;
    link.download = selections.value[i].equipmentCode; // 可以根据需要设置下载的文件名
    link.target = "_blank"; // 可以根据需要选择是否在新窗口中下载
    link.click();
  }
}
</script>
<style scoped>
:deep(.el-tree-node__label) {
  font-size: 14px !important;
  display: inline-block;
  width: 100%;
}

:deep(.el-tree-node__content) {
  height: 40px;
  border-bottom: 1px solid #ebeef5;
  padding: 8px 0;
  line-height: 23px;
}

.move-handle {
  cursor: move;
  background-color: #eee;
}
</style>
