<template>
  <div class="shortcut-location">
    <el-popover
        placement="left"
        width="500"
        trigger="click"
        @show="()=>{}"
    >
      <div class="tax-status-panel">
        <div class="head block">
          <div class="title-icon icon"></div>
          <span class="title">电子税局登录/实人认证</span>
        </div>
        <div class="tips block">
          <i class="el-icon-warning icon" style="margin-right: 8px"></i>
          <span>若要查看全部账号,请点击</span>
        </div>
        <div class="content block">
          <el-table
              :data="taxAccountList"
              border
              style="width: 100%"
          >
            <el-table-column
                prop="account"
                label="电子税局账号"
                width="180">
            </el-table-column>
            <el-table-column
                prop="status"
                label="登录状态"
                width="180">
            </el-table-column>
            <el-table-column
                prop="opt"
                label="操作">
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div slot="reference">
        <div class="content-box">
          <div class="status-box box opt-box-text"
               :style="{'background': taxLoginStatus === true ? '#42b983' : '#FE4A4E'}">
            <span v-if="taxLoginStatus" style="letter-spacing: 5px;">已登录</span>
            <span v-else style="letter-spacing: 5px;">未登录</span>
          </div>
          <div class="opt-box box">
            <div class="opt-box-icon">
              <img src="@/assets/img/tax_wand.svg" alt="税务数电登录/认证"/>
            </div>
            <div>
              <span class="opt-box-text">数电登录 <span style="writing-mode: lr;">&amp;</span> 认证</span>
            </div>
          </div>
        </div>
      </div>
    </el-popover>
  </div>
</template>

<script>
export default {
  name: 'Shortcut',
  data() {
    return {
      taxAccountList: [],
      taxLoginStatus: false
    }
  },
  methods: {
  }
}
</script>

<style lang="stylus" scoped>
.shortcut-location {
  z-index: 9999;
  position: fixed !important;
  right: 0px;
  top: 40%;
  font-size: 12px;
  text-align: center;
  color: white;

  .content-box {
    display: flex;
    flex-direction: row;
    align-items: center;

    .box {
      cursor: pointer;
      padding: 6px 4px;
    }

    .status-box {
      border-radius: 10px 0 0 10px;
      writing-mode: vertical-lr;
      align-items: center;
    }

    .opt-box {
      border-radius: 10px 10px 10px 10px;
      background: rgb(156, 217, 188);
      background: linear-gradient(180deg, rgba(110, 170, 233, 1) 2%, rgba(1, 117, 239, 1) 30%);

      &:hover {
        background: #0175EF;
      }

      .opt-box-icon {
        padding-bottom: 4px;
      }

      .opt-box-text {
        writing-mode: vertical-lr;
        align-items: center;
      }
    }
  }
}
</style>
<style scoped>
.tax-status-panel {
  padding: 2px 4px;
}

.tax-status-panel .head {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 34px;
}

.tax-status-panel .title {
  font-size: 14px;
  color: #333333;
  font-weight: 600;
}

.tax-status-panel .head .title-icon {
  content: "";
  border-radius: 1px;
  line-height: 24px;
  display: inline-block;
  background: #0176f6;
  width: 10px;
  height: 10px;
  margin-right: 10px;
}

.tax-status-panel .block {
  padding-top: 10px;
  text-align: left;
}

.tax-status-panel .tips {
  height: 24px;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.tax-status-panel .icon {
  color: #0176f6;
}
</style>
