<script setup lang="ts">
import type { CheckCardItem } from '@/components/FsCheckCard/types'

const select = ref('React')

const select2 = ref('')

const select3 = ref('编码')

const select4 = ref('编码')

const items4 = ref<CheckCardItem[]>([{ value: '编码' }, { value: '摸鱼' }, { value: '喝水' }])
const items5 = ref<CheckCardItem[]>([{ value: '编码' }, { value: '摸鱼' }, { value: '喝水' }])

const items6 = ref([
  {
    value: 1,
    img: 'https://gw.alipayobjects.com/mdn/member_frontWeb/afts/img/A*oRlnSYAsgYQAAAAAAAAAAABkARQnAQ'
  },
  {
    value: 2,
    img: 'https://e.gitee.com/assets/images/wechatpay.png'
  },
  {
    value: 3,
    img: 'https://cn.unionpay.com/upowhtml/cn/resources/images/header/homepage-logo.png'
  }
])

const items = ref<CheckCardItem[]>([
  {
    value: 'Vue',
    label: 'Vue',
    col: { md: 6, sm: 12, xs: 24 },
    src: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
    content: 'Vue 是一套用于构建用户界面的渐进式框架。'
  },
  {
    value: 'React',
    label: 'React',
    col: { span: 6 },
    src: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
    content: 'React 用于构建 Web 和原生交互界面的库'
  },
  {
    value: 'Angular',
    label: 'Angular',
    col: { span: 6 },
    src: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
    content: 'Angular 是一套用于构建用户界面的渐进式框架。'
  }
])

const items2 = ref<CheckCardItem[]>([
  {
    value: 'Vue',
    label: 'Vue',
    col: { md: 6, sm: 12, xs: 24 },
    src: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
    content: 'Vue 是一套用于构建用户界面的渐进式框架。'
  },
  {
    value: 'React',
    label: 'React',
    col: { span: 6 },
    src: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
    content: 'React 用于构建 Web 和原生交互界面的库'
  },
  {
    value: 'Angular',
    label: 'Angular',
    col: { span: 6 },
    src: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
    content: 'Angular 是一套用于构建用户界面的渐进式框架。'
  }
])

const items3 = ref<CheckCardItem[]>([
  {
    value: 'Vue',
    label: 'Vue',
    col: { md: 6, sm: 12, xs: 24 },
    src: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
    content: 'Vue 是一套用于构建用户界面的渐进式框架。',
    disabled: true,
    style: { color: '#fff', background: '#009688' }
  },
  {
    value: 'React',
    label: 'React',
    col: { span: 6 },
    src: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
    content: 'React 用于构建 Web 和原生交互界面的库'
  },
  {
    value: 'Angular',
    label: 'Angular',
    col: { span: 6 },
    src: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
    content: 'Angular 是一套用于构建用户界面的渐进式框架。'
  }
])

const allDisabled = ref(false)
</script>

<template>
  <el-card shadow="never" header="基础使用">
    已选中：{{ select }}
    <fs-check-card v-model="select" :items="items" :row="{ gutter: 10 }" class="mt-3">
      <template #item="{ item }">
        <div class="flex p-2" v-if="item">
          <div>
            <el-image :src="item.src" fit="cover" class="w-50px h-50px border-rounded"></el-image>
          </div>
          <div class="ml-3">
            <div class="font-bold">{{ item.label }}</div>
            <div>{{ item.content }}</div>
          </div>
        </div>
      </template>
    </fs-check-card>
  </el-card>
  <el-card shadow="never" header="多选示例" class="mt-3">
    已选中：{{ select2 }}
    <fs-check-card v-model="select2" :items="items2" :row="{ gutter: 10 }" multiple class="mt-3">
      <template #item="{ item }">
        <div class="flex p-2" v-if="item">
          <div>
            <el-image :src="item.src" fit="cover" class="w-50px h-50px border-rounded"></el-image>
          </div>
          <div class="ml-3">
            <div class="font-bold">{{ item.label }}</div>
            <div>{{ item.content }}</div>
          </div>
        </div>
      </template>
    </fs-check-card>
  </el-card>
  <el-card shadow="never" header="禁用" class="mt-3">
    <fs-check-card
      v-model="select2"
      :items="items3"
      :row="{ gutter: 10 }"
      multiple
      :disabled="allDisabled"
      class="mt-3"
    >
      <template #item="{ item }">
        <div class="flex p-2" v-if="item">
          <div>
            <el-image :src="item.src" fit="cover" class="w-50px h-50px border-rounded"></el-image>
          </div>
          <div class="ml-3">
            <div class="font-bold">{{ item.label }}</div>
            <div>{{ item.content }}</div>
          </div>
        </div>
      </template>
    </fs-check-card>
    <div class="flex items-center text-sm">
      <span>禁用全部：</span>
      <el-radio-group v-model="allDisabled">
        <el-radio label="是" :value="true"> </el-radio>
        <el-radio label="否" :value="false"> </el-radio>
      </el-radio-group>
    </div>
  </el-card>
  <el-card shadow="never" header="标签模式" class="mt-3">
    <div class="flex items-center">
      <span class="text-sm">多选：</span>
      <fs-check-card v-model="select3" :items="items4" multiple> </fs-check-card>
    </div>

    <div class="flex items-center">
      <span class="text-sm">单选：</span>
      <fs-check-card v-model="select4" :items="items5" class="mt-3"> </fs-check-card>
    </div>
  </el-card>
  <el-card shadow="never" header="自定义内容" class="mt-3">
    <div class="flex items-center">
      <span class="text-sm">支付方式：</span>
      <fs-check-card v-model="select3" :items="items6">
        <template #item="{ item }">
          <div class="flex items-center justify-center p-1" v-if="item">
            <el-image :src="item.img" class="w-98px h-30px"></el-image>
          </div>
        </template>
      </fs-check-card>
    </div>
  </el-card>
</template>

<style scoped lang="scss"></style>
