<template>
  <view class="container">
    <view class="switch-container">
      <view class="header">铃声消息提醒</view>
      <view class="footer">
        <u-switch
          v-model="isSwitchOn"
          @change="handleSwitchChange"
          size="20"
        ></u-switch>
        <!-- <view>{{ isSwitchOn ? '打开' : '关闭' }}</view> -->
      </view>
    </view>
  </view>
</template>

<script>
import { GetShopBaseInfo, UpdataShopInfo } from "@/api/shop.js";

export default {
  data() {
    return {
      isSwitchOn: false,
      shopInfo: {},
    };
  },
  onLoad() {
    this.getRingtoneStatus();
  },
  methods: {
    async getRingtoneStatus() {
      try {
        let res = await GetShopBaseInfo();
        this.isSwitchOn = res.data.ringtone_is_enable === 1;
        this.shopInfo = res.data;
      } catch (error) {
        uni.showToast({
          title: "获取状态失败",
          icon: "none",
          duration: 2000,
        });
      }
    },

    async handleSwitchChange(value) {
      try {
        const status = value ? 1 : 2;
        const shopInfo = this.shopInfo
        let res = await UpdataShopInfo({
          store_logo: shopInfo.store_logo,
          store_slogan: shopInfo.store_slogan,
          store_tel: shopInfo.store_tel,
          company_description: shopInfo.company_description,
          ringtone_is_enable: status,
        });
        this.isSwitchOn = value;

        uni.showToast({
          title: `铃声提醒已${value ? "开启" : "关闭"}`,
          icon: "success",
          duration: 1500,
        });
      } catch (error) {
        this.isSwitchOn = !value;
        uni.showToast({
          title: "更新失败，请重试",
          icon: "none",
          duration: 2000,
        });
      }
    },
  },
};
</script>

<style lang="scss">
page {
  background-color: #fff;
}

.container {
  padding: 20rpx;
}

.switch-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx;
  background-color: #fff;
  border-bottom: 1px solid #eee;
  .footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}

.switch-container text {
  font-size: 32rpx;
  color: #333;
}

.loading-text {
  margin-top: 30rpx;
  font-size: 30rpx;
  color: #666;
  padding: 20rpx;
}
</style>
