<template>
  <div class="del-list-item">
    <div :class="['field', { 'del': isEdit, 'slide': isSlide || false }]">
      <div class="cont">
        <img :src="iconUrl" alt="" v-if="iconUrl && !isEdit" :style="{ 'width': iconWidth ? iconWidth + 'px' : auto, 'height': iconHeight ? iconHeight + 'px' : auto}">
        <i class="icon-del" v-if="isEdit"  @click.stop="handleSlideLeft"></i>
        <div class="info">
          <h3>{{ name }}</h3>
          <small>{{ desc }}</small>
        </div>
      </div>
      <div class="buttons" ref="buttons">
        <a href="javascript:void(0)" @click.stop="delData">删除</a>
      </div>
      <i class="arrow"></i>
      <i class="bline" :style="{ left: (offsetLeft || 50) + 'px' }"></i>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'md-del-list-item',
    props: {
      name: {
        type: String,
        default: '标题'
      },
      desc: {
        type: String,
        default: '描述'
      },
      iconUrl: '',
      iconWidth: {
        type: String,
        default: '40'
      },
      iconHeight: {
        type: String,
        default: '40'
      },
      isEdit: {
        type: Boolean,
        default: false
      },
      offsetLeft: {
        type: Number,
        default: 50
      }
    },
    data () {
      return {
        isSlide: false
      }
    },
    methods: {
      handleSlideLeft () {
        this.isSlide = true
      },
      delData () {
        this.isSlide = false
        this.$emit('update:isEdit', false)
        this.$emit('delete')
      }
    }
  }
</script>

<style lang="stylus" scoped>
.del-list-item
  .field
    font-size 14px
    line-height 20px
    background #ffffff
    position relative
    cursor pointer
    overflow hidden
    &.del
      i.arrow
        position absolute
        right 0
        top 50%
        width 30px
        height 30px
        margin-top -15px
        background url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAATNJREFUWAntVMsNgkAUBBO4Sgl2ICVoJ1qCF6gBLliCdGAH0IFYgdqBZzjgTMIaQojsh5CY7EsIZD9vZmdmcRxbVgGrwD8pkKbpNUmSbE7OrmyzLMuCuq6fruuusecSRdFRdu+vddIE2AQKhG3bloKE53kn1PsXwNScEoEREhVI7E1IKBOYm8RqSqKxefhfwYYd7LhjPmyapmBGxtZOjWkpIJp2wWQmthjTskNLAUGA3vu+/1UCt+TGoIp5mbcRAQL0SUCJDYYKPNJlTEAgAbzlN3KhZKsxAeaAIQQ2pX+ByA5v6VJiO+zaB+eNYB5U/wnaCjBs4uS64DyQlgJd0il7YAKuRWBOcBJQsmAAnut4TtB+SVvQBe6BzZQ9j+P40G+0yDcUKPGcFwGzIFYBq8BSCnwAi26dAcUnyOkAAAAASUVORK5CYII=') no-repeat center center
        background-size 24px
    i.icon-del
      display block
      width 40px
      height 40px
      margin -0 10px 0 0
      background url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAopJREFUWAnFVkF22jAQlWyzhryXdht3myxKb0BOEPdBztFssq65AT1HyKt7gvQGpYtkW3eb5r3gNQb1f4F4xgjiCHBmY2lGM/9rxpJGilfIU693MVMqklKGSoiWFKJNd6VUCl3Krydlcjwc/qgaFjG2y3MUhRPf/4qFkZCytX31wqrUGASTxnTaP0qSdJvPRgIAbuVB8AXbu6oMXEYCEfgOgjz/BiLjsplzKwGCT4LgDkadYpvja3TIxqiR5+c2EmsEHi8v23I2u3Pe9SZmLIvnnb+/uRkVl6wQ0Gn3/T97BzeIIBFMpx+KmfCMzaT9YOAEwk/M0hLL4C4J4Ie72lfNTXDblxjEMjZdAjAKc9//ddDdG0R+56X4xCOqM4BzHtcGTgIsBTEhmgDScMFJnWIw5VO3Gykpv9cJbrCkUp+9Ga/YNxJi4+2Q4Rvh41eQYYBrsol6rEnj7Ew0Tk/X9C6KycODmNzfr7ni9TwJAN4uW/wwFM04Lqt3mj9fX4tpmq7EYAaWF9GKpcaJfOx2R2DysYypS4Ay7EOYflsJcCH9DQA+toFsdLItdtWhi/LYRrn67+qnWzj8BMmugVz9ia1P4L9ej2VougZy9MveDYctfQqQitqzYDA1AXSvMXaROe7ExS1bYM5fQ77LiDJwieToM1hgzgkwCOoRIy2/HQNWdiMG2vTlZnUJjDfS0sH4kKVg6jvWppQkaEBvcCgSGWMXwYmpjyEHRdEdsu//tF3RxXVVx0x7eefGd6UERkmWi3L0odulJPTtbwInnjUDNBhhx8wGEtmIoKt6WWU85wCOsZnUxLJ9XyRQdGL/iHkHtWzjJQvR0pxoO141jFOApkhpcnx7mxT9to3/A+DIBzTgJ/kAAAAAAElFTkSuQmCC') no-repeat center center
      background-size 20px
    i.bline
      position absolute
      left 0
      right 0
      bottom 0
      height 1px
      background #ededed
    .cont
      display flex
      flex-flow columns nowrap
      align-items center
      padding 10px 20px 10px 0
      transition transform .3s linear
      img
        display block
        width 40px
        height 40px
        margin-right 10px
      .info
        flex 1
        line-height 1.8
        h3
          font-size 14px
          margin 0
          padding 0
        small
          display block
          font-size 12px
          color #666
    .buttons
      position absolute
      right 0
      top 0
      bottom 0
      background #ff0000
      transform translateX(200%)
      transition transform .3s linear
      z-index 2
      a
       display inline-block
       padding 0 15px
       min-width 60px
       font-size 16px
       text-align center
       color #ffffff
       text-decoration none
       position relative
       top 50%
       transform translateY(-50%)
       box-sizing border-box
    &.slide
      .cont
        transform translateX(-60px)
      .buttons
        transform translateX(0)
</style>
