<template>
  <div class="cacp-search__layout">
    <div class="cacp-search__panel" v-loading="loading">
      <el-form :model="formData" ref="formRef" label-position="left" label-width="90px">
        <el-row>
          <el-col :span="24">
            <el-radio-group v-model="radio" class="cacp-mb-s" @change="onChange">
              <el-radio :value="1">按照报关单号查询</el-radio>
              <el-radio :value="2">按照复杂调价查询</el-radio>
            </el-radio-group>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :xl="8" :lg="8" :md="8" :sm="12">
            <el-form-item label="审批关区">
              <el-input v-model="formData.customsCode"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xl="8" :lg="8" :md="8" :sm="12">
            <el-form-item label="起始对接日期">
              <el-date-picker v-model="formData.startDate"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :xl="8" :lg="8" :md="8" :sm="12">
            <el-form-item label="进出口标记">
              <el-select v-model="formData.flag">
                <el-option v-for="item in flagOptions" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xl="8" :lg="8" :md="8" :sm="12">
            <el-form-item label="终止对接日期">
              <el-date-picker v-model="formData.endDate"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :xl="8" :lg="8" :md="8" :sm="12" v-if="radio == 1">
            <el-form-item label="对接人">
              <el-input v-model="formData.person"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { typicalEight } from '@/apis/mock'
import type { TypicalEight } from '@/types/eight'
import { SuccessResultCode, useLoading } from '@cacp/ui'
import { ref, reactive, onMounted } from 'vue'

const formRef = ref()
const { loading, setLoading } = useLoading()
const radio = ref(1)
const formData = reactive<TypicalEight>({
  customsCode: '',
  startDate: '',
  endDate: '',
  person: '',
  flag: 0
})

const flagOptions = <{ label: string; value: number }[]>[
  {
    label: '进口',
    value: 0
  },
  {
    label: '出口',
    value: 1
  }
]

async function onChange() {
  setLoading(true)
  const res = await typicalEight()
  if (res.code === SuccessResultCode) {
    Object.assign(formData, res.data || {})
  }
  setLoading(false)
}

onMounted(() => {
  onChange()
})
</script>
