<template>
  <div class="choose-group-type-page">
    <ZPaging ref="zPaging" :show-scrollbar="false">
      <template #top>
        <customNavbar :title="$t('pageTitle.select.groupType')"></customNavbar>
      </template>
      <div class="choose-group-type">
        <div class="w-full h-[1134rpx] mb-[20rpx] pl-[32rpx] pr-[32rpx]">
          <div class="pl-[32rpx] pr-[32rpx] pt-[44rpx] pb-[42rpx] bg-[#FFFFFF]">
            <div class="text-[40rpx] leading-[54rpx] text-[#2F2F2F] font-bold">
              群类型保存后将不可修改
            </div>
            <div class="text-[28rpx] leading-[54rpx] text-[#46299D] mt-[16rpx]">
              请创建过程中正确选择
            </div>
            <div class="mt-[54rpx] w-full h-[872rpx]">
              <div
                @click="groupActiveIndex = 0;depCheckedKeys = []"
                class="groupCard firstPanel"
                :class="groupActiveIndex === 0 ? 'activePanel' : ''"
              >
                <div class="w-full h-full pt-[64rpx] pl-[36rpx]">
                  <div
                    class="text-[36rpx] leading-[54rpx] text-[#2F2F2F] font-bold"
                  >
                    普通群
                  </div>
                  <div
                    class="text-[24rpx] leading-[36rpx] text-[#939393] w-[216rpx]"
                  >
                    员工线上沟通专用群 离职后自动退群
                  </div>
                </div>
              </div>
              <div
                v-if="isHasPermission"
                @click="groupActiveIndex = 1"
                class="groupCard secondPanel"
                :class="groupActiveIndex === 1 ? 'activePanel' : ''"
              >
                <div
                  class="w-full h-full pr-[36rpx] flex flex-col items-end justify-center"
                >
                  <div
                    class="text-[36rpx] leading-[54rpx] text-[#2F2F2F] font-bold"
                  >
                    部门群
                  </div>
                  <div
                    class="text-[24rpx] leading-[36rpx] text-[#939393] w-[288rpx] text-end"
                  >
                    指定部门员工入职自动进群 离职后自动退群
                  </div>
                  <div
                    v-if="!depCheckedKeys.length"
                    @click="chooseDep"
                    class="text-[24rpx] leading-[36rpx] text-[#C1B4EA] flex items-center mt-[16rpx]"
                  >
                    <div
                      :class="
                        groupActiveIndex === 1
                          ? 'text-[#7A58DE]'
                          : 'text-[#C1B4EA]'
                      "
                    >
                      选择部门
                    </div>
                    <div class="ml-[20rpx]">
                      <tm-icon
                        name="tmicon-angle-right"
                        :font-size="18"
                        :color="groupActiveIndex === 1 ? '#7A58DE' : '#C1B4EA'"
                      ></tm-icon>
                    </div>
                  </div>
                  <div
                    v-else
                    class="text-[24rpx] leading-[36rpx] flex flex-col justify-center items-end mt-[16rpx] mb-[22rpx]"
                  >
                    <div class="max-w-[336rpx] truncate">
                      {{ depCheckedKeys.map((v) => v.name).toString() }}
                    </div>
                    <div @click="chooseDep" class="flex items-center">
                      <div class="text-[#7A58DE]">查看全部</div>
                      <div class="ml-[20rpx]">
                        <tm-icon
                          name="tmicon-angle-right"
                          :font-size="18"
                          :color="
                            groupActiveIndex === 1 ? '#7A58DE' : '#C1B4EA'
                          "
                        ></tm-icon>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div
                v-if="isCreateProjecy"
                @click="groupActiveIndex = 2;depCheckedKeys = [];"
                class="groupCard thirdPanel"
                :class="groupActiveIndex === 2 ? 'activePanel' : ''"
              >
                <div class="w-full h-full pt-[64rpx] pl-[36rpx]">
                  <div
                    class="text-[36rpx] leading-[54rpx] text-[#2F2F2F] font-bold"
                  >
                    项目群
                  </div>
                  <div
                    class="text-[24rpx] leading-[36rpx] text-[#939393] w-[216rpx]"
                  >
                    项目成员沟通专用群 离职后自动退群
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <template #bottom>
        <customBtn
          :isBottom="true"
          :btnText="$t('ok')"
          @click="handleConfirm"
          :disabled="confirmBtnStatus"
        ></customBtn>
      </template>
    </ZPaging>
  </div>
</template>
<script setup>
import ZPaging from '@/uni_modules/z-paging/components/z-paging/z-paging.vue'
import customBtn from '@/components/custom-btn/custom-btn.vue'
import { ref, watch, computed } from 'vue'
import { onShow, onLoad, onUnload } from '@dcloudio/uni-app'
import { useChatList } from '@/store/chatList/index.js'
import { useAuth } from '@/store/auth'
import { useTalkStore, useUserStore } from '@/store'
import { useGroupTypeStore } from '@/store/groupType'
import { userHasPermission } from '@/api/deps/index.js'
const { groupActiveIndex, depCheckedKeys } = useGroupTypeStore()
const { userInfo } = useAuth()
onUnload(()=> {

})
const isHasPermission = ref(false)
const isCreateProjecy = ref(false)
onShow( async() =>{
  const isHasRes = await userHasPermission({
    erpUserId: userInfo?.value?.ID,
    ruleUrl: [
      "auth_chat_app_create_all_dept",
      "auth_chat_app_create_limit_dept"
      ]
  })
  if (isHasRes.code === 200) {
    if (isHasRes.data.auth_chat_app_create_all_dept || isHasRes.data.auth_chat_app_create_limit_dept) {
      isHasPermission.value = true
    } else{
      isHasPermission.value = false
    }
    isCreateProjecy.value = isHasRes.data.btn_rule_create_project_group
  }
})

const confirmBtnStatus = computed(() => {
  let disabledT = false
  switch (groupActiveIndex.value) {
    case 0:
      break
    case 1:
      if (!depCheckedKeys.value.length) {
        disabledT = true
      }
      break
    case 2:
      break
    default:
      break
  }
  return disabledT
})

const chooseDep = () => {
  uni.navigateTo({
    url: '/pages/chooseByDeps/index?chooseMode=1',
  })
}

const handleConfirm = () => {
  uni.navigateBack()
  // uni.navigateTo({
  //   url: '/pages/creatGroupChat/index'
  // });
}
</script>
<style scoped lang="scss">
::v-deep .zp-paging-container-content {
  height: 100%;
  display: flex;
}

.choose-group-type {
  flex: 1;
  display: flex;
  flex-direction: column;
  background-image: url('@/static/image/clockIn/z3280@3x.png');
  background-size: cover;
  background-position: bottom center;
  padding: 20rpx 0;
  background-attachment: fixed;
}

.divider {
  height: 1rpx;
  background-color: #7c7c7c;
  opacity: 0.6;
}
.avatar-placeholder {
  width: 192rpx;
  height: 192rpx;
  background-color: #e0e0e0;
  border-radius: 50%;
  margin-bottom: 40rpx;
}
.groupCard {
  height: 272rpx;
  width: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 12rpx;
  &.firstPanel {
    background-image: url('@/static/image/chatList/zu6033@2x.png');
    margin-bottom: 28rpx;
  }
  &.secondPanel {
    background-image: url('@/static/image/chatList/zu6031@2x.png');
    margin-bottom: 28rpx;
  }
  &.thirdPanel {
    background-image: url('@/static/image/chatList/zu6032@2x.png');
  }
  &.activePanel {
    box-shadow: 0 0 0 3rpx #46299d;
  }
}
.btnBox {
  :deep(uni-button[disabled='true']) {
    color: #bebebe !important;
  }
}
</style>
