<template>
  <xd-down-drawer
    :title="title"
    :show.sync="uiShow"
    :fullscreen="false"
  >
    <template>
      <view class="app-body__title">{{title}}</view>
      <view class="app-body" v-if="leftList!==null&&rightList!==null">
        <scroll-view
          class="app-body__left"
          :style="{'background':dateBackground}"
          :scroll-y="true">
          <view
            class="app-body__left-item"
            v-for="(DItem,DIndex) in leftList" :key="DItem.id"
            @click="handleSelectDate(DIndex,DItem)"
            :style="{'background': DIndex===dateSelectIndex ? dateSelectBackground: ''}"
          >
            {{DItem.name}}
          </view>
        </scroll-view>
        <scroll-view class="app-body__right" :scroll-y="true">
          <view
            class="app-body__right-item"
            v-for="(TItem,TIndex) in rightList"
            :style="{'background':timeBackground,'color':TIndex===timeSelectIndex?timeSelectColor:''}"
            :key="TItem.id"
            @click="handleSelectTime(TIndex,TItem)"
          >
            {{TItem.name}}
          </view>
        </scroll-view>
      </view>
    </template>
  </xd-down-drawer>
</template>

<script>
  import XdDownDrawer from "@/components/XdDownDrawer/XdDownDrawer";

  /**
   * @property {String}  dateBackground          日期选择区域背景色
   * @property {String}  dateSelectBackground    日期选择区域选中背景色
   * @property {String}  timeBackground          时间区域背景色
   * @property {String}  timeSelectColor         时间区域选中背景色
   *
   * 支持插槽（3个插槽） 默认，top, footer
   */

  export default {
    name: "XdSelectTime",
    props: {
      show: {
        type: Boolean,
        default: false
      },
      title: {
        type: String,
        default: '选择预计送达时间'
      },
      dateBackground: {
        type: String,
        default: '#efefef'
      },
      dateSelectBackground: {
        type: String,
        default: '#fff'
      },
      timeBackground: {
        type: String,
        default: '#fff'
      },
      timeSelectColor: {
        type: String,
        default: '#f2dd39'
      }
    },
    components: {
      XdDownDrawer
    },
    data() {
      return {
        dateSelectIndex: 0,
        timeSelectIndex: null,
        testDataList: [
          {
            id: 0,
            name: '29天后（2029-12-29）',
            item_list: [
              {
                top_id: 0,
                id: 0,
                name: '11:00-13:00'
              },
              {
                top_id: 0,
                id: 1,
                name: '13:00-15:00'
              }
            ]
          },
          {
            id: 1,
            name: '10月16日（周六）',
            item_list: [
              {
                top_id: 1,
                id: 0,
                name: '11:00-13:00'
              },
              {
                top_id: 1,
                id: 1,
                name: '13:00-15:00'
              },
              {
                top_id: 1,
                id: 2,
                name: '15:00-17:00'
              },
              {
                top_id: 1,
                id: 3,
                name: '17:00-19:00'
              },
              {
                top_id: 1,
                id: 4,
                name: '19:00-21:00'
              }
            ]
          },
          {
            id: 2,
            name: '2021-10-17',
            item_list: [
              {
                top_id: 2,
                id: 3,
                name: '17:00-19:00'
              },
              {
                top_id: 2,
                id: 4,
                name: '19:00-21:00'
              }
            ]
          },
          {
            id: 3,
            name: '2021-10-18',
            item_list: [
              {
                top_id: 3,
                id: 0,
                name: '11:00-13:00'
              },
              {
                top_id: 3,
                id: 1,
                name: '13:00-15:00'
              },
              {
                top_id: 3,
                id: 2,
                name: '15:00-17:00'
              },
              {
                top_id: 3,
                id: 4,
                name: '19:00-21:00'
              }
            ]
          },
          {
            id: 4,
            name: '2021-10-19',
            item_list: [
              {
                top_id: 4,
                id: 2,
                name: '15:00-17:00'
              },
              {
                top_id: 4,
                id: 3,
                name: '17:00-19:00'
              },
              {
                top_id: 4,
                id: 4,
                name: '19:00-21:00'
              }
            ]
          },
          {
            id: 5,
            name: '2021-10-20',
            item_list: [
              {
                top_id: 5,
                id: 0,
                name: '11:00-13:00'
              },
              {
                top_id: 5,
                id: 1,
                name: '13:00-15:00'
              },
              {
                top_id: 5,
                id: 2,
                name: '15:00-17:00'
              },
              {
                top_id: 5,
                id: 3,
                name: '17:00-19:00'
              },
              {
                top_id: 5,
                id: 4,
                name: '19:00-21:00'
              }
            ]
          }
        ],
        leftList: null,
        rightList: null,
        date: null,
        dateItem: null,
        dateTime: null,
        dateTimeItem: null,
        uiShow: false,
      }
    },

    created() {
      this.uiShow = this.show;
      /* 获取时间段列表 */
      this.getList();
    },

    watch: {
      show(val) {
        this.uiShow = val;
        this.getList()
      },

      uiShow(value) {
        this.$emit('update:show', value);
      }
    },

    methods: {
      /**
       * @description 获取时间段列表
       */
      getList() {
        this.$emit('onTimeSlotList', (list) => {
          if (list === null) {
            this.leftList = this.$xdUniHelper.cloneDeep(this.testDataList);
          } else {
            this.leftList = list
          }
          if (this.leftList.length > 0) {
            this.rightList = this.leftList[0].item_list
            this.date = this.leftList[0].name
            this.dateTime = `${this.date}  ${this.rightList[0].name}`;
            this.dateItem = this.leftList[this.dateSelectIndex];
          }
        });
      },

      /**
       * @description 选择日期
       */
      handleSelectDate(DIndex, DItem) {
        if (DIndex === this.dateSelectIndex) return;
        this.rightList = DItem.item_list;
        this.dateSelectIndex = DIndex;
        // this.timeSelectIndex = 0;
        this.date = DItem.name;
        this.dateItem = DItem;
      },

      /**
       * @description 选择时间
       */
      handleSelectTime(TIndex, TItem) {
        if (TIndex === this.timeSelectIndex) return;
        this.dateTime = `${this.date}  ${TItem.name}`;
        this.timeSelectIndex = TIndex;
        this.dateTimeItem = TItem;
        this.$emit('onSelect', {
          dateItem: this.dateItem,
          dateTimeItem: this.dateTimeItem,
          dateTime: this.dateTime
        })
        this.uiShow = false
        this.timeSelectIndex = null
        this.dateSelectIndex = 0
      },

    }
  }
</script>

<style scoped lang="less">
  .app-body {
    height: 40vh;
    display: flex;
    font-size: @xd-font-size-base;

    &__title {
      height: unit(90, rpx);
      line-height: unit(90, rpx);
      text-align: center;
      border-bottom: 1px solid #efefef;
    }

    &__left {
      height: 100%;
      flex: 2;

      &-item {
        padding: unit(30, rpx);
      }
    }

    &__right {
      height: 100%;
      flex: 3;

      &-item {
        padding: unit(30, rpx);
        border-bottom: unit(1, rpx) solid #f0f0f0
      }
    }
  }
</style>
