<template>
  <view>
    <navigator url="/pages/home/home" hover-class="navigator-hover">
      <button type="default">返回首页</button>
    </navigator>

    <view class="title">button样式</view>
    <view>
      <button class="v-btn v-btn-default">default</button>
      <button class="v-btn">primary</button>
      <button class="v-btn v-btn-round">round</button>
      <button class="v-btn v-btn-round v-btn-block">block</button>
    </view>

    <view class="title">radio组件</view>
    <CommonRadio
      v-model="selectedValue"
      :options="[
        { label: '正常', value: 'normal' },
        { label: '异常', value: 'abnormal' },
      ]"
      @change="onRadioChange"
    ></CommonRadio>
    <view class="title">公共弹窗</view>
    <button class="v-btn" @click="dialogVisible = true">打开弹窗</button>
    <CommonDialog v-model="dialogVisible" title="弹窗标题">
      <div>这是公共弹窗的内容</div>
      <template #footer>
        <button class="v-btn v-btn-default" @click="dialogVisible = false">
          返回
        </button>
        <button class="v-btn ml-10">确认</button>
      </template>
    </CommonDialog>
    <view class="title">上传组件</view>
    <CommonUpload v-model="imageList" :max-count="5"> </CommonUpload>
  </view>
</template>

<script>
import CommonRadio from "@/components/CommonRadio/index.vue";
import CommonDialog from "@/components/CommonDialog/index.vue";
import CommonUpload from "@/components/CommonUpload/index.vue";
export default {
  components: {
    CommonRadio,
    CommonDialog,
    CommonUpload,
  },
  data() {
    return {
      selectedValue: "normal",
      dialogVisible: false,
      imageList: [], // 存储 base64 图片的数组
    };
  },
  methods: {
    onRadioChange(value) {
      console.log("当前选中值:", value);
    },
    onOpenDialog() {
      this.dialogVisible = true;
    },
  },
};
</script>

<style lang="less" scoped>
.title {
  padding: 10px;
  font-size: 18px;
  &::before {
    display: inline-block;
    content: "";
    width: 6px;
    height: 14px;
    background-color: #007bff;
    margin-right: 6px;
  }
}
</style>
