<template>
  <div style="padding: 24px; overflow-y: hidden">
    <a-tabs v-model:activeKey="activeKey">
      <a-tab-pane key="zhifa" tab="执法端APP">
        <div class="flex-column">
          <a-row style="overflow-y: hidden">
            <a-col :span="12" style="padding: 20px; border: 1px silver solid; margin-left: 10px">
              <a-form
                ref="form"
                v-modal:model="currentAppForm"
                labelAlign="right"
                label-width="80px"
                :label-col="labelCol"
                :wrapper-col="wrapperCol"
                size="mini"
              >
                <a-form-item label="当前版本">
                  <span style="font-size: 15px; font-weight: bold; color: #000">
                    <a-input v-model:value="currentAppInfo.edition" :bordered="false" />
                  </span>
                </a-form-item>
                <a-form-item label="版本号">
                  <a-input v-model:value="currentAppForm.edition" />
                </a-form-item>
                <a-form-item label="项目名称">
                  <a-input
                    v-model:value="currentAppForm.project_name"
                    defaultValue="drone_enforcement"
                  />
                </a-form-item>
                <a-form-item label="上传">
                  <span style="display: flex">
                    <BasicUpload
                      v-model:file-list="fileList"
                      :maxSize="100"
                      :maxNumber="10"
                      :showUploadList="false"
                      :beforeUpload="beforeUpload"
                      :api="uploadApi"
                    />
                    {{ fileName }}
                    <DeleteOutlined v-if="fileName != ''" @click="deleteFileName" />
                  </span>
                </a-form-item>
                <a-form-item label="描述信息">
                  <a-textarea
                    type="textarea"
                    v-model:value="currentAppForm.description"
                    :rows="4"
                  />
                </a-form-item>
                <a-form-item label="是否必须更新" label-width="120px">
                  <a-radio-group v-model:value="currentAppForm.must_update" size="medium">
                    <a-radio :bordered="false" :value="1">是</a-radio>
                    <a-radio :bordered="false" :value="0">否</a-radio>
                  </a-radio-group>
                </a-form-item>
                <a-form-item :wrapper-col="{ offset: 10, span: 14 }">
                  <a-button type="primary" @click="onSubmit">立即创建</a-button>
                </a-form-item>
              </a-form>
            </a-col>
          </a-row>
        </div>
      </a-tab-pane>
      <a-tab-pane key="feikong" tab="飞控端APP">
        <div class="flex-column">
          <a-row style="overflow-y: hidden">
            <a-col :span="12" style="padding: 20px; border: 1px silver solid; margin-left: 10px">
              <a-form
                ref="fly_currentAppForm"
                v-model:model="fly_currentAppForm"
                labelAlign="right"
                label-width="80px"
                :label-col="labelCol"
                :wrapper-col="wrapperCol"
                size="mini"
              >
                <a-form-item label="当前版本">
                  <span style="font-size: 15px; font-weight: bold; color: #000">
                    <a-input :bordered="false" />
                  </span>
                </a-form-item>
                <a-form-item label="版本号">
                  <a-input v-model:value="fly_currentAppForm.edition" />
                </a-form-item>
                <a-form-item label="项目名称">
                  <a-input v-model:value="fly_currentAppForm.project_name" />
                </a-form-item>
                <a-form-item label="上传">
                  <span style="display: flex">
                    <BasicUpload
                      v-model:file-list="fly_fileList"
                      :maxSize="100"
                      :maxNumber="10"
                      :showUploadList="false"
                      :beforeUpload="beforeUpload"
                      :api="uploadApi"
                    />
                    {{ fly_fileName }}
                    <DeleteOutlined v-if="fly_fileName != ''" @click="deleteFileName" />
                  </span>
                </a-form-item>
                <a-form-item label="描述信息">
                  <a-textarea
                    type="textarea"
                    v-model:value="fly_currentAppForm.description"
                    :rows="4"
                  />
                </a-form-item>
                <a-form-item label="是否必须更新" label-width="120px">
                  <a-radio-group v-model:value="fly_currentAppForm.must_update" size="medium">
                    <a-radio :bordered="false" :value="1">是</a-radio>
                    <a-radio :bordered="false" :value="0">否</a-radio>
                  </a-radio-group>
                </a-form-item>
                <a-form-item :wrapper-col="{ offset: 10, span: 14 }">
                  <a-button type="primary" @click="onFlyControlSubmit">立即创建</a-button>
                </a-form-item>
              </a-form>
            </a-col>
          </a-row>
        </div>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script lang="ts" setup>
  // vue
  import { ref } from 'vue';
  // vben
  import BasicUpload from './src/BasicUpload.vue';
  import { useMessage } from '@/hooks/web/useMessage';
  import { DeleteOutlined } from '@ant-design/icons-vue';
  // api
  import { fun_GetUpdateFiles, fun_AddAppFiles } from '@/api/demo/version';
  import { fun_Load, fun_Upload } from '@/api/demo/files';

  const { createMessage } = useMessage();

  // 表单栅格
  const labelCol = { span: 4 };
  const wrapperCol = { span: 20 };
  // 执法端APP-当前版本信息
  let currentAppInfo = ref({});
  // 标签页
  let activeKey = ref('zhifa');
  // 上传文件列表
  let fileList: any = ref([]);
  let fly_fileList: any = ref([]);
  // 上传的文件
  const fileName = ref('');
  const fly_fileName = ref('');
  let filePath = '';
  let fly_filePath = '';

  // 执法端APP
  const currentAppForm = ref({
    edition: '',
    description: '',
    filepath: '',
    must_update: '',
    project_name: '',
    createuser: '',
    createtime: '',
  });
  // 飞控端APP
  const fly_currentAppForm = ref({
    edition: '',
    description: '',
    filepath: '',
    must_update: '',
    project_name: '',
    createuser: '',
    createtime: '',
  });

  // 版本
  async function getAppInfo() {
    fun_GetUpdateFiles({ project: 'drone_enforcement' }).then(async (res) => {
      if (res) {
        currentAppForm.value.project_name = res.project_name;
        currentAppInfo.value = res;
      }
    });
    deleteFileName();
  }
  // 版本
  getAppInfo();

  // 上传文件接口
  async function uploadApi(file, progress) {
    if (activeKey.value === 'zhifa') {
      const obj: any = await fun_Upload(file, progress);
      if (obj.data.result.length > 0) {
        fileName.value = obj.data.result[0].fileName;
        filePath = obj.data.result[0].filePath;
      }
    } else {
      const obj: any = await fun_Upload(file, progress);
      if (obj.data.result.length > 0) {
        fly_fileName.value = obj.data.result[0].fileName;
        fly_filePath = obj.data.result[0].filePath;
      }
    }
  }

  // 上传之前
  function beforeUpload(file) {
    let extension = file.name.substring(file.name.lastIndexOf('.') + 1);
    let size = file.size / 1024 / 1024;
    if (extension != 'apk') {
      createMessage.warn('只能上传后缀是.apk的文件');
      return false;
    } else if (size > 100) {
      createMessage.warn('文件大小不得超过100M');
      return false;
    } else {
      return true;
    }
  }

  // 删除文件
  function deleteFileName() {
    // 执法端APP-删除文件
    if (activeKey.value === 'zhifa') {
      fileName.value = '';
      filePath = '';
      fileList.value = [];
    } else {
      // 飞控端APP-删除文件
      fly_fileName.value = '';
      fly_filePath = '';
      fly_fileList.value = [];
    }
  }

  // 执法端APP-立即创建
  function onSubmit() {
    if (fileName.value == '' || filePath == '') {
      createMessage.warn(`请选择上传文件!`);
      return;
    }
    if (currentAppForm.value.edition == '') {
      createMessage.warn(`请先填写版本号!`);
      return;
    }
    if (currentAppForm.value.project_name != 'drone_enforcement') {
      createMessage.warn(`请不要修改项目名称!`);
      currentAppForm.value.project_name = 'drone_enforcement';
      return;
    }
    fun_Load({ key: fileName.value }).then((res) => {
      if (res.items.length > 0) {
        currentAppForm.value.filepath = res.items[0].filePath;
        fun_AddAppFiles(currentAppForm.value).then((res2) => {
          if (res2) {
            createMessage.success(`上传成功!`);
            currentAppForm.value = {
              createtime: '',
              createuser: '',
              edition: '',
              description: '',
              filepath: '',
              must_update: '',
              project_name: '',
            };
            fileList.value = [];
            getAppInfo();
          } else {
            createMessage.warn(`接口错误!`);
          }
        });
      } else {
        createMessage.warn(`上传文件出现错误!`);
      }
    });
  }

  // 飞控端APP-立即创建
  function onFlyControlSubmit() {
    if (fly_fileName.value == '' || fly_filePath == '') {
      createMessage.warn(`请选择上传文件!`);
      return;
    }
    if (fly_currentAppForm.value.edition == '') {
      createMessage.warn(`请先填写版本号!`);
      return;
    }
    if (fly_currentAppForm.value.project_name == '') {
      createMessage.warn(`请先填写项目名称!`);
      return;
    }
    fun_Load({ key: fly_fileName.value }).then((res) => {
      if (res.items.length > 0) {
        fly_currentAppForm.value.filepath = res.items[0].filePath;
        fun_AddAppFiles(fly_currentAppForm.value).then((res2) => {
          if (res2) {
            createMessage.success(`上传成功!`);
            fly_currentAppForm.value = {
              createtime: '',
              createuser: '',
              edition: '',
              description: '',
              filepath: '',
              must_update: '',
              project_name: '',
            };
            fly_fileList.value = [];
            getAppInfo();
          } else {
            createMessage.warn(`接口错误!`);
          }
        });
      } else {
        createMessage.warn(`上传文件出现错误!`);
      }
    });
  }
</script>
