<template>
  <div class="choose-task-people">
    <el-skeleton :rows="10" animated v-if="!isLoaded" :throttle="500" />
    <div class="main-container" v-if="isLoaded">
      <el-form :model="currentRow.data" ref="editFormRef" :rules="editFormRules" inline-message :inline="false">
        <div class="top-screen">
          <el-form :model="screenForm" ref="screenFormRef" inline>
            <el-form-item label="班组姓名" prop="workGroupName">
              <div class="screen-item">
                <el-input v-model="screenForm.workGroupName"></el-input>
              </div>
            </el-form-item>
            <el-form-item label="班组负责人" prop="principalUserName">
              <div class="screen-item">
                <el-input v-model="screenForm.principalUserName"></el-input>
              </div>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="search" size="small" @click="restSearch">查询</el-button>
              <el-button icon="Refresh" size="small" @click="clearScreen(screenFormRef)">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="main">
          <div class="main-left">
            <el-form-item label="班组列表"></el-form-item>
            <qu-table :tableData="tableData" v-model:tableHeader="tableHeader" :height="500" :rowButtons="[
              {
                enName: 'add',
                cnName: '选择班组',
                className: '',
              },
            ]" :pageProps="pageProps" @pageChange="pageChange" @sortChange="sortChange"
              @rowButtonClick="rowButtonClick" v-loading="tableLoading"></qu-table>
          </div>
          <div class="main-right">
            <el-form-item :label="'已选班组(' + selectUsersLength + ')'" prop="workMember"></el-form-item>
            <qu-table :tableData="selectWorkMember" v-model:tableHeader="selectTableHeader" :height="500"
              :showPage="false" showSelect v-loading="tableLoading" @selectionChange="chooseMember"
              ref="selectWorkMemberRef">
            </qu-table>
          </div>
        </div>
      </el-form>

      <div style="width: 100%; padding: 15px 0; clear: both; text-align: center">
        <el-button @click="$emits('close')">取消</el-button>
        <el-button type="primary" @click="onSubmit">提交</el-button>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, reactive, onMounted, computed, nextTick } from "vue";
import templateHooks from "@/Hooks/templateHooks";
import { pageService } from "@/ApiService/pageService.js";
import { dropdownService } from "@/ApiService/dropdownService.js";
import { deviceTaskService } from "@/ApiService/taskCenterService";
import { chooseTeamHead } from "@/Apis/chooseTeamHead";
const props = defineProps({
  defaultProps: {
    type: Object,
    default: {
      buttonId: "",
      planId: null,
    },
  },
  currentRow: {
    type: Object,
    default: () => { },
  },
  showChoosePeople: Boolean,
});
const selectUsersLength = computed(() => {
  return selectWorkMember.value.length;
});
const isLoaded = ref(true);
const tableLoading = ref(false);
const tableHeader = ref(chooseTeamHead);

const editFormRef = ref();

// 右侧已选班组表格表头
const selectTableHeader = ref([
  {
    enName: "workGroupName",
    cnName: "班组名称",
    isTableShow: true,
  },
  {
    enName: "principalUserName",
    cnName: "班组负责人",
    isTableShow: true,
  },
]);
// 设置计划班组表单规则
const editFormRules = {
  workMember: [
    { required: true, message: "请选择任务执行班组", trigger: "change" },
  ],
};
const selectWorkMemberRef = ref();
let selectWorkMember = ref([]);
const confirmWorkMembers = ref([]);
const $emits = defineEmits(["OK", "close"]);
// const workMember
// 数据定义 end
const buttonClick = (button) => {
  buttonsClickFun.data[button.enName]();
};
// 选择班组逻辑
const rowButtonClick = ({ row, $column }) => {
  const key = selectWorkMember.value.some(
    (item) => item.workGroupId == row.workGroupId
  );
  if (key) {
    $message.error("已选该班组");
    return;
  }
  selectWorkMember.value.push({ ...row, userId: row.id });
  selectWorkMemberRef.value.toggleRowSelection(
    selectWorkMember.value[selectWorkMember.value.length - 1],
    true
  );
  console.log("row", row);
  console.log("selectWorkMember", selectWorkMember.value);
};
// 监听右侧选中班组变化
const chooseMember = (selection) => {
  console.log("selection", selection);
  confirmWorkMembers.value = selection;
};

// 获取左侧班组列表
const fetchData = () => {
  const { page, rows, sord, sidx } = pageProps;
  deviceTaskService
    .getRoutinePlanWorkGroupList({
      page,
      rows,
      sord,
      sidx,
      districtId: props.currentRow.data.districtId,
      ...screenForm,
    })
    .then((res) => {
      if (res.code == 0) {
        tableData.value = res.data.rows;
        pageProps.records = res.data.records;
      } else {
        $message.error(res.err);
      }
    });
};
// 保存选中班组
const onSubmit = () => {
  console.log("确认提交");
  $emits("OK", { workMember: confirmWorkMembers.value, type: 2 });
};
// 获取右侧已选班组列表
const fetchMembers = () => {
  console.log("获取右侧已选班组列表");
  deviceTaskService
    .getPlanWorkGroupList({ planId: props.defaultProps.planId })
    .then((res) => {
      if (res.code == 0) {
        selectWorkMember.value = res.data;
        nextTick(() => {
          selectWorkMember.value.map((item) => {
            selectWorkMemberRef.value.toggleRowSelection(item, true);
          });
        });
      } else {
        $message.error(res.err);
      }
    });
};
const {
  $route,
  $router,
  $store,
  $message,
  $messageBox,
  $common,
  tableData,
  screenForm,
  screenFormRef,
  pageProps,
  buttonsClickFun,
  pageChange,
  sortChange,
  restSearch,
  clearScreen,
} = templateHooks(fetchData);
const selectItems = ref($common.selectItems(tableHeader.value));
// 函数定义 end
onMounted(() => {
  // 接收到父组件站点id 获取班组列表
  if (props.currentRow.data.districtId) {
    fetchData();
  }
  // 接收到父组件计划id 获取已选班组列表
  if (props.defaultProps.planId) {
    if (
      props.currentRow.data.workMember &&
      props.currentRow.data.workMember.length != 0 &&
      props.currentRow.data.userType == 2
    ) {
      selectWorkMember.value = [...props.currentRow.data.workMember];
      nextTick(() => {
        selectWorkMember.value.map((item) => {
          selectWorkMemberRef.value.toggleRowSelection(item, true);
        });
      });
    }
    // else {
    //   fetchMembers();
    // }
  } else {
    // 接收父组件选择任务执行班组
    if (
      props.currentRow.data.workMember &&
      props.currentRow.data.workMember.length != 0 &&
      props.currentRow.data.userType == 2
    ) {
      selectWorkMember.value = [...props.currentRow.data.workMember];
      nextTick(() => {
        selectWorkMember.value.map((item) => {
          selectWorkMemberRef.value.toggleRowSelection(item, true);
        });
      });
    }
  }
});
// 生命周期 end
</script>
<script>
export default {
  name: "choose-task-people",
};
</script>
<style lang="scss" scoped>
.main {
  width: 100%;

  .main-left {
    float: left;
    width: 60%;
  }

  .main-right {
    float: right;
    width: 38%;
  }
}
</style>
