<template>
  <div class="cacp-search__layout">
    <cacp-search-panel-layout :model="formData" label-position="left" :gutter="30" :disabled="true">
      <el-form-item label="VIN号" prop="vin">
        <el-input v-model="formData.vin" placeholder="" />
      </el-form-item>

      <el-form-item label="随车检验单号" prop="inspection">
        <el-input v-model="formData.inspection" placeholder="" />
      </el-form-item>
      <el-form-item label="原因" prop="reason">
        <el-input v-model="formData.reason" placeholder="" />
      </el-form-item>

      <template #buttonGroup>
        <el-button type="primary">合格核销</el-button>
        <el-button type="primary">退运等级</el-button>
        <el-button type="primary">销毁登记</el-button>
        <el-button type="info">取消</el-button>
      </template>
    </cacp-search-panel-layout>
    <div class="cacp-group__box">
      <cacp-group-container title="人员基础信息">
        <template #content>
          <el-form :model="verificationFormData" label-position="left" label-width="auto">
            <el-form-item label="请选择操作类型" prop="type">
              <el-select v-model="verificationFormData.type" placeholder="请选择" class="typical-five-width">
                <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
              <el-button type="primary">下载模板</el-button>
            </el-form-item>

            <el-form-item label="批量上传" prop="fileList">
              <accessory-uploader
                v-model="verificationFormData.fileList"
                category="basic"
                class="typical-five-width"
              ></accessory-uploader>
            </el-form-item>
            <div class="cacp-ac">
              <el-button type="primary">上传</el-button>
              <el-button type="info">取消</el-button>
            </div>
          </el-form>
        </template>
      </cacp-group-container>
    </div>
  </div>
</template>
<script setup lang="ts">
import { reactive } from 'vue'
import AccessoryUploader from '@/components/accessory/AccessoryUploader.vue'
import type { Accessory } from '@cacp/ui'

interface FormData {
  type: string
  fileList: Array<Accessory>
}
const typeOptions = [
  { value: '1', label: '选项1' },
  { value: '2', label: '选项2' },
  { value: '3', label: '选项3' },
  { value: '4', label: '选项4' },
  { value: '5', label: '选项5' },
  { value: '6', label: '选项6' }
]
const formData = reactive({
  vin: '2200200',
  inspection: '120102111',
  reason: '这是一个原因'
})
const verificationFormData = reactive<FormData>({
  type: '1',
  fileList: []
})
</script>
<style lang="less" scoped>
.typical-five {
  padding: 16px;
  width: 100%;

  .cacp-search__panel:last-child :deep(.cacp-collapse--footer) {
    padding-top: 18px;
    border-top: 1px solid #e1e2e6;
  }

  &-width {
    width: 50%;
    margin-right: 10px;
  }
}
</style>
