<template>
  <div>
    <el-dialog :title="props.titleValue" width="1200px" v-model="props.modelValue" :before-close="closed">
      <el-form :model="listQuery" class="mosty-from-wrap" :inline="true" style="width: 100%;">
        <el-form-item label="人员姓名:">
          <el-input v-model="listQuery.xm" clearable placeholder="请输入人员姓名"></el-input>
        </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="tabBox" :class="props.Single ? 'table-box-radio' : ''" style="margin-top: 0px;height:90%">
        <el-table stripe ref="multipleUserRef" v-loading="tableloading" @selection-change="handleSelectionChange"
          :data="tableData" @row-click="changecoose" border :row-key="keyid" style="width: 100%" height="450">
          <el-table-column type="selection" width="55" :reserve-selection="true" v-if="!props.Single" />
          <el-table-column width="55" #default="{ row }" v-else>
            <el-radio v-model="ridioIndex" :label="row.id"></el-radio>
          </el-table-column>
          <el-table-column sortable align="center" property="orgname" width="300" label="所属单位"></el-table-column>
          <el-table-column sortable align="center" property="deptname" width="300" label="所属部门"></el-table-column>
          <el-table-column sortable align="center" property="relatedname" width="300" label="所属相关方"></el-table-column>
          <el-table-column sortable align="center" property="xm" label="人员姓名"></el-table-column>

        </el-table>
      </div>
      <template #footer>
        <div class="flex just-between">
          <el-pagination class="pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="listQuery.pageCurrent" :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">
              <el-icon>
                <DocumentChecked />
              </el-icon>
              <span>确定</span>
            </el-button>
            <el-button @click="closed" type="primary">
              <el-icon>
                <DocumentDelete />
              </el-icon>
              <span>关闭</span>
            </el-button>
          </span>
        </div>

      </template>
    </el-dialog>
  </div>
</template>

<script setup>
// 引入
import {
  defineProps,
  onMounted,
  ref,
  defineEmits,
  getCurrentInstance,
  watchEffect
} from "vue";
import { getApi } from "@/api/tobAcco_api.js";
import * as MOSTY from "@/components/MyComponents/index";
import { getItem } from "@/utils/storage";
const { proxy } = getCurrentInstance()
const total = ref(0);
const tableData = ref([]);
const ridioIndex = ref(null);
const multipleUserRef = ref(null);
const tableloading = ref(false);
const listQuery = ref({
  pageCurrent: 1,
  pageSize: 20,
  orgid: getItem("deptId").ssbmid,
  relatedtype: '15'
});
const selectObj = ref(null);//选中的对象
const props = defineProps({
  modelValue: {
    type: Boolean,
    required: true
  },
  titleValue: {
    type: String,
    default: "选择人员"
  },
  // 默认选中成员
  defaultData: {
    type: Array,
    default: []
  },
  //是否单选
  Single: {
    type: Boolean,
    default: true
  },
  dict: {
    type: Object,
    default: {
      D_BZ_RCLX: []
    }
  },
  orgid: String,//部门
});

const emits = defineEmits(["update:modelValue", "confirm"]);

onMounted(() => {
  getListData()
});
//重置
const reset = () => {
  listQuery.value = {
    pageCurrent: 1,
    pageSize: 20,
  }
  getListData()
}
//确认
const handleSave = () => {
  emits("confirm", [selectObj.value]);
  closed()
}
//每一项点击事件
function changecoose(val) {
  ridioIndex.value = val.id
  selectObj.value = val
}

//选中(多选)
const handleSelectionChange = (val) => {
}
//关闭
const closed = () => {
  multipleUserRef.value.clearSelection();
  emits("update:modelValue", false);
};
const handleFilter = () => {
  listQuery.value.pageCurrent = 1;
  getListData();
  //  
};
//列表信息
const getListData = async () => {
  tableData.value = [];
  tableloading.value = true;
  getApi(listQuery.value, "/mosty-jcgl/relatedUser/getPageList").then(res => {
    if (res) {
      // for (let i = 0; i < res.records.length; i++) {
      //   res.records[i].type = res.records[i].type.split(",")
      // }
      tableData.value = res?.records;
      total.value = Number(res.total);
      multipleUser(tableData.value);
    }
  }).finally(() => {
    tableloading.value = false;
  })

};
// 列表回显
function multipleUser(row) {
  props.defaultData.forEach(item => {
    tableData.value.forEach((val) => {
      if (item == val.id) {
        multipleUserRef.value.toggleRowSelection(val, true);
      }
    });
  })
}

/**
 * 页码改变触发
 */
const handleCurrentChange = (currentPage) => {
  listQuery.value.pageCurrent = currentPage;
  getListData();
};
/**
 * pageSize 改变触发
 */
const handleSizeChange = (currentSize) => {
  listQuery.value.pageSize = currentSize;
  getListData();
};
watchEffect(() => {
  listQuery.value = { ...listQuery.value }
  getListData()
})
</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;
}

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

.box {
  width: 100%;
  overflow-y: hidden;
  // display: flex;
  // justify-content: space-between;
}

.fenye {
  margin-top: 10px;
}
</style>