<template>
  <AppLayout title="就业服务程序">
    <!-- 扫码登录-->
    <view class="alipay-login-container" v-if="isMachineEnv">
      <view class="login-scan-area">
        <view class="login-title">支付宝扫码登录</view>
        <view class="qrcode-container">
          <view class="qrcode-wrapper" @click="refreshQrcode">
            <view class="qrcode-border">
              <view class="qrcode-content">
                <view class="qrcode-pattern">
                  <image class="qrcode-img" src="@/static/icon/qrcode-example.png" mode="scaleToFill" />
                  <view class="qrcode-corner top-left"></view>
                  <view class="qrcode-corner top-right"></view>
                  <view class="qrcode-corner bottom-left"></view>
                  <view class="scan-line" :style="{ top: scanLineTop + 'rpx' }"></view>
                </view>

                <!-- 二维码过期提示 -->
                <view v-if="qrcodeExpired" class="expired-overlay">
                  <text class="expired-text">二维码已过期</text>
                  <view class="refresh-btn" @click.stop="refreshQrcode">
                    <text class="refresh-text">点击刷新</text>
                  </view>
                </view>
              </view>
            </view>

            <view class="qrcode-tips">
              <text class="tips-text">使用支付宝扫一扫登录</text>
              <text class="tips-subtext">扫一扫后点击确认完成登录</text>
            </view>
          </view>
        </view>
        <!-- 刷新提示 -->
        <view class="refresh-tips" v-if="countdown > 0">
          <view class="countdown-text"><span class="countdown-num">{{ countdown }}</span> 秒后二维码过期</view>
        </view>
      </view>
      <!-- 扫码成功提示 -->
      <view v-if="showSuccessTip" class="success-tip">
        <view class="success-content">
          <view class="success-icon">✓</view>
          <text class="success-text">登录成功！</text>
        </view>
      </view>
    </view>

    <!-- 正常登录-->
    <tabcontrolVue v-else :current="tabCurrent">
      <template v-slot:tab0>
        <view class="login-content">
          <image class="logo" src="@/static/logo.png"></image>
          <view class="logo-title">就业</view>
        </view>
        <view class="btns">
          <button class="wxlogin" @click="loginTest">内测登录</button>
          <view class="wxaddress">青岛市公共就业和人才服务中心</view>
        </view>
      </template>
      <template v-slot:tab1>
        <view class="content-one">
          <view>
            <view class="content-title">
              <view class="title-lf">
                <view class="lf-h1">请您完善求职名片</view>
                <view class="lf-text">个人信息仅用于推送优质内容</view>
              </view>
              <view class="title-ri">
                <text style="color: #256bfa">1</text>
                <text>/2</text>
              </view>
            </view>
            <view class="content-input" @click="changeExperience">
              <view class="input-titile">工作经验</view>
              <input
                class="input-con"
                v-model="state.experienceText"
                disabled
                placeholder="请选择您的工作经验"
              />
            </view>
            <view class="content-sex">
              <view class="sex-titile">求职区域</view>
              <view class="sext-ri">
                <view
                  class="sext-box"
                  :class="{ 'sext-boxactive': fromValue.sex === 0 }"
                  @click="changeSex(0)"
                >
                  男
                </view>
                <view
                  class="sext-box"
                  :class="{ 'sext-boxactive': fromValue.sex === 1 }"
                  @click="changeSex(1)"
                >
                  女
                </view>
              </view>
            </view>
            <view class="content-input" @click="changeEducation">
              <view class="input-titile">学历</view>
              <input class="input-con" v-model="state.educationText" disabled placeholder="本科" />
            </view>
          </view>
          <view class="next-btn" @tap="nextStep">下一步</view>
        </view>
      </template>
      <template v-slot:tab2>
        <view class="content-one">
          <view>
            <view class="content-title">
              <view class="title-lf">
                <view class="lf-h1">请您完善求职名片</view>
                <view class="lf-text">个人信息仅用于推送优质内容</view>
              </view>
              <view class="title-ri">
                <text style="color: #256bfa">2</text>
                <text>/2</text>
              </view>
            </view>
            <view class="content-input" @click="changeArea">
              <view class="input-titile">求职区域</view>
              <input class="input-con" v-model="state.areaText" disabled placeholder="请选择您的求职区域" />
            </view>
            <view class="content-input" @click="changeJobs">
              <view class="input-titile">求职岗位</view>
              <input
                class="input-con"
                disabled
                v-if="!state.jobsText.length"
                placeholder="请选择您的求职岗位"
              />
              <view class="input-nx" @click="changeJobs" v-else>
                <view class="nx-item" v-for="item in state.jobsText">{{ item }}</view>
              </view>
            </view>
            <view class="content-input" @click="changeSalay">
              <view class="input-titile">期望薪资</view>
              <input class="input-con" v-model="state.salayText" disabled placeholder="请选择您的期望薪资" />
            </view>
          </view>
          <view class="next-btn" @tap="complete">开启求职之旅</view>
        </view>
      </template>
    </tabcontrolVue>
    <SelectJobs ref="selectJobsModel"></SelectJobs>
    <!-- 后门 -->
    <view class="backdoor" @click="loginbackdoor">
      <my-icons type="gift-filled" size="60"></my-icons>
    </view>
  </AppLayout>
</template>

<script setup>
import { storeToRefs } from 'pinia';
import tabcontrolVue from './components/tabcontrol.vue';
import SelectJobs from '@/components/selectJobs/selectJobs.vue';
import { reactive, inject, watch, ref, onMounted, onUnmounted } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
import useUserStore from '@/stores/useUserStore';
import useDictStore from '@/stores/useDictStore';
const { $api, navTo } = inject('globalFunction');
const { loginSetToken, getUserResume } = useUserStore();
const { isMachineEnv } = storeToRefs(useUserStore());
const { getDictSelectOption, oneDictData } = useDictStore();
const openSelectPopup = inject('openSelectPopup');
// status
const selectJobsModel = ref();
const tabCurrent = ref(1);
const salay = [2, 5, 10, 15, 20, 25, 30, 50, 80, 100];
const state = reactive({
  station: [],
  stationCateLog: 1,
  lfsalay: [2, 5, 10, 15, 20, 25, 30, 50],
  risalay: JSON.parse(JSON.stringify(salay)),
  areaText: '',
  educationText: '',
  experienceText: '',
  salayText: '',
  jobsText: [],
});
const fromValue = reactive({
  sex: 1,
  education: '4',
  salaryMin: 2000,
  salaryMax: 2000,
  area: 0,
  jobTitleId: '',
  experience: '1',
});

// 扫码登录相关状态
const qrcodeExpired = ref(false);
const scanLineTop = ref(0);
const countdown = ref(0);
let scanInterval = null;
let countdownTimer = null;
// 登录成功提示
const showSuccessTip = ref(false);

onLoad((parmas) => {
  getTreeselect();
  if(!isMachineEnv.value) $api.msg('请完善微简历');
});

onMounted(() => {
  startScanAnimation();
  resetCountdown();
  // 模拟扫码成功
  setTimeout(() => {
    //   showSuccessTip.value=true
  }, 5000);
});
onUnmounted(() => {
  showSuccessTip.value = false;
  stopScanAnimation();
  clearInterval(countdownTimer);
});

// 刷新二维码
const refreshQrcode = () => {
  qrcodeExpired.value = false;
  resetCountdown();
  startScanAnimation();
  // TODO
};

// 重置倒计时
const resetCountdown = () => {
  countdown.value = 60;
  clearInterval(countdownTimer);

  countdownTimer = setInterval(() => {
    if (countdown.value > 0) {
      countdown.value--;
    } else {
      qrcodeExpired.value = true;
      clearInterval(countdownTimer);
      stopScanAnimation()
    }
  }, 1000);
};

// 开始扫描动画
const startScanAnimation = () => {
  clearInterval(scanInterval);

  scanInterval = setInterval(() => {
    scanLineTop.value = (scanLineTop.value + 2) % 300;
  }, 30);
};

// 停止扫描动画
const stopScanAnimation = () => {
  clearInterval(scanInterval);
};

function changeSex(sex) {
  fromValue.sex = sex;
}
function changeExperience() {
  openSelectPopup({
    title: '工作经验',
    maskClick: true,
    data: [oneDictData('experience')],
    success: (_, [value]) => {
      fromValue.experience = value.value;
      state.experienceText = value.label;
    },
    change(_, [value]) {
      // this.setColunm(1, [123, 123]);
      console.log(this);
    },
  });
}

function changeEducation() {
  openSelectPopup({
    title: '学历',
    maskClick: true,
    data: [oneDictData('education')],
    success: (_, [value]) => {
      fromValue.area = value.value;
      state.educationText = value.label;
    },
  });
}

function changeArea() {
  openSelectPopup({
    title: '区域',
    maskClick: true,
    data: [oneDictData('area')],
    success: (_, [value]) => {
      fromValue.area = value.value;
      state.areaText = '青岛市-' + value.label;
    },
  });
}

function changeSalay() {
  let leftIndex = 0;
  openSelectPopup({
    title: '薪资',
    maskClick: true,
    data: [state.lfsalay, state.risalay],
    unit: 'k',
    success: (_, [min, max]) => {
      fromValue.salaryMin = min.value * 1000;
      fromValue.salaryMax = max.value * 1000;
      state.salayText = `${fromValue.salaryMin}-${fromValue.salaryMax}`;
    },
    change(e) {
      const salayData = e.detail.value;
      if (leftIndex !== salayData[0]) {
        const copyri = JSON.parse(JSON.stringify(salay));
        const [lf, ri] = e.detail.value;
        const risalay = copyri.slice(lf, copyri.length);
        this.setColunm(1, risalay);
        leftIndex = salayData[0];
      }
    },
  });
}

function changeJobs() {
  selectJobsModel.value?.open({
    title: '添加岗位',
    success: (ids, labels) => {
      fromValue.jobTitleId = ids;
      state.jobsText = labels.split(',');
    },
  });
}

function nextStep() {
  tabCurrent.value += 1;
}

// 获取职位
function getTreeselect() {
  const LoadCache = (resData) => {
    state.station = resData.data;
  };
  $api.createRequestWithCache('/app/common/jobTitle/treeselect', {}, 'GET', false, LoadCache).then(LoadCache);
}

function loginbackdoor() {
  $api.createRequest('/app/mock/login', {}, 'post').then((resData) => {
    $api.msg('模拟帐号密码测试登录成功');
    loginSetToken(resData.token).then((resume) => {
      if (resume.data.jobTitleId) {
        // 设置推荐列表，每次退出登录都需要更新
        useUserStore().initSeesionId();
        uni.reLaunch({
          url: '/pages/index/index',
        });
      } else {
        nextStep();
      }
    });
  });
}

// 登录
function loginTest() {
  // uni.share({
  //     provider: 'weixin',
  //     scene: 'WXSceneSession',
  //     type: 2,
  //     imageUrl: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni@2x.png',
  //     success: function (res) {
  //         console.log('success:' + JSON.stringify(res));
  //     },
  //     fail: function (err) {
  //         console.log('fail:' + JSON.stringify(err));
  //     },
  // });
  const params = {
    username: 'test',
    password: 'test',
  };
  $api.createRequest('/app/login', params, 'post').then((resData) => {
    $api.msg('模拟帐号密码测试登录成功， 测试环境使用模拟定位');
    loginSetToken(resData.token).then((resume) => {
      if (resume.data.jobTitleId) {
        // 设置推荐列表，每次退出登录都需要更新
        useUserStore().initSeesionId();
        uni.reLaunch({
          url: '/pages/index/index',
        });
      } else {
        nextStep();
      }
    });
  });
}

function complete() {
  $api.createRequest('/app/user/resume', fromValue, 'post').then((resData) => {
    $api.msg('完成');
    getUserResume();
    uni.reLaunch({
      url: '/pages/index/index',
    });
  });
}
</script>

<style lang="scss" scoped>
.alipay-login-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* 扫码登录区域样式 */
.login-scan-area {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 40rpx;
}

.login-title {
  font-size: 36rpx;
  font-weight: 600;
  color: #1677ff;
  margin-bottom: 40rpx;
  text-align: center;
}

.qrcode-container {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 40rpx;
}

.qrcode-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.qrcode-border {
  width: 400rpx;
  height: 400rpx;
  background-color: #fff;
  border-radius: 20rpx;
  padding: 20rpx;
  box-shadow: 0 8rpx 30rpx rgba(22, 119, 255, 0.1);
  margin-bottom: 30rpx;
  position: relative;
}

.qrcode-content {
  width: 100%;
  height: 100%;
  background-color: #f8f8f8;
  border-radius: 10rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.qrcode-pattern {
  width: 300rpx;
  height: 300rpx;
  background-color: #fff;
  position: relative;
}
.qrcode-img{
    width: 100%;
    height:100%;
}

.qrcode-corner {
  position: absolute;
  width: 60rpx;
  height: 60rpx;
  border: 6rpx solid #1677ff;

  &.top-left {
    top: 0;
    left: 0;
    border-right: none;
    border-bottom: none;
    border-radius: 10rpx 0 0 0;
  }

  &.top-right {
    top: 0;
    right: 0;
    border-left: none;
    border-bottom: none;
    border-radius: 0 10rpx 0 0;
  }

  &.bottom-left {
    bottom: 0;
    left: 0;
    border-right: none;
    border-top: none;
    border-radius: 0 0 0 10rpx;
  }
}

.scan-line {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 6rpx;
  background: linear-gradient(90deg, transparent, #1677ff, transparent);
  z-index: 10;
}

.expired-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  border-radius: 10rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 20;
}

.expired-text {
  font-size: 32rpx;
  color: #fff;
  margin-bottom: 30rpx;
}

.refresh-btn {
  padding: 16rpx 40rpx;
  background-color: #1677ff;
  border-radius: 50rpx;
}

.refresh-text {
  font-size: 28rpx;
  color: #fff;
}

.qrcode-tips {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.tips-text {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 10rpx;
}

.tips-subtext {
  font-size: 24rpx;
  color: #666;
}

.refresh-tips {
  margin-bottom: 40rpx;
}

.countdown-text {
  font-size: 24rpx;
  color: #999;
  display: flex;
  align-items: center;
}
.countdown-num{
    margin-right: 5rpx;
    color: #1677ff;
    font-size: 30rpx;
}

.switch-method {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx 0;
  border-top: 1rpx solid #f0f0f0;
}

.switch-text {
  font-size: 28rpx;
  color: #666;
}

.switch-btn {
  display: flex;
  align-items: center;
}

.btn-text {
  font-size: 28rpx;
  color: #1677ff;
  margin-right: 10rpx;
}

.icon-arrow {
  font-size: 28rpx;
  color: #1677ff;
}

/* 账号密码登录区域样式 */
.login-password-area {
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 0 40rpx;
}

.password-header {
  display: flex;
  align-items: center;
  margin-bottom: 60rpx;
}

.back-btn {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20rpx;
}

.icon-back {
  font-size: 36rpx;
  color: #333;
}

.login-form {
  width: 100%;
}

.form-item {
  margin-bottom: 40rpx;
  position: relative;
}

.item-label {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 20rpx;
}

.item-input {
  width: 100%;
  height: 80rpx;
  background-color: #f8f8f8;
  border-radius: 10rpx;
  padding: 0 24rpx;
  font-size: 28rpx;
  color: #333;
}

.input-placeholder {
  color: #999;
  font-size: 28rpx;
}

.forget-password {
  position: absolute;
  right: 0;
  top: 0;
  font-size: 26rpx;
  color: #1677ff;
}

.login-btn {
  width: 100%;
  height: 90rpx;
  background-color: #1677ff;
  border-radius: 50rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 60rpx;

  &.disabled {
    background-color: #a0cfff;
  }
}

.login-btn-text {
  font-size: 32rpx;
  color: #fff;
  font-weight: 500;
}

.agreement {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 40rpx;
  flex-wrap: wrap;
}

.agreement-checkbox {
  margin-right: 10rpx;
}

.checkbox-icon {
  width: 32rpx;
  height: 32rpx;
  border-radius: 6rpx;
  border: 2rpx solid #ddd;
  display: flex;
  align-items: center;
  justify-content: center;

  &.checked {
    background-color: #1677ff;
    border-color: #1677ff;
  }
}

.checkmark {
  font-size: 24rpx;
  color: #fff;
}

.agreement-text {
  font-size: 24rpx;
  color: #666;
  margin-right: 6rpx;
}

.agreement-link {
  font-size: 24rpx;
  color: #1677ff;
  margin-right: 6rpx;
}

.other-login {
  margin-top: 80rpx;
}

.other-title {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 50rpx;
}

.title-line {
  flex: 1;
  height: 1rpx;
  background-color: #eee;
}

.title-text {
  font-size: 24rpx;
  color: #999;
  margin: 0 20rpx;
}

.login-methods {
  display: flex;
  justify-content: center;
  gap: 100rpx;
}

.method-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.method-icon {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40rpx;
  color: #fff;
  margin-bottom: 20rpx;

  &.scan-icon {
    background-color: #1677ff;
  }

  &.sms-icon {
    background-color: #52c41a;
  }
}

.method-text {
  font-size: 24rpx;
  color: #666;
}

/* 登录成功提示 */
.success-tip {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.success-content {
  background-color: #fff;
  border-radius: 20rpx;
  padding: 60rpx 80rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.success-icon {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  background-color: #52c41a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 60rpx;
  color: #fff;
  margin-bottom: 30rpx;
}

.success-text {
  font-size: 32rpx;
  color: #333;
}
</style>

<style lang="stylus" scoped>
.backdoor{
    position: fixed;
    left: 24rpx;
    top: 10rpx;
}
.input-nx
    position: relative
    border-bottom: 2rpx solid #EBEBEB
    padding-bottom: 30rpx
    display: flex
    flex-wrap: wrap
    .nx-item
        margin: 12rpx 12rpx 0 0;
        padding: 12rpx 25rpx;
        border-radius: 12rpx 12rpx 12rpx 12rpx;
        border: 2rpx solid #E8EAEE;
.nx-item::before
    position: absolute;
    right: 20rpx;
    top: 60rpx;
    content: '';
    width: 4rpx;
    height: 18rpx;
    border-radius: 2rpx
    background: #697279;
    transform: translate(0, -50%) rotate(-45deg) ;
.nx-item::after
    position: absolute;
    right: 20rpx;
    top: 61rpx;
    content: '';
    width: 4rpx;
    height: 18rpx;
    border-radius: 2rpx
    background: #697279;
    transform: rotate(45deg)
.container
    // background: linear-gradient(#4778EC, #002979);
    width: 100%;
    height: calc(100vh - var(--window-top) - var(--status-bar-height) - var(--window-bottom));
    position: fixed;
    // background: linear-gradient( 180deg, #1677FF 0%, rgba(22,119,255,0) 54%, rgba(22,119,255,0) 100%);
    // background: url('@/static/icon/background2.png') 0 0 no-repeat;
    background-size: 100% 728rpx;
    display: flex;
    flex-direction: column
    .container-hader
        height: 88rpx;
        text-align: center;
        line-height: 88rpx;
        color: #000000;
        font-weight: bold
        font-size: 32rpx

.login-content
    position: absolute;
    left: 50%;
    top: 40%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: flex-end;
    flex-wrap: nowrap;
    .logo
        width: 266rpx;
        height: 182rpx;
    .logo-title
        font-size: 88rpx;
        color: #22c984;
        width: 180rpx;
.btns
    position: absolute;
    top: 70%;
    left: 50%;
    transform: translate(-50%, 0)
    .wxlogin
        width: 562rpx;
        height: 140rpx;
        border-radius: 70rpx;
        background-color: #13C57C;
        color: #FFFFFF;
        text-align: center;
        line-height: 140rpx;
        font-size: 70rpx;
    .wxaddress
        color: #BBBBBB;
        margin-top: 70rpx;
        text-align: center;
.content-one
    padding: 60rpx 28rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between
    height: calc(100% - 120rpx)
    .content-title
        display: flex
        justify-content: space-between;
        align-items: center
        margin-bottom: 70rpx
        .title-lf
            font-size: 44rpx;
            color: #000000;
            font-weight: 600;
            .lf-text
                font-weight: 400;
                font-size: 28rpx;
                color: #6C7282;
        .title-ri
            font-size: 36rpx;
            color: #000000;
            font-weight: 600;
    .content-input
        margin-bottom: 52rpx
        .input-titile
            font-weight: 400;
            font-size: 28rpx;
            color: #6A6A6A;
        .input-con
            pointer-events: none;
            font-weight: 400;
            font-size: 32rpx;
            color: #333333;
            line-height: 80rpx;
            height: 80rpx;
            border-bottom: 2rpx solid #EBEBEB
            position: relative;
        .input-con::before
            position: absolute;
            right: 20rpx;
            top: calc(50% - 2rpx);
            content: '';
            width: 4rpx;
            height: 18rpx;
            border-radius: 2rpx
            background: #697279;
            transform: translate(0, -50%) rotate(-45deg) ;
        .input-con::after
            position: absolute;
            right: 20rpx;
            top: 50%;
            content: '';
            width: 4rpx;
            height: 18rpx;
            border-radius: 2rpx
            background: #697279;
            transform: rotate(45deg)
    .content-sex
        height: 110rpx;
        display: flex
        justify-content: space-between;
        align-items: flex-start;
        border-bottom: 2rpx solid #EBEBEB
        margin-bottom: 52rpx
        .sex-titile
            line-height: 80rpx;
        .sext-ri
            display: flex
            align-items: center;
            .sext-box
                height: 76rpx;
                width: 152rpx;
                text-align: center;
                line-height: 80rpx;
                border-radius: 12rpx 12rpx 12rpx 12rpx
                border: 2rpx solid #E8EAEE;
                margin-left: 28rpx
                font-weight: 400;
                font-size: 28rpx;
            .sext-boxactive
                color: #256BFA
                background: rgba(37,107,250,0.1);
                border: 2rpx solid #256BFA;
    .next-btn
        width: 100%;
        height: 90rpx;
        background: #256BFA;
        border-radius: 12rpx 12rpx 12rpx 12rpx;
        font-weight: 500;
        font-size: 32rpx;
        color: #FFFFFF;
        text-align: center;
        line-height: 90rpx
</style>
