<template>
  <!-- 详情抽屉 -->  
  <div class="demo-speciesName-detail">
    <el-drawer v-model="isShowDialog" size="80%" direction="ltr">
      <template #header>
        <h4>详情</h4>
      </template>
      <el-descriptions
              class="margin-top"
              :column="3"
              border
              style="margin: 8px;"
      >        
          <el-descriptions-item :span="1">            
              <template #label>
                <div class="cell-item">
                  主键
                </div>
              </template>
              {{ formData.id }}            
          </el-descriptions-item>        
          <el-descriptions-item :span="1">            
              <template #label>
                <div class="cell-item">
                  物种编号
                </div>
              </template>
              {{ formData.speciesCode }}            
          </el-descriptions-item>        
          <el-descriptions-item :span="1">            
              <template #label>
                <div class="cell-item">
                  物种名称
                </div>
              </template>
              {{ formData.name }}            
          </el-descriptions-item>        
          <el-descriptions-item :span="1">            
              <template #label>
                <div class="cell-item">
                  物种名称内容
                </div>
              </template>
              {{ formData.content }}            
          </el-descriptions-item>        
          <el-descriptions-item :span="1">            
              <template #label>
                <div class="cell-item">
                  数据来源
                </div>
              </template>
              {{ formData.sourcesData }}            
          </el-descriptions-item>        
          <el-descriptions-item :span="1">            
              <template #label>
                <div class="cell-item">
                  数据采集人
                </div>
              </template>
              {{ formData.createUser }}            
          </el-descriptions-item>        
          <el-descriptions-item :span="1">
            <template #label>
              <div class="cell-item">
                数据采集信息
              </div>
            </template>
            {{ proxy.parseTime(formData.createDate, '{y}-{m}-{d} {h}:{i}:{s}') }}
          </el-descriptions-item>        
          <el-descriptions-item :span="1">            
              <template #label>
                <div class="cell-item">
                  数据核查人
                </div>
              </template>
              {{ formData.auditUser }}            
          </el-descriptions-item>        
          <el-descriptions-item :span="1">
            <template #label>
              <div class="cell-item">
                数据核查日期
              </div>
            </template>
            {{ proxy.parseTime(formData.auditDate, '{y}-{m}-{d} {h}:{i}:{s}') }}
          </el-descriptions-item>        
          <el-descriptions-item :span="1">            
              <template #label>
                <div class="cell-item">
                  备注
                </div>
              </template>
              {{ formData.remark }}            
          </el-descriptions-item>        
      </el-descriptions>
    </el-drawer>
  </div>
</template>
<script setup lang="ts">
  import { reactive, toRefs, defineComponent,ref,unref,getCurrentInstance,computed } from 'vue';
  import {ElMessageBox, ElMessage, FormInstance,UploadProps} from 'element-plus';  
  import {
    listSpeciesName,
    getSpeciesName,
    delSpeciesName,
    addSpeciesName,
    updateSpeciesName,    
  } from "./api";  
  import {
    SpeciesNameTableColumns,
    SpeciesNameInfoData,
    SpeciesNameTableDataState,
    SpeciesNameEditState
  } from "./type"
  defineOptions({ name: "ApiV1BusinessesSpeciesNameDetail"})  
  const {proxy} = <any>getCurrentInstance()
  const formRef = ref<HTMLElement | null>(null);
  const menuRef = ref();  
  const state = reactive<SpeciesNameEditState>({
    loading:false,
    isShowDialog: false,
    formData: {      
      id: undefined,      
      speciesCode: undefined,      
      name: undefined,      
      content: undefined,      
      sourcesData: undefined,      
      createUser: undefined,      
      createDate: undefined,      
      auditUser: undefined,      
      auditDate: undefined,      
      remark: undefined,      
    },
    // 表单校验
    rules: {      
      id : [
          { required: true, message: "主键不能为空", trigger: "blur" }
      ],      
      name : [
          { required: true, message: "物种名称不能为空", trigger: "blur" }
      ],      
    }
  });
  const { isShowDialog,formData } = toRefs(state);
  // 打开弹窗
  const openDialog = (row?: SpeciesNameInfoData) => {
    resetForm();
    if(row) {
      getSpeciesName(row.id!).then((res:any)=>{
        const data = res.data;        
        state.formData = data;
      })
    }
    state.isShowDialog = true;
  };
  // 关闭弹窗
  const closeDialog = () => {
    state.isShowDialog = false;
  };
  defineExpose({
    openDialog,
  });
  // 取消
  const onCancel = () => {
    closeDialog();
  };
  const resetForm = ()=>{
    state.formData = {      
      id: undefined,      
      speciesCode: undefined,      
      name: undefined,      
      content: undefined,      
      sourcesData: undefined,      
      createUser: undefined,      
      createDate: undefined,      
      auditUser: undefined,      
      auditDate: undefined,      
      remark: undefined,      
    }
  };  
</script>
<style scoped>  
  .demo-speciesName-detail :deep(.el-form-item--large .el-form-item__label){
    font-weight: bolder;
  }
  .pic-block{
    margin-right: 8px;
  }
  .file-block{
    width: 100%;
    border: 1px solid var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
    margin-bottom: 5px;
    padding: 3px 6px;
  }
  .ml-2{margin-right: 5px;}
</style>