<template>
  <view :class="[noDataTips ? 'data_con' : 'con', 'p_flexCenterCol', 'nodata_con']">
    <image class="con_img" :src="iconUrl.nothing"></image>
    <view :class="[!noDataTips ? 'con_tip p_color_6' : 'con_data_tip p_color_3']">{{ value }}</view>
    <view class="no_data_tips" v-if="noDataTips">{{ noDataTips }}</view>
    <view class="con_btn p_flexCenter p_bgcolor" @click="toHome" v-if="!showBack">返回首页</view>
    <view class="con_btn p_flexCenter p_bgcolor" @click="back" v-else>返回上一页</view>
  </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { common } from '@/utils';
import icon from '@/utils/icon';

const props = withDefaults(defineProps<{
  value?: string;
  noDataTips?: string;
  showBack?: boolean;
}>(), {
  value: '',
  noDataTips: '',
  showBack: false
});

const iconUrl = ref(icon);

const toHome = () => {
  common.goToUrl(`/pages/st1/business/tabbar/netHosIndex/netHosIndex`, {
    skipWay: "switchTab"
  });
};

const back = () => {
  common.navigateBack();
};
</script>

<style lang="scss" scoped>
.con {
  padding-top: 240upx;
}

.con_img {
  width: 402upx;
  height: 202upx;
}

.con_tip {
  font-size: 28upx;
  font-weight: 500;
  margin: 24upx 0 34upx;
}

.data_con {
  padding-top: 160upx;
}

.con_data_tip {
  font-size: 28upx;
  font-weight: bold;
  margin: 24upx 0 34upx;
}

.no_data_tips {
  width: 80%;
  font-size: 30upx;
  margin-bottom: 60upx;
}

.con_btn {
  height: 80upx;
  background: #306EFF;
  border-radius: 12upx;
  padding: 0 54upx;
  font-size: 30upx;
}
</style>