<script lang="ts" setup>
import { ref, computed, reactive } from 'vue'
import { CloseOne, Male, Female, SendOne } from '@icon-park/vue-next'
import { ServeSearchUser } from '@/api/contact'
import { ServeCreateContact } from '@/api/contact'
import { ServeContactGroupList, ServeContactMoveGroup, ServeEditContactRemark } from '@/api/contact'
import { useTalkStore } from '@/store'
import { useRouter } from 'vue-router'
import xNModal from '@/components/x-naive-ui/x-n-modal/index.vue'
import { NSkeleton } from 'naive-ui'
import { ServeCheckFriend, ServeAddFriend } from '@/api/chat'
import { useUtil } from '@/hooks/useUtil'
import { brandConfig } from '@brand-config'

const { message, user } = brandConfig.modules || {}

const { useMessage } = useUtil()

// const isFriend = ref(false) // 是否是我的好友
// const showBtn = ref(false)

const router = useRouter()
const talkStore = useTalkStore()
const emit = defineEmits(['update:show', 'update:uid', 'updateRemark', 'update:send'])
const props = defineProps({
  show: {
    type: Boolean,
    default: false
  },
  uid: {
    type: Number,
    default: 0
  },
  euid: {
    type: Number,
    default: 0
  }
})

const loading = ref(true)
const isOpenFrom = ref(false)
const userInfo: any = ref({
  id: 0,
  avatar: '',
  gender: 0,
  mobile: '',
  motto: '',
  nickname: '',
  remark: '',
  email: '',
  status: 1,
  text: ''
})

const editCardPopover: any = ref(false)
const modelRemark = ref('')

const options = ref<any>([])
// const groupName = computed(() => {
//   const item = options.value.find((item: any) => {
//     return item.key == state.group_id
//   })

//   if (item) {
//     return item.label
//   }

//   return '未设置分组'
// })

const onLoadData = () => {
  ServeSearchUser({
    erp_user_id: props.euid
  }).then(({ code, data }) => {
    if (code == 200) {
      userInfo.value = data

      // modelRemark.value = state.remark

      loading.value = false
    } else {
      window['$message'].info('用户信息不存在', { showIcon: false })
    }
  })

  // ServeContactGroupList().then((res) => {
  //   if (res.code == 200) {
  //     let items = res.data.items || []
  //     options.value = []
  //     for (const iter of items) {
  //       options.value.push({ label: iter.name, key: iter.id })
  //     }
  //   }
  // })
}

const onToTalk = () => {
  talkStore.toTalk(1, props.uid, router)
  emit('update:show', false)
  emit('update:send')
}

// const onJoinContact = () => {
//   if (!state.text.length) {
//     return window['$message'].info('备注信息不能为空')
//   }

//   ServeCreateContact({
//     friend_id: props.uid,
//     remark: state.text
//   }).then((res) => {
//     if (res.code == 200) {
//       isOpenFrom.value = false
//       window['$message'].success('申请发送成功')
//     } else {
//       window['$message'].error(res.message)
//     }
//   })
// }

// const onChangeRemark = () => {
//   ServeEditContactRemark({
//     friend_id: props.uid,
//     remark: modelRemark.value
//   }).then(({ code, message }) => {
//     if (code == 200) {
//       editCardPopover.value.setShow(false)
//       window['$message'].success('备注成功')
//       state.remark = modelRemark.value

//       emit('updateRemark', {
//         user_id: props.uid,
//         remark: modelRemark.value
//       })
//     } else {
//       window['$message'].error(message)
//     }
//   })
// }

// const handleSelectGroup = (value) => {
//   ServeContactMoveGroup({
//     user_id: props.uid,
//     group_id: value
//   }).then(({ code, message }) => {
//     if (code == 200) {
//       state.group_id = value
//       window['$message'].success('分组修改成功')
//     } else {
//       window['$message'].error(message)
//     }
//   })
// }

// const reset = () => {
//   loading.value = true

//   Object.assign(state, {
//     id: 0,
//     avatar: '',
//     gender: 0,
//     mobile: '',
//     motto: '',
//     nickname: '',
//     remark: '',
//     email: '',
//     status: 1,
//     text: ''
//   })

//   isOpenFrom.value = false
// }

// const onUpdate = (value) => {
//   if (!value) {
//     setTimeout(reset, 100)
//   }

//   emit('update:show', value)
// }

// 添加好友
// const addFriend = () => {
//   let params = {
//     receiver_id: props.uid, //聊天的用户id
//     talk_type: 1
//   }
//   ServeAddFriend(params).then((res) => {
//     if (res?.code === 200) {
//       useMessage.success('添加成功')
//       isFriend.value = !isFriend.value
//     }
//   })
// }
const onAfterEnter = () => {
  onLoadData()
  // ServeCheckFriend({ receiver_id: props.uid, talk_type: 1 }).then((res) => {
  //   if (res?.code === 200) {
  //     showBtn.value = true
  //     isFriend.value = res.data?.is_friend || false
  //   }
  // })
}
const onAfterLeave = () => {
  // loading.value = true
  userInfo.value = {
    id: 0,
    avatar: '',
    gender: 0,
    mobile: '',
    motto: '',
    nickname: '',
    remark: '',
    email: '',
    status: 1,
    text: ''
  }
}
</script>

<template>
  <x-n-modal
    content-style="padding:0;"
    :closable="false"
    class="w-311px min-h-445px"
    style="border-radius: 10px; overflow: hidden"
    :show="show"
    :on-after-leave="onAfterLeave"
    :on-after-enter="onAfterEnter"
  >
    <div class="section relative px-7px pt-82px pb-20px" :style="{ backgroundImage: `url(${user.assets.userCardBg})` }">
      <div class="absolute top-9px right-7px pointer z-10" @click="emit('update:show', false)">
        <img class="w-20px h-20px" src="@/assets/image/close.png" alt="" />
      </div>

      <template v-if="loading">
        <div class="flex py-10px bg-#fff px-16px rounded-4px items-center mb-10px">
          <div class="w-59px h-59px rounded-8px mr-12px">
            <n-skeleton height="59px" width="59px" />
          </div>
          <div class="w-full">
            <n-skeleton text style="width: 80%; margin-bottom: 5px" />
            <n-skeleton text style="width: 60%" />
          </div>
        </div>
        <div class="bg-#fff rounded-4px mb-20px">
          <div class="flex px-15px py-9px" v-for="i in 6" :key="i">
            <n-skeleton text style="width: 30%; margin-right: 10px" />
            <n-skeleton text style="width: 60%" />
          </div>
        </div>
        <div>
          <n-skeleton text style="width: 100%; height: 42px; border-radius: 4px" />
        </div>
      </template>

      <template v-else>
        <div class="flex py-10px bg-#fff px-16px rounded-4px items-center mb-10px">
          <div class="w-59px h-59px rounded-8px mr-12px overflow-hidden">
            <n-image width="59" :src="userInfo.avatar"> </n-image>
          </div>
          <div>
            <div class="text-#000 text-16px mb-5px">{{ userInfo.nickname }}</div>
            <div class="text-#ACACAC text-12px">工号：{{ userInfo.job_num }}</div>
          </div>
        </div>
        <div class="bg-#fff rounded-4px mb-20px">
          <div class="flex px-15px py-9px">
            <div class="text-#000 text-12px w-84px">公司别</div>
            <div class="text-#747474 text-12px">{{ userInfo.company_name }}</div>
          </div>
          <div class="flex px-15px py-9px">
            <div class="text-#000 text-12px w-84px">主管</div>
            <div class="text-#747474 text-12px">
              {{ userInfo.leaders?.map((x) => x.user_name)?.join(',') }}
            </div>
          </div>
          <div class="flex px-15px py-9px">
            <div class="text-#000 text-12px w-84px">部门</div>
            <div class="text-#747474 text-12px">
              {{ userInfo.erp_dept_position?.map((x) => x.department_name)?.join(',') }}
            </div>
          </div>
          <div class="flex px-15px py-9px">
            <div class="text-#000 text-12px w-84px">手机号</div>
            <div class="text-#747474 text-12px">{{ userInfo.tel_num }}</div>
          </div>
          <div class="flex px-15px py-9px">
            <div class="text-#000 text-12px w-84px">岗位</div>
            <div class="text-#747474 text-12px">
              {{ userInfo.erp_dept_position?.map((x) => x.position_name)?.join(',') }}
            </div>
          </div>
          <div class="flex px-15px py-9px">
            <div class="text-#000 text-12px w-84px">入职日期</div>
            <div class="text-#747474 text-12px">{{ userInfo.enter_date }}</div>
          </div>
        </div>

        <n-button block :color="brandConfig.secondaryColor" :text-color="brandConfig.primaryColor" @click="onToTalk">
          <div class="flex items-center justify-center py-11px">
            <img class="w-19.8px h-20px mr-15px" :src="message.assets.sendMessageIcon" alt="" />
            <span>发送消息</span>
          </div>
        </n-button>
        <!-- <div v-if="showBtn">
          <n-button block :color="brandConfig.secondaryColor" :text-color="brandConfig.primaryColor" @click="onToTalk" v-if="isFriend">
            <div class="flex items-center justify-center py-11px">
              <img class="w-19.8px h-20px mr-15px" :src="message.assets.sendMessageIcon" alt="" />
              <span>发送消息</span>
            </div>
          </n-button>
          <n-button
            block
            type="success"
            :color="brandConfig.primaryColor"
            text-color="#ffffff"
            @click="addFriend"
            v-else
          >
            <div class="flex items-center justify-center py-11px">
              <img
                class="w-10px h-10px mr-15px"
                src="@/assets/image/icon/close-btn-grey-line.png"
                alt=""
                style="transform: rotate(45deg)"
              />
              <span>添加好友</span>
            </div>
          </n-button>
        </div> -->
      </template>
    </div>
  </x-n-modal>
</template>

<style lang="less" scoped>
.section {
  width: 100%;
  height: 100%;
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  background-color: var(--im-bg-color);

  .header {
    width: 100%;
    height: 230px;
    align-items: center;
    justify-content: center;
    display: flex;
    padding: 20px;
    position: relative;
    overflow: hidden;

    &::before {
      width: 150px;
      height: 150px;
      content: '';
      position: absolute;
      z-index: 1;
      border-radius: 50%;
      right: -25%;
      top: -25%;
    }

    .nickname {
      position: absolute;
      bottom: 20px;
      width: 80%;
      height: 30px;
      font-size: 16px;
      line-height: 30px;
      text-align: center;
      color: #ffffff;
    }

    .gender {
      width: 20px;
      height: 20px;
      position: absolute;
      right: 122px;
      bottom: 65px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
    }

    .close {
      position: absolute;
      right: 20px;
      top: 20px;
      z-index: 1;
      &:hover {
        cursor: pointer;
        transform: scale(1.1);
      }
    }
  }

  .main {
    padding: 20px 30px;
    max-height: 300px;
    .motto {
      min-height: 26px;
      border-radius: 5px;
      padding: 5px 8px;
      line-height: 25px;
      background: #f3f5f7;
      color: var(--im-text-color);
      font-size: 12px;
      margin-bottom: 20px;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      position: relative;
    }
  }

  .footer {
    height: 60px;
    padding: 0 15px;
  }
}

.infos {
  .info-item {
    height: 30px;
    width: 100%;
    margin: 3px 0;
    display: flex;
    align-items: center;

    .name {
      width: 45px;
      flex-shrink: 0;
      color: #625f5f;
    }

    .text {
      flex: 1 auto;
      margin-left: 5px;
    }

    .edit {
      text-decoration: underline;
      text-decoration-style: solid;
      text-underline-offset: 3px;
    }
  }
}

html[theme-mode='dark'] {
  .section {
    .header {
      background: #2c2c32;
    }

    .motto {
      background-color: rgb(44, 44, 50);
    }
  }

  .infos {
    .info-item {
      .name {
        color: #afabab;
      }
    }
  }
}
</style>
