<script>
// 申请成为up的申请界面
import UploadPic from "@/components/UploadPic.vue";
import {provinceAndCityData,pcTextArr,regionData,pcaTextArr,codeToText,} from'element-china-area-data'
export default {
  name: "ApplyForUp",
  components:{
    UploadPic:UploadPic
  },
  data() {
    return {
      formData:{
        keeperName :'', // 姓名
        idCard:"", //申请人身份证
        business_license:"", //营业许可证URL
        reason:"", // 申请理由
        pics_url:"", // 店铺图片
      },
      provinceAndCityData,
      pcaTextArr,
      selectedOptions:[], // 地址选项
      placeDetail:"",
      rules:{
        desc:[{require:true}]
      }
    };
  },
  computed:{
    address(){
      let res = ""
      console.log(this.selectedOptions)
      for(let city in this.selectedOptions) res +=this.selectedOptions[city]
      return res + this.placeDetail;
    }
  }
  ,
  methods: {
    onSubmit() {
      const requestForm = {
        storeAddress:this.address,
        idcard:this.formData.idCard,
        businessLicense: this.formData.business_license,
        reason:this.formData.reason,
        picsUrl:this.formData.pics_url,
        keeperName:this.formData.keeperName
      }
      console.log(requestForm)
      this.$request.post("/audits/add",requestForm).then(res=>{
        console.log(res)
      })

    },
    updateBsCard(data){this.formData.business_license = data[0].url},
    updateDeleBsCard(file){this.formData.business_license = null},
    updateFarm(data){this.formData.pics_url= data[0].url},//农村图片
    updateDeleFarm(data){this.formData.pics_url = null},//删除选中的图片
  }
}

</script>

<template>
<div>
  <el-card class="applyForm" style="margin-left:10%;margin-right: 10%; width: 80%">
    <div style="text-align: center "> 申 请 店 铺 </div>
    <el-form :rule="rules" label-position="left" ref="form" :model="formData" label-width="80px" size="mini" class="demo-ruleForm">
      <el-form-item label="姓名" style="width: 30%">
        <el-input v-model="formData.keeperName"></el-input>
      </el-form-item>

      <el-form-item label="营业许可证照片" :rule="[
          {require:true,message:'请上传营业许可照片'}
      ]">
        <UploadPic fileType="营业许可证照片" @update:uploadFile="updateBsCard" @update:cancelUpload="updateDeleBsCard">
        </UploadPic>
      </el-form-item>
      <el-form-item label="农铺照片" :rule="[
          {require:true,message:'请上传农铺照片'}
      ]">
        <UploadPic fileType="农铺照片" @update:uploadFile="updateFarm" @update:cancelUpload="updateDeleFarm">
        </UploadPic>
      </el-form-item>
      <el-form-item label="申请理由" prop="desc">
        <el-input
            type="textarea"
            placeholder="请输入内容"
            maxlength="300"
            v-model="formData.reason"
            show-word-limit
            autosize
            style="font-family: 'PingFang SC' "
        >
        </el-input>
      </el-form-item>
      <el-form-item label="店铺地址" >
        <el-col :span="63">
        <el-cascader
            size="large"
            :options="pcaTextArr"
            v-model="selectedOptions">
        </el-cascader>
          <i> 详细地址 </i> <el-input v-model="placeDetail" style="width: 100%"></el-input>
        </el-col>

      </el-form-item>
      <el-form-item size="large">
        <el-button type="primary" @click="onSubmit">提交申请</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>

  </el-card>

</div>
</template>

<style>
// 这里把他放到居中位置
.applyForm {
  width: 400px; /* 设置表单的宽度 */
  margin: 0 auto; /* 使用 margin 属性将表单水平居中 */
}

</style>