<template>
  <div>
    <div>
      <div style="text-align: center;margin-top: 20px;margin-bottom: 30px">
        <router-link to="/face/compare"><span style="font-size: 20px;margin-top: 30px;">人脸对比</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: 28px;margin-top: 30px;margin-left: 20px;text-decoration:underline">人脸搜索</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>
            </div>
            <div class="main_up_2">
              <div class="main_up_2_left">
                <span style="color: white;">被查人脸(图片中主体部分)</span><br><br>
                <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">
                <span style="color: white;">查找结果</span><br><br>
                <div class="smallphoto">
                  <img v-if="searchResult1 !== ''" :src="searchResult1" width="162" height="142">
                  <div v-if="searchResult1 ===''" class="imgtext">
                    <span>{{ userId1 }}</span>
                  </div>
                  <span style="color: white">相似度 {{ score1 }}</span>
                </div>
                <div class="smallphoto">
                  <img v-if="searchResult2 !== ''" :src="searchResult2" width="162" height="142">
                  <div v-if="searchResult2 ===''" class="imgtext">
                    <span>{{ userId2 }}</span>
                  </div>
                  <span style="color: white">相似度 {{ score2 }}</span>
                </div>
                <div class="smallphoto">
                  <img v-if="searchResult3 !== ''" :src="searchResult3" style="margin-top: 10px" width="162" height="142">
                  <div v-if="searchResult3 ===''" class="imgtext">
                    <span>{{ userId3 }}</span>
                  </div>
                  <span style="color: white">相似度 {{ score3 }}</span>
                </div>
                <div class="smallphoto">
                  <img v-if="searchResult4 !== ''" :src="searchResult4" style="margin-top: 10px" width="162" height="142">
                  <div v-if="searchResult4 ===''" class="imgtext">
                    <span>{{ userId4 }}</span>
                  </div>
                  <span style="color: white">相似度 {{ score4 }}</span>
                </div>
              </div>
            </div>
            <div class="main_up_3">
              <br>
              <br>
              <span class="graycolor">{{ beginTime }}</span><br>
              <span class="graycolor">{{ endTime }}</span><br>
              <el-button type="text" @click="addFormClick">自定义人脸库</el-button>
            </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>
                <span>group_id="人脸库ID"</span><br>
                <span>image="图片的Base64编码"</span><br>
                <span>user_top_num=4</span><br>
                <div>
                  <p>POST</p>
                  <p>https://aicgi.wo186.tv/face-api/v3/face/identify?appid=‘您的应用id’</p>
                </div>

                <div >
                  <p>Header</p>
                  <p>header: Content-Type: "application/x-www-form-urlencoded"</p>
                </div>
              </div>

            </el-collapse-item>
            <el-collapse-item title="Response" name="2">
              <div class="ml">
                <pre>{{ searchResult }}</pre>
              </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="showAddForm" title="新增/添加自定义人脸库" width="600px">
        <el-form>

          <el-form-item label="添加人脸" label-width="80px">
            <el-upload
              :action="uploadUrl"
              :on-remove="handleRemove2"
              :on-success="handleSuccess2"
              :on-exceed="handleExceed"
              :limit="1"
              list-type="picture-card">
              <i class="el-icon-plus"/>
              <div slot="tip" class="el-upload__tip">(注：每次添加一个人脸)</div>
            </el-upload>
          </el-form-item>

          <div style="text-align: center">
            <el-button size="mini" @click="showAddForm = false">取 消</el-button>
            <el-button size="mini" type="primary" @click="submitAddFace">确 定</el-button>
          </div>
        </el-form>
      </el-dialog>
    </div>
  </div>

</template>

<script>
import axios from 'axios'
export default {
  name: 'Search',
  data() {
    return {
      loading: false,
      imgPrefix: process.env.IMAGE_URL,
      uploadUrl: process.env.UPLOAD_URL,
      compare1: '',
      presetImage1: require('../../assets/face/search/1.jpg'),
      presetImage2: require('../../assets/face/search/2.jpg'),
      presetImage3: require('../../assets/face/search/3.jpg'),
      presetImage4: require('../../assets/face/search/4.jpg'),
      presetImage5: require('../../assets/face/search/5.jpg'),
      presetImage1Class: 'gray',
      presetImage2Class: 'gray',
      presetImage3Class: 'gray',
      presetImage4Class: 'gray',
      presetImage5Class: 'gray',
      beginTime: '',
      endTime: '',
      searchResult: '',
      showCompare1: '',
      setUrl1Visible: false,
      score1: '',
      score2: '',
      score3: '',
      score4: '',
      searchResult1: '',
      userId1: '',
      searchResult2: '',
      userId2: '',
      searchResult3: '',
      userId3: '',
      searchResult4: '',
      userId4: '',
      showAddForm: false,
      addFaceUrl: ''
    }
  },
  created() {
    this.presetImage1Click()
  },
  methods: {
    presetImage1Click() {
      this.presetImage1Class = ''
      this.presetImage2Class = 'gray'
      this.presetImage3Class = 'gray'
      this.presetImage4Class = 'gray'
      this.presetImage5Class = 'gray'
      this.compare1 = '1'
      this.showCompare1 = require('../../assets/face/search/1.jpg')
      this.faceSearch()
    },
    presetImage2Click() {
      this.presetImage2Class = ''
      this.presetImage1Class = 'gray'
      this.presetImage3Class = 'gray'
      this.presetImage4Class = 'gray'
      this.presetImage5Class = 'gray'
      this.compare1 = '2'
      this.showCompare1 = require('../../assets/face/search/2.jpg')
      this.faceSearch()
    },
    presetImage3Click() {
      this.presetImage3Class = ''
      this.presetImage1Class = 'gray'
      this.presetImage2Class = 'gray'
      this.presetImage4Class = 'gray'
      this.presetImage5Class = 'gray'
      this.compare1 = '3'
      this.showCompare1 = require('../../assets/face/search/3.jpg')
      this.faceSearch()
    },
    presetImage4Click() {
      this.presetImage4Class = ''
      this.presetImage1Class = 'gray'
      this.presetImage2Class = 'gray'
      this.presetImage3Class = 'gray'
      this.presetImage5Class = 'gray'
      this.compare1 = '4'
      this.showCompare1 = require('../../assets/face/search/4.jpg')
      this.faceSearch()
    },
    presetImage5Click() {
      this.presetImage5Class = ''
      this.presetImage1Class = 'gray'
      this.presetImage2Class = 'gray'
      this.presetImage3Class = 'gray'
      this.presetImage4Class = 'gray'
      this.compare1 = '5'
      this.showCompare1 = require('../../assets/face/search/5.jpg')
      this.faceSearch()
    },
    faceSearch() {
      this.loading = true
      var vm = this
      var params = new URLSearchParams()
      params.append('image', vm.compare1)
      params.append('imageType', 'BASE64')
      // params.append('userId', vm.param1)
      axios.post(process.env.BASE_API + '/demo/search', params).then(function(response) {
        var obj = response.data
        vm.loading = false
        if (obj.code !== 10000) {
          vm.$message.info(obj.message)
          vm.searchResult = ''
          vm.score1 = ''
          vm.score2 = ''
          vm.score3 = ''
          vm.score4 = ''
          vm.searchResult1 = ''
          vm.searchResult2 = ''
          vm.searchResult3 = ''
          vm.searchResult4 = ''
          vm.userId1 = ''
          vm.userId2 = ''
          vm.userId3 = ''
          vm.userId4 = ''
          vm.beginTime = ''
          vm.endTime = ''
        } else {
          // vm.$message(obj.message)
          vm.searchResult = obj.data
          // vm.beginTime = '开始时间:' + obj.startTime
          // vm.endTime = '结束时间:' + obj.endTime
          if (obj.data.user_list.length > 0) {
            vm.score1 = parseInt(obj.data.user_list[0].score)
            vm.searchResult1 = obj.data.user_list[0].user_info
            vm.userId1 = obj.data.user_list[0].user_id
          }
          if (obj.data.user_list.length > 1) {
            vm.score2 = parseInt(obj.data.user_list[1].score)
            vm.searchResult2 = obj.data.user_list[1].user_info
            vm.userId2 = obj.data.user_list[1].user_id
          }
          if (obj.data.user_list.length > 2) {
            vm.score3 = parseInt(obj.data.user_list[2].score)
            vm.searchResult3 = obj.data.user_list[2].user_info
            vm.userId3 = obj.data.user_list[2].user_id
          }
          if (obj.data.user_list.length > 3) {
            vm.score4 = parseInt(obj.data.user_list[3].score)
            vm.searchResult4 = obj.data.user_list[3].user_info
            vm.userId4 = obj.data.user_list[3].user_id
          }
        }
      }).catch(function(error) {
        alert(error)
      })
    },
    handleSuccess1(res, file, fileList) {
      if (res.code === 10000) {
        this.showCompare1 = this.imgPrefix + res.imageUrl
        this.compare1 = this.showCompare1
        this.faceSearch()
      } 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.addFaceUrl = this.imgPrefix + res.imageUrl
      } else {
        this.$message.error(res.message)
        fileList.splice(fileList.indexOf(file), 1)
        this.addFaceUrl = ''
      }
    },
    handleRemove2(file, fileList) {
      this.addFaceUrl = ''
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
    },
    urlUploadImg1() {
      this.setUrl1Visible = true
    },
    submitSetUrl1() {
      if (this.showCompare1 !== '') {
        this.compare1 = this.showCompare1
        this.faceSearch()
      }
      this.setUrl1Visible = false
    },
    addFormClick() {
      this.showAddForm = true
      this.addFaceUrl = ''
    },
    toHvideo() {
      window.location.href = 'http://182.254.204.70:8080/dist/index.html'
    },
    submitAddFace() {
      var vm = this
      var params = new URLSearchParams()
      params.append('image', vm.addFaceUrl)
      params.append('imageType', 'BASE64')
      axios.post(process.env.BASE_API + '/demo/addface', params).then(function(response) {
        var obj = response.data
        if (obj.code !== 10000) {
          vm.$message.info(obj.message)
        } else {
          vm.$message.info(obj.message)
        }
      }).catch(function(error) {
        alert(error)
      })
      this.showAddForm = 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: 87px;
    color: white;
  }
  .main_up_2 {
    width:840px;
    height: 323px;
  }
  .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;
    text-align: right;
    margin-right: 30px;
    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: 325px;
    margin-left: 15px;
    height: 655px;
    border: 3px;
    overflow-y:scroll;
  }
  .row_radio {
    float: left;
  }
  .smallphoto {
    width: 162px;
    height: 162px;
    float: left;
    margin-left: 10px;
  }
  .gray {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: gray;
  }
  .imgtext {
    width: 162px;
    height: 142px;
    color: gray;
    font-size:12px;
    word-break:keep-all;
    line-height: 142px;
  }
  .graycolor {
    color: #e1b59f;
  }

</style>
