<template>
<div class="card-wrapper">
  <div class="card-title" :style="`color:${color}`">
    <p class="title">{{title}}</p>
    <p v-if="showTab" class="btn">
      <span :class="{on: curTab === '处置中'}" @click="handleClick('处置中')">处置中</span>
      |
      <span :class="{on: curTab === '已完成'}" @click="handleClick('已完成')">已完成</span>
    </p>
  </div>
  <div class="card-content">
    <span class="border" />
    <span class="border right" />
    <slot />
  </div>
</div>
</template>

<script>
export default {
  name: 'Mode2',
  props: {
    title: {
      type: String,
      default: '标题',
    },
    color: {
      type: String,
    },
    showTab: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      curTab: '处置中',
    }
  },
  methods: {
    handleClick(type) {
      this.curTab = type
      this.$store.commit('SET_CUR_TAB', type)
    },
  },
}
</script>

<style lang="stylus" scoped>
.card-wrapper
  .card-title
    display flex
    align-items flex-start
    justify-content space-between
    font-size .14rem
    font-weight bold
    background-image url('../../../assets/images/card-header.png')
    background-size 100% 60%
    background-position left bottom
    background-repeat no-repeat
    >p
      &.title
        text-align center
        background-image url('../../../assets/images/card-title-bg.png')
        background-size 100% 60%
        background-position left bottom
        background-repeat no-repeat
        padding 0 .2rem
      &.btn
        font-weight normal
        margin-right .1rem
        font-size .09rem
        align-self flex-end
        >span
          color #999
          cursor pointer
          &:hover
          &.on
            color #fff
  .card-content
    position relative
    padding .1rem
    background linear-gradient(to bottom, rgba(5,71,138,.2), rgba(5,71,138,.8))
    border-bottom .01rem solid rgba(91,213,255,.5)
    >.border
      display block
      position absolute
      top 0
      left 0
      bottom 0
      width .01rem
      background linear-gradient(to bottom, rgba(148,236,255, 0), rgba(91,214,255,.5))
      &.right
        left auto
        right 0
    >div
      width 100%
      height 100%
</style>
