<template>
  <div class="dk-title">
    <div class="title-left">
      <van-icon v-if="prefix === 'icon'" :name="icon" :style="{color:prefixColor,fontSize:iconSize+'px'}" />
      <van-image v-if="prefix==='image'" :src="prefixImage" alt="" class="dk-title-img" :width="imageWidth" :height="imageHeight" />
      <div v-if="prefix==='square'" :style="{width:squareWidth+'px',height:squareHeight+'px',background:prefixColor}" />
      <div :style="{marginLeft:titleMarginLeft+'px',color:color,fontWeight:bold?800:400}">
        {{ title }}
      </div>
    </div>
    <div v-if="showRight" class="title-right" :style="{color:rColor,fontSize: rSize+'px'}">
      {{ rTitle }}
    </div>
  </div>
</template>

<script>
// import Vue from 'vue'
// import { Image as VanImage } from 'vant'
// Vue.use(VanImage)
export default {
  name: 'DkTitle',
  props: {
    title: { default: '标题', type: String },
    size: { default: 14, type: Number },
    color: { default: '#333', type: String },
    bold: { default: false, type: Boolean },
    prefix: { default: '', type: String },
    icon: { default: 'volume', type: String },
    prefixColor: { default: '#409eff', type: String },
    prefixImage: { default: '', type: String },
    squareWidth: { default: 4, type: Number },
    squareHeight: { default: 12, type: Number },
    imageWidth: { default: 24, type: Number },
    imageHeight: { default: 24, type: Number },
    iconSize: { default: 18, type: Number },
    titleMarginLeft: { default: 4, type: Number },
    rTitle: { default: '更多', type: String },
    rColor: { default: '#999', type: String },
    rSize: { default: 12, type: Number },
    showRight: { default: false, type: Boolean }
  },
  data() {
    return {}
  },
  computed: {},
  mounted() {},
  methods: {}
}
</script>

<style scoped lang="scss">
.dk-title{
  .title-left{
    display: flex;
    align-items: center;
  }
  display: flex;
  align-items: center;
  justify-content: space-between
}
</style>
