<template>
  <div class="page-container row-container">
    <!-- 左侧区域 -->
    <section class="list-part-container">
      <!-- 搜索区域 -->
      <el-form class="list-search-container" :inline="true" style="display: flex;">
        <el-form-item class="section-title" label="设备类别" />
        <el-form-item>
          <el-button type="primary" icon="Plus" v-hasPermi="['business:equipment:add']" @click="handleShowEquipmentCategoryDialog(null)">
            新增
          </el-button>
        </el-form-item>
        <el-form-item label="设备类别名称：">
          <el-input placeholder="请输入设备类别名称" v-model.trim="queryEquipmentCategoryParams.name" @keydown.enter.prevent @keyup.enter="handleRefreshEquipmentCategory" clearable style="width: 150px" />
        </el-form-item>
        <el-form-item>
          <el-button type="info" icon="Search" @click="handleRefreshEquipmentCategory">搜索</el-button>
        </el-form-item>
      </el-form>
      <!-- 设备类别列表区域 -->
      <div class="el-table-container">
        <div class="el-table-inner-container">
          <el-table v-loading="equipmentCategoryLoading" ref="categoryTable" :data="equipmentCategoryList" height="100%" row-key="id" :indent="20" highlight-current-row default-expand-all @current-change="handleCurrentCategoryChange">
            <el-table-column type="index" label="序号" width="50" align="center" />
            <el-table-column prop="name" label="设备类别名称" width="100" header-align="center" />
            <el-table-column prop="remark" 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:equipment:edit']">
                  编辑
                </el-button>
                <el-button link type="danger" icon="Delete" @click="handleDeleteCategory(scope.row.id)" v-hasPermi="['business:equipment: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-button type="primary" icon="Plus" @click="handleShowEquipmentDocDialog(null)" v-hasPermi="['business:equipment:add']">新增</el-button>
        </el-form-item>
        <el-form-item label="设备名称：">
          <el-input placeholder="请输入设备名称" v-model.trim="queryParams.keywords" @keydown.enter.prevent @keyup.enter="handleRefreshEquipment" 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="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" :data="equipmentList" height="100%">
            <el-table-column label="行号" type="index" width="50" align="center" />
            <el-table-column label="设备名称" prop="equipmentName" width="220" align="center" header-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" 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>
      <pagination v-show="equipmentTotal > 0" :total="equipmentTotal" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getEquipmentList" />
    </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, downloadQcImgs, download } 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 equipmentLoading = ref(false)
const equipmentCategoryLoading = ref(true)

/** 设备类别 查询对象 */
const queryEquipmentCategoryParams = ref({
  name: ''
})

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

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

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

  listCategory(queryEquipmentCategoryParams.value).then((response) => {
    equipmentCategoryList.value = response.rows
    if (equipmentCategoryList.value.length > 0) {
      currentCategory.value = equipmentCategoryList.value[0]
      categoryTable.value.setCurrentRow(currentCategory.value)
    }
    equipmentCategoryLoading.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 handleRefreshEquipmentCategory() {
  getCategoryList()
}

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

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

  listEquipment(queryParams.value).then((res) => {
    equipmentList.value = res.rows
    equipmentLoading.value = false
    equipmentTotal.value = res.total
  })
}

/** 打开设备档案表单 */
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('删除成功！')
        handleCurrentCategoryChange(currentCategory.value)
      })
    })
    .catch(() => {})
}

/**下载设备档案管理二维码 */
function downloadEquipmentQrcode(id) {
  downloadEquipmentQrcode(id)
}

/** 设备档案管理二维码 */
function equipmentQrcode(id) {
  equipmentQrcode(id)
}

/** 设备档案管理二维码 */
function handleDownloadQrCode() {
  /** 批量下载二维码 */
  downloadQcImgs({}).then((res) => {
    if (res.code === 200) {
      proxy.$modal.msgSuccess('操作成功！')
    }
  })
}
</script>
<style scoped>
.move-handle {
  cursor: move;
  background-color: #eee;
}
</style>
