<template>
  <el-row :gutter="20">
      <el-col :span="6">
          <el-avatar :size="100" :src="merchant.avatar"/>
      </el-col>
      <el-col :span="18">
          <el-descriptions :title="merchant.merchantName" :column="2">
            <el-descriptions-item label="店龄">{{merchant.storeAge}}年</el-descriptions-item>
            <el-descriptions-item label="优金豆"><span class="coin-amount">{{toThousands(merchant.bondMoney * 100)}}</span> 个</el-descriptions-item>
            <el-descriptions-item label="综合评分">
              <el-rate
                :value="merchant.score"
                disabled
                show-score
                text-color="#ff9900"
                score-template="{value}">
              </el-rate>
            </el-descriptions-item>
            <el-descriptions-item label="好评率">{{merchant.rate}}%</el-descriptions-item>
          </el-descriptions>
          <el-row>
            <span class="merchant-status">已下架</span>
            <el-button size="mini">去交保证金</el-button>
          </el-row>
      </el-col>
  </el-row>
</template>

<script>
export default {
    name: 'MerchantAvatar',
    data(){
        return {
            size: 50
        }
    },
    props: {
      merchant: {
        type: Object
      }
    },
    methods: {
       toThousands(num) {
          var num = (num || 0).toString(), result = '';
          while (num.length > 3) {
              result = ',' + num.slice(-3) + result;
              num = num.slice(0, num.length - 3);
          }
          if (num) { result = num + result; }
          return result;
      }
    }
}
</script>

<style>
.merchant-status{
    font-size: 14px;
    color: red;
    margin-right: 20px;
}
.coin-amount{
  font-family: 'Arial Negreta', 'Arial Normal', 'Arial', sans-serif;
  font-weight: 700;
  font-style: normal;
  color: #F59A23;
}
</style>