<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: 28px;margin-top: 30px;margin-left: 20px;text-decoration:underline">人体检测和属性识别</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>
      <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">
                    <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>
                  <div style="float: left;margin-top: 20px;margin-left: 20px">
                    <el-button :visible.sync="showDetailBtn" style="margin-right: 10px" @click="detailView = true">查看结果详情</el-button>
                  </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>
                <div>
                  <el-checkbox-group v-model="checkList">
                    <div class="row_radio">
                      <el-row>
                        <el-checkbox label="gender">性别</el-checkbox>
                        <el-checkbox label="age">年龄阶段</el-checkbox>
                        <el-checkbox label="lower_wear">下身服饰</el-checkbox>
                      </el-row>
                      <el-row>
                        <el-checkbox label="upper_wear">上身服饰</el-checkbox>
                        <el-checkbox label="headwear">是否戴帽子</el-checkbox>
                        <el-checkbox label="glasses">是否戴眼镜</el-checkbox>
                      </el-row>
                      <el-row>
                        <el-checkbox label="upper_color">上身服饰颜色</el-checkbox>
                        <el-checkbox label="lower_color">下身服饰颜色</el-checkbox>
                        <el-checkbox label="cellphone">是否使用手机</el-checkbox>
                      </el-row>
                      <el-row>
                        <el-checkbox label="upper_wear_fg">上身服饰细分类</el-checkbox>
                        <el-checkbox label="upper_wear_texture">上身服饰纹理</el-checkbox>
                        <el-checkbox label="orientation">身体朝向</el-checkbox>
                      </el-row>
                      <el-row>
                        <el-checkbox label="umbrella">是否撑伞</el-checkbox>
                        <el-checkbox label="bag">背包</el-checkbox>
                        <el-checkbox label="smoke">是否吸烟</el-checkbox>
                      </el-row>
                      <el-row>
                        <el-checkbox label="vehicle">交通工具</el-checkbox>
                        <el-checkbox label="carrying_item">是否有手提物</el-checkbox>
                        <el-checkbox label="upper_cut">上方截断</el-checkbox>
                      </el-row>
                      <el-row>
                        <el-checkbox label="lower_cut">下方截断</el-checkbox>
                        <el-checkbox label="occlusion">遮挡</el-checkbox>
                        <el-checkbox label="is_human">是否是正常人体</el-checkbox>
                      </el-row>
                    </div>
                  </el-checkbox-group>
                </div>
                <br>
                <div>
                  <span>max_face_num=21</span><br>
                  <span>face_fields= {{ checkList }} {{ radioValue }}</span><br>
                </div>
                <p/>
                <br>
                <div>
                  <p>POST</p>
                  <p>https://aicgi.wo186.tv/face-api/v3/face/body_attr?image=‘base64编码图片’</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">
                <span>{</span><br>
                <span>"person_num": {{ person_num }},</span><br>
                <span>"person_info": </span><br>
                <pre>{{ person_info }}</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 resultPersonInfo" :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 class="resultspan">性别: {{ value.gender }}  置信度{{ value.gender_probability }}</span><br>
              <!--              <span class="resultspan">背包: {{ value.bag }}  置信度{{ value.bag_probability }}</span><br>-->

              <!--              <span class="resultspan">年龄阶段: {{ value.age }}  置信度{{ value.age_probability }}</span><br>-->
              <span class="resultspan">上身服饰: {{ value.upper_wear }}  置信度{{ value.upper_wear_probability }}</span><br>
              <span class="resultspan">下身服饰: {{ value.lower_wear }}  置信度{{ value.lower_wear_probability }}</span><br>
              <!--              <span class="resultspan">是否撑伞: {{ value.umbrella }}  置信度{{ value.umbrella_probability }}</span><br>-->

              <!--              <span class="resultspan">是否吸烟: {{ value.smoke }}  置信度{{ value.smoke_probability }}</span><br>-->
              <!--              <span class="resultspan">交通工具: {{ value.vehicle }}  置信度{{ value.vehicle_probability }}</span><br>-->
              <!--              <span class="resultspan">上方截断: {{ value.upper_cut }}  置信度{{ value.upper_cut_probability }}</span><br>-->
              <!--              <span class="resultspan">下方截断: {{ value.lower_cut }}  置信度{{ value.lower_cut_probability }}</span><br>-->
              <!--              <span class="resultspan">是否戴帽子: {{ value.headwear }}  置信度{{ value.headwear_probability }}</span><br>-->
              <!--              <span class="resultspan">是否戴眼镜: {{ value.glasses }}  置信度{{ value.glasses_probability }}</span><br>-->
              <span class="resultspan">上身服饰颜色: {{ value.upper_color }}  置信度{{ value.upper_color_probability }}</span><br>
              <span class="resultspan">下身服饰颜色: {{ value.lower_color }}  置信度{{ value.lower_color_probability }}</span><br>
              <!--              <span class="resultspan">上身服饰纹理: {{ value.upper_wear_texture }}  置信度{{ value.upper_wear_texture_probability }}</span><br>-->
              <!--              <span class="resultspan">是否使用手机: {{ value.cellphone }}  置信度{{ value.cellphone_probability }}</span><br>-->
              <!--              <span class="resultspan">是否有手提物: {{ value.carrying_item }}  置信度{{ value.carrying_item_probability }}</span><br>-->
              <!--              <span class="resultspan">上身服饰细分类: {{ value.upper_wear_fg }}  置信度{{ value.upper_wear_fg_probability }}</span><br>-->
              <!--              <span class="resultspan">是否是正常人体: {{ value.is_human }}  置信度{{ value.is_human_probability }}</span><br>-->
              <span class="resultspan">身体朝向: {{ value.orientation }}  置信度{{ value.orientation_probability }}</span><br>
              <span class="resultspan">遮挡: {{ value.occlusion }}  置信度{{ value.occlusion_probability }}</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: ['gender', 'age', 'lower_wear', 'upper_wear', 'headwear', 'glasses', 'upper_color', 'lower_color', 'cellphone', 'upper_wear_fg', 'upper_wear_texture', 'lower_wear_texture', 'orientation', 'umbrella', 'bag', 'smoke', 'vehicle', 'carrying_item', 'upper_cut', 'lower_cut', 'occlusion', 'is_human'],
      radioValue: 'type',
      imgPrefix: process.env.IMAGE_URL,
      uploadUrl: process.env.UPLOAD_URL,
      selectedImg: '',
      presetImage1: require('../../assets/face/bodyAttr/1.jpg'),
      presetImage2: require('../../assets/face/bodyAttr/2.jpg'),
      presetImage3: require('../../assets/face/bodyAttr/3.jpg'),
      presetImage4: require('../../assets/face/bodyAttr/4.jpg'),
      presetImage5: require('../../assets/face/bodyAttr/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,
      person_info: [],
      resultPersonInfo: []
    }
  },
  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/bodyAttr/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/bodyAttr/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/bodyAttr/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/bodyAttr/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/bodyAttr/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('type', vm.checkList)
      // params.append('type', vm.radioValue)
      axios.post(process.env.BASE_API + '/demo/bodyAttr', 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.faceToken1 = ''
          vm.faceToken2 = ''
          vm.showDetailBtn = false
        } else {
          // vm.$message(obj.message)
          vm.person_num = obj.data.person_num
          vm.person_info = obj.data.person_info
          vm.showImg = vm.imgPrefix + obj.data.filePath
          vm.resultPersonInfo = obj.data.resultPersonInfo
          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>
  .resultspan{
    height: 2px;
    display: block;
  }
  .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>
