<script setup lang="ts">
  import { Form, FormItem, Input, Textarea, Select, InputNumber, RadioGroup } from '@arco-design/web-vue';
  import InputUpload from '@/components/input-upload/index.vue';

  import useVersionApi from '@/http/version';
  import { ref } from 'vue';

  const type = ref(1);

  const formValue = defineModel();

  const formRule = {
    os: [{ required: true, message: '请选择系统' }],
    app_ver: [{ required: true, message: '请输入版本号' }],
    app_no: [{ required: true, message: '请输入内部号' }],
    url: [{ required: true, message: '请输入链接地址' }],
    is_force: [{ required: true, message: '请选择更新方式' }],
  };

  const typeOption = [
    { label: '连接', value: 1 },
    { label: '上传', value: 2 },
  ];
</script>

<template>
  <Form :model="formValue" :rules="formRule" auto-label-width>
    <FormItem field="os" label="系统" show-colon>
      <Select v-model="formValue.os" :options="useVersionApi.systemOption" placeholder="请选择" />
    </FormItem>
    <FormItem field="app_ver" label="版本号" show-colon>
      <Input v-model="formValue.app_ver" placeholder="请输入" />
    </FormItem>
    <FormItem field="app_no" label="内部号" show-colon>
      <InputNumber v-model="formValue.app_no" :precision="0" :step="1" :max="99999999" placeholder="请输入" />
    </FormItem>
    <FormItem label="方式" show-colon>
      <RadioGroup v-model="type" :options="typeOption" />
    </FormItem>
    <FormItem v-if="type === 1" field="url" label="版本链接" show-colon>
      <Input v-model="formValue.url" placeholder="请输入" />
    </FormItem>
    <FormItem v-else field="url" label="版本文件" show-colon>
      <InputUpload v-model="formValue.url" placeholder="请选择" />
    </FormItem>
    <FormItem field="is_force" label="强制更新" show-colon>
      <Select v-model="formValue.is_force" :options="useVersionApi.forceOption" placeholder="请选择" />
    </FormItem>
    <FormItem field="remark" label="说明" show-colon>
      <Textarea v-model="formValue.remark" :auto-size="{ minRows: 4, maxRows: 6 }" />
    </FormItem>
  </Form>
</template>

<style scoped lang="less"></style>