<template>
  <div class="user-manage">
    <div class="main-container">
      <div class="top-screen" ref="topScreenRef">
        <userManageScreen v-model:screenForm="screenForm" :selectItems="selectItems" @restSearch="restSearch"
          @clearScreen="clearScreen">
        </userManageScreen>
      </div>
      <div class="main-table">
        <el-skeleton :rows="10" v-if="!isLoaded" :throttle="500" />
        <qu-table :tableData="tableData" v-model:tableHeader="tableHeader" :height="tableHeight" :pageProps="pageProps"
          :rowButtons="rowButtons" @rowButtonClick="rowButtonClick" @pageChange="pageChange" @sortChange="sortChange"
          v-loading="tableLoading" v-if="isLoaded" :tableButtons="tableButtons" @buttonClick="buttonClick"></qu-table>
      </div>
      <div v-if="showEditForm">
        <el-dialog v-model="showEditForm" :title="currentRow.data.id ? '编辑' : '新建'" width="600px">
          <user-set-form :currentRow="currentRow" :selectItems="selectItems" v-model:showEditForm="showEditForm"
            @OK="fetchData"></user-set-form>
        </el-dialog>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "userManage",
};
</script>
<script setup>
import { ref, onMounted, reactive, watch, nextTick } from "vue";

import templateHooks from "@/Hooks/templateHooks";
import userManageScreen from "@/Components/userCenter/userManageScreenCom.vue";
import userSetForm from "@/Components/userCenter/userSetFormCom.vue";
import {
  userService,
  skillService,
  tagService,
} from "@/ApiService/userCenterService.ts";

const isLoaded = ref(false);
const tableLoading = ref(false);
const showEditForm = ref(false);
const testColor = ref("blue");
const tableHeight = ref(500);
const topScreenRef = ref();
// 数据定义 end
const buttonClick = (button) => {
  buttonsClickFun.data[button.enName]();
};
const rowButtonClick = ({ row, $column }) => {
  currentRow.data = {};
  for (let i in row) {
    currentRow.data[i] = row[i];
  }
  let serviceAreas = [];
  currentRow.data.serviceAreas.map((item) => {
    serviceAreas.push(item.gridIdAndLevel);
  });
  currentRow.data.serviceAreas = serviceAreas;
  const { onTime, offTime } = currentRow.data;
  console.log('onTime:', onTime, 'offTime:', offTime);
  if (onTime && offTime) {
    currentRow.data.onOffTime = [onTime, offTime];
  }
  buttonsClickFun.data[$column.enName]();
};
const fetchData = () => {
  const { page, rows, sord, sidx } = pageProps;
  tableLoading.value = false;
  if (!screenForm.districtId) {
    isLoaded.value = true;
    tableLoading.value = false;
    return;
  }
  const {
    districtId,
    name,
    mobile,
    roleType,
    approle,
    workStatus,
    workAtStatus,
    probationProtection,
    serviceAreas,
    serviceEvents,
    groups,
  } = screenForm;
  userService
    .pageList({
      page,
      rows,
      sord,
      sidx,
      districtId,
      name,
      mobile,
      roleType,
      approle,
      workStatus,
      workAtStatus,
      probationProtection,
      serviceAreas,
      serviceEvents,
      groups,
    })
    .then(
      (res) => {
        if (res.code == 0) {
          tableData.value = res.data.rows;
          pageProps.records = res.data.records;
        } else {
          $message.error(res.err);
        }
        isLoaded.value = true;
        tableLoading.value = false;
      },
      () => {
        isLoaded.value = true;
        tableLoading.value = false;
      }
    );
};

const {
  $route,
  $router,
  $store,
  screenForm,
  screenFormRef,
  selectItems,
  tableData,
  tableHeader,
  tableButtons,
  rowButtons,
  pageProps,
  buttonsClickFun,
  $common,
  $message,
  $messageBox,
  currentRow,
  pageChange,
  sortChange,
  clearScreen,
  restSearch,
} = templateHooks(fetchData);
// 函数定义 end
onMounted(() => {
  buttonsClickFun.data = {
    add: () => {
      for (let i in currentRow.data) {
        currentRow.data[i] = "";
      }
      showEditForm.value = true;
    },
    export: () => {
      userService.export(screenForm);
    },
    edit: () => {
      let serviceAreas = [];

      showEditForm.value = true;
    },
    delete: () => {
      $messageBox
        .confirm("此操作将永久删除该数据，是否继续？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
        .then(() => {
          userService
            .delete({
              districtId: currentRow.data.districtId,
              userId: currentRow.data.id,
            })
            .then((res) => {
              if (res.code == 0) {
                $message.success("删除成功");
                fetchData();
              } else {
                $message.error(res.err);
              }
            });
        });
    },
  };
});
watch(tableButtons, (val) => {
  if ($route.name == "userManage") {
    if (val && val.length != 0) {
      nextTick(() => {
        const windowHeight = document.body.clientHeight;
        tableHeight.value =
          windowHeight -
          topScreenRef.value.clientHeight -
          170;
      });
    }
  }
});
// 生命周期 end
</script>
