<template>
  <view class="home">
    <uv-navbar title="营销行为信息化管控系统" fixed bg-color="rgba(0,0,0,0)">
      <template v-slot:left> </template>
    </uv-navbar>
    <view class="home-bg" />
    <template v-if="currrRole === 0">
      <view class="home-data">
        <view class="top">
          <view class="t-l">
            <view class="l-title">众包广场</view>
            <view class="l-desc">在众包广场领取执行包</view>
          </view>
          <view class="t-r" @click="getPages">去领包 ></view>
        </view>
        <view class="content">
          <view class="cont-item itemA">
            <view>我的执行包</view>
            <view @click="goHistory(1)">领包记录 >>></view>
          </view>
          <view class="cont-item itemB" @click="goHistory(2)">
            <view :class="loginStore.isLogin ? 'is-login' : ''">{{
              loginStore.isLogin ? total.onTheWay : '-'
            }}</view>
            <view>进行中</view>
          </view>
          <view class="cont-item itemB" @click="goHistory(3)">
            <view :class="loginStore.isLogin ? 'is-login' : ''">{{
              loginStore.isLogin ? total.waitApprove : '-'
            }}</view>
            <view>待审批</view>
          </view>
        </view>
      </view>
      <view class="home-notice">
        <uv-notice-bar
          bgColor="#6eb657"
          color="#fff"
          text="执行包即将完成，请不要做积分较高的执行，避免浪费"
        />
      </view>
      <view class="home-content">
        <view class="title">服务实施</view>

        <view class="task-page">
          <view
            class="tast-item"
            v-for="item in taskList"
            @click="taskListClick(item)"
            :key="item.backgroundImage"
            :style="{
              backgroundImage: 'url(' + item.backgroundImage + ')'
            }"
          >
          </view>
        </view>
      </view>
    </template>
    <template v-if="currrRole === 1">
      <view class="home-data" @click="goStatistics">
        <view class="top">
          <view class="t-l">
            <view class="l-title">数据统计</view>
          </view>
        </view>
        <view class="content">
          <view class="cont-item itemA">
            <view>数据统计模块</view>
          </view>
        </view>
      </view>

      <view class="home-content">
        <view class="title">服务实施</view>
        <view class="task-page">
          <template v-for="item in taskListAdmin" :key="item.backgroundImage">
            <view
              v-if="showPage(item.id)"
              class="tast-item"
              @click="taskListClick(item)"
              :style="{
                backgroundImage: 'url(' + item.backgroundImage + ')'
              }"
            >
            </view>
          </template>
        </view>
      </view>
    </template>
    <Tabbar />
    <!-- 廉洁协议 -->
    <uv-popup ref="popupRef" mode="bottom" :close-on-click-overlay="false" round="10">
      <view class="agreement-content">
        <view class="title">
          <text>廉洁从业承诺书</text>
          <uv-icon name="close" color="#000" size="24" @click="closePopup"></uv-icon>
        </view>
        <scroll-view class="honest-content" :scroll-y="true" @scrolltolower="scrolltolower">
          <view class="p-indent mt20"
            >本人承诺，在开展市场服务活动中做到廉洁自律，自觉抵制和预防商业贿赂，防止发生各种违法违纪行为。具体承诺如下：</view
          >
          <view class="p-indent mt20"
            >一、自觉遵守反商业贿赂行为的法律法规，加强法律、纪律和职业道德教育，做到廉洁自律，做到自重、自省、自警、自励。</view
          >
          <view class="p-indent mt20"
            >二、不以任何理由向市场服务采购方、相关单位及其工作人员赠送各种名义的任何回扣、礼金、有价证券、支付凭证或其他贵重物品等。</view
          >
          <view class="p-indent mt20"
            >三、不以任何理由报销应由市场服务采购方和相关单位及其工作人员支付的费用。</view
          >
          <view class="p-indent mt20"
            >四、不以任何考察名义安排市场服务采购方、相关单位及其工作人员出国（境）、旅游。</view
          >
          <view class="p-indent mt20"
            >五、不以任何理由为市场服务采购方、相关单位及其工作人员安排有可能影响业务“公开、公正、公平”开展的宴请、健身、娱乐等活动。</view
          >
          <view class="p-indent mt20"
            >六、不以任何理由为市场服务采购方、相关单位及其工作人员购置或提供通讯工具、交通工具、高档办公用品等。
          </view>
          <view class="p-indent mt20"
            >七、不以任何理由向市场服务采购方、相关单位及其工作人员提供其他不正当利益。
          </view>
          <view class="p-indent mt20"
            >如违反本承诺书，后果由本人自行承担。给市场服务采购方单位造成经济损失的，本人将进行赔偿。
          </view>
        </scroll-view>
        <view class="btns">
          <view class="confirm" @click="submitAgreement" :class="btnDisabled ? 'btn-disabled' : ''">
            {{ btnDisabled ? '请上滑看完本条款再同意' : '同意' }}
          </view>
        </view>
      </view>
    </uv-popup>
  </view>
</template>

<script setup lang="ts">
import dayjs from 'dayjs'
import { onShow } from '@dcloudio/uni-app'
import taskList from './taskList'
import taskListAdmin from './taskListAdmin'
import { useLoginStore } from '@/store/login'
import { signUserApi } from '@/service/modules/userInfo'
import { useTabbar } from '@/store/tabbar'
import { reactive, ref } from 'vue'
import useLogiutFn from '@/hooks/useLoginout'

const loginStore = useLoginStore()
const tabbar = useTabbar()
let userInfo: any = loginStore.currentUserInfo
const roles: number[] = userInfo?.roles || []

// 领包
function getPages() {
  if (!checkLogin()) return

  if (roles.includes(5)) {
    return uni.showToast({
      title: '暂无权限',
      icon: 'none',
      duration: 800
    })
  }
  uni.navigateTo({
    url: '/pages-sub-packages/get-task/index'
  })
}
// 历史记录
function goHistory(type: number) {
  if (!checkLogin()) return
  uni.navigateTo({
    url: `/pages-sub-packages/task-history/index?activeId=${type}&type=1`
  })
}

function checkLogin() {
  if (!loginStore.isLogin) {
    uni.showToast({
      title: '请先登录',
      icon: 'none',
      duration: 800
    })
    useLogiutFn()
  }
  return loginStore.isLogin
}

const total = reactive({
  onTheWay: '',
  waitApprove: ''
})

const taskListClick = (item: any) => {
  if (!checkLogin()) return
  if (item.type) {
    tabbar.setCurrentTabbar('news')
    uni.switchTab({
      url: '/pages/news/index'
    })
    return
  }
  uni.navigateTo({
    url: item.url
  })
}

const currrRole = ref()
const popupRef = ref()

onShow(async () => {
  uni.hideTabBar()
  currrRole.value = tabbar.roleType

  if (loginStore.isLogin) loginStore.getUserInfoByCode()
  let userInfo: any = loginStore.currentUserInfo
  if (userInfo) {
    total.onTheWay = userInfo.onTheWay
    total.waitApprove = userInfo.waitApprove
    // 没签署协议先签署协议
    if (!userInfo?.signedAgreement?.length) {
      showAgreement()
    } else {
      showLatestChangePwdTime()
    }

    // 第一次登录 去修改密码
  }
})

const showLatestChangePwdTime = () => {
  let userInfo: any = loginStore.currentUserInfo
  if (!userInfo.latestChangePwdTime) {
    uni.showModal({
      title: '提示',
      showCancel: false,
      content: '首次登录请先修改密码',
      success: function (res) {
        if (res.confirm) {
          uni.navigateTo({
            url: `/pages-sub-mine/changePassword/index`
          })
        }
      }
    })
  } else {
    const latestChangePwdTime = userInfo.latestChangePwdTime
    // 获取当前日期90天的时间戳
    const time1 = dayjs().subtract(90, 'days').valueOf()
    // 最后一次修改的时间戳
    const time2 = dayjs(latestChangePwdTime).valueOf()
    if (time1 > time2) {
      uni.showModal({
        title: '提示',
        content: '当前用户密码90天未修改，是否前去修改?',
        success: async function (res) {
          if (res.confirm) {
            uni.navigateTo({
              url: `/pages-sub-mine/changePassword/index`
            })
          } else if (res.cancel) {
            // 不去修改密码直接退出
            useLogiutFn()
          }
        }
      })
    }
  }
}

const btnDisabled = ref(true)
const scrolltolower = () => {
  btnDisabled.value = false
}
const showAgreement = () => {
  setTimeout(() => {
    popupRef.value?.open()
  }, 0)
}

const closePopup = () => {
  uni.showModal({
    title: '提 示',
    content: '由于您未签署廉洁承诺书，即将退出登录！',
    cancelText: '继续签署',
    confirmText: '退出登录',
    success: async (e) => {
      if (e.confirm) {
        popupRef.value?.close()
        useLogiutFn()
      }
    }
  })
}
const submitAgreement = async () => {
  if (btnDisabled.value) return
  const obj = {
    agreementName: 'agreementName_4eaed7b52078',
    agreementVersion: 'agreementVersion_bb8bb35dfd1a'
  }
  const res = await signUserApi(obj)
  if (res.data) {
    uni.showToast({
      title: '签署成功',
      icon: 'none'
    })
    loginStore.getUserInfoByCode()
    popupRef.value?.close()
    showLatestChangePwdTime()
  }
}

const goStatistics = () => {
  uni.navigateTo({
    url: `/pages/statistics/index`
  })
}

// 管理员展示对应的页面
const showPage = (id: number) => {
  if (id == 1) {
    if (roles.includes(38)) return false
  }
  return true
}
</script>

<style lang="scss" scoped>
.home {
  padding: 0 30rpx;
  .home-bg {
    position: absolute;
    z-index: -333;
    top: -10rpx;
    left: 0;
    right: 0;
    height: 400rpx;
    background-image: url('@/static//images/common/bg.svg');
    background-size: 100% 400rpx;
  }

  .home-data {
    box-sizing: border-box;
    margin-top: 200rpx;
    padding: 20rpx;
    width: 690rpx;
    height: 280rpx;
    background-color: #fff;
    border-radius: 16rpx;
    box-shadow: 0px 8rpx 16rpx 0px rgba(255, 167, 103, 0.2);

    .top {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .t-l {
        .l-title {
          color: #000;
          font-size: 36rpx;
          font-weight: 600;
          line-height: 50rpx;
        }
        .l-desc {
          color: #999;
          font-size: 24rpx;
          font-weight: 400;
          line-height: 35rpx;
        }
      }

      .t-r {
        width: 160rpx;
        height: 60rpx;
        border-radius: 200rpx;
        text-align: center;
        line-height: 60rpx;
        background-color: #6eb657;
        box-shadow: 0px 4rpx 4rpx 0px rgba(0, 0, 0, 0.05);
        color: #fff;
        font-size: 30rpx;
        font-weight: 500;
      }
    }
    .content {
      margin-top: 24rpx;
      border-radius: 16rpx;
      border: 2rpx solid #fff2e7;
      background: #fffdfb;
      width: 640rpx;
      height: 128rpx;
      box-sizing: border-box;
      padding: 20rpx 30rpx;
      display: flex;
      justify-content: space-between;

      .cont-item {
        :first-child {
          line-height: 45rpx;
          margin-bottom: 10rpx;
        }
      }
      .itemA {
        min-width: 160rpx;
        :first-child {
          color: #333;
          font-weight: 600;
          font-size: 32rpx;
        }
        :last-child {
          color: #999;
          font-size: 24rpx;
          line-height: 34rpx;
          font-weight: 400;
        }
      }
      .itemB {
        text-align: center;
        width: 100rpx;
        :first-child {
          color: #999;
        }
        :last-child {
          color: #666;
          font-size: 24rpx;
          line-height: 34rpx;
          font-weight: 400;
        }
        .is-login {
          color: #6eb657;
          font-weight: 600;
          font-size: 40rpx;
        }
      }
    }
  }

  .home-notice {
    margin-top: 20rpx;
    :deep(.uv-notice-bar) {
      border-radius: 8rpx;
      background: #f8b856;
    }
  }

  .home-content {
    margin-top: 30rpx;
    .title {
      margin: 32rpx 0;
      color: #333;
      font-size: 32rpx;
      font-weight: 600;
    }
    .task-page {
      display: flex;
      justify-content: space-between;
      flex-flow: row wrap;
      .tast-item {
        width: 328rpx;
        height: 224rpx;
        border-radius: 16rpx;
        background-size: 100% 100%;
        margin-bottom: 32rpx;
      }
    }
  }
}
.agreement-content {
  padding: 30rpx;
  .title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text {
      text-align: center;
      font-size: 36rpx;
      color: #000;
      width: 100%;
      padding-left: 24rpx;
    }
  }
  .honest-content {
    height: 700rpx;
    overflow-y: auto;
    line-height: 40rpx;
    margin-top: 20rpx;
    .honest-agreement {
      display: flex;
      align-items: center;
    }
    .p-indent {
      text-indent: 72rpx;
    }
    .mt20 {
      margin-top: 20rpx;
    }
  }
  .btns {
    height: 80rpx;
    padding: 0 20rpx;
    margin-top: 40rpx;

    .confirm {
      background-color: #6eb657;
      color: #fff;
      width: 100%;
      line-height: 80rpx;
      text-align: center;
      font-size: 32rpx;
      border-radius: 40rpx;
    }
    .btn-disabled {
      background-color: #ccc;
    }
  }
}
</style>
