<template>
  <el-row :gutter="20">
      <el-col :span="6">
          <el-avatar :size="100" :src="user.avatar" v-if="user.avatar" />
          <el-avatar :size="100" src="http://fresh-life.oss-cn-shanghai.aliyuncs.com/image/defaultAvatar.png" v-else/>
      </el-col>
      <el-col :span="18">
          <el-descriptions :title="user.nickName" :column="3">
            <el-descriptions-item :span="isUserMerchant? 3 : 3" label="优金豆"><span class="coin-amount">{{toThousands(user.merchant.bondMoney)}}</span> 个</el-descriptions-item>
            <el-descriptions-item :span="2" label="综合评分">
              <el-rate
                :value="user.merchant.score"
                disabled
                show-score
                text-color="#ff9900"
                score-template="{value}">
              </el-rate>
            </el-descriptions-item>
            <el-descriptions-item label="好评率">{{(user.merchant.rate || 0)}}%</el-descriptions-item>
          </el-descriptions>
          <el-row  style="margin-left: 20px;">
            <span v-if="user.merchant.businessState === '001'" class="merchant-status-onshelf">已上架</span>
            <span v-else class="merchant-status-offshelf">已下架</span>
            <DialogForm ref="dialog" btnName="去充值保证金" btnType="default" title="充值保证金"  @closed="handleClose" :onSubmit="codeUrl ? null: handleSubmit" :inline="false" width="450px">
                <InputNumber v-if="!codeUrl" label="保证金金额" :placeholder="`请输入金额(单位元，最低金额为${bondPayMin}元)`" prop="total_fee" required :max="999999999" :precision="2"/>
                <div v-else style="text-align: center">
                  <div>请使用支付宝扫描以下二维码完成支付</div>
                  <vue-qr :text="codeUrl" :size="300"/>
                </div>
                <template #footer/>
            </DialogForm>
          </el-row>
      </el-col>
  </el-row>
</template>

<script>
import store from "@/store";
import {orderPayment} from '@/api/merchant/merchant'
import VueQr from 'vue-qr'

export default {
    name: 'MerchantAvatar',
    components: {VueQr},
    data(){
        return {
            codeUrl: null
        }
    },
    props: {
      user: {
        type: Object
      }
    },
    computed: {
      isUserMerchant() {
          return this.user.merchant.merchantType === 1
      },
      bondPayMin() {
        return this.$store.getters.dict['bond.pay.min']
      }
    },
    methods: {
       toThousands(num) {
     
        var  a = (num *100).toFixed(0);
        var num = (a || 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;
      },
      async handleSubmit(data){
          const {code_url} = await orderPayment(data)
          this.codeUrl = code_url
          return true
      },
      handleClose(){
        this.codeUrl = null
        this.$store.dispatch("GetInfo")
      },
      payBond(){
          this.$refs.dialog.open()
      }
    }
}
</script>

<style>
.el-descriptions--medium:not(.is-bordered) .el-descriptions-item__cell {
    padding-bottom: 4px;
}
.el-descriptions {
    margin-left: 20px;
}
.merchant-status-onshelf{
    font-size: 14px;
    color: rgb(103, 194, 58);
    margin-right: 20px;
}
.merchant-status-offshelf{
    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>
