<template>
  <el-dialog title="员工选择" v-model="visible" :width="width" append-to-body draggable>
    <template #header>
      <span style="color: #fff">设备选择</span>
    </template>
    <el-form class="list-search-container" :inline="true">
      <el-form-item>
        <el-input placeholder="请输入设备名称" v-model="queryParams.equipmentCode" />
      </el-form-item>
      <el-form-item>
        <el-button type="success" icon="Search" @click="handleSearch">搜索</el-button>
        <el-button v-if="multiple" type="primary" :disabled="selections.length === 0" icon="Finished" @click="handleMultipleSelected">
          选择带回
        </el-button>
      </el-form-item>
    </el-form>
    <div class="page-container column-container">
      <el-table :data="list" height="400px" row-key="id" @selection-change="handleSelectionChange" align="center">
        <el-table-column v-if="multiple" type="selection" width="40" :selectable="selectable" :reserve-selection="true" align="center" />
        <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="usageDeptCode" align="center" />
        <el-table-column label="使用部门简称" prop="usageDeptAlias" align="center" />
        <el-table-column label="报废日期" prop="scrappingDate" align="center" />
        <el-table-column label="设备状态" prop="equipmentStatusCode" width="80" align="center">
          <template #default="scope">
            <dict-tag :options="automatic_data_acquisition_status" :value="scope.row.equipmentStatusCode" />
          </template>
        </el-table-column>
        <el-table-column v-if="!multiple" label="操作" width="50" 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>
  </el-dialog>
</template>
<script setup>
import { ref } from '@vue/reactivity'
import { listEquipmentDetail } from '@/api/business/equipmentDetail'
const total = ref(0)
const props = defineProps({
  width: {
    type: String,
    default: '900px'
  },
  multiple: {
    type: Boolean,
    default: false
  },
  selected: {
    type: Array,
    defalut: []
  },
  singleSelected: {
    type: Function,
    default: null
  },
  multipleSelected: {
    type: Function,
    default: null
  }
})
const { singleSelected, multipleSelected, selected } = toRefs(props)
const { proxy } = getCurrentInstance()
const { automatic_data_acquisition_status } = proxy.useDict('automatic_data_acquisition_status')
const list = ref([])
const visible = ref(false)
const data = reactive({
  queryParams: {
    name: '',
    pageSize: 10,
    pageNum: 1
  }
})
const selections = ref([])
const { queryParams } = toRefs(data)

/**
 * 对话框打开 事件
 */
function open() {
  visible.value = true
  console.log(1111)
  getList()
}

/**
 * 对话框关闭 事件
 */
function close() {
  visible.value = false
}

/**
 * 加载数据
 */
function getList() {
  listEquipmentDetail(queryParams.value).then((res) => {
    list.value = res.rows
    total.value = res.total
  })
}

/**
 * 列表checkbox列选择 事件
 */
function handleSelectionChange(selection) {
  selections.value = selection
}

function selectable(row, index) {
  // if (selected.value.length > 0) {
  //   return !selected.value.some(l => l.userId === row.userId)
  // } else {
  return true
  // }
}

/**  搜索 事件 */
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>
