<template>
  <view class="select-city-interval">
    <view class="select-city-box">
      <view class="select-city-box__start" @click="openSelectCity('startCity')">
        <view class="value" v-if="t(startCity, 'name').input">
          <view class="text">{{ t(startCity, 'name').input }}</view>
          <view class="clear" @click.stop="onTimeClear('startCity')">
            <zui-icon name="close"></zui-icon>
          </view>
        </view>
        <text v-else class="placeholder">始发地</text>
      </view>
      <view class="select-city-box__split">
        <zui-icon name="remove"></zui-icon>
      </view>
      <view class="select-city-box__end" @click="openSelectCity('endCity')">
        <view class="value" v-if="t(endCity, 'name').input">
          <view class="text">{{ t(endCity, 'name').input }}</view>
          <view class="clear" @click.stop="onTimeClear('endCity')">
            <zui-icon name="close"></zui-icon>
          </view>
        </view>
        <text v-else class="placeholder">目的地</text>
      </view>
    </view>
  </view>
</template>

<script>
import dayjs from 'dayjs';
import t from 'typy';

export default {
  name: 'select-city-interval',
  props: {
    value: {
      type: Object,
      default: function() {
        return {
          // start: {},
          // end: {},
          startRangeCity: '',
          endRangeCity: '',
        };
      },
    },
  },
  data() {
    return {
      startCity: this.value.startRangeCity || {},
      endCity: this.value.endRangeCity || {},
    };
  },
  watch: {
    value(val) {
      this.startCity = val ? val.startRangeCity : {};
      this.endCity = val ? val.endRangeCity : {};
    },
  },
  computed: {},
  methods: {
    t,
    // 打开城市选择
    openSelectCity(keyName) {
      uni.$once('select-city', (city) => {
        this[keyName] = city;
        this.$nextTick(() => {
          let emitValue = { startRangeCity: this.startCity, endRangeCity: this.endCity };
          this.$emit('input', emitValue);
        });
      });
      uni.navigateTo({ url: '/pages/global/search-city' });
    },
    // 清除城市
    onTimeClear(type) {
      this[type] = {};
      this.$nextTick(() => {
        let emitValue = { startRangeCity: this.startCity, endRangeCity: this.endCity };
        this.$emit('input', emitValue);
      });
    }
  }
};
</script>

<style lang="scss">
.select-city-interval {
  width: 100%;
  font-size: $font-md;
  .select-city-box {
    display: flex;
    align-items: center;
    white-space: nowrap;
    word-break: break-all;
    font-size: $font-md;
    &__split {
      padding: 0 10upx;
      white-space: nowrap;
      word-break: break-all;
      color: $color-text-minor;
    }
    &__start, &__end {
      width: 234upx;
      height: 76upx;
      font-size: 28upx;
      border-radius: 8upx;
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #F6F6F6;
      color: $color-black;
      white-space: nowrap;
      word-break: break-all;
      .value {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        .text {
          max-width: 130upx;
          overflow : hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
        }
      }
      .clear {
        color: $color-text-minor;
        padding: 10upx;
        height: 100%;
        box-sizing: border-box;
        display: inline-flex;
        align-items: center;
        justify-content: center;
      }
      .placeholder {
        color: $color-text-caption;
      }
    }
  }
}
</style>
