<template>
  <view class="businessStatus-container">
    <view class="hander">
      <view class="store-logo">
        <u--image
          :src="
            dashboardInfo.store_info.store_logo || '../../static/user-img.png'
          "
          shape="circle"
          width="100"
          height="100"
        ></u--image>
      </view>
      <view class="store-name">{{ dashboardInfo.store_info.store_name }}</view>
    </view>

    <view class="business-contetn">
      <view class="title">
        <view
          :class="[
            'status',
            {
              'open-business': dashboardInfo.store_info.store_biz_state == 1,
              'close-business': dashboardInfo.store_info.store_biz_state == 2,
            },
          ]"
        >
          {{
            dashboardInfo.store_info.store_biz_state == 1 ? "营业中" : "停业中"
          }}
        </view>
        <view class="tips">本店停业中，不会自动恢复营业。</view>
      </view>
      <view class="business-box">
        <u-cell-group :border="false" class="business-time-content">
          <u-cell
            :rightIconStyle="{ fontSize: '24rpx' }"
            isLink
            url="/pages/my/storeBusinessStatus/updateBusinessTime"
            title="营业时间"
            :label="businessTime"
            :border="false"
          ></u-cell>
        </u-cell-group>
      </view>
    </view>
    <view class="businees-bottom">
      <view class="bottom-tips">
        恢复营业后，系统会根据营业时间自动切换营业中、已打烊状态。
      </view>
      <u-button
        :class="[
          'btn-update-status',
          {
            'btn-update-status-bg':
              dashboardInfo.store_info.store_biz_state == 2,
          },
        ]"
        :hairline="true"
        :plain="true"
        shape="circle"
        @click="showBusinessPopup"
      >
        {{
          dashboardInfo.store_info.store_biz_state == 1
            ? "停止营业"
            : "恢复营业"
        }}
      </u-button>
    </view>
    <u-popup class="businees-popup" :show="showPopup" mode="center">
      <view class="businees-popup-content">
        <view
          :class="[
            'popup-logo',
            {
              'popup-logo-filter':
                dashboardInfo.store_info.store_biz_state == 1,
            },
          ]"
        ></view>
        <view class="businees-name">
          {{
            dashboardInfo.store_info.store_biz_state == 2 ? "恢复" : "停止"
          }}营业
        </view>
        <view class="businees-tips-1">
          确认将门店
          <text class="store-name">
            "{{ dashboardInfo.store_info.store_name }}"
          </text>
          恢复营业吗?
        </view>
        <view class="businees-tips-2">
          <text v-if="dashboardInfo.store_info.store_biz_state == 2">
            恢复营业后门店将在营业时间内接收订单，请提前 做好准备
          </text>
          <text v-if="dashboardInfo.store_info.store_biz_state == 1">
            停业后门店将不再接收新订单
          </text>
        </view>
        <view class="popup-btn-list">
          <u-button
            class="btn-item"
            :hairline="true"
            :plain="true"
            shape="circle"
            @click="closeStoreBusinessStatus"
          >
            取消
          </u-button>
          <u-button
            v-if="dashboardInfo.store_info.store_biz_state == 2"
            class="btn-item btn-item-2"
            :hairline="true"
            :plain="true"
            shape="circle"
            @click="handerUpdateStoreBizState(1)"
          >
            恢复营业
          </u-button>
          <u-button
            v-if="dashboardInfo.store_info.store_biz_state == 1"
            class="btn-item btn-item-2"
            :hairline="true"
            :plain="true"
            shape="circle"
            @click="handerUpdateStoreBizState(2)"
          >
            停止营业
          </u-button>
        </view>
      </view>
    </u-popup>
    <u-popup class="inform-popup" :show="showInformPopup" mode="center">
      <view class="inform-popup-content">
        <view class="inform-popup-title">已停止营业</view>
        <view class="inform-popup-tips">
          当前商家从现在起不接收新订单，手动 恢复营业后可正常接收新订单
        </view>
        <view class="popup-btn-list">
          <u-button
            class="btn-item"
            :hairline="true"
            :plain="true"
            shape="circle"
            @click="showInformPopup = false"
          >
            取消
          </u-button>
          <u-button
            class="btn-item btn-item-2"
            :hairline="true"
            :plain="true"
            shape="circle"
            @click="showInformPopup = false"
          >
            我知道了
          </u-button>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import { GetAccountDashboard } from "../../../api/user";
import { UpdateStoreBizState } from "../../../api/store";
export default {
  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,
      showInformPopup: false,
    };
  },
  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;
      }
    },
    async handerUpdateStoreBizState(status) {
      let params = {
        store_id: this.dashboardInfo.store_info.store_id,
        store_biz_state: status,
      };

      let res = await UpdateStoreBizState(params);
      if (res && res.status == 200) {
        if (status == 2) {
          this.showInformPopup = true;
        }
      }
      this.getAccountDashboard();
      this.showPopup = false;
    },
    showBusinessPopup() {
      this.showPopup = true;
    },
    closeStoreBusinessStatus() {
      this.showPopup = false;
    },
  },
};
</script>

<style lang="scss">
@import "@/styles/variables.scss";
.businessStatus-container {
  background: #fafafa;
  height: calc(100vh - 88rpx);

  .hander {
    display: flex;
    flex-flow: column;
    align-items: center;
    padding: 60rpx 0 28rpx;

    .store-logo {
      margin-bottom: 30rpx;
    }

    .store-name {
      font-weight: 500;
      font-size: 34rpx;
    }
  }

  .business-contetn {
    margin: 40rpx 32rpx;
    background: #fff;
    border-radius: 16rpx;
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
    background: #fbf1e8;

    .title {
      padding: 40rpx 36rpx;

      .status {
        position: relative;
        margin-bottom: 12rpx;
        padding: 0 36rpx;
        font-weight: bold;
        font-size: 36rpx;
        letter-spacing: 4rpx;

        &::before {
          content: "";
          display: block;
          width: 10px;
          height: 10px;

          position: absolute;
          left: 0;
          top: 37%;
          border-radius: 50%;
        }
      }

      .open-business::before {
        background-color: #5ac725;
      }

      .close-business::before {
        background-color: #ed7330;
      }

      .tips {
        padding: 0 36rpx;
        font-size: 28rpx;
        color: #271c18;
      }
    }

    .business-status {
      .status-name {
        position: relative;

        &::before {
          content: "";
          display: block;
          width: 6px;
          height: 6px;
          background-color: #5ac725;
          position: absolute;
          right: 25%;
          top: 36%;
          border-radius: 50%;
        }
      }
    }

    .business-box {
      padding: 20rpx 32rpx;
      padding-right: 0;
      display: flex;
      justify-content: space-between;
      overflow: hidden;
      border-radius: 8px;
      background: #fff;
    }
  }

  ::v-deep.business-time-content {
    .u-cell__title-text {
      color: #909193;
      font-size: 28rpx;
    }

    .u-cell__label {
      font-weight: bold;
      font-size: 32rpx;
      color: #000;
    }
  }

  .businees-bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    padding: 36rpx 40rpx 60rpx;
    background: #fff;

    .bottom-tips {
      margin-bottom: 32rpx;
      font-size: 24rpx;
      color: #909193;
    }

    .btn-update-status {
      border-color: #ccc;
      color: #000;
      font-weight: 500;

      &::after {
        border: none;
      }
    }

    .btn-update-status-bg {
      background: $base-color;
      border: none;
      color: #fff;
    }
  }

  .inform-popup {
    ::v-deep.u-popup__content {
      border-radius: 16rpx;
    }

    .inform-popup-content {
      width: 600rpx;

      .inform-popup-title {
        padding: 40rpx;
        text-align: center;
        font-weight: 500;
      }

      .inform-popup-tips {
        padding: 0 60rpx;
      }

      .popup-btn-list {
        display: flex;
        margin: 50rpx;

        .btn-item {
          width: 46%;
          height: 80rpx;
          border-color: #909193;

          &::after {
            border: none;
          }
        }

        .btn-item-2 {
          background: $base-color;
          color: #fff;
          border: none;
        }
      }
    }
  }

  .businees-popup {
    ::v-deep.u-popup__content {
      margin: 0 28px;
      min-width: 80%;
      border-radius: 16rpx;
    }

    .businees-popup-content {
      position: relative;
      min-width: 80%;

      .popup-logo {
        position: absolute;
        top: -50px;
        left: 37%;
        height: 80px;
        width: 100px;
        background-image: url("../../../static/store.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }

      .popup-logo-filter {
        filter: grayscale(100%);
      }

      .businees-name {
        margin: 120rpx 0 32rpx;
        text-align: center;
        font-weight: 500;
        font-size: 36rpx;
      }

      .businees-tips-1 {
        margin-bottom: 32rpx;
        text-align: center;
        font-size: 28rpx;
        color: #909193;

        .store-name {
          color: $base-color;
        }
      }

      .businees-tips-2 {
        margin-bottom: 92rpx;
        padding: 0px 52rpx;
        text-align: center;
        font-size: 28rpx;
        color: #909193;
      }

      .popup-btn-list {
        display: flex;
        margin: 72rpx 44rpx 122rpx;

        .btn-item {
          width: 46%;
          height: 80rpx;
          border-color: #909193;

          &::after {
            border: none;
          }
        }

        .btn-item-2 {
          background: $base-color;
          color: #fff;
          border: none;
        }
      }
    }
  }
}
</style>
