<template>
  <div class="h-46px flex items-center justify-between px-20px">
    <div class="flex items-center flex-1 h-full">
      <SvgIcon class="text-white text-40px mr-13px" name="dh"></SvgIcon>
      <div
        class="flex items-center flex-1 h-full border border-[#414548] rounded-2px bg-[#414548] bg-opacity-40 px-17px"
      >
        <div
          @click="handleSelect"
          class="cursor-pointer text-white opacity-40 line-clamp-1 flex-1 text-22px"
          v-if="!isEdit"
        >
          {{ data.title }}
        </div>
        <div class="flex-1" v-else @click.prevent.stop="() => {}">
          <van-field
            v-model="nameValue"
            @blur="checkAddress($event)"
            ref="nameRef"
            class="!bg-transparent border-none text-white !h-full cu-field-edit"
          ></van-field>
        </div>
      </div>
    </div>
    <div class="flex items-center ml-10px">
      <SvgIcon
        v-if="!isEdit"
        @click.stop="handleEdit"
        class="text-28px mx-8px text-white"
        name="编辑"
      >
      </SvgIcon>
      <SvgIcon
        v-else
        class="text-28px mx-8px text-white"
        name="对勾"
        @click.stop="handleChangeName"
      ></SvgIcon>
      <SvgIcon
        @click.prevent.stop="handleDelete"
        @click.stop="handleEdit"
        class="text-28px ml-8px text-white"
        name="qx"
      >
      </SvgIcon>
    </div>
  </div>
</template>

<script setup>
import { toRaw, ref, createVNode } from 'vue'
import { useRouter } from 'vue-router'
import { useChat } from '@/stores'
import http from '@/io/request'
import { showToast, showConfirmDialog } from 'vant'

const chatStore = useChat()

const props = defineProps({
  data: {
    type: Object,
    default: () => ({}),
  },
})

const nameRef = ref(null)

const isEdit = ref(false)

const nameValue = ref(props.data.title)

const emit = defineEmits(['onEdit', 'onDelete'])

const checkAddress = (e) => {
  setTimeout(() => {
    isEdit.value = false
  }, 200)
}

const handleEdit = () => {
  isEdit.value = true
  nameValue.value = props.data.title
  setTimeout(() => {
    nameRef.value.focus()
  }, 200)
}

const handleChangeName = () => {
  if (!nameValue.value) {
    showToast('请输入名称')
    return
  }
  http
    .put(
      `/api/v1/conversations/${props.data.id}`,
      {
        title: nameValue.value,
      },
      {
        requestBaseUrl: 'chat',
      }
    )
    .then((res) => {
      props.data.title = nameValue.value
      isEdit.value = false
    })
    .catch((err) => {})
}

const handleDelete = () => {
  showConfirmDialog({
    title: '删除对话？',
    message: `这将删除${props.data.title}`,
    confirmButtonText: '删除',
    cancelButtonText: '取消',
  })
    .then(() => {
      http
        .delete(`/api/v1/conversations/${props.data.id}`, {
          requestBaseUrl: 'chat',
        })
        .then((res) => {
          chatStore.deleteConversation(props.data.id)
        })
    })
    .catch(() => {
      // on cancel
    })
}

const handleSelect = async () => {
  const uuid = props.data.id
  if (isActive(uuid)) return
  await chatStore.setActive(uuid)
}

function isActive(uuid) {
  return chatStore.active === uuid
}
</script>
<style lang="scss">
.cu-field-edit {
  &.van-field {
    padding: 0 !important;
  }
  .van-field__control {
    color: white;
    font-size: 22px;
  }
}
</style>
