<template>
  <AppLayout title="工作经历" border back-gorund-color="#ffffff" :show-bg-image="false">
    <template #headerleft>
      <view class="btn mar_le20 button-click" @click="navBack">取消</view>
    </template>
    <template #headerright>
      <view class="btn mar_ri20 button-click blue" @click="confirm">确认</view>
    </template>
    <view class="content">
      <view class="content-input">
        <view class="input-titile">公司</view>
        <input class="input-con" v-model="fromValue.company" placeholder="请输入公司名称" />
      </view>
      <view class="content-input">
        <view class="input-titile">岗位</view>
        <input class="input-con" v-model="fromValue.position" placeholder="请输入岗位" />
      </view>
      <view class="content-input">
        <view class="input-titile">时间</view>
        <view class="flex-box">
          <view class="input-box btn-feel" @click="changestartTime">
            <input v-model="fromValue.startTime" class="input-con triangle" disabled placeholder="开始时间" />
            <image class="icon" src="@/static/icon/arrow-down.png" />
          </view>
          <view class="gap">-</view>
          <view class="input-box btn-feel" @click="changeendTime">
            <input v-model="fromValue.endTime" class="input-con triangle" disabled placeholder="至今" />
            <image class="icon" src="@/static/icon/arrow-down.png" />
          </view>
        </view>
      </view>
      <view class="content-input">
        <view class="input-titile">工作内容</view>
        <textarea class="text-area" placeholder="请输入工作内容" v-model="fromValue.duty"></textarea>
      </view>
    </view>
    <!-- 时间选择器组件 -->
    <DatePicker ref="datePicker" />
    <template #footer v-if="fromValue.id">
      <view class="footer-container">
        <view class="footer-button btn-feel" @click="delCurrent">删除该工作经历</view>
      </view>
    </template>
  </AppLayout>
</template>

<script setup>
import { reactive, inject, watch, ref, onMounted, computed } from "vue";
import { onLoad, onShow } from "@dcloudio/uni-app";
const { $api, navTo, navBack } = inject("globalFunction");
import { storeToRefs } from "pinia";
import useUserStore from "@/stores/useUserStore";
import useDictStore from "@/stores/useDictStore";
import DatePicker from "@/components/DatePicker/DatePicker.vue";
const { userInfo } = storeToRefs(useUserStore());
const { getUserResume } = useUserStore();
const { dictLabel, oneDictData } = useDictStore();

// 初始化数据
const fromValue = reactive({
  position: "",
  company: "",
  startTime: "",
  endTime: "",
  duty: "",
  id: undefined,
});

// 获取时间选择器组件的引用
const datePicker = ref();

onLoad((e) => {
  initLoad(e?.id);
});

const confirm = async () => {
  // 验证必填字段
  if (!fromValue.company) {
    return $api.msg("请输入公司名称");
  }
  if (!fromValue.position) {
    return $api.msg("请输入岗位");
  }
  if (!fromValue.startTime) {
    return $api.msg("请选择开始时间");
  }
  // 验证时间逻辑：结束时间不能早于开始时间
  if (fromValue.endTime && new Date(fromValue.endTime) < new Date(fromValue.startTime)) {
    return $api.msg("结束时间不能早于开始时间");
  }
  let res;
  try {
    if (fromValue.id) {
      res = await $api.createRequest("/app/user/experience/edit", fromValue, "post");
    } else {
      res = await $api.createRequest("/app/user/experience/save", fromValue, "post");
    }
    $api.msg("保存成功");
    getUserResume().then(() => {
      navBack();
    });
  } catch (error) {
    $api.msg("保存失败");
  }
};

function delCurrent() {
  uni.showModal({
    title: "提示",
    content: "确认要删除此条工作经历吗?",
    showCancel: true,
    success: async ({ confirm, cancel }) => {
      if (confirm) {
        await $api.createRequest("/app/user/experience/delete", { id: fromValue.id }, "post");
        $api.msg("删除成功");
        getUserResume().then(() => {
          navBack();
        });
      }
    },
  });
}

function initLoad(id) {
  if (!id) return;
  $api
    .createRequest(`/app/user/experience/getSingle/${id}`, {}, "get")
    .then((res) => {
      Object.assign(fromValue, res.data);
    })
    .catch((err) => {
      console.error("获取工作经历失败:", err);
    });
}

// 选择开始时间
const changestartTime = () => {
  console.log(1);
  datePicker.value.open({
    title: "选择开始时间",
    defaultDate: fromValue.startTime,
    success: (selectedDate) => {
      fromValue.startTime = selectedDate;
    },
  });
};

// 选择结束时间
const changeendTime = () => {
  datePicker.value.open({
    title: "选择结束时间",
    defaultDate: fromValue.endTime,
    success: (selectedDate) => {
      fromValue.endTime = selectedDate;
      // 如果结束时间早于新的开始时间，清空结束时间
      if (fromValue.startTime && new Date(fromValue.startTime) > new Date(selectedDate)) {
        fromValue.endTime = "";
        $api.msg("结束时间不能小于开始时间!");
      }
    },
  });
};
</script>

<style lang="scss" scoped>
.btn.blue {
  color: #1677ff;
}
.content {
  padding: 28rpx;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: calc(100% - 120rpx);
}

.flex-box {
  display: flex;
  align-items: center;
  .gap {
    font-size: 40rpx;
    font-weight: bold;
    flex: 0.25;
    text-align: center;
  }
  .icon {
    width: 75rpx;
    height: 50rpx;
  }
  .input-box {
    flex: 0.375;
    display: flex;
    align-items: center;
  }
}

.content-input {
  margin-bottom: 48rpx;
  padding-bottom: 20rpx;
  border-bottom: 2rpx solid #ebebeb;
  &:nth-last-of-type(1) {
    border-bottom: none;
  }
  .input-titile {
    font-weight: 400;
    font-size: 28rpx;
    color: #6a6a6a;
    margin-bottom: 10rpx;
  }
  .input-con {
    font-weight: 400;
    font-size: 32rpx;
    color: #333333;
    line-height: 80rpx;
    height: 80rpx;
    position: relative;
  }
  .triangle {
    pointer-events: none;
  }
  .text-area {
    width: 100%;
    height: 700rpx;
    background: #f5f5f5;
    padding: 20rpx;
    box-sizing: border-box;
  }
}

.footer-container {
  background: #ffffff;
  box-shadow: 0rpx -4rpx 24rpx 0rpx rgba(11, 44, 112, 0.12);
  border-radius: 0rpx 0rpx 0rpx 0rpx;
  padding: 40rpx 28rpx 20rpx 28rpx;
  .footer-button {
    width: 100%;
    height: 90rpx;
    background: #f93a4a;
    border-radius: 8rpx;
    color: #ffffff;
    line-height: 90rpx;
    text-align: center;
  }
}
</style>
