<template>
  <div class="page-container row-container">
    <!-- 左侧区域 -->
    <section class="list-part-container">
      <!-- 搜索区域 -->
      <el-form class="list-search-container" :inline="true">
        <el-form-item class="section-title" label="设备类别" />
        <el-form-item>
          <el-button type="success" icon="Refresh" @click="handleRefreshCategory">刷新</el-button>
        </el-form-item>
      </el-form>
      <!-- 按钮区域 -->
      <div class="list-btns-container">
        <el-button type="primary" icon="Plus" v-hasPermi="['business:equipmentCategory:add']" @click="handleShowEquipmentCategoryDialog(null)">
          新增
        </el-button>
      </div>
      <!-- 设备类别列表区域 -->
      <div class="el-table-container">
        <div class="el-table-inner-container">
          <el-table
            v-loading="loading"
            ref="categoryTable"
            :data="equipmentCategoryList"
            border
            height="100%"
            row-key="id"
            highlight-current-row
            default-expand-all
            @current-change="handleCurrentCategoryChange"
          >
            <el-table-column prop="name" label="设备类别" header-align="center" />
            <el-table-column label="操作" width="140" align="center">
              <template #default="scope">
                <el-button
                  link
                  type="warning"
                  icon="Edit"
                  @click="handleShowEquipmentCategoryDialog(scope.row.id)"
                  v-hasPermi="['business:equipmentCategory:edit']"
                >
                  编辑
                </el-button>
                <el-button
                  link
                  type="danger"
                  icon="Delete"
                  @click="handleDeleteCategory(scope.row.id)"
                  v-hasPermi="['business:equipmentCategory:remove']"
                >
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </section>

    <!-- 右侧区域 -->
    <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>
          <el-input placeholder="请输入设备名称" v-model="queryParams.keywords" 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>
      <!-- 按钮区域 -->
      <div class="list-btns-container">
        <el-button type="primary" icon="Plus" @click="handleShowEquipmentDocDialog(null)" v-hasPermi="['system:equipment:add']">新增</el-button>
      </div>
      <!-- 列表区域 -->
      <div class="el-table-container">
        <div class="el-table-inner-container">
          <el-table ref="equipmentTable" v-loading="loading" :data="equipmentList" height="100%" @selection-change="">
            <el-table-column label="行号" type="index" width="50" align="center" />
            <el-table-column label="设备名称" prop="equipmentName" width="150" align="center" />
            <el-table-column label="规格型号" prop="standard" width="150" align="center" />
            <el-table-column label="设备数量" prop="equipmentNumber" width="80" align="center" />
            <el-table-column label="备注" prop="remark" header-align="center" />
            <el-table-column label="操作" width="220" align="center">
              <template #default="scope">
                <el-button link type="primary" icon="Edit" @click="handleShowEquipmentDetailDrawer(scope.row.id)">设备明细</el-button>
                <el-button
                  v-hasPermi="['business:equipment:edit']"
                  link
                  type="warning"
                  icon="Edit"
                  @click="handleShowEquipmentDocDialog(scope.row.id)"
                >
                  编辑
                </el-button>
                <el-button
                  v-hasPermi="['business:equipment:remove']"
                  link
                  type="danger"
                  icon="Delete"
                  @click="handleDeleteEquipmentDoc(scope.row.id)"
                >
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <el-pagination class="pagination-container" background layout="prev, pager, next" :total="equipmentTotal" />
    </section>
    <!-- 分类表单 -->
    <equipment-category-form ref="categoryRef" @handleSaveSuccess="handleRefreshCategory" />
    <!-- 设备档案表单 -->
    <equipment-doc-form ref="equipmentRef" @handleSaveSuccess="handleRefreshEquipment" />
    <!-- 设备档案详情清单 -->
    <list-detail-form ref="listDetailRef" />
  </div>
</template>

<script setup name="Equipment">
import equipmentCategoryForm from './formCategory'
import equipmentDocForm from './formDoc'
import listDetailForm from './listDetail'

import { listCategory, delCategory, listEquipment, delEquipment } from '@/api/business/equipment'
const { proxy } = getCurrentInstance()

const categoryTable = ref(null)
const currentCategory = ref({})
const equipmentCategoryList = ref([])

const equipmentTable = ref(null)
const equipmentList = ref([])
const equipmentTotal = ref(0)

const loading = ref(true)

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

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

/****************************** 设备类别 事件处理区 ******************************/
/** 获取设备分类列表 */
const getCategoryList = () => {
  loading.value = true

  listCategory().then((response) => {
    equipmentCategoryList.value = response.rows
    if (equipmentCategoryList.value.length > 0) {
      currentCategory.value = equipmentCategoryList.value[0]
      categoryTable.value.setCurrentRow(currentCategory.value)
    }
    loading.value = false
  })
}

/** 刷新设备分类列表 */
const handleRefreshCategory = () => {
  getCategoryList()
}

const handleDeleteCategory = (id) => {
  proxy.$modal
    .confirm('确定删除数据项？')
    .then(() => {
      delCategory(id).then(() => {
        proxy.$modal.msgSuccess('操作成功！')
        handleRefreshCategory()
      })
    })
    .catch(() => {})
}

/** 设备类别表格 current-change 事件 */
function handleCurrentCategoryChange(row) {
  if (row) {
    currentCategory.value = row
    queryParams.value.categoryId = row.id
    getEquipmentList()
  }
}

/** 打开设备分类表单 */
const handleShowEquipmentCategoryDialog = (data) => {
  proxy.$refs.categoryRef.open(data)
}

/** 打开设备档案详情表单 */
const handleShowEquipmentDetailDrawer = (equipmentId) => {
  proxy.$refs.listDetailRef.open({ equipmentId: equipmentId })
}

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

/** 搜索按钮操作 */
function handleRefreshEquipment() {
  getEquipmentList()
}
/** 获取设备档案列表 */
const getEquipmentList = () => {
  loading.value = true

  listEquipment(queryParams.value).then((res) => {
    equipmentList.value = res.rows
    loading.value = false
  })
}

/** 打开设备档案表单 */
const handleShowEquipmentDocDialog = (id) => {
  proxy.$refs.equipmentRef.open({ categoryId: currentCategory.value.id, id: id })
}

/** 删除按钮操作 */
function handleDeleteEquipmentDoc(id) {
  proxy.$modal
    .confirm('是否确认删除选中的数据项？')
    .then(() => {
      delEquipment(id).then(() => {
        proxy.$modal.msgSuccess('删除成功！')
      })
    })
    .catch(() => {})
}
</script>
<style scoped>
.move-handle {
  cursor: move;
  background-color: #eee;
}
</style>
