<template>
  <div>
    <div>
      <div style="text-align: center;margin-top: 20px;margin-bottom: 30px">
        <router-link to="/face/compare"><span style="font-size: 28px;margin-top: 30px;text-decoration:underline">人脸对比</span></router-link>
        <router-link to="/face/detect"><span style="font-size: 20px;margin-top: 30px;margin-left: 20px">人脸检测</span></router-link>
        <router-link to="/face/search"><span style="font-size: 20px;margin-top: 30px;margin-left: 20px">人脸搜索</span></router-link>
        <router-link to="/face/bodyAnalysis"><span style="font-size: 20px;margin-top: 30px;margin-left: 20px">人体关键点识别</span></router-link>
        <router-link to="/face/bodyAttr"><span style="font-size: 20px;margin-top: 30px;margin-left: 20px">人体检测和属性识别</span></router-link>
        <router-link to="/face/bodyNum"><span style="font-size: 20px;margin-top: 30px;margin-left: 20px;">人流量统计</span></router-link>
        <router-link to="/face/gesture"><span style="font-size: 20px;margin-top: 30px;margin-left: 20px">手势识别</span></router-link>
        <router-link to="/face/faceVerify"><span style="font-size: 20px;margin-top: 30px;margin-left: 20px">在线活体检测</span></router-link>
        <router-link to="/face/hVideo"><span style="font-size: 20px;margin-top: 30px;margin-left: 20px">视频检测</span></router-link>

      </div>
      <div class="area">
        <div class="area_left">
          <div
            v-loading="loading"
            class="main_up"
            element-loading-text="拼命加载中"
            element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(0, 0, 0, 0.8)"
          >
            <div class="main_up_1">
              <br><br>
              相似度: {{ parseInt(score) }}<br>
              <!--span v-if="parseInt(score) > 90">同一个人可能性极高</span>
              <span v-else-if="parseInt(score) > 30">可能为同一个人</span>
              <span v-else-if="parseInt(score) < 30">同一个人可能性极低</span-->
            </div>
            <div class="main_up_2">
              <div class="main_up_2_left">
                <div class="photo">
                  <img :src="showCompare1" width="360" height="224">
                </div>
                <div class="upload_btn">
                  <div style="float: left">
                    <el-button class="mt" @click="urlUploadImg1">URL上传</el-button>
                    <span style="margin-left: 20px"> 或 </span>
                  </div>
                  <div style="float: left;" class="mt">
                    <el-upload
                      :action="uploadUrl"
                      :on-remove="handleRemove1"
                      :on-success="handleSuccess1"
                      :show-file-list="false"
                      :on-exceed="handleExceed">
                      <el-button type="plain">本地上传</el-button>
                    </el-upload>
                  </div>
                </div>
              </div>
              <div class="main_up_2_right">
                <div class="photo">
                  <img :src="showCompare2" width="360" height="224">
                </div>
                <div class="upload_btn">
                  <div style="float: left">
                    <el-button class="mt" @click="urlUploadImg2">URL上传</el-button>
                    <span style="margin-left: 20px"> 或 </span>
                  </div>
                  <div style="float: left;" class="mt">
                    <el-upload
                      :action="uploadUrl"
                      :on-remove="handleRemove2"
                      :on-success="handleSuccess2"
                      :show-file-list="false"
                      :on-exceed="handleExceed">
                      <el-button type="plain">本地上传</el-button>
                    </el-upload>
                  </div>
                </div>
              </div>
            </div>
            <div class="main_up_3">
              <br><br>
              图片文件支持PNG、JPG、JPEG、BMP，图片大小不超过2M，人脸对比只可对比图片中主体部分。<br>
              本功能演示使用人脸检测接口对图片进行了初步处理。
            </div>
          </div>
          <div class="main_bottom">
            <div class="preset_pic">
              <img :src="presetImage1" :class="presetImage1Class" class="preset_image" @click="presetImage1Click">
            </div>
            <div class="preset_pic">
              <img :src="presetImage2" :class="presetImage2Class" class="preset_image" @click="presetImage2Click">
            </div>
            <div class="preset_pic">
              <img :src="presetImage3" :class="presetImage3Class" class="preset_image" @click="presetImage3Click">
            </div>
            <div class="preset_pic">
              <img :src="presetImage4" :class="presetImage4Class" class="preset_image" @click="presetImage4Click">
            </div>
            <div class="preset_pic">
              <img :src="presetImage5" :class="presetImage5Class" class="preset_image" @click="presetImage5Click">
            </div>
          </div>
        </div>
        <div class="area_right">
          <el-collapse accordion>
            <el-collapse-item title="Request" name="1">
              <div class="ml">
                <p>Params</p>
                <div>
                  <p>第一张图片类型:</p>
                  <el-radio-group v-model="param1" @change="faceCompare">
                    <div class="row_radio">
                      <el-row>
                        <el-radio label="LIVE" style="width: 100px">生活照</el-radio>
                        <el-radio label="IDCARD" style="width: 100px">身份证芯片照</el-radio>
                      </el-row>
                      <el-row>
                        <el-radio label="WATERMARK" style="width: 100px">带水印证件照</el-radio>
                        <el-radio label="CERT" style="width: 100px">证件照片</el-radio>
                      </el-row>
                    </div>
                  </el-radio-group>
                </div>

                <div>
                  <p>第二张图片类型:</p>
                  <el-radio-group v-model="param2" @change="faceCompare">
                    <div class="row_radio">
                      <el-row>
                        <el-radio label="LIVE" style="width: 100px">生活照</el-radio>
                        <el-radio label="IDCARD" style="width: 100px">身份证芯片照</el-radio>
                      </el-row>
                      <el-row>
                        <el-radio label="WATERMARK" style="width: 100px">带水印证件照</el-radio>
                        <el-radio label="CERT" style="width: 100px">证件照片</el-radio>
                      </el-row>
                    </div>
                  </el-radio-group>
                </div>

                <div>
                  <p>第一张活体检测控制:</p>
                  <el-radio-group v-model="param3" @change="faceCompare">
                    <div class="row_radio">
                      <el-row>
                        <el-radio label="NONE" style="width: 100px">不进行控制</el-radio>
                        <el-radio label="LOW" style="width: 100px">较低的活体要求</el-radio>
                      </el-row>
                      <el-row>
                        <el-radio label="NORMAL" style="width: 100px">一般的活体要求</el-radio>
                        <el-radio label="HIGH" style="width: 100px">较高的活体要求</el-radio>
                      </el-row>
                    </div>
                  </el-radio-group>
                </div>

                <div>
                  <p>第二张活体检测控制:</p>
                  <el-radio-group v-model="param4" @change="faceCompare">
                    <div class="row_radio">
                      <el-row>
                        <el-radio label="NONE" style="width: 100px">不进行控制</el-radio>
                        <el-radio label="LOW" style="width: 100px">较低的活体要求</el-radio>
                      </el-row>
                      <el-row>
                        <el-radio label="NORMAL" style="width: 100px">一般的活体要求</el-radio>
                        <el-radio label="HIGH" style="width: 100px">较高的活体要求</el-radio>
                      </el-row>
                    </div>
                  </el-radio-group>
                </div>

                <br>
                <div>
                  <span>[</span><br>
                  <span style="margin-left: 20px">{</span><br>
                  <span style="margin-left: 40px">"image": "图片1的Base64编码",</span><br>
                  <span style="margin-left: 40px">"image_type": "BASE64",</span><br>
                  <span style="margin-left: 40px">"face_type": "{{ param1 }}",</span><br>
                  <span style="margin-left: 40px">"liveness_control": "{{ param3 }}"</span><br>
                  <span style="margin-left: 20px">},</span><br>
                  <span style="margin-left: 20px">{</span><br>
                  <span style="margin-left: 40px">"image": "图片2的Base64编码",</span><br>
                  <span style="margin-left: 40px">"image_type": "BASE64",</span><br>
                  <span style="margin-left: 40px">"face_type": "{{ param2 }}",</span><br>
                  <span style="margin-left: 40px">"liveness_control": "{{ param4 }}"</span><br>
                  <span style="margin-left: 20px">}</span><br>
                  <span>]</span><br>
                </div>

                <div>
                  <p>POST</p>
                  <p>https://aicgi.wo186.tv/face-api/v3/face/match?appid=‘您的应用id’</p>
                </div>

                <div >
                  <p>Header</p>
                  <p>header: Content-Type: "application/json"</p>
                </div>
              </div>

            </el-collapse-item>
            <el-collapse-item title="Response" name="2">
              <div class="ml">
                <span>{</span><br>
                <span style="margin-left: 20px">"score": {{ score }},</span><br>
                <span style="margin-left: 20px">"face_list": [</span><br>
                <span style="margin-left: 40px">{</span><br>
                <span style="margin-left: 60px">"face_token": </span><br>
                <span>"{{ faceToken1 }}"</span><br>
                <span style="margin-left: 40px">},</span><br>
                <span style="margin-left: 40px">{</span><br>
                <span style="margin-left: 60px">"face_token": </span><br>
                <span>"{{ faceToken2 }}"</span><br>
                <span style="margin-left: 40px">},</span><br>
                <span style="margin-left: 20px">]</span><br>
                <span>}</span><br>
              </div>

            </el-collapse-item>
          </el-collapse>
        </div>
      </div>

      <el-dialog
        :visible.sync="setUrl1Visible"
        title="输入网络图片URL"
        width="30%">
        <el-input v-model="showCompare1" placeholder="请输入网络图片URL"/>
        <span slot="footer" class="dialog-footer">
          <el-button @click="setUrl1Visible = false">取 消</el-button>
          <el-button type="primary" @click="submitSetUrl1">检 测</el-button>
        </span>
      </el-dialog>
      <el-dialog
        :visible.sync="setUrl2Visible"
        title="输入网络图片URL"
        width="30%">
        <el-input v-model="showCompare2" placeholder="请输入网络图片URL"/>
        <span slot="footer" class="dialog-footer">
          <el-button @click="setUrl2Visible = false">取 消</el-button>
          <el-button type="primary" @click="submitSetUrl2">检 测</el-button>
        </span>
      </el-dialog>
    </div>
  </div>

</template>

<script>
import axios from 'axios'
export default {
  name: 'Compare',
  data() {
    return {
      loading: false,
      imgPrefix: process.env.IMAGE_URL,
      uploadUrl: process.env.UPLOAD_URL,
      compare1: '',
      compare2: '',
      presetImage1: require('../../assets/face/compare/12.jpg'),
      presetImage2: require('../../assets/face/compare/34.jpg'),
      presetImage3: require('../../assets/face/compare/56.jpg'),
      presetImage4: require('../../assets/face/compare/78.jpg'),
      presetImage5: require('../../assets/face/compare/910.jpg'),
      presetImage1Class: 'gray',
      presetImage2Class: 'gray',
      presetImage3Class: 'gray',
      presetImage4Class: 'gray',
      presetImage5Class: 'gray',
      param1: 'LIVE',
      param2: 'LIVE',
      param3: 'NONE',
      param4: 'NONE',
      faceToken1: '',
      faceToken2: '',
      score: 0,
      img1Face: '',
      img2Face: '',
      showCompare1: '',
      showCompare2: '',
      setUrl1Visible: false,
      setUrl2Visible: false
    }
  },
  created() {
    this.presetImage1Click()
  },
  methods: {
    presetImage1Click() {
      this.presetImage1Class = ''
      this.presetImage2Class = 'gray'
      this.presetImage3Class = 'gray'
      this.presetImage4Class = 'gray'
      this.presetImage5Class = 'gray'
      this.compare1 = '11'
      this.compare2 = '12'
      this.showCompare1 = require('../../assets/face/compare/11.png')
      this.showCompare2 = require('../../assets/face/compare/12.png')
      this.faceCompare()
    },
    presetImage2Click() {
      this.presetImage2Class = ''
      this.presetImage1Class = 'gray'
      this.presetImage3Class = 'gray'
      this.presetImage4Class = 'gray'
      this.presetImage5Class = 'gray'
      this.compare1 = '21'
      this.compare2 = '22'
      this.showCompare1 = require('../../assets/face/compare/21.png')
      this.showCompare2 = require('../../assets/face/compare/22.png')
      this.faceCompare()
    },
    presetImage3Click() {
      this.presetImage3Class = ''
      this.presetImage1Class = 'gray'
      this.presetImage2Class = 'gray'
      this.presetImage4Class = 'gray'
      this.presetImage5Class = 'gray'
      this.compare1 = '31'
      this.compare2 = '32'
      this.showCompare1 = require('../../assets/face/compare/31.png')
      this.showCompare2 = require('../../assets/face/compare/32.png')
      this.faceCompare()
    },
    presetImage4Click() {
      this.presetImage4Class = ''
      this.presetImage1Class = 'gray'
      this.presetImage2Class = 'gray'
      this.presetImage3Class = 'gray'
      this.presetImage5Class = 'gray'
      this.compare1 = '41'
      this.compare2 = '42'
      this.showCompare1 = require('../../assets/face/compare/41.png')
      this.showCompare2 = require('../../assets/face/compare/42.png')
      this.faceCompare()
    },
    presetImage5Click() {
      this.presetImage5Class = ''
      this.presetImage1Class = 'gray'
      this.presetImage2Class = 'gray'
      this.presetImage3Class = 'gray'
      this.presetImage4Class = 'gray'
      this.compare1 = '51'
      this.compare2 = '52'
      this.showCompare1 = require('../../assets/face/compare/51.png')
      this.showCompare2 = require('../../assets/face/compare/52.png')
      this.faceCompare()
    },
    faceCompare() {
      this.loading = true
      var vm = this
      var params = new URLSearchParams()
      params.append('image1', vm.compare1)
      params.append('imageType1', 'BASE64')
      params.append('faceType1', vm.param1)
      // params.append('quality_control', 'LOW')
      params.append('livenessControl1', vm.param3)
      params.append('image2', vm.compare2)
      params.append('imageType2', 'BASE64')
      params.append('faceType2', vm.param2)
      params.append('livenessControl2', vm.param4)
      axios.post(process.env.BASE_API + '/demo/compare', params).then(function(response) {
        var obj = response.data
        vm.loading = false
        if (obj.code !== 10000) {
          vm.$message.info(obj.message)
          vm.score = 0
          vm.faceToken1 = ''
          vm.faceToken2 = ''
        } else {
          // vm.$message(obj.message)
          vm.faceToken1 = obj.data.face_list[0].face_token
          vm.faceToken2 = obj.data.face_list[1].face_token
          vm.score = obj.data.score
        }
      }).catch(function(error) {
        alert(error)
      })
    },
    handleSuccess1(res, file, fileList) {
      if (res.code === 10000) {
        this.showCompare1 = this.imgPrefix + res.imageUrl
        if (this.showCompare2 !== '') {
          this.compare1 = this.showCompare1
          this.faceCompare()
        }
      } else {
        this.$message.error(res.message)
        fileList.splice(fileList.indexOf(file), 1)
        this.showCompare1 = ''
      }
    },
    handleRemove1(file, fileList) {
      this.showCompare1 = ''
    },
    handleSuccess2(res, file, fileList) {
      if (res.code === 10000) {
        this.showCompare2 = this.imgPrefix + res.imageUrl
        if (this.showCompare1 !== '') {
          this.compare2 = this.showCompare2
          this.faceCompare()
        }
      } else {
        this.$message.error(res.message)
        fileList.splice(fileList.indexOf(file), 1)
        this.showCompare2 = ''
      }
    },
    handleRemove2(file, fileList) {
      this.showCompare2 = ''
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
    },
    urlUploadImg1() {
      this.setUrl1Visible = true
    },
    urlUploadImg2() {
      this.setUrl2Visible = true
    },
    submitSetUrl1() {
      if (this.showCompare1 !== '') {
        this.compare1 = this.showCompare1
        if (this.compare2 !== '') {
          this.faceCompare()
        }
      }
      this.setUrl1Visible = false
    },
    toHvideo() {
      window.location.href = 'http://182.254.204.70:8080/dist/index.html'
    },
    submitSetUrl2() {
      if (this.showCompare2 !== '') {
        this.compare2 = this.showCompare2
        if (this.compare1 !== '') {
          this.faceCompare()
        }
      }
      this.setUrl2Visible = false
    }
  }
}
</script>

<style scoped>
  .area {
    width: 1180px;
    height: 655px;
    text-align: center;
    margin:0 auto;
  }
  .area_left {
    float: left;
    width: 840px;
    height: 655px;
  }
  .main_up {
    width:840px;
    height: 525px;
    background: #515254;
  }
  .main_up_1 {
    width:840px;
    height: 107px;
    color: white;
  }
  .main_up_2 {
    width:840px;
    height: 303px;
  }
  .main_up_2_left {
    float: left;
    width: 360px;
    height: 303px;
    margin-left: 40px;
  }
  .photo {
    width: 360px;
    height: 224px;
  }
  .upload_btn {
    float: left;
    display: inline;
    width: 360px;
    height: 78px;
    background: rgba(0,0,0,.45);
  }
  .mt {
    margin-top: 20px;
    margin-left: 30px;
  }
  .ml {
    text-align: left;
    margin-left: 20px;
  }
  .main_up_2_right {
    float: left;
    width: 360px;
    height: 303px;
    margin-left: 40px;
  }
  .main_up_3 {
    width:840px;
    height: 115px;
    color:white;
  }
  .main_bottom {
    width:840px;
    height: 130px;
    background: #ebebeb;
  }
  .preset_pic {
    margin-left: 20px;
    margin-top: 20px;
    width: 144px;
    height: 90px;
    float: left;
  }
  .preset_image {
    margin-left: 2px;
    margin-top: 2px;
    width: 140px;
    height: 86px;
  }
  .area_right {
    float: left;
    width: 340px;
    height: 655px;
    border: 3px;
    overflow-y:scroll;
  }
  .row_radio {
    float: left;
  }
  .gray {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: gray;
  }

</style>
