<template>
<div class="card-wrapper">
  <div class="line" :style="lineStyle"/>
  <div class="card-title" :style="style">
    <div class="edge top-left" />
    <div class="triangle" />
    <div class="dot">
      <span></span>
      <span></span>
    </div>
    {{title}}
  </div>
  <div class="card-content">
    <span @click="handleClick" class="btn span" v-if="btn && btn == '模型'" >{{btn}}</span>
    <img @click="handleClick" class="btn" v-else-if="btn && btn != '模型'" :src="require(`@/assets/images/${btn}.png`)"/>
    <div class="edge top-right" />
    <div class="edge bottom-left" />
    <div class="edge bottom-right" />
    <div class="content">
      <slot />
    </div>
  </div>
</div>
</template>

<script>
export default {
  name: 'Mode4',
  props: {
    btn: {
      type: String,
    },
    title: {
      type: String,
      default: '标题',
    },
    width: {
      type: Number,
    },
  },
  computed: {
    style() {
      if (this.width) {
        return {
          width: this.width + '%'
        }
      }
    },
    lineStyle() {
      if (this.width) {
        const width = 100 - this.width
        return {
          width: `calc(${width}% - 2rem)`
        }
      }
    }
  },
  methods: {
    handleClick() {
      if (this.btn == 'map-icon') {
        this.$store.commit('SET_STREETMENU', true)
      } else if (this.btn == '模型') {
        this.$store.commit('SET_ELEMENTMODAL', true)
      }
    },
  },
}
</script>

<style lang="stylus" scoped>
$color = rgba(113, 235, 255, 0.3)
.card-wrapper
  padding 0 !important
  position relative
  .line
    position absolute
    top 0
    right 0
    height 2rem
    width calc(69% - 2rem)
    border-bottom .1rem solid $color
  .card-title
    display flex
    align-items center
    position relative
    color #fff
    font-size 1.2rem
    // font-weight bold
    height 2rem
    width 31%
    z-index 999
    padding 1rem 0 0 .8rem
    background $cardBg
    border .1rem solid $color
    border-bottom none
    border-right none
    .triangle
      position absolute
      width 0
      height 0
      border 1.4rem solid transparent
      border-top-color $cardBg
      box-shadow 0 -0.1rem 0 $color
      right -2.79rem
      top -0.05rem
      transform-origin top left
      transform rotate(45deg)
    .dot
      display flex
      align-items center
      margin-right .5rem
      span
        display block
        width .4rem
        height 1.2rem
        margin-right .2rem
        background $color-blue
        &:first-child
          height 1rem
          opacity .5
  .card-content
    $blur(.2rem)
    position relative
    background $cardBg
    border .1rem solid $color
    border-top none
    overflow hidden !important
    .btn
      z-index 100
      position absolute
      top .3rem
      right @top
      width 1.3rem
      height @width
      cursor pointer
      &.span
        z-index 999
        display block
        width auto
        top .2rem
        right .4rem
        text-align right
      &:hover
        box-shadow 0 0 1rem 0.1rem rgba(255,255,255,.5)
    .content
      width 100%
      height 100%
      padding 0.5rem 0.7rem
      overflow-y auto
.edge
  position absolute
  width 1rem
  height @width
  border 0.2rem solid $color-blue
  &.top-left
    border-width .12rem
    top 0
    left 0
    border-right none
    border-bottom none
  &.top-right
    top -0.1rem
    right -0.1rem
    border-left none
    border-bottom none
  &.bottom-left
    bottom -0.1rem
    left -0.1rem
    border-right none
    border-top none
  &.bottom-right
    bottom -0.1rem
    right -0.1rem
    border-left none
    border-top none
</style>
