s<template>
  <div class="access">

    <div class="access_header">

      <div>
        <span class="title">开始时间 : </span>
        <t-date-picker :confirm="false" v-model="searchdata.beginDay" placeholder="请选择开始时间" style="width:200px;height:32px"></t-date-picker>
      </div>

      <div>
        <span class="title">结束时间 : </span>
        <t-date-picker :confirm="false" v-model="searchdata.endDay" placeholder="请选择结束时间" style="width:200px;height:32px"></t-date-picker>
      </div>

      <!-- <div>
        <span class="title">进出类型 : </span>
        <t-select v-model="searchdata.typeid" style="width:200px;height:32px">
          <t-option v-for="item in accesstype" :value="item.id" :key="item.id">{{ item.name }}</t-option>

        </t-select>
      </div> -->
      <div class="alarm_people">
        <span class="title">员工 : </span>
        <t-input v-model="searchdata.nameAsLike" placeholder="员工姓名" style="width: 200px"></t-input>
      </div>

    </div>

    <div class="access_header">

      <!-- 导出excel -->
      <div>
        <t-button color="primary" icon="upload" style="width:128px;height:32px" class="upload">导出至Excel</t-button>
      </div>

      <div>
        <t-button color="primary" @click="btnsearch">查询</t-button>
        <t-button @click="reset">重置</t-button>
      </div>

    </div>

    <t-table :data="data" line @selection-change="handleSelectionChange">
      <t-table-column type="selection" width="34px"></t-table-column>
      <t-table-column label="姓名" prop="employeeName" width="60px">
      </t-table-column>
      <t-table-column label="员工编号" prop="employeeCode" width="80px">
      </t-table-column>
      <t-table-column label="公司" prop="companyname" width="94px">
      </t-table-column>
      <t-table-column label="部门" prop="organizationName" width="94px">
      </t-table-column>
      <t-table-column label="职务" prop="employeePositionZh" width="80px">
      </t-table-column>
      <t-table-column prop="simi" label="相似度" width="75px">
      </t-table-column>
      <t-table-column label="进出时间" prop="taskExecuteTime" width="160px">
      </t-table-column>
      <t-table-column label="位置" prop="terminalPosition" width="122px">
      </t-table-column>
      <t-table-column label="终端名称" prop="resourceToolName" width="97px">
      </t-table-column>
      <t-table-column label="终端编号" prop="resourceToolCode" width="90px">
      </t-table-column>
      <t-table-column label="操作" width="80px">
        <template slot-scope="scope">
          <a href="javascript:void(0)" size="sm" style="color:#0089D4" @click="handleClick(scope)">识别详情</a>
        </template>
      </t-table-column>

    </t-table>

    <!-- 分页 -->
    <t-pager :total="total" :current="page" :page-size="limit" show-elevator class="pager" @on-change="onChange"></t-pager>

    <!-- 模态框 -->
    <t-modal :visibled.sync="detail_modal" title="识别详情" width="840px" height="538px">

      <div style="text-align:center">
        <div class="detail_content">
          <div class="detail_item1">
            <div>抓拍图片</div>
            <div>
              <!-- <img :src="rowdata.pictureInfo.fileUrl" alt="" srcset="" style="width:100%;height:100%"> -->
              <!--处理图片里的方框-->
              <img :src="mainimage" alt="" srcset="" style="width:100%;height:100%">
            </div>
          </div>
          <div class="detail_item2">
            <div>识别结果</div>
            <div>
              <div>
                <!-- 修改-->
                <img :src="newimage" alt="" srcset="" style="width:120px;height:160px;border-radius: 5px; ">

                <!-- <div class="scaleimg">
                  <div :style="{backgroundImage:style.bgimg,backgroundPosition:style.bgposition,
                                transform:style.scale,
                                width:style.width,
                                height:style.height}" class="imgcontant"></div>
                </div> -->
                <div class="bottomimg">抓拍图片</div>
              </div>
              <div>
                <!-- 修改-->
                <img src="@/assets/images/Identify_the_successful.png" alt="" srcset="">
              </div>
              <div>
                <img :src="rowdata.alarmInfo.headerImage" alt="" srcset="" style="width:100%;height:160px; border-radius: 5px;">
                <div class="bottomimg">人脸底库</div>
              </div>
            </div>
            <div class="describe">
              <div>
                <t-icon icon="user-outline"></t-icon>
                {{ rowdata.alarmInfo.employeeName }}（{{ rowdata.alarmInfo.employeeCode }}）
              </div>
              <div>
                <t-icon icon="map-marker"></t-icon>
                {{ rowdata.alarmInfo.terminalPosition || '--' }}
              </div>
              <div>
                <t-icon icon="clock-outline"></t-icon>
                {{ rowdata.alarmInfo.taskExecuteTime }}
              </div>
              <div>
                <t-icon icon="team-outline"></t-icon> 相似度：
                {{ rowdata.alarmInfo.simi }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <div slot="footer">
        <t-button type="danger" long @click="detail_modal = false">关闭</t-button>
      </div>
    </t-modal>

  </div>
</template>

<script>
import accessapi from '@/api/access'

export default {

  data () {
    return {
      // 进出类型
      accesstype: [],
      // 页码
      total: 0,
      // 选择的数据
      selectdata: [],
      // 模态框显示
      detail_modal: false,
      // 当前行数据
      rowdata: {
        alarmInfo: {},
        pictureInfo: {}
      },
      // 公司列表
      companyTypesList: [],

      // 查询的参数
      searchdata: {

        nameAsLike: '',
        beginDay: '',
        endDay: ''
      },
      // 一页的数据
      data: [

      ],
      // 当前页
      page: 1,
      limit: 10,
      // style: {
      //   bgimg: '',
      //   bgposition: '',
      //   scale: '',
      //   width: '',
      //   height: ''

      // }
      // 截取后的图片
      newimage: '',
      // 详情的主图片
      mainimage: ''

    }
  },

  mounted () {
    // this.gettype()
    this.getcompanyTypesList()
  },
  methods: {
    // 表格中的选择数据
    handleSelectionChange (val) {
      this.selectdata = val
    },
    // 获取公司
    async getcompanyTypesList () {
      var res = await accessapi.getcompanyTypesList()
      // console.log('公司信息是', res)
      if (res.status === 200) {
        this.companyTypesList = res.data.data
        this.search()
      } else {
        this.$Message.danger('获取数据失败')
      }
    },
    // 点击详情
    async handleClick (scope) {
      // this.rowdata = scope.row
      // console.log(this.rowdata)
      // console.log('id是', scope.row.aiIdenLogId)
      this.newimage = ''
      this.mainimage = ''
      var res = await accessapi.getOneInAndOutRecord({ params: { aiIdenLogId: scope.row.aiIdenLogId } })

      if (res.data.success) {
        // this.rowdata = res.data.data
        this.rowdata.pictureInfo = res.data.data.pictureInfo
        console.log('数据', this.rowdata.pictureInfo)
        this.rowdata.alarmInfo = res.data.data.alarmInfo
        console.log('数据', this.rowdata.alarmInfo)
        // this.rowdata.alarmInfo.newImg = this.rowdata.pictureInfo.fileUrl

        this.getImage()
        this.getmainimage()
        // var loadTimer
        // var imgObject = new Image()
        // imgObject.setAttribute('crossOrigin', 'anonymous')
        // imgObject.src = this.rowdata.pictureInfo.fileUrl
        // console.log(this)
        // imgObject.onload = this.onImgLoaded(loadTimer, imgObject, this.rowdata.alarmInfo)

        // console.log(this.rowdata.alarmInfo.newImg)

        // this.style.width = res.data.data.alarmInfo.face_box[2] - res.data.data.alarmInfo.face_box[0] + 'px'
        // // console.log('width是', this.style.width)
        // this.style.height = res.data.data.alarmInfo.face_box[3] - res.data.data.alarmInfo.face_box[1] + 'px'
        // // console.log('height是', this.style.height)
        // this.style.bgimg = 'url(' + res.data.data.pictureInfo.fileUrl + ')'
        // // console.log('bgimg是', this.style.bgimg)
        // this.style.bgposition = '' + -res.data.data.alarmInfo.face_box[0] + 'px ' + -res.data.data.alarmInfo.face_box[1] + 'px'
        // console.log('bgposition是', this.style.bgposition)
        // // transform: scale(0.33, 0.33);
        // var width = res.data.data.alarmInfo.face_box[2] - res.data.data.alarmInfo.face_box[0]
        // var height = res.data.data.alarmInfo.face_box[3] - res.data.data.alarmInfo.face_box[1]
        // var scalex = 120 / width
        // var scaley = 160 / height
        // // console.log(scalex)
        // this.style.scale = 'scale(' + scalex + ',' + scaley + ')'
        // // console.log('scale是', this.style.scale)
        // // console.log(res.data.data)
        // console.log('详情数据是', this.rowdata.alarmInfo)

        this.detail_modal = true
      } else {
        this.$Message.danger('获取数据失败')
      }
    },
    // 分页
    onChange (val) {
      this.page = val
      this.search()
    },

    // 点击查询按钮
    btnsearch () {
      if (this.page === 1) {
        this.search()
      } else {
        this.page = 1
      }
    },
    // 获取进出类型
    // gettype () {
    //   accessapi.getaccesstype().then((res) => {
    //     this.accesstype = res.data.data
    //     console.log(this.accesstype)
    //   })
    // },
    // 查询数据
    async search () {
      // 检验数据
      var flag = this.startreend(this.searchdata.beginDay, this.searchdata.endDay)
      if (flag) {
        // console.log(this.page)
        // console.log(this.searchdata)

        var params = this.searchdata
        params.pageNumber = this.page
        params.pageSize = this.limit
        console.log(params)
        var res = await accessapi.getaccesslist({ params: params })
        // console.log(res)
        if (res.status === 200) {
          // console.log(res)
          this.data = res.data.data.data
          this.data = this.data.map((item) => {
            // 处理进出时间
            // item.taskExecuteTime = formatDateTime(item.taskExecuteTime)
            // 处理相似度
            // item.simi = this.percentagedata(item.simi)
            // console.log('公司的数据是', this.companyTypesList)
            // console.log('公司id', item)
            // console.log('公司名字是', this.companyTypesList.filter((item1) => { return item1.id === 10000 }))
            item.companyinfo = this.companyTypesList.filter((item1) => { return item1.id === item.companyId })
            if (item.companyinfo.length > 0) {
              item.companyname = item.companyinfo[0].name
            } else {
              item.companyname = ''
            }

            return item
          })

          // this.total = Math.ceil(res.data.data.total / res.data.data.size) * 5
          // console.log(this.total)
          this.total = res.data.data.total
          // console.log('数据是', this.data)
        }
      } else {
        this.$Message.danger('开始时间不能在结束时间的后面')
      }
    },

    percentagedata (point) {
      if (point === 0) {
        return 0
      }
      var str = Number(point * 100).toFixed(1)
      str += '%'
      return str
    },

    // 重置数据
    reset () {
      for (var index in this.searchdata) {
        this.searchdata[index] = ''
      }
      this.page = 1
      this.$Message.success('数据重置成功')
    },

    // 字符串更改为时间类型
    stringtodate (date) {
      date = date.substring(0, 19)
      date = date.replace(/-/g, '/')
      var timestamp = new Date(date).getTime()
      return timestamp
    },
    // 验证开始时间·和结束时间
    startreend (startdate, enddate) {
      startdate = this.stringtodate(startdate)
      enddate = this.stringtodate(enddate)
      if (startdate > enddate) {
        return false
      } else {
        return true
      }
    },
    // 处理截图图片
    async getImage () {
      var loadTimer
      var imgObject = new Image()
      imgObject.setAttribute('crossOrigin', 'anonymous')
      imgObject.src = this.rowdata.pictureInfo.fileUrl
      var e = this.rowdata.alarmInfo
      var that = this
      imgObject.onload = onImgLoaded()
      // eslint-disable-next-line no-return-assign
      function onImgLoaded () {
        if (loadTimer != null) clearTimeout(loadTimer)
        if (!imgObject.complete) {
          loadTimer = setTimeout(() => {
            onImgLoaded()
          }, 3)
        } else {
          that.newimage = getImagePortion(imgObject, e.face_box[2] - e.face_box[0], e.face_box[3] - e.face_box[1], e.face_box[0], e.face_box[1])
        }
      }
      function getImagePortion (imgObj, newWidth, newHeight, startX, startY) {
        var tnCanvas = document.createElement('canvas')
        var tnCanvasContext = tnCanvas.getContext('2d')
        tnCanvas.width = newWidth; tnCanvas.height = newHeight
        var bufferCanvas = document.createElement('canvas')
        var bufferContext = bufferCanvas.getContext('2d')
        bufferCanvas.width = imgObj.width
        bufferCanvas.height = imgObj.height
        bufferContext.drawImage(imgObj, 0, 0)
        tnCanvasContext.drawImage(bufferCanvas, startX, startY, newWidth, newHeight, 0, 0, newWidth, newHeight)
        // console.log(tnCanvas.toDataURL())
        return tnCanvas.toDataURL()
      }
    },

    // 处理主图片
    async getmainimage () {
      var that = this

      var x = this.rowdata.alarmInfo.face_box[0]
      var y = this.rowdata.alarmInfo.face_box[1]
      var width = this.rowdata.alarmInfo.face_box[2] - this.rowdata.alarmInfo.face_box[0]
      var height = this.rowdata.alarmInfo.face_box[3] - this.rowdata.alarmInfo.face_box[1]
      function getBase64Image (img) {
        var canvas = document.createElement('canvas')
        canvas.width = img.width
        canvas.height = img.height
        var ctx = canvas.getContext('2d')
        ctx.drawImage(img, 0, 0, img.width, img.height)
        ctx.beginPath()
        ctx.moveTo(x, y)
        ctx.lineTo(x + width, y)
        ctx.lineTo(x + width, y + height)
        ctx.lineTo(x, y + height)
        ctx.lineTo(x, y) // 绘制最后一笔使图像闭合
        ctx.lineWidth = 5
        ctx.strokeStyle = 'red'
        ctx.stroke()

        var dataURL = canvas.toDataURL('image/png') // 可选其他值 image/jpeg
        return dataURL
      }

      function main (src, cb) {
        var image = new Image()
        image.src = src + '?v=' + Math.random() // 处理缓存
        image.crossOrigin = '*' // 支持跨域图片
        image.onload = function () {
          var base64 = getBase64Image(image)
          cb && cb(base64)
        }
      }

      main(this.rowdata.pictureInfo.fileUrl, function (base64) {
        // console.log(base64, '是否成功打印base64')
        that.mainimage = base64
      })
    }

  }
}
</script>

<style lang='scss' scoped>
.access {
  font-size: 14px;
  padding: 6px 24px;
  height: 702px;
  .upload {
    font-size: 14px;
    line-height: 22px;
  }
  .table th,
  .table td {
    font-size: 14px;
    padding: 0 0 0 18px;
  }
  .access_header {
    display: flex;
    justify-content: space-between;
    margin-top: 24px;
    margin-bottom: 24px;
    .title {
      display: inline-block;
      width: 70px;
      height: 20px;
      font-size: 14px;
      text-align: right;
      color: rgba($color: #000000, $alpha: 0.65);
    }
  }

  .pager {
    float: right;
    margin-top: 26px;
  }
}
.detail_content {
  width: 100%;
  height: 376px;
  display: flex;
  justify-content: space-between;

  .detail_item1 {
    width: 45%;
    text-align: left;
    > div:nth-child(1) {
      margin: 0 0 20px 0;
      color: rgba(0, 0, 0, 0.65);
      font-size: 14px;
    }
    > div:nth-child(2) {
      width: 100%;
      height: 240px;

      border-radius: 5px;
      overflow: hidden;
      position: relative;
    }
  }

  .detail_item2 {
    width: 50%;
    text-align: left;
    > div:nth-child(1) {
      margin: 0 0 20px 0;
      color: rgba(0, 0, 0, 0.65);
      font-size: 14px;
    }
    > div:nth-child(2) {
      width: 100%;
      height: 190px;

      display: flex;
      justify-content: space-between;
      .bottomimg {
        margin-top: 12px;
        width: 100%;
        text-align: center;
        font-size: 12px;
        color: rgba(0, 0, 0, 0.65);
      }

      > div:nth-child(1) {
        width: 120px;
        height: 100%;

        .scaleimg {
          width: 120px;
          height: 160px;

          position: relative;
          .imgcontant {
            border-radius: 10px;
            background-repeat: no-repeat;
            background-attachment: local;
            position: absolute;
            top: -160px;
            left: -120px;
          }
        }
      }
      > div:nth-child(2) {
        width: 117.76px;
        height: 160px;

        line-height: 160px;
        img {
          width: 100%;
          height: 84.32px;
        }
      }
      > div:nth-child(3) {
        height: 100%;
        width: 120px;
      }
    }
    .describe {
      margin-top: 20px;
      width: 100%;
      height: 148px;
      display: flex;
      flex-wrap: wrap;
      align-items: center;

      > div {
        width: 100%;
        height: 22px;
        font-size: 14px;
      }
    }
  }
}
</style>