<script setup lang="ts">
import { PropType, ref, watch } from 'vue'
import { copy } from 'copy-anything'
import CInput from '../../../CInput/CInput.vue'
import CDropdown from '../../../CDropdown/CDropdown.vue'
import CTextarea from '../../../CTextarea/CTextarea.vue'
import { User } from './dbUsers'
import { FieldProps, ErrorsPerField } from '../../../CFormWrapper/CFormWrapper.types'

const props = defineProps({
  modelValue: { type: Object as PropType<User>, required: true },
  fieldProps: { type: Object as PropType<FieldProps>, required: true },
  errorsPerField: { type: Object as PropType<ErrorsPerField>, required: true },
})

const localValue = ref(copy(props.modelValue))

const mode = ref('edit')

watch(
  () => props.modelValue,
  (newVal) => (localValue.value = newVal),
  { deep: true }
)
</script>

<template>
  <div class="c_form_contactUs">
    <!-- 問い合わせの新規作成時 -->
    <div v-if="mode === 'add'" class="c_form_contact">
      <CDropdown
        v-bind="fieldProps"
        v-model="localValue.sendCompId"
        :p_Error="!!errorsPerField.sendCompId"
        class="_to"
        p_Title="宛先"
      />
      <CInput
        v-bind="fieldProps"
        v-model="localValue.title"
        :p_Error="!!errorsPerField.title"
        class="_title"
        p_Title="件名"
      />
      <!-- 改行するようにデータ加工を行う -->
      <CTextarea
        v-bind="fieldProps"
        v-model="localValue.content"
        :p_Error="!!errorsPerField.content"
        class="_content"
        p_Title="送信内容"
      />
    </div>

    <!-- 問い合わせの返答時 -->
    <div v-if="mode === 'edit'" class="c_form_contact_info">
      <div class="_row">受信日：{{ '固定値' }}</div>
      <div class="_row">件名：{{ '固定値' }}</div>
      <div class="_row">契約者氏名：{{ '固定値' }}</div>
      <!-- 改行するようにデータ加工を行う -->
      <div class="_edit_content">
        <CTextarea
          v-bind="fieldProps"
          v-model="localValue.content"
          :p_Error="!!errorsPerField.content"
          :disabled="true"
          class="_content"
          p_Title="お問い合わせ内容"
        />
        <CTextarea
          v-bind="fieldProps"
          v-model="localValue.content"
          :p_Error="!!errorsPerField.content"
          class="_content"
          p_Title="返信内容"
        />
      </div>
    </div>
  </div>
</template>

<style lang="sass" scoped>
// ================新規登録用のスタイルここから================
._title,._content
  margin-top: 10px

// 宛先
._to
  width: 420px

// タイトル
._title
  width: 860px

// 内容
._content
  width: 860px
  height: 270px

// ================新規登録用のスタイルここまで================
// ================返信用のスタイルここまで================

// 返信用の上部
._row
  color: #707070
  font-size: 12px
._row:not(:first-of-type)
  margin-top: 10px

// 編集時のcontent
._edit_content
  display: flex
  ._content
    width: 420px
    height: 340px
  ._content:first-of-type
    margin-right: 20px
</style>
