<route lang="yaml">
meta:
  enabled: false
</route>

<script lang="ts" setup>
import type { FormInstance, FormRules } from 'element-plus'
import { ElMessage } from 'element-plus'
import { createApp } from '@/api/apps/appApi'

const router = useRouter()

const formRef = ref<FormInstance>()
const formRules = ref<FormRules>({
  appTitle: [{ required: true, message: '请输入appTitle', trigger: 'blur' }],
  appCatTitle: [{ required: true, message: '请输入appCatTitle', trigger: 'blur' }],
  appUrl: [{ required: false, message: '请输入appUrl', trigger: 'blur' }],
  appCode: [{ required: false, message: '请输入app编码', trigger: 'blur' }],
  appKey: [{ required: true, message: '请输入App Key', trigger: 'blur' }],
  appSecret: [{ required: true, message: '请输入App Secret', trigger: 'blur' }],
  appDesc: [{ required: false, message: '请输入描述', trigger: 'blur' }],
})

const state = reactive({
  title: '',
  dialogVisible: false,
  loading: false,
  status: 0,
  formData: {
    appId: 0,
    appCode: '',
    appTitle: '',
    appCatTitle: '',
    appCatId: 0,
    appParam: '',
    appUrl: '',
    appKey: '',
    appSecret: '',
    appDesc: '',
    appLogo: '',
  },
  actionType: 1,
})

onMounted(() => {})

function onCancel() {
  resetFormData()
}

function resetFormData() {
  state.formData = {
    appId: 0,
    appCode: '',
    appTitle: '',
    appCatTitle: '',
    appCatId: 0,
    appUrl: '',
    appParam: '',
    appKey: '',
    appSecret: '',
    appDesc: '',
    appLogo: '',
  }
}

function onSubmit() {
  formRef.value && formRef.value.validate(async (valid) => {
    if (valid) {
      if (state.actionType === 1) {
        await createApp(state.formData)
      }
      state.status = 1
      ElMessage.success({
        message: '保存成功',
        center: true,
      })
    }
  })
}
function onCheck() {
  router.push({
    path: '/app-center/store',
  })
}
function onGoOn() {
  onCancel()
  state.status = 0
}
</script>

<template>
  <div>
    <page-header title="应用发布" content="上线发布应用软件或应用服务" />
    <page-main>
      <el-row v-if="state.status === 0" type="flex" justify="center">
        <el-col :md="12" :sm="18">
          <el-form ref="formRef" :model="state.formData" :rules="formRules" label-width="120px" label-suffix="：">
            <el-form-item label="标题" prop="appTitle">
              <el-input v-model="state.formData.appTitle" />
            </el-form-item>

            <el-form-item label="分类">
              <app-cat-selector v-model="state.formData.appCatId" />
            </el-form-item>

            <el-form-item label="编码" prop="appCode">
              <el-input v-model="state.formData.appCode" />
            </el-form-item>

            <el-form-item label="地址" prop="appUrl">
              <el-input v-model="state.formData.appUrl" />
            </el-form-item>

            <el-form-item label="LOGO">
              <el-image
                style="width: 50px; height: 50px;border-radius:50%;"
                :src="state.formData.appLogo"
                :preview-src-list="[state.formData.appLogo]"
              />
            </el-form-item>

            <el-form-item label="参数" prop="appParam">
              <el-input v-model="state.formData.appParam" />
            </el-form-item>

            <el-form-item label="App Key" prop="appKey">
              <el-input v-model="state.formData.appKey" />
            </el-form-item>

            <el-form-item label="App Secret" prop="appSecret">
              <el-input v-model="state.formData.appSecret" />
            </el-form-item>

            <el-form-item label="描述">
              <el-input v-model="state.formData.appDesc" type="textarea" />
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="onSubmit">
                立即发布
              </el-button>
              <el-button size="large" @click="onCancel">
                重新填写
              </el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <div v-else class="submit-end">
        <h2>恭喜，应用已发布成功！</h2>
        <p>
          <span>请选择</span>
          <span class="link" @click="onCheck">查看</span>
          <span>或者</span>
          <span class="link" @click="onGoOn">继续发布</span>
        </p>
      </div>
    </page-main>
  </div>
</template>

<style lang="scss" scoped>
.submit-end{
  text-align: center;
  .link{
    color: #0070cc;
    padding:0 5px;
    cursor: pointer;
    &:hover{
      text-decoration: underline;
    }
  }
}
</style>
