<template>
  <div class="w-full h-[100vh] bg-[#F7F8FA]">
    <ChatHeaderBar title="聊天设置" />
    <div class="h-66"></div>
    <van-cell-group
      style="margin-bottom: 12px; padding-top: 12px; padding-left: 16px"
      class="box-border"
      inset
    >
      <van-row>
        <van-col style="width: 54px" span="4" class="mb-12 mr-10">
          <div class="w-40 h-40 rounded-full mx-auto overflow-hidden mb-4">
            <img
              v-if="itemData?.headImage"
              class="w-full h-full object-cover"
              :src="itemData?.headImage"
              alt=""
            />
            <img
              v-else
              class="w-full h-full object-cover"
              src="~/assets/img/default_avatar.png"
              alt=""
            />
          </div>
          <p class="w-full line-clamp-1 lin text-sm text-center text-black-6">
            {{ itemData?.groupRemark }}
          </p>
        </van-col>
        <van-col style="width: 54px" span="4" class="mb-12 mr-10">
          <div
            @click="navigateTo('/chat/single-add')"
            class="w-40 h-40 flex justify-center items-center bg-[#F3F3F3] rounded-full mx-auto overflow-hidden mb-4"
          >
            <span class="iconfont icon-plus text-black-6" style="font-size: 24px"></span>
          </div>
          <p class="w-full line-clamp-1 lin text-sm text-center text-black-6">多人聊天</p>
        </van-col>
      </van-row>
    </van-cell-group>

    <van-cell-group style="margin-bottom: 12px" class="box-border" inset>
      <!-- <van-cell
        v-for="(item, index) in list"
        :key="index"
        size="large"
        :title="item.title"
        :is-link="item.isLink"
        @click="item.fn"
      >
        <template #icon>
          <span
            :class="`iconfont ${item.icon} text-[#FF9300]  mr-12`"
            style="font-size: 24px"
          ></span>
        </template>
        <template v-if="item.vModel != null" #right-icon>
          <van-switch v-model="item.vModel" active-color="#FF9300" inactive-color="#dcdee0" />
        </template>
      </van-cell> -->

      <van-cell size="large" title="设置备注名" is-link @click="modifyNoteName"></van-cell>
    </van-cell-group>

    <van-cell-group style="margin-bottom: 12px" class="box-border" inset>
      <van-cell size="large" title="查找聊天记录" is-link @click="findChatHistory"></van-cell>
    </van-cell-group>
    <van-cell-group style="margin-bottom: 12px" class="box-border" inset>
      <van-cell :clickable="false" size="large" title="消息面打扰" is-link>
        <template #right-icon>
          <van-switch
            :active-value="1"
            :inactive-value="0"
            v-model="isNotDisturb"
            @click="notDisturb"
            active-color="#FF9300"
            inactive-color="#dcdee0"
          />
        </template>
      </van-cell>
      <van-cell :clickable="false" draggable size="large" title="置顶聊天" is-link>
        <template #right-icon>
          <van-switch
            :active-value="1"
            :inactive-value="0"
            v-model="isTop"
            @click="topChat"
            active-color="#FF9300"
            inactive-color="#dcdee0"
          />
        </template>
      </van-cell>
    </van-cell-group>

    <van-cell-group style="margin-bottom: 12px" class="box-border" inset>
      <van-cell size="large" title="设置当前聊天背景" is-link @click=""></van-cell>
    </van-cell-group>
    <van-cell-group style="margin-bottom: 12px" class="box-border" inset>
      <van-cell size="large" title="举报该用户" is-link @click="reportUser"></van-cell>

      <van-cell size="large" title="清空聊天记录" is-link @click="clearChatHistory"></van-cell>
    </van-cell-group>
    <ChatDialog
      v-model:show="dialogParmas.show"
      v-model:title="dialogParmas.title"
      v-model:confirmText="dialogParmas.confirmText"
      v-model:cancelText="dialogParmas.cancelText"
      @confirm="confirm"
      @cancel="cancel"
    >
      <div class="w-full px-12 text-center mt-4">
        <p class="mx-auto w-[80%] text-sm text-black-9 mb-16">{{ dialogParmas.subTitle }}</p>

        <van-field
          class=""
          style="height: 40px; background: #f5f5f5; border-radius: 8px; margin-bottom: 30px"
          clearable
          :placeholder="dialogParmas.placeholder"
          v-model="dialogParmas.remark"
          maxlength="30"
        />
      </div>
    </ChatDialog>
  </div>
</template>
<script setup>
const chatStore = useChatStore()
const { ws, chatList } = storeToRefs(chatStore)

const route = useRoute()

definePageMeta({
  layout: false
})

const isNotDisturb = ref(0)
const isTop = ref(0)

const itemData = computed(() => {
  let item = chatList.value.filter((el) => el.toUserId == route.query.toUserId)[0]
  isNotDisturb.value = item.isNotDisturb
  isTop.value = item.isNotDisturb
  return item
})

const dialogParmas = reactive({
  show: false,
  title: '',
  placeholder: '',
  remark: '',
  subTitle: ''
})

// 弹窗确认的事件
const confirm = async () => {
  changeGroupName({ remark: dialogParmas.remark })
}

const cancel = () => {
  dialogParmas.show = false
}

// 修改备注名
const modifyNoteName = () => {
  dialogParmas.show = true
  dialogParmas.subTitle = '备注不得超过30个字'
  dialogParmas.placeholder = '请输入备注'

  if (itemData.value?.groupRemark != '') {
    dialogParmas.title = '修改备注'
    dialogParmas.confirmText = '确认'
    dialogParmas.cancelText = '取消'
    dialogParmas.remark = itemData.value?.groupRemark
  } else {
    dialogParmas.title = '添加备注'
    dialogParmas.confirmText = '添加'
    dialogParmas.cancelText = '拒绝'
  }
}

// 修改名称
const changeGroupName = async (body) => {
  try {
    const res = await request('/website/tourMember/updateTourMember', {
      method: 'post',
      body: {
        groupId: itemData.value.groupId,
        ...body
      }
    })

    if (res && res?.success) {
      chatStore.reqChatList()
      dialogParmas.remark = ''
      dialogParmas.show = false
    }
  } catch (error) {}
}

// 查找聊天记录
const findChatHistory = () => {
  console.log(itemData.value?.groupId, '555')

  navigateTo({
    path: '/chat/set-sub',
    query: {
      objectType: 1,
      groupId: itemData.value?.groupId
    }
  })
}

// 消息免打扰
const notDisturb = () => {
  handleBoolean({ isNotDisturb: isNotDisturb.value })
}

// 置顶聊天
const topChat = () => {
  handleBoolean({ isTop: isTop.value })
}

// 是否免打扰和 是否置顶 公共
const handleBoolean = async (params) => {
  try {
    let { data } = await request('/website/tourMember/updateSingleTourMember', {
      method: 'post',
      body: {
        groupId: itemData.value.groupId,
        ...params
      }
    })
    if (data) {
      if (Object.keys(params)[0] == 'isTop') {
        isTop.value ? showToast('已置顶') : showToast('置顶取消')
      }
      if (Object.keys(params)[0] == 'isNotDisturb') {
        isNotDisturb.value ? showToast('已开启面打扰') : showToast('已关闭面打扰')
      }
    }
  } catch (error) {}
}

// 举报该用户
const reportUser = () => {
  navigateTo('/chat/report', {
    query: {
      objectType: 1,
      userId: itemData.value?.toUserId
    }
  })
}

// 清空聊天记录
const clearChatHistory = () => {
  showConfirmDialog({
    width: 260,
    // title: '提示',
    message: '清空聊天记录',
    confirmButtonColor: '#FF9300'
  })
    .then(async () => {
      const { data } = await request('/tourMessage/clearGroupMessage', {
        query: {
          groupId: itemData.value?.groupId
        }
      })
      if (data) return
    })
    .catch(() => {})
}

// const list = reactive([
//   {
//     title: '设置备注名',
//     // icon: setting,
//     // icon: 'icon-setting-one',
//     isLink: true,
//     vModel: null,
//     fn: modifyNoteName,
//     value: ''
//   },
//   {
//     title: '查找聊天记录',
//     value: '',
//     // icon: 'icon-log',
//     isLink: true,
//     vModel: null,
//     fn: findChatHistory
//   },
//   {
//     title: '消息面打扰',
//     value: '',

//     // icon: 'icon-close-remind',
//     isLink: false,
//     vModel: isNotDisturb.value,
//     fn: notDisturb
//   },
//   {
//     title: '置顶聊天',
//     value: '',
//     // icon: 'icon-set-top',
//     isLink: false,
//     vModel: isTop.value,
//     fn: topChat
//   },
//   {
//     title: '举报该用户',
//     value: '',
//     // icon: 'icon-jubaoguanli',
//     isLink: true,
//     vModel: null,
//     fn: reportUser
//   },
//   {
//     title: '清空聊天记录',
//     value: '',
//     // icon: 'icon-delete-one',
//     isLink: true,
//     vModel: null,
//     fn: clearChatHistory
//   }
// ])

useSeoMeta({
  title: '我的消息'
})
</script>

<style lang="scss" scoped></style>
