<template>
  <a-drawer
    v-model:visible="vdata.isShow"
    :title=" vdata.isAdd ? '发布新版本信息' : '查看版本信息' "
    placement="right"
    :closable="true"
    width="600"
    :mask-closable="false"
    @ok="handleOkFunc"
    @close="onClose"
  >
    <a-form ref="infoFormModel" :model="vdata.saveObject" layout="vertical" :rules="rules" style="padding-bottom:50px">
      <a-row justify="space-between" type="flex">
        <a-col :span="16">
          <a-form-item label="客户端类型:" name="clientType">
            <a-radio-group v-model:value="vdata.saveObject['clientType']">
              <a-radio value="MCH_APP">商户APP</a-radio>
              <a-radio v-if="$hasAgentEnt()" value="AGENT_APP">代理商APP</a-radio>
            </a-radio-group>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row justify="space-between" type="flex">
        <a-col :span="10">
          <a-form-item label="版本名称：" name="versionName">
            <a-input v-model:value="vdata.saveObject['versionName']" />
          </a-form-item>
        </a-col>

        <a-col :span="10">
          <a-form-item label="是否强制更新：" name="forceUpdate">
            <a-radio-group v-model:value="vdata.saveObject['forceUpdate']">
              <a-radio :value="1">是</a-radio>
              <a-radio :value="0">否</a-radio>
            </a-radio-group>
          </a-form-item>
        </a-col>

        <a-col :span="10">
          <a-form-item label="版本序列号：" name="versionSerialNumber">
            <a-input v-model:value="vdata.saveObject['versionSerialNumber']" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row justify="space-between" type="flex">
        <a-col :span="24">
          <a-form-item label="文件/下载地址：" name="downloadUrl">
            <JeepayUpload v-model:src="vdata.saveObject['downloadUrl']" bizType="appFile" fileType="file" accept=".apk" @change="changeFileFunc" />

            <br>自定义地址(上传文件自动回填)： <a-input v-model:value="vdata.saveObject['downloadUrl']" />
          </a-form-item>
        </a-col>
      </a-row>

      <a-row justify="space-between" type="flex">
        <a-col :span="12">
          <a-form-item label="文件大小：" name="fileSize">
            <a-input-number v-model:value="vdata.saveObject['fileSize']" suffix="M" style="width:80%" :precision="2">
              <template #addonAfter>M</template>
            </a-input-number>
          </a-form-item>
        </a-col>
      </a-row>

      <a-row justify="space-between" type="flex">
        <a-col :span="24">
          <a-form-item label="描述信息：" name="versionDesc">
            <a-textarea v-model:value="vdata.saveObject['versionDesc']" placeholder="版本描述信息" :rows="4" />
          </a-form-item>
        </a-col>
      </a-row>

      <div class="drawer-btn-center">
        <a-button :style="{ marginRight: '8px' }" @click="onClose"><close-outlined />取消</a-button>
        <a-button type="primary" :loading="vdata.confirmLoading" @click="handleOkFunc"><check-outlined />保存</a-button>
      </div>
    </a-form>
  </a-drawer>
</template>

<script setup lang="ts">
import { req, API_URL_CLIENT_VERSION_LIST } from '@/api/manage'
import { reactive,ref, getCurrentInstance } from 'vue'
import { Base64 } from 'js-base64'
import { message } from 'ant-design-vue'
const { $hasAgentEnt } = getCurrentInstance()!.appContext.config.globalProperties
    const props = defineProps ({
        callbackFunc: { type: Function, default: () => ({}) }
    })

    const infoFormModel = ref()
    const vdata : any = reactive ({
      loading: false, // 按钮上的loading
      value: 1, // 单选框默认的值
      confirmLoading: false, // 显示确定按钮loading图标
      isAdd: true, // 新增 or 修改页面标识
      isShow: false, // 是否显示弹层/抽屉
      saveObject: {}, // 数据对象
      recordId: null, // 更新对象ID
    })
    const rules = reactive({
      clientType: [{ required: true, message: '客户端类型不能为空', trigger: 'blur' }],
      versionName: [{ required: true, message: '请输入版本名称', trigger: 'blur' }],
      versionSerialNumber: [{ required: true, message: '请输入版本序列号', trigger: 'blur' }],
      fileSize: [{ required: true, message: '请输入文件大小', trigger: 'blur' }],
      downloadUrl: [{ required: true, message: '请输入下载地址', trigger: 'blur' }],
      versionDesc: [{ required: true, message: '请输入版本描述信息', trigger: 'blur' }],
    })

    defineExpose({show})
    function show (recordId, clientType) { // 弹层打开事件
        if (infoFormModel.value !== undefined) {
            infoFormModel.value.resetFields()
        }
        if(!clientType) {
          clientType = 'MCH_APP'
        }
        vdata.isAdd = !recordId
        // 数据恢复为默认数据
        vdata.saveObject = {
          clientType: clientType,
          forceUpdate: 0
        }
        vdata.confirmLoading = false // 关闭loading

        if (!vdata.isAdd) { // 修改信息 延迟展示弹层
            vdata.recordId = recordId
            req.getById(API_URL_CLIENT_VERSION_LIST, recordId).then(res => { vdata.saveObject = res })
            vdata.isShow = true
        } else {
            vdata.isShow = true // 立马展示弹层信息
        }
    }
    function handleOkFunc () { // 点击【确认】按钮事件
      infoFormModel.value.validate().then(valid=>{
          vdata.loading = true // 打开按钮上的 loading
            vdata.confirmLoading = true // 显示loading
            if (vdata.isAdd) {
              req.add(API_URL_CLIENT_VERSION_LIST, vdata.saveObject).then(res => {
                message.success('新增成功')
                vdata.isShow = false
                vdata.loading = false
                props.callbackFunc() // 刷新列表
              }).catch((res) => {
                vdata.confirmLoading = false
              })
            } else {
              req.updateById(API_URL_CLIENT_VERSION_LIST, vdata.recordId, vdata.saveObject).then(res => {
                message.success('修改成功')
                vdata.isShow = false
                props.callbackFunc() // 刷新列表
                }).catch(res => {
                vdata.confirmLoading = false
              })
            }
      })
    }
    // 关闭抽屉
    function onClose () {
      vdata.isShow = false
    }


    function changeFileFunc(url, fileList){

      // 自动回填文件大小。 
      if(fileList && fileList.length > 0){
        vdata.saveObject.fileSize = parseFloat((fileList[0].size / (1024 * 1024) ).toFixed(2))
      }
    }

</script>
