<template>
  <div>
    <el-dialog title="参训学员名单" width="1200px" :model-value="props.modelValue" :before-close="closeDialog">
      <div class="head">
        <div></div>
      </div>
      <div class="config">
        <el-table stripe ref="refTable" @current-change="handleSelectionChange" @row-click="changecoose"
          :data="tableData" border :row-key="keyid" style="width: 100%">
          <el-table-column width="55" #default="{ row }">
            <el-radio v-model="ridioIndex" :label="row.id"></el-radio>
          </el-table-column>
          <el-table-column label="人员姓名" property="name"></el-table-column>
          <el-table-column label="所属部门" property="depname"></el-table-column>
        </el-table>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="closeDialog" type="primary">关闭</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
// 引入
import {
  ref,
  watch,
  onMounted,
  defineProps,
  defineEmits
} from "vue";
import { getApi } from "@/api/tobAcco_api.js";
const ridioIndex = ref(null);
const emits = defineEmits(["changeClose"]);
const props = defineProps({
  modelValue: {
    type: Boolean,
    required: true
  },
  // 选择
  data: {
    type: Array,
    default: []
  },
});
const tableData = ref(null)
const total = ref(0)
const listQuery = ref({
  pageCurrent: 1,
  pageSize: 5
})
const refTable = ref(null);
const selected = ref([]);
watch(
  () => props.modelValue,
  (val) => {
    if (val === true) {
      tableData.value = props.data
    } else {
      tableData.value = []
    }
  }
);
//获取详情
onMounted(() => {

});


const keyid = (row) => {
  return row.id;
};
// 选中一行
const handleSelectionChange = (val) => {
  selected.value = val;
};
//每一项点击事件
function changecoose(val) {
  ridioIndex.value = val.id
  selected.value = val
}
// 关闭×
const closeDialog = () => {
  emits("changeClose", false);
};
</script>

<style lang="scss" scoped>
.head {
  display: flex;
  height: 50px;
  align-items: center;
  justify-content: space-between;
}

.config {
  height: 40vh;
  position: relative;

  .fenye {
    position: absolute;
    bottom: 0;
    text-align: right;
  }
}

::v-deep .el-form--inline {
  padding-left: 0 !important;
}

::v-deep .el-radio__label {
  display: none !important;
}

.table-box-radio .el-table1__header-wrapper .el-checkbox {
  display: none !important;
}

::v-deep .el-table__cell {
  // 解决el-image 和 el-table冲突层级冲突问题
  position: static !important;
}
</style>
