<script setup>
import { ArrowLeftBold } from '@element-plus/icons-vue'
import upload2 from '/images/upload2.png'
import right1 from '/images/right1.png'
import right2 from '/images/right2.png'
import error1 from '/images/error1.png'
import error2 from '/images/error2.png'
import error3 from '/images/error3.png'

const route = useRoute()
const type = route.query.type
const router = useRouter()
function handleBack() {
  router.back()
}
const formSize = $ref('default')
const ruleFormRef = $ref()
const form = $ref({
  axi_name: '',
  axi_img: '',
  axi_yyfw: '',
  axi_bzms: '',
  axi_mssc: '',
  axi_is_system: '2',
  axi_type: '1',
})
const rules = $ref({
  axi_name: [
    { required: true, message: '请填写名称', trigger: 'submit' },
  ],
  axi_img: [
    { required: true, message: '请上传头像', trigger: 'submit' },
  ],
  axi_yyfw: [
    { required: true, message: '请填写应用范围', trigger: 'submit' },
  ],
  axi_mssc: [
    { required: true, message: '请上传陈述素材', trigger: 'submit' },
  ],
})

async function submitForm(formEl) {
  if (!formEl)
    return
  formEl.validate(async (valid, fields) => {
    if (valid) {
      const { code, msg, data } = await request({ url: '/aimooc/xnszr_img/add', data: { aimooc_xnszr_img: form } })
      if (code === '1')
        ElMessageBox.alert('提交数据需审核, 审核通过后显示',null, {
          confirmButtonText: '确定',
          showClose: false,
          callback: (action) => {
            ElMessage.success(msg)
            handleBack();
          },
        })
    }
    else {
      console.log('error submit!', fields)
    }
  })
}
</script>

<template>
  <div>
    <div class="h-77px flex items-center bg-white px-20px">
      <el-icon class="mr-30px cursor-pointer" size="29" @click="handleBack">
        <ArrowLeftBold />
      </el-icon>
      <h3 class="text-24px">
        定制个人2D形象
      </h3>
    </div>
    <div class="w-full flex flex-col p-20px">
      <div class="min-h-200 w-full rounded-10px bg-white px px-47px py-38px">
        <h3>新建形象</h3>
        <el-form
          ref="ruleFormRef" :model="form" :rules="rules" class="demo-ruleForm" :size="formSize" status-icon
          label-position="top"
        >
          <el-form-item label="形象名称" prop="axi_name">
            <el-input v-model="form.axi_name" />
          </el-form-item>
          <el-form-item label="形象图片" prop="axi_img">
            <div
              class="h-100px w-460px flex items-center border-1 border-green-500/50 rounded-10px border-dashed bg-hex-fafcf8 pr-10px text-hex-99c183"
            >
              <CommonUpload v-model="form.axi_img" type="image" tip="上传比例限制1:1, 形象图片建议不带背景的透明png格式的图片, 建议上传小于500KB的 jpg, png 格式图片">
                <!-- <template #tip>
                  <p>形象图片建议不带背景</p>
                </template> -->
              </CommonUpload>
            </div>
          </el-form-item>
          <el-form-item label="应用范围" prop="axi_yyfw">
            <el-input v-model="form.axi_yyfw" />
          </el-form-item>
          <el-form-item label="备注描述">
            <el-input v-model="form.axi_bzms" type="textarea" :autosize="{ minRows: 5, maxRows: 20 }" />
          </el-form-item>
          <el-form-item label="陈述素材" prop="axi_mssc">
            <div
              class="h-150px w-460px flex items-center overflow-auto border-1 border-green-500/50 rounded-10px border-dashed bg-hex-fafcf8 px-10px text-hex-99c183"
            >
              <FileUploadProgress v-model:part="form.axi_mssc" class="w-full" accept=".mp4,.mov">
                <template #default>
                  <slot>
                    <div class="flex items-center">
                      <div
                        class="mr-12px h-56px w-56px flex items-center justify-center rounded-50px bg-white"
                      >
                        <img :src="upload2" alt="">
                      </div>
                      <p class="w-290px leading-20px">
                        为确保正常使用,请务必上传分辨率为1920*1080,格式为mp4、mov,并且时长小于30s的视频文件,不符合要求的素材会导致生成失败, 陈述素材建议不带背景的透明人物视频. 建议上传小于512MB的MP4 H264格式的视频
                      </p>
                    </div>
                  </slot>
                </template>
              </FileUploadProgress>
            </div>
          </el-form-item>
          <div class="w-460px text-center">
            <el-button type="primary" class="h-42px w-314px" @click="submitForm(ruleFormRef)">
              确认
            </el-button>
          </div>
        </el-form>
      </div>
      <div class="mb-15px mt-25px">
        <div class="flex items-center">
          <div class="active pageTitle">
            说明教程
          </div>
        </div>
        <div class="flex items-center">
          <div class="mr-30px">
            <h3 class="text-18px">
              为保证生成成功，请确保上传照片符合以下要求
            </h3>
            <div class="mt-20px text-14px leading-loose">
              <p class="">
                正面照片，头像免冠居于照片正中为宜
              </p>
              <p>表情呈自然中性，眼睛直视前方，面部无遮挡</p>
              <p>面部五官清晰可见，脸部需占整张照片50%左右</p>
            </div>
          </div>
          <div>
            <div class="mb-30px flex items-center">
              <span class="text-hex-00B08A">正确示例</span>
              <img class="mx-30px" :src="right1" alt="">
              <img :src="right2" alt="">
            </div>
            <div class="my-10px flex items-center">
              <span class="text-hex-FF6A55">错误示例</span>
              <img class="mx-30px" :src="error1" alt="">
              <img class="mr-30px" :src="error2" alt="">
              <img :src="error3" alt="">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<route lang="json">
{
    "meta": {
        "hidden": true,
        "hideLayout": true
    }
}
</route>

<style lang="scss" scoped>
@use "~/styles/page.scss";

:deep {
    .el-input {
        width: 460px;
    }

    .el-input__wrapper {
        background: #f7f7f7;
        box-shadow: none;
        width: 460px;
    }

    .el-form-item__content {
        width: 460px;
    }

    .el-textarea {
        width: 460px;
        box-shadow: none;
        outline: none;
        border: none;
        padding: 0;
    }

    .el-textarea__inner {
        background: #f7f7f7;
        margin: 0;
        border: none;
        outline: none;
        height: 100%;
        padding: 5px 10px;
        box-shadow: none;
    }

    .demo-ruleForm {
        width: 500px;
        margin: 0 auto;
    }
}

:deep{
  .upload-img{
    padding-left: 10px;
    div:first-child{
      width: 90px;
      height: 50px;
    }
  }
}
.rounded {
    border-radius: 0 0 24px 24px;
}
</style>
