<script setup>
import {reactive, ref} from 'vue'
import { useStore } from "vuex";
const store = useStore();
const apiUploadUrl=import.meta.env.VITE_APP_API_URL+'/public/upload'
const headers={Authorization:store.state.token}
let idCardImg=ref('')
const handleIdCardExpSuccess=(e)=>{
    if(e.code===200){
        idCardImg.value=e.data
    }
}

let formRef=ref(null)
const rules=reactive({
    name:[{
      required: true,
      message: '请填写姓名',
      trigger: 'blur',
    }],
    companyName:[{
      required: true,
      message: '请填写公司名称',
      trigger: 'blur',
    }],
    tel:[{
      required: true,
      message: '请填写手机号',
      trigger: 'blur',
    }],
    permission:[{
      required: true,
      message: '请选择品种',
      trigger: 'change',
    }],

})
let formData=reactive({
    form:null,
    name: '',
    tel:store.state.userInfo.mobile,
    companyName: '',
    permission: [],
})

// 获取可以选择的权限列表数据
import {apiGetPermissionList} from '@/api/common'
let varietyList=ref([])
const getVarietyList=async ()=>{
    const res=await apiGetPermissionList()
    if(res.code===200){
        varietyList.value=res.data
    }
}
getVarietyList()

import {apiApplyPermission} from '@/api/user'
import { ElMessage } from 'element-plus'
import { useRoute, useRouter } from 'vue-router';
const route=useRoute()
const router=useRouter()
const handleApply=(formEl)=>{
    formEl.validate((valid) => {
    if (valid) {
        console.log('submit!')
        apiApplyPermission({
            business_card_url:idCardImg.value,
            company_name:formData.companyName,
            permission:formData.permission.join(','),
            real_name:formData.name,
            source:Number(route.query.source)||0,
            from_page:route.query.fromPage
        }).then(res=>{
            if(res.code===200){
                store.state.userInfo.has_apply=true
                ElMessage('申请成功')
                router.replace('/apply/result')
            }
        })
    } else {
      console.log('error submit!')
      return false
    }
  })
}
</script>

<template>
    <div class="apply-permission-page">
        <p class="tips" style="margin-bottom:36px">请上传您的名片信息，以便工作人员更好地为您服务</p>
        <div class="flex img-wrap">
            <el-upload
                :headers="headers"
                :action="apiUploadUrl"
                :show-file-list="false"
                :on-success="handleIdCardExpSuccess"
                :before-upload="beforeAvatarUpload"
            >
                <div class="img-box">
                    <img style="width:100%;height:100%" :src="idCardImg" alt="" v-if="idCardImg">
                    <div style="text-align:center" v-else>
                        <img style="width:40px" src="@/assets/add.png" alt="">
                        <!-- <span class="exp-text">上传名片</span> -->
                    </div>
                </div>
            </el-upload>
            <div class="img-box" style="margin-left:20px;border: none;">
                <img style="width:100%;height:100%" :src="$store.state.globalImgUrls.idCardExp" alt="">
                <!-- <span class="exp-text">名片示例</span> -->
            </div>
        </div>
        <el-form
            label-position="left"
            label-width="80px"
            :model="formData"
            :rules="rules"
            ref="formRef"
            style="max-width: 500px"
        >
            <el-form-item label="姓名" prop="name">
                <el-input v-model="formData.name" style="width:450px" placeholder="请输入姓名"></el-input>
            </el-form-item>
            <el-form-item label="公司名称" prop="companyName">
                <el-input v-model="formData.companyName" style="width:450px" placeholder="请输入公司名"></el-input>
            </el-form-item>
            <el-form-item label="手机号码" prop="tel" v-if="!$store.state.userInfo.email">
                <el-input v-model="formData.tel" disabled style="width:450px"></el-input>
            </el-form-item>
            <el-form-item label="关注品种" prop="permission">
                <el-select v-model="formData.permission" multiple collapse-tags placeholder="请选择您的关注品种" style="width:450px">
                    <el-option 
                        v-for="item in varietyList"
                        :key="item.name"
                        :label="item.name" 
                        :value="item.name"
                    ></el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <div class="global-main-btn btn" @click="handleApply(formRef)">立即申请</div>

    </div>
</template>
<style lang="scss" scoped>
.apply-permission-page{
    .tips{
        font-size: 18px;
        text-align: center;
    }
    .img-wrap{
        justify-content: center;
        .img-box{
            width: 240px;
            height: 160px;
            border-radius: 8px;
            background-color: #FAFBFC;
            border: 1px solid #F3A52F;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            overflow: hidden;
            .exp-text{
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
                bottom: 31px;
                font-size: 16px;
            }
        }
    }
    .el-form{
        margin-left: auto;
        margin-right: auto;
        margin-top: 30px;
        :deep(.el-select__tags){
            padding-left: 10px;
        }
    }
    .btn{
        width: 218px;
        margin: 60px auto 0 auto;
    }
}
</style>