<template>
  <div>
    <ynet-descriptions border :column="2" :model="model" :items="items" />
  </div>
</template>

<script lang="tsx">
import { YnetDescriptionsItemCtx } from '@/types/descriptions'
import YnetDescriptions from 'common/components/basic/descriptions/index.vue'
import { defineComponent } from 'vue-demi'

type Modal = {
  userName: string,
  mobilePhone: string,
  address: string,
  remark: string
}

const model: Modal = {
  userName: 'kooriookami',
  mobilePhone: '18100000000',
  address: '苏州市',
  remark: '学校'
}

const items: Array<YnetDescriptionsItemCtx<Modal>> = [
  {
    prop: 'userName',
    label: '用户名'
  },
  {
    prop: 'mobilePhone',
    label: '手机号'
  },
  {
    prop: 'address',
    label: '地址'
  },
  {
    prop: 'remark',
    label: '备注',
    formatter (model, item, value: string) {
      return <el-tag>{ value }</el-tag>
    }
  }
]

export default defineComponent({
  name: 'DescriptionsExample',
  components: {
    YnetDescriptions
  },
  setup () {
    return {
      model,
      items
    }
  }
})
</script>
