<template>
  <el-dialog title="设备选择" v-model="visible" :width="width" @close="close" append-to-body draggable>
    <template #header>
      <span style="color: #fff">设备选择</span>
    </template>
    <el-form ref="dialogForm" class="list-search-container" :model="queryParams" :inline="true">
      <el-form-item label="设备编码：">
        <el-input placeholder="请输入设备编码" clearable @keydown.enter.prevent @keyup.enter="handleSearch" v-model.trim="queryParams.equipmentCode" style="width: 200px;" />
      </el-form-item>
      <el-form-item label="设备名称：">
        <el-input placeholder="请输入设备名称" clearable @keydown.enter.prevent @keyup.enter="handleSearch" v-model.trim="queryParams.equipmentName" style="width: 200px;"/>
      </el-form-item>
      <el-form-item>
        <el-button type="info" icon="Search" @click="handleSearch">搜索</el-button>
      </el-form-item>
    </el-form>
    <div class="page-container column-container">
      <el-table ref="dialogTable" :data="list" height="460px" row-key="id" @selection-change="handleSelectionChange" align="center">
        <el-table-column v-if="multiple" type="selection" width="40" :reserve-selection="true" :selectable="selectable" align="center" />
        <el-table-column label="行号" type="index" width="50" align="center" />
        <el-table-column label="设备编码" prop="equipmentCode" align="center" />
        <el-table-column label="设备名称" prop="equipmentName" align="center" />
        <el-table-column label="设备状态" prop="equipmentStatusCode" width="120" align="center">
          <template #default="scope">
            <dict-tag :options="equipment_status" :value="scope.row.equipmentStatusCode" />
          </template>
        </el-table-column>
        <el-table-column v-if="!multiple" label="操作" width="120" align="center">
          <template #default="scope">
            <el-button type="success" icon="finished" circle @click="handleSingleSelected(scope.row)" />
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
    </div>
    <template #footer>
      <el-button v-if="multiple" type="primary" :disabled="selections.length === 0" icon="Check" @click="handleMultipleSelected">
        确定
      </el-button>
      <el-button icon="Close" @click="close">取 消</el-button>
    </template>
  </el-dialog>
</template>
<script setup>
import { ref } from '@vue/reactivity'
import { detailList } from '@/api/business/equipment'
const { proxy } = getCurrentInstance()
/**字典数组区 */
const { equipment_status } = proxy.useDict('equipment_status')
/**设备弹窗变量 */
const total = ref(0)
const props = defineProps({
  width: {
    type: String,
    default: '900px'
  },
  multiple: {
    type: Boolean,
    default: false
  },
  singleSelected: {
    type: Function,
    default: null
  },
  multipleSelected: {
    type: Function,
    default: null
  }
})
const { singleSelected, multipleSelected } = toRefs(props)
const list = ref([])
const detailRow = ref({})
const selections = ref([])
const visible = ref(false)
const equipmentCodeIds = ref([])
/**查询对象 */
const data = reactive({
  queryParams: {
    name: '',
    pageSize: 10,
    pageNum: 1
  }
})
const { queryParams } = toRefs(data)
/***********************  方法区  ****************************/
/**
 * 对话框打开 事件
 */
function open(row) {
  equipmentCodeIds.value = []
  visible.value = true
  if (row) {
    detailRow.value = row
    equipmentCodeIds.value = detailRow.value.equipmentCodeIds
    queryParams.value.usageDeptId = row.deptId
  }
  getList()
}

/**
 * 对话框关闭 事件
 */
function close() {
  proxy.$refs.dialogForm.resetFields()
  proxy.$refs.dialogTable.clearSelection()
  handleSearch('clear')
  visible.value = false
}

/**
 * 加载数据
 */
function getList() {
  detailList(queryParams.value).then((res) => {
    list.value = res.rows
    total.value = res.total
  })
}
/**判断多选框状态 */
function selectable(row) {
  if (equipmentCodeIds.value) {
    return !equipmentCodeIds.value.includes(row.equipmentCode)
  } else {
    return true
  }
}
/**
 * 列表checkbox列选择 事件
 */
function handleSelectionChange(selection) {
  selections.value = selection
}

/**  搜索 事件 */
function handleSearch(type) {
  if (type && type === 'clear') {
    queryParams.value = {
      subject: '',
      name: '',
      total: 0,
      pageSize: 10,
      pageNum: 1
    }
  }
  getList()
}

/** 单选事件 */
function handleSingleSelected(row) {
  console.log(singleSelected.value)
  if (singleSelected.value) {
    singleSelected.value(row)
  }
  close()
}

/** 多选事件 */
function handleMultipleSelected() {
  if (multipleSelected.value) {
    multipleSelected.value(selections.value)
  }
  close()
}

defineExpose({
  open
})
</script>
