<script setup lang="ts">
import { type_archives_item } from '~/types';

const props = defineProps<{
  d: type_archives_item;
  disabled?: boolean;
  storage?: boolean;
}>()
const archivesStorage = sessionStorage.getItem(`a_${new Date().toLocaleDateString()}_${props.d.dxz_id}`)
const form = reactive<type_archives_item>(
  (props.storage && archivesStorage)
    ? JSON.parse(archivesStorage)
    : Object.assign(
      {
        user_id: '',
        dxxd_date: '',
        dxxd_lfzxm: '',
        dxxd_school_name: '',
        dxxd_class_name: '',
        dxxd_jfls: '',
        dxxd_address: '',
        dxxd_phone: '',
        dxxd_zxyy: '',
        dxxd_lfzzs: '',
        dxxd_clfs: '',
        dxxd_wxdj: '',
        dxxd_cbfx: '',
      },
      props.d
    )
)

defineExpose({
  form
})

watch(
  form,
  (val) => {
    props.storage && sessionStorage.setItem(`a_${new Date().toLocaleDateString()}_${form.dxz_id}`, JSON.stringify(val))
  },
  {
    deep: true,
    immediate: true
  })
</script>

<template>
  <div class="border border-dark-100 divide-y divide-dark-100 w-full text-xs">

    <div class="flex justify-between items-end">
      <div class="p-1 text-base font-bold">咨询记录</div>
      <div class="p-1">{{ form.dxxd_date }}</div>
    </div>
    <div class="divide-x divide-dark-100 flex justify-start">
      <div class="flex-none px-2px w-66px leading-7">来访者姓名</div>
      <div class="px-2px flex-auto leading-7 max-w-56px"><el-input :disabled="disabled"
          input-style="font-size:12px;line-height:14px;" v-model="form.dxxd_lfzxm" size="small"></el-input>
      </div>
      <div class="flex-none px-2px w-30px leading-7">学校</div>
      <div class="px-2px flex-auto leading-7"><el-input :disabled="disabled"
          input-style="font-size:12px;line-height:14px;" v-model="form.dxxd_school_name" size="small"></el-input></div>
      <div class="flex-none px-2px w-30px leading-7">班级</div>
      <div class="px-2px flex-auto leading-7"><el-input :disabled="disabled"
          input-style="font-size:12px;line-height:14px;" v-model="form.dxxd_class_name" size="small"></el-input></div>
    </div>
    <div class="divide-x divide-dark-100 flex justify-start">
      <div class="flex-none px-2px w-66px leading-7">接访教师</div>
      <div class="px-2px flex-auto leading-7 max-w-56px"><el-input :disabled="disabled"
          input-style="font-size:12px;line-height:14px;" v-model="form.dxxd_jfls" size="small"></el-input>
      </div>
      <div class="flex-none px-2px w-30px leading-7">住址</div>
      <div class="px-2px flex-auto leading-7"><el-input :disabled="disabled"
          input-style="font-size:12px;line-height:14px;" v-model="form.dxxd_address" size="small"></el-input></div>
      <div class="flex-none px-2px w-30px leading-7">电话</div>
      <div class="px-2px flex-auto leading-7"><el-input :disabled="disabled"
          input-style="font-size:12px;line-height:14px;" v-model="form.dxxd_phone" size="small"></el-input></div>
    </div>

    <div class="p-1">
      <div>咨询缘由： </div><el-input :disabled="disabled" input-style="font-size:12px;line-height:14px;"
        v-model="form.dxxd_zxyy" type="textarea" resize="none" :rows="2"></el-input>
    </div>
    <div class="p-1">
      <div>来访者自述：</div><el-input :disabled="disabled" input-style="font-size:12px;line-height:14px;"
        v-model="form.dxxd_lfzzs" type="textarea" resize="none" :rows="2"></el-input>
    </div>
    <div class="p-1">
      <div>初步分析：</div><el-input :disabled="disabled" input-style="font-size:12px;line-height:14px;"
        v-model="form.dxxd_cbfx" type="textarea" resize="none" :rows="2"></el-input>
    </div>
    <div class="p-1">
      <div>危机等级：</div>
      <el-radio-group v-model="form.dxxd_wxdj" size="small" :disabled="disabled">
        <el-radio label="1">一般</el-radio>
        <el-radio label="2">严重</el-radio>
        <el-radio label="3">重大</el-radio>
      </el-radio-group>
    </div>
    <div class="p-1">
      <div>处理方式：</div><el-input :disabled="disabled" input-style="font-size:12px;line-height:14px;"
        v-model="form.dxxd_clfs" type="textarea" resize="none" :rows="2"></el-input>
    </div>

  </div>
</template>
