<template>
  <div class="page-popup">
    <co-header fixed title="Popup">
      <fallback slot="left"></fallback>
    </co-header>

    <div class="page-popup-wrapper co-wrapper">
      <co-cell title="中部弹出 popup 向下，左边" @click.native="openPopup1('co-popup-bottom-left', 'bottomLeft')" ref="bottomLeft"></co-cell>
      <co-cell title="中部弹出 popup 向下，中间" @click.native="openPopup1('co-popup-bottom-middle', 'bottomMiddle')" ref="bottomMiddle"></co-cell>
      <co-cell title="中部弹出 popup 向下，右边" @click.native="openPopup1('co-popup-bottom-right', 'bottomRight')" ref="bottomRight"></co-cell>
      <co-cell title="中部弹出 popup 向上，左边" @click.native="openPopup1('co-popup-top-left', 'topLeft')" ref="topLeft"></co-cell>
      <co-cell title="中部弹出 popup 向上，中间" @click.native="openPopup1('co-popup-top-middle', 'topMiddle')" ref="topMiddle"></co-cell>
      <co-cell title="中部弹出 popup 向上，右边" @click.native="openPopup1('co-popup-top-right', 'topRight')" ref="topRight"></co-cell>
      <co-cell title="上侧弹出 popup" @click.native="popupVisible2 = true"></co-cell>
      <co-cell title="右侧弹出 popup" @click.native="popupVisible3 = true"></co-cell>
      <co-cell title="下侧弹出 popup" @click.native="popupVisible4 = true"></co-cell>
    </div>
    <co-popup v-model="popupVisible1.show" popup-transition="popup-fade" :class="popupVisible1.class" ref="popup1" class="co-popup-1" :style="{ top: buttonBottom + 10 + 'px' }">
      <h1>popup</h1>
      <p>/ ˈpɑpˌʌp /</p>
      <p>n. 弹出式; [棒]内野飞球; 自动起跳式装置</p>
      <p>adj. 弹起的; 有自动起跳装置的</p>
    </co-popup>
    <co-popup v-model="popupVisible2" position="top" class="co-popup-2" :modal="false">
      <p>更新成功</p>
    </co-popup>
    <co-popup v-model="popupVisible3" position="right" class="co-popup-3" :modal="false">
      <co-button @click.native="popupVisible3 = false" size="large" type="primary">关闭 popup</co-button>
    </co-popup>
    <co-popup v-model="popupVisible4" position="bottom" class="co-popup-4">
      <co-picker :slots="dateSlots" @change="onDateChange" :visible-item-count="5" :show-toolbar="false"></co-picker>
    </co-popup>
  </div>
</template>

<script type="es6">
  export default {
    data() {
      return {
        popupVisible1: {
          'show': false,
          'class': 'co-popup-bottom-left'
        },
        popupVisible2: false,
        popupVisible3: false,
        popupVisible4: false,
        buttonBottom: 0,
        dateSlots: [
          {
            flex: 1,
            values: ['2016-01', '2016-02', '2016-03', '2016-04', '2016-05', '2016-06'],
            className: 'slot1',
            textAlign: 'right'
          }, {
            divider: true,
            content: '-',
            className: 'slot2'
          }, {
            flex: 1,
            values: ['2016-01', '2016-02', '2016-03', '2016-04', '2016-05', '2016-06'],
            className: 'slot3',
            textAlign: 'left'
          }
        ]
      };
    },

    watch: {
      popupVisible2(val) {
        if (val) {
          setTimeout(() => {
            this.popupVisible2 = false;
          }, 2000);
        }
      }
    },

    methods: {
      openPopup1(className, popup) {
        this.popupVisible1 = {
          'show': true,
          'class': className
        };
        if (className.indexOf('top') > -1) {
          // 向上弹出
          let buttonBottom = this.$refs[popup].$el.getBoundingClientRect().bottom;
          buttonBottom -= this.$refs[popup].$el.getBoundingClientRect().height;
          setTimeout(() => {
            buttonBottom -= this.$refs['popup1'].$el.getBoundingClientRect().height + 10;
            this.buttonBottom = buttonBottom;
          });
        } else {
          this.buttonBottom = this.$refs[popup].$el.getBoundingClientRect().bottom;
        }
      },
      onDateChange(picker, values) {
        if (values[0] > values[1]) {
          picker.setSlotValue(1, values[0]);
        }
        this.dateStart = values[0];
        this.dateEnd = values[1];
      }
    },

    mounted() {}
  };
</script>

<style lang="less">
  .page-popup {
    .co-popup-1 {
      h1 {
        font-size: 20px;
        color: #26a2ff;
      }

      p {
        margin-bottom: 10px;
      }
    }

    .co-popup-2 {
      width: 100%;
      height: 50px;
      text-align: center;
      background-color: rgba(0,0,0,.7);
      backface-visibility: hidden;
    }

    .co-popup-2 p {
      line-height: 50px;
      color: #fff;
    }

    .co-popup-3 {
      width: 100%;
      height: 100%;
      background-color: #fff;
    }

    .co-popup-3 .co-button {
      position: absolute;
      width: 90%;
      top: 50%;
      left: 5%;
      transform: translateY(-50%);
    }
  }
</style>
