<template>
  <view class="businessStatus-container">
    <view class="hander">
      <view class="site-time">配送站点营业时间 00:00-24:00</view>
      <view class="tips-item">
        门店营业时间需在配送站点营业时间内才会有骑手配送
      </view>
      <view class="tips-item tips-item-2">
        如需在此时间范围外营业，请咨询业务经理调整配送方式
      </view>
    </view>
    <view class="business-time-content" @click="showTimePopup">
      <view class="time-box">
        <view calss="time">23:30</view>
        <view>至</view>
        <view calss="time">23:30</view>
      </view>
    </view>
    <ozTimePicker
      ref="timePickerPopupRef"
      title="设置营业时间段"
      segmentation="至"
      :value="['00', '00', '00', '00']"
      indicator-class="picker-view__indicator acitve"
    ></ozTimePicker>
  </view>
</template>

<script>
import { GetAccountDashboard } from "../../../api/user";
import { UpdateStoreBizState } from "../../../api/store";
import tuiDatetime from "./tui-datetime/tui-datetime.vue";
import ozTimePicker from "./oz-timePicker/oz-timePicker.vue";
export default {
  components: {
    tuiDatetime,
    ozTimePicker,
  },
  data() {
    return {
      dashboardInfo: {
        data: {},
        notice: {},
        order: {
          yestoday_num: 0,
        },
        product: {
          illegal_num: 0,
          normal_num: 0,
          off_num: 0,
          total_num: 0,
          verify_passed_off_num: 0,
          verify_refused_num: 0,
          verify_waiting_num: 0,
        },
        return: {
          fin_num: 0,
          review_num: 0,
          total_num: 0,
          un_fin_num: 0,
        },
        store_info: {
          store_id: 1,
          store_name: "",
          store_biz_state: 1,
          info: {
            store_opening_hours: "",
            store_close_hours: "",
          },
        },
      },
      showPopup: false,
      dateTime: "",
    };
  },
  computed: {
    businessTime() {
      return `${this.dashboardInfo.store_info.info.store_opening_hours}-${this.dashboardInfo.store_info.info.store_close_hours}`;
    },
  },
  onShow() {
    this.getAccountDashboard();
  },
  methods: {
    async getAccountDashboard() {
      let res = await GetAccountDashboard();
      if (res && res.status == 200) {
        uni.setStorageSync("accountDashboard", res.data);
        this.dashboardInfo = res.data;
      }
    },
    showTimePopup() {
      this.$refs.timePickerPopupRef.open();
    },
    closeTimePopup() {
      this.showPopup = false;
    },
  },
};
</script>

<style lang="scss">
@import "@/styles/variables.scss";
.businessStatus-container {
  .hander {
    padding: 52rpx 40rpx 88rpx;
    background: linear-gradient(33deg, #f7d8de 0%, #fff 100%);

    .site-time {
      margin-bottom: 40rpx;
      font-weight: 500;
      font-size: 36rpx;
    }

    .tips-item {
      position: relative;
      padding-left: 28rpx;
      font-size: 26rpx;
      margin-bottom: 32rpx;

      &::before {
        content: "";
        display: block;
        width: 12rpx;
        height: 12rpx;
        background-color: #0a0301;
        position: absolute;
        left: 0;
        top: 36%;
        border-radius: 50%;
      }
    }

    .tips-item-2 {
      margin-bottom: 0;
    }
  }

  .business-time-content {
    position: relative;
    top: -20rpx;
    border-radius: 24rpx;
    z-index: 2;
    background: #fff;

    .time-box {
      display: flex;
      justify-content: space-evenly;
      margin: 100rpx 40rpx;
      padding: 36rpx 40rpx;
      border-radius: 24rpx;
      background: #f5f6fa;
    }
  }

  .time-popup {
    .time-popup-content {
      border-radius: 12px;
      height: 800rpx;

      .time-popup-title {
        padding: 24rpx;
        font-size: 36rpx;
        font-weight: 500;
        text-align: center;
      }
    }
  }
}
</style>
