<template>
  <!-- 选择负责人 -->
  <div
    class="grid-right-search"
    style="border-top: 1px solid #ccc; padding-top: 30px"
  >
    <el-form ref="formRef" :model="searchForm" inline>
      <el-form-item label="姓名" prop="name">
        <el-input
          placeholder="请输入姓名"
          clearable
          v-model="searchForm.name"
        ></el-input>
      </el-form-item>
      <el-form-item label="手机号" prop="mobile">
        <el-input
          placeholder="请输入手机号"
          clearable
          v-model.number="searchForm.mobile"
        ></el-input>
      </el-form-item>
      <el-form-item label="系统权限类型" prop="roleType">
        <el-select
          v-model="searchForm.roleType"
          filterable
          clearable
          placeholder="请选择"
        >
          <el-option
            :label="item.value"
            :value="item.key"
            v-for="item in roleTypeSelectList"
            :key="item.key"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" round @click="restSearch"
          >查询</el-button
        >
        <el-button round icon="Refresh" type="warning" @click="resetForm"
          >重置</el-button
        >
      </el-form-item>
    </el-form>
  </div>
  <!-- 表格 -->
  <div>
    <div class="principal-table">
      <div class="principal-left">
        <div class="principal-title">人员列表</div>
        <qu-table
          :custom="false"
          :showPage="true"
          :height="400"
          :tableData="principalList"
          :tableHeader="tableHeader"
          :pageProps="pageProps"
          @pageChange="pageChange"
          :rowButtons="[
            {
              enName: 'add',
              cnName: '选择负责人',
              className: '',
            },
          ]"
          @rowButtonClick="rowButtonClick"
        ></qu-table>
      </div>
      <div class="principal-right">
        <div class="principal-title">
          已选人员 ({{ selectWorkMember.length }})
        </div>
        <qu-table
          ref="selectWorkMemberRef"
          :custom="false"
          :showPage="false"
          showSelect
          :height="400"
          :tableData="selectWorkMember"
          :tableHeader="selectedTableHeader"
          :pageProps="pageProps"
          @pageChange="pageChange"
          @selectionChange="tableChange"
        ></qu-table>
      </div>
    </div>

    <span
      style="
        height: 30px;
        display: flex;
        justify-content: center;
        margin-top: 30px;
      "
    >
      <el-button style="width: 90px" type="warning" @click="cancel"
        >取消</el-button
      >
      <el-button style="width: 90px" type="primary" @click="submit"
        >确定</el-button
      >
    </span>
  </div>
</template>
<script setup>
import { ref, reactive, onMounted, nextTick, watch, onBeforeUpdate } from "vue";
import { userReportService } from "@/ApiService/taskCenterService";
import templateHooks from "@/Hooks/templateHooks.js";

const props = defineProps({
  districtId: [Number, String],
  selectedPersonnel: {
    type: Array,
    default: () => [],
  },
});
// 顶部搜索字段
const searchForm = reactive({
  name: "",
  mobile: "",
  approle: 5,
  roleType: "",
});
// 表格头数据
const tableHeader = [
  {
    enName: "name",
    cnName: "姓名",
    isTableShow: true,
  },
  {
    enName: "mobile",
    cnName: "手机号",
    isTableShow: true,
  },
  {
    enName: "roleType",
    cnName: "系统权限类型",
    isTableShow: true,
  },
];
// 已选表格头数据
const selectedTableHeader = [
  {
    enName: "name",
    cnName: "姓名",
    isTableShow: true,
  },
  {
    enName: "mobile",
    cnName: "手机号",
    isTableShow: true,
  },
];
// 账号角色类型下拉列表
const roleTypeSelectList = [
  {
    key: 0,
    value: "管理权限",
  },
  {
    key: 1,
    value: "普通权限",
  },
];
const principalList = ref([]);
const selectWorkMember = ref([]);
const submitList = ref([]);

const formRef = ref();
const selectWorkMemberRef = ref();

const $emits = defineEmits(["closePrincipalDialog"]);

onMounted(() => {
  if (props.selectedPersonnel?.length > 0) {
    props.selectedPersonnel.forEach((item, index) => {
      selectWorkMember.value.push(item);
    });
  }
  fetchData(props.districtId);
});
onBeforeUpdate(() => {
  nextTick(() => {
    setTimeout(() => {
      selectWorkMember.value.forEach((item, index) => {
        selectWorkMemberRef.value.toggleRowSelection(item, true);
      });
    }, 300);
  });
});
// 选择人员逻辑
const rowButtonClick = ({ row }) => {
  let { id, name, mobile } = row;
  const key = selectWorkMember.value.some((item) => item.mobile == row.mobile);
  if (key) {
    $message.error("已选该人员,请勿重复选择!");
    return;
  }
  selectWorkMember.value.push({ id, name, mobile });
  selectWorkMemberRef.value.toggleRowSelection(
    selectWorkMember.value[selectWorkMember.value.length - 1],
    true
  );
};
const tableChange = (val) => {
  submitList.value = val;
};
// 提交
const submit = () => {
  $emits("closePrincipalDialog", submitList.value);
};
// 取消
const cancel = () => {
  if (props.selectedPersonnel?.length > 0) {
    $emits("closePrincipalDialog", submitList.value);
    selectWorkMemberRef.value.clearSelection();
  } else {
    $emits("closePrincipalDialog", []);
  }
};

// 表格数据
const fetchData = (id) => {
  return new Promise(() => {
    const { page, rows } = pageProps;
    userReportService
      .userSelectList({
        rows,
        page,
        districtId: id || props.districtId,
        ...searchForm,
      })
      .then(async (res) => {
        if (res.code == 0) {
          principalList.value = res.data.rows;
          principalList.value.map((item) => {
            roleTypeSelectList.map((role) => {
              if (role.key == item.roleType) {
                item.roleType = role.value;
              }
            });
          });
          pageProps.records = res.data.records;
        }
      });
  });
};
// 重置
const resetForm = () => {
  formRef.value.resetFields();
  fetchData();
};
const { pageProps, restSearch, pageChange, $message } =
  templateHooks(fetchData);
</script>

<style lang="scss" scoped>
.principal-table {
  width: 100%;
  display: flex;
  box-sizing: border-box;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  margin-top: 20px;
  padding-bottom: 20px;
  .principal-title {
    margin-top: 10px;
    margin-bottom: 10px;
    font-weight: bold;
    font-size: 16px;
  }
  .principal-left {
    width: calc(100% - 35%);
  }
  .principal-right {
    width: 35%;
    margin-left: 20px;
  }
}
</style>
