<script setup>
import { ref } from "vue";
import Container from "@/components/Container.vue";
import ScreenHint2 from "@/components/ScreenHint2.vue";
import SButton from "@/components/SButton.vue";

const clickable = ref(false);
const showTip = ref(false);

const onBack = () => {
  uni.navigateBack();
};
const onClick = () => {};
</script>

<template>
  <Container
    :bgType="2"
    bgColor="#F5F5F5"
    :whiteBackArrow="false"
    :onBack="() => (showTip = true)"
  >
    <view>
      <ScreenHint2 :show="showTip">
        <view class="tip-content">
          <text>现在离开会导致</text>
          <text>未提交的数据丢失，是否继续？</text>
          <view>
            <button hover-class="none" @click="onBack">退出</button>
            <button hover-class="none" @click="showTip = false">
              继续记录
            </button>
          </view>
        </view>
      </ScreenHint2>
    </view>
    <view :style="{ marginBottom: '20px' }">
      <SButton
        :disabled="!clickable"
        :onClick="onClick"
        disabledColor="#DDDDDD"
        :color="clickable ? '#000' : '#fff'"
      >
        记完了，提交看分析
      </SButton>
    </view>
  </Container>
</template>

<style scoped>
.tip-content {
  width: 100%;
  padding: 25px;
  display: flex;
  flex-direction: column;
}
.tip-content > text {
  width: 100%;
  text-align: center;
  font-size: 14px;
  margin-top: 5px;
}
.tip-content > view {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}
.tip-content > view > button {
  width: 48%;
  background: linear-gradient(180deg, #fbfbfb 0%, #f5f5f5 100%);
  border-radius: 22px;
  border: 1px solid #eeeeee;
  padding: 12px 0;
  font-size: 14px;
}
.tip-content > view > button:last-child {
  background: #fed847;
}
</style>
