<template>
  <view style="width: 100vw; overflow-x: hidden">
    <u-navbar title="项目经历"></u-navbar>
    <!-- 项目名称 -->
    <view class="item-line">
      <text class="line-label must"> 项目名称</text>
      <u-input :custom-style="inputStyle" type="text" input-align="right" :border="false" maxlength="20"
        v-model="formData.projectName" placeholder="请输入" />
    </view>
    <!-- 项目开始时间 -->
    <view class="item-line item-date" @click="dateStartShowFn">
      <text class="line-label must"> 项目开始时间</text>
      <u-input :custom-style="inputStyle" type="text" input-align="right" :border="false" v-model="formData.startTime"
        @click.native="dateStartShowFn" placeholder="请选择" disabled />
      <view class="img">
        <image style="width: 15rpx; height: 25rpx; margin-left: 30rpx" src="/static/common/img/row_right.png" />
      </view>
      <!-- 点击盒子 -->
      <view class="input-mask"></view>
    </view>
    <!-- 项目结束时间 -->
    <view class="item-line item-date" @click="dateEndShowFn">
      <text class="line-label must"> 项目结束时间</text>
      <u-input :custom-style="inputStyle" type="text" input-align="right" :border="false" v-model="formData.endTime"
        @click.native="dateEndShowFn" placeholder="请选择" disabled />
      <view class="img">
        <image style="width: 15rpx; height: 25rpx; margin-left: 30rpx" src="/static/common/img/row_right.png" />
      </view>
      <!-- 点击盒子 -->
      <view class="input-mask"></view>
    </view>
    <!-- 担任角色 -->
    <view class="item-line">
      <text class="line-label must"> 担任角色</text>
      <u-input :custom-style="inputStyle" type="text" input-align="right" :border="false" maxlength="20"
        v-model="formData.projectPosition" placeholder="请输入" />
    </view>
    <!-- 工作内容 -->
    <view class="item-text">
      <u-input type="textarea" height="200" maxlength="500" :border="false" v-model="formData.projectDesc"
        placeholder="责任描述：请输入内容,字数限制500字以内" />
    </view>
    <!-- 按钮 -->
    <view class="btn-box">
      <u-button style="width: 80%" shape="circle" type="primary" @click="addFn"
        v-if="queryParams.type === 'add'">提交</u-button>
      <template v-if="queryParams.type === 'edit'">
        <u-button style="width: 40%" shape="circle" type="error" @click="deleteFn">
          删除
        </u-button>
        <u-button style="width: 40%" shape="circle" type="primary" @click="editFn">
          保存
        </u-button>
      </template>
    </view>
    <!-- 开始日期 -->
    <u-picker v-model="dateStartShow" mode="time" :params="{
      year: true,
      month: true,
    }" @confirm="startChangeFn"></u-picker>
    <!-- 离职日期 -->
    <u-picker v-model="dateEndShow" mode="time" :params="{
      year: true,
      month: true,
    }" @confirm="endChangeFn"></u-picker>
    <u-top-tips ref="uTips" :navbar-height="50"></u-top-tips>
    <u-toast ref="uToast" />
  </view>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        projectName: "", //项目名称
        startTime: "", //2025-01
        endTime: "", //2025-02
        projectPosition: "", //职位
        projectDesc: "", //工作内容
        id: "",
      },
      inputStyle: {
        lineHeight: "90rpx",
        height: "90rpx",
        width: "400rpx",
      },
      dateStartShow: false,
      dateEndShow: false,
      queryParams: {
        type: "add",
      },
    };
  },
  onLoad(e) {
    Object.assign(this.queryParams, e);
    if (e.type === "edit") {
      let currentRow = JSON.parse(localStorage.getItem("workRow"));
      console.log(currentRow, "currentRow");
      Object.assign(this.formData, currentRow);
      this.formData.startTime = currentRow.startTime.slice(0, 7);
      this.formData.endTime = currentRow.endTime.slice(0, 7);
    }
  },
  methods: {
    // 打开起始日期
    dateStartShowFn() {
      this.dateStartShow = true;
    },
    // 起始日期确认结果
    startChangeFn(val) {
      console.log(val, "start");
      this.formData.startTime = val.year + "-" + val.month;
    },
    // 打开离职日期
    dateEndShowFn() {
      this.dateEndShow = true;
    },
    // 离职日期确认结果
    endChangeFn(val) {
      console.log(val, "end");
      this.formData.endTime = val.year + "-" + val.month;
    },
    // 删除
    async deleteFn() {
      uni.showModal({
        // title: "提示",
        content: `确定删除此项目经历？`,
        success: async (res) => {
          if (res.confirm) {
            const req = {
              id: this.formData.id,
            };
            const res = await this.$u.apiList.DelProjectInfoApi(req);
            console.log(res, "res--");
            /* uni.showToast({
              title: "删除成功",
              duration: 2000,
            }); */
            this.$refs.uToast.show({
              title: "删除成功",
              type: "success",
            });
            setTimeout(() => {
              /* uni.redirectTo({
                url: "/pages/my/personalResume/online?type=2",
              }); */
              uni.navigateBack({
                delta: 1, // 返回上一级页面
              });
            }, 1000);
          }
          if (res.cancel) {
            // console.log('用户点击取消');
          }
        },
      });
    },
    validate() {
      return new Promise((res, rej) => {
        if (!this.formData.projectName) {
          // this.$tips("项目名称不能为空", "error");
          this.$refs.uToast.show({
            title: "项目名称不能为空",
            type: "error",
          });
          rej(false);
          return;
        }
        if (!this.formData.startTime) {
          // this.$tips("项目开始时间不能为空", "error");
          this.$refs.uToast.show({
            title: "项目开始时间不能为空",
            type: "error",
          });
          rej(false);
          return;
        }
        if (!this.formData.endTime) {
          // this.$tips("项目结束时间不能为空", "error");
          this.$refs.uToast.show({
            title: "项目结束时间不能为空",
            type: "error",
          });
          rej(false);
          return;
        }
        if (!this.formData.projectPosition) {
          // this.$tips("担任角色不能为空", "error");
          this.$refs.uToast.show({
            title: "担任角色不能为空",
            type: "error",
          });
          rej(false);
          return;
        }
        // if (!this.formData.projectDesc) {
        //   this.$tips("工作内容不能为空", "error");
        //   rej(false);
        //   return;
        // }
        // 离职时间应该大于入职时间
        if (new Date(this.formData.startTime) > new Date(this.formData.endTime)) {
          // this.$tips("项目开始时间不应大于项目结束时间", "error");
          this.$refs.uToast.show({
            title: "项目开始时间不应大于项目结束时间",
            type: "error",
          });

          rej(false);
          return;
        }
        res(true);
      });
    },
    // 增加
    async addFn() {
      console.log("%c%s", "color:red", "发起请求");
      const result = await this.validate().catch((e) => e);
      console.log(result, "result--");
      if (result === false) {
        return;
      }
      const req = {
        projectName: this.formData.projectName,
        projectDesc: this.formData.projectDesc,
        projectPosition: this.formData.projectPosition,
        startTime: this.formData.startTime,
        endTime: this.formData.endTime,
        userId: this.vuex_user.id,
      };
      const res = await this.$u.apiList.AddProjectInfoApi(req);
      console.log(res, "res--");
      /* uni.showToast({
        title: "提交成功",
        duration: 2000,
      }); */
      this.$refs.uToast.show({
        title: "提交成功",
        type: "success",
      });
      setTimeout(() => {
        /* uni.redirectTo({
          url: "/pages/my/personalResume/online?type=2",
        }); */
        uni.navigateBack({
          delta: 1, // 返回上一级页面
        });
      }, 1000);
    },
    // 保存
    async editFn() {
      console.log("%c%s", "color:red", "发起请求");
      const result = await this.validate().catch((e) => e);
      console.log(result, "result--");
      if (result === false) {
        return;
      }
      const req = {
        projectName: this.formData.projectName,
        projectDesc: this.formData.projectDesc,
        startTime: this.formData.startTime,
        endTime: this.formData.endTime,
        projectPosition: this.formData.projectPosition,
        id: this.formData.id,
      };
      const res = await this.$u.apiList.UpdateProjectInfoApi(req);
      console.log(res, "res--");
      /* uni.showToast({
        title: "保存成功",
        duration: 2000,
      }); */
      this.$refs.uToast.show({
        title: "保存成功",
        type: "success",
      });
      setTimeout(() => {
        /* uni.redirectTo({
          url: "/pages/my/personalResume/online?type=2",
        }); */
        uni.navigateBack({
          delta: 1, // 返回上一级页面
        });
      }, 1000);
    },
  },
};
</script>

<style lang="scss" scoped>
// 必填的样式
.must {
  position: relative;

  &::before {
    content: "*";
    color: red;
    position: absolute;
    top: -10rpx;
    right: -17rpx;
    transform: scale(0.8);
    /* 相对于父元素的左上角定位 */
  }
}

// 单行样式
.item-line {
  text-align: left;
  padding-left: 30rpx;
  padding-right: 30rpx;
  font-size: 30rpx;
  line-height: 90rpx;
  height: 90rpx;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #f1f2f6;
  background-color: white;

  .line-label {
    // font-size: 30rpx;
    color: black;
  }

  .line-value {
    // font-weight: 700;
    color: #969696;
  }
}

// 返校日期
.item-date {
  padding-left: 30rpx;
  padding-right: 30rpx;
  font-size: 30rpx;
  line-height: 90rpx;
  height: 90rpx;
  display: flex;
  position: relative;
  background-color: white;

  .input-mask {
    position: absolute;
    width: 100%;
    height: 90rpx;
    // background-color: red;
  }

  .img {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 15rpx;
    // padding-right: 30rpx;
  }
}

.item-text {
  background-color: white;
  padding: 30rpx;
}

// 按钮
.btn-box {
  position: fixed;
  width: 100%;
  bottom: 0;
  height: 150rpx;
  border-top: 1px solid #f1f2f6;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: white;
}
</style>
