<template>
  <div class="pop-tab">
    <div class="pop-mask" @click="handleClose">
      <div class="pop-wrapper" @click.stop="clickStop">
        <div class="content">
          <div class="left">
            <div
              class="nav-item"
              v-for="(item, index) in list"
              :key="index"
              :class="{'nav-active': currentIndex === index}"
              @click="changeIndex(index)"
            >
              {{item[props.title]}}
            </div>
          </div>
          <div class="right">
            <div
              v-for="(item, index) in list[currentIndex][props.list]"
              :key="index"
              class="pane-item"
              :class="{'pane-active': type === 'pickup' ? currentValue === item.fromUnixTime : currentValue === item.unixTime, 'pane-pick': type === 'pickup'}"
              @click="handlePick(item, list[currentIndex][props.title])"
            >
              <div v-if="item.viewTime==='立即送出' && isSelf">立即自取</div>
              <div v-else>{{item.viewTime}}</div>
              <div v-show="!isSelf">{{item.viewShippingFee}}</div>
            </div>
          </div>
        </div>
        <div class="btn-cancel" @click="handleClose">取消</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'PopTab',
  props: {
    list: {
      type: Array,
      default () {
        return []
      }
    },
    props: {
      type: Object,
      default () {
        return {
          title: 'title',
          list: 'list'
        }
      }
    },
    currentValue: '',
    type: '',
    isSelf: {
      type: Boolean,
      default:false
    }
  },
  data () {
    return {
      currentIndex: 0
    }
  },
  methods: {
    clickStop(){
      // console.log('阻止点击事件传递')
    },
    handleClose () {
      this.$emit('on-close')
    },
    handlePick (item, title) {
      // console.log(item, title)
      this.$emit('on-close', {
        [this.props.title]: title,
        ...item
      })
    },
    changeIndex (index) {
      this.currentIndex = index
    }
  }
}
</script>

<style lang="scss">
@import './popTab.scss';
</style>