<template>
  <BasicLayout>
    <view class="p-15">
      <view v-if="education.xl.length > 0">
        <template v-for="(item, index) in education.xl" :key="index">
          <view class="po-re mb-15">
            <BasicForm
              v-model="item.value"
              :schema="schema"
              :formsProps="{ labelWidth: 100 }"
            />
            <view
              @click="deleteMemberFamily(index as number, item.value)"
              class="delete-icon"
            >
              <BasicIcon type="clear" size="30" />
            </view>
          </view>
        </template>
      </view>
      <view
        class="flex-row items-center justify-center pb-10 pt-5"
        style="border: 1px solid #e8e8e8"
        @click="addEducation"
      >
        <uni-icons type="plus" size="16" color="#447ADE"></uni-icons>
        <view class="ml-5 cor-447ADE">新增</view>
      </view>
    </view>
    <template #bottom>
      <view class="flex-row items-center pb-10 pt-5">
        <u-button
          text="上一步"
          class="ml-15 mr-7"
          :plain="true"
          @click="navigateBack"
        />
        <u-button
          text="下一步"
          class="mr-15 mr-7"
          type="primary"
          @click="submit"
        />
      </view>
    </template>
  </BasicLayout>
</template>

<script lang="ts" setup>
import { navigateBack, navigateTo } from "@/utils/uniapp";
import { cloneDeep, get, map } from "lodash";
import { zcxxFindPageApi } from "@/api/base/zcxxApi";
import { useUserStore } from "@/store/modules/user";
import { useDicStore } from "@/store/modules/dic";
import dayjs from "dayjs";
import { showToast, showLoading, hideLoading } from "@/utils/uniapp";
const { findByPid } = useDicStore();
const { getJs, setJs } = useUserStore();

const schema = reactive<FormsSchema[]>([
  {
    field: "zcdjId",
    label: "职称等级",
    component: "BasicPicker",
    componentProps: {
      api: findByPid,
      param: { pid: 836722710 },
      rangeKey: "dictionaryValue",
      savaKey: "dictionaryCode",
    },
  },
  {
    field: "zclbId",
    label: "职称类别",
    component: "BasicPicker",
    componentProps: {
      api: findByPid,
      param: { pid: 912140841 },
      rangeKey: "dictionaryValue",
      savaKey: "dictionaryCode",
    },
  },
  {
    field: "zczyId",
    label: "职称专业",
    component: "BasicInput",
    componentProps: {},
  },
  {
    field: "zcspjg",
    label: "职称审批机关",
    component: "BasicInput",
    componentProps: {},
  },
  {
    field: "zcbzwh",
    label: "职称批准文号",
    component: "BasicInput",
    componentProps: {},
  },
  {
    field: "zcpztime",
    label: "职称批准年月",
    component: "BasicDateTime",
    componentProps: {
      mode: "year-month",
      minDate: dayjs('1950-01-01').valueOf(),  // 转换为时间戳
      maxDate: dayjs().valueOf(),  // 当前年月
    },
  },
  {
    field: "zczsbh",
    label: "职称证书编号",
    component: "BasicInput",
    componentProps: {},
  },
  {
    field: "pydj",
    label: "聘用等级",
    component: "BasicPicker",
    componentProps: {
      api: findByPid,
      param: { pid: 1982857463 },
      rangeKey: "dictionaryValue",
      savaKey: "dictionaryCode",
    },
  },
  {
    field: "qqtime",
    label: "起聘时间",
    component: "BasicDateTime",
    componentProps: {
      mode: "year-month",
      minDate: dayjs('1950-01-01').valueOf(),  // 转换为时间戳
      maxDate: dayjs().valueOf(),  // 当前年月
    },
  },
  {
    field: "pywjh",
    label: "聘用文件号",
    component: "BasicInput",
    componentProps: {},
  },
  {
    field: "zczs",
    label: "上传职称证书",
    component: "BasicUpload",
    itemProps: {
      labelPosition: "top",
    },
    componentProps: {},
  }, {
    field: "rzwj",
    label: "上传任职文件",
    component: "BasicUpload",
    itemProps: {
      labelPosition: "top",
    },
    componentProps: {},
  },
  {
    field: "pywj",
    label: "上传聘用文件",
    component: "BasicUpload",
    itemProps: {
      labelPosition: "top",
    },
    componentProps: {},
  },
]);

const education = reactive<any>({
  xl: [{ value: {} }],
});

function addEducation() {
  education.xl.push({ value: {} });
}

function deleteMemberFamily(index: number, item: any) {
  const list = cloneDeep(education.xl);
  list.splice(index, 1);
  education.xl = list;
}

function submit() {
  showLoading({ title: "正在加载岗位情况信息..." });
  setJs({
    ...getJs,
    zcxxList: map(education.xl, (item) => {
      return item.value;
    }),
  });
  navigateTo("/pages/view/hr/teacherProfile/PositionInfo");
  hideLoading();
}

onMounted(async () => {
  if (!getJs.zcxxList || !getJs.zcxxList.length) {
    const res = await zcxxFindPageApi({
      jsId: getJs.id,
      page: 1,
      size: 100,
    });
    getJs.zcxxList = res.rows || [];
  }
  if (getJs.zcxxList && getJs.zcxxList.length > 0) {
    education.xl = map(getJs.zcxxList, (item) => {
      return { value: item };
    });
    
    // 显示数据加载完成提示
    showToast({
      title: `已加载 ${getJs.zcxxList.length} 条职称信息`,
      icon: "success",
      duration: 2000
    });
  } else {
    // 显示无数据提示
    showToast({
      title: "暂无职称信息，请添加",
      icon: "none",
      duration: 2000
    });
  } 
})

</script>
<style>
.delete-icon {
  position: absolute;
  right: -13px;
  top: -14px;
  z-index: 1;
}
</style>
