<template>
  <div>
    <el-dialog :title="'师资人员选择'" width="1200px" v-model="dialogTableVisible" :before-close="closed">
      <el-form :model="listQuery" class="mosty-from-wrap" :inline="true" style="width: 960px;">
        <el-form-item label="师资名称" style="width: 300px;">
          <el-input v-model="listQuery.name" style="width: 250px;" />
        </el-form-item>
        <el-form-item label="师资类型" style="width: 300px;">
          <el-select class="pxdx_box ml6" placeholder="请选择师资类型" v-model="listQuery.teacherType" clearable
            style="width:250px">
            <el-option label="内部师资" value="0" />
            <el-option label="外部师资" value="1" />
          </el-select>
        </el-form-item>
        <el-form-item style="width: 144px;">
          <el-button type="success" @click="handleFilter">查询</el-button>
          <el-button type="success" @click="reset()"> 重置 </el-button>
        </el-form-item>
      </el-form>
      <!-- 组织机构信息 -->
      <div class="flex just-between treeBox2 ww100">
        <div class="table-box-radio tabBox" style="margin-top: 0px;height: 100%;">
          <el-table stripe ref="multipleUserRef" class="conceal-btn" v-loading="tableloading"
            @current-change="handleSelectionChange" @row-click="changecoose" :data="tableData" border :row-key="keyid"
            height='57vh'>
            <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="sex">
              <template #default="{ row }">
                <span v-if="row.sex == '1'">男</span>
                <span v-else-if="row.sex == '2'">女</span>
                <span v-else>未知</span>
              </template>
            </el-table-column>
            <el-table-column label="身份证" property="idCode"></el-table-column>
            <el-table-column label="师资类型" property="teacherType">
              <template #default="{ row }">
                {{ row.teacherType == '1' ? '外部师资' : '内部师资' }}
              </template>
            </el-table-column>
            <el-table-column label="职称" property="position"></el-table-column>
            <el-table-column label="擅长领域" property="territory"></el-table-column>
          </el-table>
        </div>
      </div>
      <template #footer>
        <div class="flex just-between">
          <el-pagination class="pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="listQuery.pageNum" :page-sizes="[2, 5, 10, 20]" :page-size="listQuery.pageSize"
            layout="total, prev, pager, next, sizes, jumper" :total="total"></el-pagination>
          <span class="dialog-footer">

            <el-button type="primary" @click="handleSave" title="Enter确认">
              <el-icon>
                <DocumentChecked />
              </el-icon>
              <span>确定</span>
            </el-button>
            <el-button type="primary" @click="closed">
              <el-icon>
                <DocumentDelete />
              </el-icon>
              <span>关闭</span>
            </el-button>
          </span>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
// 引入
import { ref, onMounted, watch, onUnmounted } from "vue";
import { getApi } from "@/api/tobAcco_api.js";
import { ElMessage } from "element-plus";
const dialogTableVisible = ref(true)
const listQuery = ref({
  pageCurrent: 1,
  pageSize: 10,
  teacherType: '',
  name: ''
});
const tableData = ref([])
const ridioIndex = ref(null)
const currentRow = ref({})
const tableloading = ref(false)
const total = ref(0)
const emits = defineEmits(["choosedUsers", "close"]);
const keyid = (row) => {
  return row.id;
};
onMounted(() => {
  getListData()
})
watch(() => dialogTableVisible.value, (val) => {
  if (val) {
    // 监听空格，回车键，触发快捷方式
    document.addEventListener('keydown', doChoose);
  } else {
    document.removeEventListener('keydown', doChoose);
  }
}, {
  immediate: true
})
function doChoose(e) {
  // 如果是输入框或文本区域，则不处理
  if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return
  if (!e?.target) return
  // 回车键保存
  if (e.code === 'Enter') {
    e.preventDefault();
    handleSave();
  }
}
function reset() {
  listQuery.value.teacherType = ''
  listQuery.value.name = ''
  listQuery.value.pageCurrent = 1;
  getListData();
}
const handleFilter = () => {
  listQuery.value.pageCurrent = 1;
  getListData();
};
const closed = (val) => {
  emits("close", val ?? undefined);
}
const getListData = async () => {
  tableData.value = [];
  tableloading.value = true;
  getApi(listQuery.value, "/mosty-jcgl/teacher/getList").then((res) => {
    if (res.records) {
      tableloading.value = false;
      tableData.value = res.records;
      total.value = res.total;
    }
  }).catch(() => {
    tableData.value = [];
    tableloading.value = false;
  });
};
const handleSelectionChange = (val) => {
  currentRow.value = val;
};
//每一项点击事件
function changecoose(val) {
  ridioIndex.value = val.id

}
const handleSave = () => {
  emits("choosedUsers", currentRow.value);
  closed(true)
};

/**
 * 页码改变触发
 */
const handleCurrentChange = (currentPage) => {
  listQuery.value.pageNum = currentPage;
  getListData();
};
/**
 * pageSize 改变触发
 */
const handleSizeChange = (currentSize) => {
  listQuery.value.pageSize = currentSize;
  getListData();
};
onUnmounted(() => {
  document.removeEventListener('keydown', doChoose);
});
</script>

<style lang="scss" scoped>
@import "@/assets/css/layout.scss";
@import "@/assets/css/element-plus.scss";

::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-tree-node {
  .is-leaf+el-checkbox .el-checkbox__inner {
    display: inline-block;
  }
}

::v-deep .el-overlay-dialog {
  overflow: hidden !important;
}

:v-deep .el-checkbox .el-checkbox__inner {
  display: none;
}

:v-deep .wrap .el-checkbox__input.is-disabled {
  display: none;
}

.el-form {
  margin-top: 10px;
  display: flex;
  //   flex-wrap: wrap;
  justify-content: space-between;
}

.search {
  width: 300px;
  display: flex;
  position: absolute;
  right: 20px;
  top: 20px;
}

.el-form-item {
  text-align: center;
  width: 400px;
}

.flx {
  display: flex;
  width: 100%;

  .el-button {
    margin-left: 10px;
  }
}

.box {
  width: 100%;
  height: 516px;
  overflow-y: hidden;
  border: 1px solid var(--el-color-primary);
  display: flex;
  justify-content: space-between;
}

.treeBox2 {
  overflow: auto;
}

.cskbox {
  width: 40px;
  padding: 107px 0;
  margin-right: 20px;

  .el-icon {
    width: 4em !important;
    height: 6em !important;
  }

  .el-icon svg {
    width: 3em !important;
    height: 3em !important;
  }
}

.listbox {
  border: 1px solid var(--el-color-primary);
  width: 45%;
  overflow-y: scroll;

  ul>li {
    padding: 4px 10px;
    box-sizing: border-box;
  }

  .activ {
    background: var(--el-color-primary);
    color: #fff
  }
}

.bot_font {
  width: 100%;
  text-align: center;
  font-size: 16px;
  color: #ffff;
  margin-top: 10px;
}

.fenye {
  margin-top: 10px;
}

::v-deep .el-dialog__body {
  overflow: auto !important;
  height: 600px !important;
}

.conceal-btn thead .el-table-column--selection .cell {
  display: none;
}
</style>
