<template>
  <div class="card-container">
    <h5>名片查询</h5>
    <el-form :model="form" :rules="rules" ref="ruleForm" label-width="80px" class="rule-form">
      <el-form-item label="姓名" required>
        <el-input v-model="form.name" size="small" placeholder="请输入姓名" disabled></el-input>
      </el-form-item>
      <el-form-item label="手机号" required>
        <el-input v-model="form.mobile" size="small" placeholder="请输入手机号" disabled></el-input>
      </el-form-item>
      <el-form-item label="证书号" required>
        <el-input v-model="form.number" size="small" placeholder="请输入证书号" disabled></el-input>
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="form.email" size="small" placeholder="请输入邮箱"></el-input>
      </el-form-item>
      <el-form-item label="地址" prop="address">
        <el-input v-model="form.address" size="small" placeholder="请输入地址"></el-input>
      </el-form-item>
      <el-form-item label="">
        <el-button type="primary" @click="handleSubmit" size="mini">确认信息正确，查询名片</el-button>
        <!-- <el-button v-if="cardUrl" type="primary" @click="handleDownload" size="mini" plain style="margin-left:50px;">下载名片</el-button> -->
      </el-form-item>
    </el-form>
    <div class="card" v-if="cardUrl">
      <embed :src="cardUrl">
    </div>
  </div>
</template>
<script>
import BeforeRouter from '@/components/before/index'
import { getCardInfo, getCardUrl } from '@/api/my'
const EMAIL_REG = /^[A-Za-z0-9]+([_.\\-][A-Za-z0-9]+)*@([A-Za-z0-9-]+\.)+[A-Za-z]{2,6}$/
const checkEmail = (rule, value, callback) => {
  if (value) {
    if (!EMAIL_REG.test(value)) {
      callback(new Error('邮箱格式错误'));
    } else {
      callback()
    }
  }
}
export default {
  data() {
    return {
      form: {
        name: '',
        mobile: '',
        number: '',
        email: '',
        address: ''
      },
      rules: {
        email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          { validator: checkEmail, trigger: 'blur' }
        ],
        address: { required: true, message: '请输入地址', trigger: 'blur' }
      },
      cardUrl: '', // https://webapp-pub.oss-cn-beijing.aliyuncs.com/certificate/13034769668.jpg
      isLogin: false
    }
  },
  created() {
    this.needLogin()
  },
  methods: {
    handleSubmit() {
      if (!this.isLogin) {
        this.$message.error('请先登录')
        return
      }
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          this.fetchCertSearch()
        } else {
          return false
        }
      })
    },
    handleDownload() {
      this.fileDownload(this.cardUrl, this.cardUrl)
    },
    async fileDownload(fileUrl, fileName) {
      const elink = document.createElement('a')// 创建一个a标签
      elink.download = fileName;// 设置a标签的下载属性
      elink.style.display = 'none';// 将a标签设置为隐藏
      elink.href = fileUrl;// 把之前处理好的地址赋给a标签的href
      document.body.appendChild(elink);// 将a标签添加到body中
      elink.click();// 执行a标签的点击方法
      // URL.revokeObjectURL(elink.href) // 下载完成释放URL 对象
      document.body.removeChild(elink)// 移除a标签
    },
    fetchCardInfo() {
      this.isLogin = true
      getCardInfo().then(res => {
        if (res.code === 0 && res.data && res.data.sso_id) {
          this.form.name = res.data.name
          this.form.mobile = res.data.mobile
          this.form.number = res.data.number
        } else {
          this.$message.error(res.message || '请先登录')
        }
      })
    },
    fetchCertSearch() {
      const { email, address } = this.form
      getCardUrl({ email, address }).then(res => {
        if (res.code === 0 && res.name === 'Bad Request') {
          this.$message.error(res.message || '获取名片失败')
        } else {
          this.cardUrl = res.url
        }
      }).catch(err => {
        console.log(err)
      })
    },
    async needLogin() {
      const isLogin = await BeforeRouter.loginInfo.isLogin()
      if (isLogin) this.fetchCardInfo()
      else this.$message.error('请先登录')
    }
  }
}
</script>
<style scoped>
h5{
  font-size:20px;
  line-height:80px;
  text-align:center;
}
.rule-form{
  width: 400px;
  margin:0 auto;
}
.card{
  width:1200px;
  height:500px;
  margin:0 auto;
  padding: 10px 0 30px;
}
.card embed{
  width:100%;
  height:100%;
}
</style>