<script setup lang="ts">
import { readonly, ref } from 'vue'
import type { MessageItemInterface } from '@/views/home/types'
import MarkdownRender from '@/components/markdown-render/markdown-render.vue'
import type { FormRules } from 'naive-ui'
import MessageBubbleLoading from '@/views/home/components/message-bubble-loading.vue'

interface Props {
  isAgentMessage: boolean
  messageItem: MessageItemInterface
  currentBubbleTextColor: string
}

defineProps<Props>()

const formRules = readonly<FormRules>({
  objective: {
    required: true,
    trigger: ['blur', 'input'],
    message: '',
  },
  travelLocation: {
    required: true,
    trigger: ['blur', 'input'],
    message: '',
  },
  departureTime: {
    required: true,
    trigger: ['blur', 'input'],
    message: '',
  },
  returnTime: {
    required: true,
    trigger: ['blur', 'input'],
    message: '',
  },
  email: {
    required: true,
    trigger: ['blur', 'input'],
    message: '',
  },
})

const formModel = ref({
  objective: 'khbf',
  travelLocation: '',
  departureTime: null,
  returnTime: null,
  vehicle: '',
  vehicleEstimatedCost: '',
  residence: '',
  residenceEstimatedCost: '',
  estimatedAmount: '',
  generalBudget: '',
  email: '',
})

const objectiveOptions = readonly([
  {
    label: '客户拜访',
    value: 'khbf',
  },
  {
    label: '会议',
    value: 'hy',
  },
  {
    label: '培训',
    value: 'px',
  },
])
</script>

<template>
  <div class="ml-[11px] overflow-hidden">
    <div class="mb-[7px] text-[12px] text-[#999]">作者信息</div>

    <div class="min-w-[420px]">
      <div
        class="box-content min-h-[21px] min-w-[10px] max-w-full rounded-[10px] border border-[#9EA3FF] bg-[#777EF9] px-[15px] py-[14px] text-justify"
        :class="{
          '!bg-[#fff]': isAgentMessage,
          '!min-w-[80px]': messageItem.isAnswerLoading,
        }"
      >
        <div
          v-if="messageItem.isAnswerLoading && !messageItem.content"
          class="flex h-[21px] items-center justify-center"
        >
          <MessageBubbleLoading :active-color="currentBubbleTextColor" />
        </div>
        <template v-else>
          <div class="mb-[10px]">
            <i class="iconfont icon-tongyi font-600 text-[14px] text-[#6ccb59]"></i>
            <span class="ml-[5px] text-[14px] text-[#999]">出差表单插件执行成功</span>
          </div>

          <MarkdownRender
            ref="markdownRenderRef"
            raw-text-content="好的，我将为您自动生成出差表单，表单如下"
            :color="currentBubbleTextColor"
          />

          <!-- <div v-if="messageItem.isAnswerLoading" class="ml-[15px] pt-[12px]">
              <MessageBubbleLoading active-color="#fff" width="5px" />
            </div> -->
        </template>
      </div>

      <div
        class="mt-[10px] box-content min-h-[21px] min-w-[10px] max-w-full rounded-[10px] border border-[#9EA3FF] bg-[#777EF9] px-[15px] py-[14px] text-justify"
        :class="{
          '!bg-[#fff]': isAgentMessage,
        }"
      >
        <h2 class="font-600 text-[15px] text-[#0B7DFF]">出差表单</h2>

        <div class="mt-[12px]">
          <n-form :model="formModel" :rules="formRules" label-width="90" label-placement="left" :show-feedback="false">
            <n-form-item class="mb-[10px]" label="出差目的" path="objective">
              <n-select v-model:value="formModel.objective" placeholder="Select" :options="objectiveOptions" />
            </n-form-item>

            <n-form-item class="mb-[10px]" label="出差地点" path="travelLocation">
              <n-input v-model:value="formModel.travelLocation" placeholder="Input" />
            </n-form-item>

            <n-form-item class="mb-[10px]" label="出发时间" path="departureTime">
              <n-date-picker v-model:value="formModel.departureTime" type="datetime" />
            </n-form-item>

            <n-form-item label="返回时间" path="returnTime">
              <n-date-picker v-model:value="formModel.returnTime" type="datetime" />
            </n-form-item>

            <n-form-item label="">
              <div class="h-[1px] w-full bg-[#B1B1B1] opacity-45"></div>
            </n-form-item>

            <n-form-item class="mb-[10px]" label="交通工具" path="vehicle">
              <n-input v-model:value="formModel.vehicle" placeholder="Input" />
            </n-form-item>

            <n-form-item label="预计费用" path="vehicleEstimatedCost">
              <n-input v-model:value="formModel.vehicleEstimatedCost" placeholder="Input" />
            </n-form-item>

            <n-form-item label="">
              <div class="h-[1px] w-full bg-[#B1B1B1] opacity-45"></div>
            </n-form-item>

            <n-form-item class="mb-[10px]" label="住宿地点" path="residence">
              <n-input v-model:value="formModel.residence" placeholder="Input" />
            </n-form-item>

            <n-form-item label="预计费用" path="residenceEstimatedCost">
              <n-input v-model:value="formModel.residenceEstimatedCost" placeholder="Input" />
            </n-form-item>

            <n-form-item label="">
              <div class="h-[1px] w-full bg-[#B1B1B1] opacity-45"></div>
            </n-form-item>

            <n-form-item class="mb-[10px]" label="预计金额" path="residence">
              <n-input v-model:value="formModel.estimatedAmount" placeholder="Input" />
            </n-form-item>

            <n-form-item label="总预算" path="generalBudget">
              <n-input v-model:value="formModel.generalBudget" placeholder="Input" />
            </n-form-item>

            <n-form-item label="">
              <div class="h-[1px] w-full bg-[#B1B1B1] opacity-45"></div>
            </n-form-item>

            <n-form-item class="mb-[10px]" label="邮箱信息" path="email">
              <n-input v-model:value="formModel.email" placeholder="Input" />
            </n-form-item>

            <div class="mt-[30px] text-end">
              <n-button type="primary">确认提交</n-button>
            </div>
          </n-form>
        </div>
      </div>
    </div>
  </div>
</template>
