<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: 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: 28px;margin-top: 30px;margin-left: 20px;text-decoration:underline">人流量统计</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>
      <p/>
      <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>
            </div-->
            <div class="main_up_2">
              <div class="main_up_2_left">
                <div class="photo">
                  <img id="mc" :src="showImg" width="840" height="424">
                </div>
                <div class="upload_btn">
                  <div style="float: left;margin-left: 80px">
                    <el-button style="margin-left: 200px;margin-top: 20px" @click="urlUploadImg1">URL上传</el-button>
                  </div>
                  <div style="margin-top: 20px;float: left;margin-left: 20px">
                    <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>
                  <p>
                    <span style="color: white;">图片文件类型支持PNG、JPG、JPEG、BMP，图片大小不超过2M。</span>
                  </p>
                </div>
              </div>
            </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 style="height: 1000px">
            <el-collapse-item title="Request" name="1">
              <div class="ml">
                <p>Params</p>
                <span>image="图片的Base64编码"</span><br>
                <span>area=特定框选区域坐标，逗号分隔</span>
                <div>
                  <el-checkbox-group v-model="checkList">
                    <div class="row_radio">
                      <el-row>
                        <el-checkbox label="show">是否输出渲染的图片</el-checkbox>
                      </el-row>
                    </div>
                  </el-checkbox-group>
                </div>
                <p/>

                <br>

                <div>
                  <p>POST</p>
                  <p>https://aicgi.wo186.tv/face-api/v3/face/detect?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>"person_num": {{ person_num }},</span><br>
                <span>"log_id": {{ logId }}</span><br>
                <span>"image": </span><br>
                <pre>{{ image }}</pre>
              </div>

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

    </div>
    <el-dialog
      :visible.sync="setUrl1Visible"
      title="输入网络图片URL">
      <el-input v-model="showImg" 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="detailView"
      title="人脸检测结果"
      width="800px">
      <ul class="box">
        <li v-for="(value) in faceListPath" :key="value.age">
          <div style="height: 380px">
            <div style="float: left">
              <img :src="imgPrefix+value.path" width="200px" height="200px"><br>
            </div>
            <div style="float: left;margin-left: 100px">
              <span>人脸标识: {{ value.face_token }}</span><br>
              <span>人脸置信度: {{ value.face_probability }}</span><br>
              <span>年龄: {{ value.age }}</span><br>
              <span>性别: {{ value.gender }}  置信度{{ value.gender_probability }}</span><br>
              <span>种族: {{ value.race }}  置信度{{ value.race_probability }}</span><br>
              <span>颜值: {{ value.beauty }}</span><br>
              <span>表情: {{ value.expression }}  置信度{{ value.expression_probability }}</span><br>
              <span>眼镜: {{ value.glasses }}  置信度{{ value.glasses_probability }}</span><br>
              <span>情绪: {{ value.emotion }}  置信度{{ value.emotion_probability }}</span><br>
              <span>头部姿态: {{ value.rotation }}</span><br>
              <span>人脸俯仰角pitch: {{ value.angle.pitch }}</span><br>
              <span>人脸翻滚角roll: {{ value.angle.roll }}</span><br>
              <span>人脸偏航角yaw: {{ value.angle.yaw }}</span><br>
              <span>人脸光照度: {{ value.quality.illumination }}</span><br>
              <span>人脸完整度: {{ value.quality.completeness }}</span><br>
              <span>人脸模糊度: {{ value.quality.blur }}</span><br>
              <span>左眼遮挡比例: {{ value.quality.occlusion.left_eye }}</span><br>
              <span>右眼遮挡比例: {{ value.quality.occlusion.right_eye }}</span><br>
              <span>鼻子遮挡比例: {{ value.quality.occlusion.nose }}</span><br>
              <span>嘴巴遮挡比例: {{ value.quality.occlusion.mouth }}</span><br>
              <span>左脸颊遮挡比例: {{ value.quality.occlusion.left_cheek }}</span><br>
              <span>右脸颊遮挡比例: {{ value.quality.occlusion.right_cheek }}</span><br>
              <span>下巴遮挡比例: {{ value.quality.occlusion.chin_contour }}</span><br>
              <br><br>
            </div>
          </div>
        </li>  <!--循环数组-->
      </ul>
      <span slot="footer" class="dialog-footer">
        <el-button @click="detailView = false">取 消</el-button>
        <el-button type="primary" @click="detailView = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>

</template>

<script>
import axios from 'axios'
export default {
  name: 'Detect',
  data() {
    return {
      loading: false,
      detailView: false,
      showDetailBtn: false,
      checkList: ['show'],
      radioValue: 'landmark72',
      imgPrefix: process.env.IMAGE_URL,
      uploadUrl: process.env.UPLOAD_URL,
      selectedImg: '',
      presetImage1: require('../../assets/face/bodyNum/1.jpg'),
      presetImage2: require('../../assets/face/bodyNum/2.jpg'),
      presetImage3: require('../../assets/face/bodyNum/3.jpg'),
      presetImage4: require('../../assets/face/bodyNum/4.jpg'),
      presetImage5: require('../../assets/face/bodyNum/5.jpg'),
      presetImage1Class: 'gray',
      presetImage2Class: 'gray',
      presetImage3Class: 'gray',
      presetImage4Class: 'gray',
      presetImage5Class: 'gray',
      param1: 'LIVE',
      param2: 'LIVE',
      param3: 'NONE',
      param4: 'NONE',
      faceToken1: '',
      faceToken2: '',
      person_num: 0,
      img1Face: '',
      img2Face: '',
      showImg: '',
      showCompare2: '',
      setUrl1Visible: false,
      image: '',
      logId: 0,
      faceListPath: []
    }
  },
  created() {
    this.presetImage1Click()
  },
  methods: {
    presetImage1Click() {
      this.presetImage1Class = ''
      this.presetImage2Class = 'gray'
      this.presetImage3Class = 'gray'
      this.presetImage4Class = 'gray'
      this.presetImage5Class = 'gray'
      this.selectedImg = '1'
      this.showImg = require('../../assets/face/bodyNum/1.jpg')
      this.faceDetect()
    },
    presetImage2Click() {
      this.presetImage2Class = ''
      this.presetImage1Class = 'gray'
      this.presetImage3Class = 'gray'
      this.presetImage4Class = 'gray'
      this.presetImage5Class = 'gray'
      this.selectedImg = '2'
      this.showImg = require('../../assets/face/bodyNum/2.jpg')
      this.faceDetect()
    },
    presetImage3Click() {
      this.presetImage3Class = ''
      this.presetImage1Class = 'gray'
      this.presetImage2Class = 'gray'
      this.presetImage4Class = 'gray'
      this.presetImage5Class = 'gray'
      this.selectedImg = '3'
      this.showImg = require('../../assets/face/bodyNum/3.jpg')
      this.faceDetect()
    },
    presetImage4Click() {
      this.presetImage4Class = ''
      this.presetImage1Class = 'gray'
      this.presetImage2Class = 'gray'
      this.presetImage3Class = 'gray'
      this.presetImage5Class = 'gray'
      this.selectedImg = '4'
      this.showImg = require('../../assets/face/bodyNum/4.jpg')
      this.faceDetect()
    },
    presetImage5Click() {
      this.presetImage5Class = ''
      this.presetImage1Class = 'gray'
      this.presetImage2Class = 'gray'
      this.presetImage3Class = 'gray'
      this.presetImage4Class = 'gray'
      this.selectedImg = '5'
      this.showImg = require('../../assets/face/bodyNum/5.jpg')
      this.faceDetect()
    },
    faceDetect() {
      this.loading = true
      var vm = this
      var params = new URLSearchParams()
      params.append('image', vm.selectedImg)
      // params.append('imageType', 'BASE64')
      // params.append('faceField', vm.checkList)
      params.append('show', vm.checkList.length)
      axios.post(process.env.BASE_API + '/demo/bodyNum', params).then(function(response) {
        var obj = response.data
        vm.loading = false
        if (obj.code !== 10000) {
          vm.$message.info(obj.message)
          vm.person_num = 0
          vm.image = '解码错误'
          vm.logId = 0
          vm.faceToken1 = ''
          vm.faceToken2 = ''
          vm.showDetailBtn = false
        } else {
          // vm.$message(obj.message)
          vm.person_num = obj.data.person_num
          vm.image = obj.data.image
          vm.logId = obj.data.log_id
          vm.showImg = 'data:image/jpeg;base64,' + obj.data.image
          vm.faceListPath = obj.data.faceListPath
          vm.showDetailBtn = true
        }
      }).catch(function(error) {
        console.error(error.toLocaleString())
        vm.loading = false
      })
    },
    handleSuccess1(res, file, fileList) {
      if (res.code === 10000) {
        this.showImg = this.imgPrefix + res.imageUrl
        this.selectedImg = this.showImg
        this.faceDetect()
      } else {
        this.$message.error(res.message)
        fileList.splice(fileList.indexOf(file), 1)
        this.showImg = ''
      }
    },
    handleRemove1(file, fileList) {
      this.showImg = ''
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
    },
    urlUploadImg1() {
      this.setUrl1Visible = true
    },
    submitSetUrl1() {
      if (this.showImg !== '') {
        this.selectedImg = this.showImg
        this.faceDetect()
      }
      this.setUrl1Visible = false
    },
    showItemDetail(data) {
      console.log(data)
    },
    toHvideo() {
      window.location.href = 'http://182.254.204.70:8080/dist/index.html'
    }
  }
}
</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: 840px;
    height: 424px;
  }
  .photo {
    width: 840px;
    height: 424px;
  }
  .upload_btn {
    float: left;
    display: inline;
    width: 840px;
    height: 100px;
    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: 100px;
    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;
  }
  .gray {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: gray;
  }

</style>
