<template>
  <div class="report-entry" :class="show?'show':''">
    <!-- <div class="handle" @click="handleShow">
      <i v-if="!show" class="el-icon-arrow-left" />
      <i v-if="show" class="el-icon-arrow-right" />
    </div> -->
    <div ref="box" class="entry-box">
      <el-row>
        <el-col class="entry-item" :span="24">
          <div @click="report">
            <!-- <i class="el-icon-edit-outline" /><br> -->
            <img src="~@/assets/images/icon/icon-repair.png"><br>
            我要报障
          </div>
        </el-col>
        <el-col class="entry-item" :span="24">
          <div @click="checkReport">
            <!-- <i class="el-icon-tickets" /><br> -->
            <img src="~@/assets/images/icon/icon-warn-note.png"><br>
            报障记录
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { getOpsToken } from '@/api/user'
export default {
  props: {
    show: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      requestContext: process.env.VUE_APP_OPS_CONTEXT
    }
  },
  created() {

  },
  methods: {
    handleShow() {
      this.$emit('update:show', !this.show)
    },
    report() {
      // 跳转报障页面
      getOpsToken().then(res => {
        if (res.code === 0) {
          window.open(`${this.requestContext}auth?${this.toQueryString({
            roleType: 'business',
            token: res.data,
            redirect: '/repair/add'
          })}`)
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    checkReport() {
      // 跳转报障记录页面
      getOpsToken().then(res => {
        if (res.code === 0) {
          window.open(`${this.requestContext}auth?${this.toQueryString({
            roleType: 'business',
            token: res.data,
            redirect: '/repair/business'
          })}`)
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    toQueryString(data) {
      let result = ''
      if (!data) return result
      for (const key in data) {
        result += `&${key}=${encodeURIComponent(data[key])}`
      }
      return result.length > 0 ? result.substring(1, result.length) : result
    }
  }
}
</script>

<style lang="scss" scoped>
.report-entry {
    position:fixed;
    bottom:100px;
    // right:-160px;
    right: 25px;
    transition: right .3s;
    background:white;
    box-shadow: 0px 4px 8px 0px rgba(7,80,212,0.15);
    z-index:99;
    // height:100px;
    width:64px;
    border-radius: 6px;
    // &.show{
    //     right:0;
    // }
    .handle{
        position:absolute;
        left:-40px;
        top:calc(50% - 20px);
        display:inline-block;
        width:40px;
        height:40px;
        line-height:40px;
        font-size:20px;
        text-align:center;
        box-shadow: -5px 0 5px #ccc;
        background: white;
        border-radius: 5px 0 0 5px;
        cursor:pointer;
    }
    .entry-item{
        padding:0 4px;
        cursor: pointer;
        text-align:center;
        color:#333333;
        font-size:12px;
        height:64px;
        &:first-child>div{
          border-bottom: 1px solid #eeeeee;
        }
        >div{
          padding:8px 0;
        }
        i{
            font-size:32px;
            margin-bottom:5px;
        }
    }
}
</style>
