<template>
  <el-drawer title="设备清单" v-model="visible" size="90%" direction="rtl">
    <template #header="{ close, titleId, titleClass }">
      <el-form class="list-search-container" :inline="true">
        <el-form-item class="section-title" label="设备清单" />
        <el-form-item label="设备编码：">
          <el-input placeholder="请输入设备编码" v-model.trim="queryParams.equipmentCode" clearable style="width: 180px" />
        </el-form-item>
        <el-form-item>
          <el-button type="info" icon="Search" @click="handleRefreshDetail">搜索</el-button>
          <!-- <el-button type="success" icon="Refresh" @click="handleRefreshDetail">刷新</el-button> -->
        </el-form-item>
      </el-form>
    </template>
    <div class="column-container">
      <!-- 按钮区域 -->
      <div class="list-btns-container">
        <el-button type="primary" icon="Plus" v-hasPermi="['business:equipmentDetail:add']" @click="handleShowEquipmentDetailDialog(null)">
          新增
        </el-button>
      </div>
      <div class="el-table-container">
        <div class="el-table-inner-container">
          <el-table ref="equipmentTable" v-loading="loading" :data="detailList" height="100%">
            <el-table-column label="行号" type="index" width="50" align="center" />
            <el-table-column label="设备编码" prop="equipmentCode" width="150" align="center" />
            <el-table-column label="归属部门" prop="belongingDeptAlias" width="150" align="center" />
            <el-table-column label="使用部门" prop="usageDeptAlias" width="150" align="center" />
            <el-table-column label="备注" prop="remark" align="center" />
            <el-table-column label="操作" width="150" align="center">
              <template #default="scope">
                <el-button v-hasPermi="['business:equipmentDetail:edit']" link type="warning" icon="Edit" @click="handleShowEquipmentDetailDialog(scope.row.id)">
                  编辑
                </el-button>
                <el-button v-hasPermi="['business:equipmentDetail:remove']" link type="danger" icon="Delete" @click="handleDeleteEquipmentDetail(scope.row.id)">
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <!-- 分页 -->
      <pagination v-show="detailTotal > 0" :total="detailTotal" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="loadData" />
    </div>
    <!-- 设备档案详情清单 -->
    <equipment-detail-form ref="detailRef" @handleSaveSuccess="handleRefreshDetail" />
  </el-drawer>
</template>
<script setup>
import { listDetails, delDetails } from '@/api/business/equipment'
import equipmentDetailForm from './formDetail'
const { proxy } = getCurrentInstance()

const loading = ref(false)
const visible = ref(false)

const detailList = ref([])
const detailTotal = ref(0)

/** 设备档案 查询对象 */
const queryParams = ref({
  equipmentId: 0,
  equipmentCode: '',
  pageNum: 1,
  pageSize: 10
})
/***********************  方法区  ****************************/
/** 打开抽屉 */
const open = (data) => {
  visible.value = true
  queryParams.value.equipmentId = data.equipmentId
  loadData()
}

const loadData = () => {
  loading.value = true
  listDetails(queryParams.value).then((res) => {
    detailList.value = res.rows
    loading.value = false
  })
}

const handleRefreshDetail = () => {
  loadData()
}

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

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

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

/** 暴露给父组件的方法 */
defineExpose({
  open
})
</script>
