<template>
  <a-descriptions title="基本信息" :column="2" bordered>
    <a-descriptions-item
      label="产品名称"
      :labelStyle="{ width: '200px', color: '#808080' }"
      >{{ data.name }}</a-descriptions-item
    >
    <a-descriptions-item
      label="状态"
      :labelStyle="{ width: '200px', color: '#808080' }"
    >
      <a-badge
        status="processing"
        :text="data.status == 0 ? '已上架' : '已下架'"
      />
    </a-descriptions-item>
    <a-descriptions-item
      label="产品编号"
      :labelStyle="{ width: '200px', color: '#808080' }"
      >{{ data.productId }}</a-descriptions-item
    >
    <a-descriptions-item
      label="产品标识"
      :labelStyle="{ width: '200px', color: '#808080' }"
      >{{ data.code }}</a-descriptions-item
    >
    <a-descriptions-item
      label="访问地址"
      :labelStyle="{ width: '200px', color: '#808080' }"
    >
      <span @click="openUrl(`http://site-${data.tenantId}.wsdns.cn`)">{{
        `site-${data.tenantId}.wsdns.cn`
      }}</span>
    </a-descriptions-item>
    <a-descriptions-item
      label="应用类型"
      :labelStyle="{ width: '200px', color: '#808080' }"
    >
      WEB
    </a-descriptions-item>
    <a-descriptions-item
      label="描述"
      :span="2"
      layout="vertical"
      :labelStyle="{ width: '200px', color: '#808080' }"
    >
      {{ data.comments }}
    </a-descriptions-item>
    <a-descriptions-item
      label="头像"
      layout="vertical"
      :labelStyle="{ width: '200px', color: '#808080' }"
    >
      <ele-image-upload
        v-model:value="logo"
        :disabled="true"
        :item-style="{ width: '90px', height: '90px' }"
        :limit="1"
      />
    </a-descriptions-item>
    <a-descriptions-item
      label="二维码"
      layout="vertical"
      :labelStyle="{ width: '200px', color: '#808080' }"
    />
  </a-descriptions>
  <a-descriptions title="产品规格" bordered style="margin-top: 20px">
    <a-descriptions-item
      label="市场价"
      layout="vertical"
      :labelStyle="{ width: '200px', color: '#808080' }"
    >
      <a-statistic :precision="2" :value="data.money" />
    </a-descriptions-item>
    <a-descriptions-item
      label="折扣价"
      layout="vertical"
      :labelStyle="{ width: '200px', color: '#808080' }"
    >
      <a-statistic :precision="2" :value="data.money" />
    </a-descriptions-item>
    <a-descriptions-item
      label="成本价"
      layout="vertical"
      :labelStyle="{ width: '200px', color: '#808080' }"
    >
      <a-statistic :precision="2" :value="data.money" />
    </a-descriptions-item>
    <a-descriptions-item
      label="初始销量"
      layout="vertical"
      :labelStyle="{ width: '200px', color: '#808080' }"
    >
      {{ data.salesInitial }}
    </a-descriptions-item>
    <a-descriptions-item
      label="实际销量"
      layout="vertical"
      :labelStyle="{ width: '200px', color: '#808080' }"
    >
      {{ data.salesInitial }}
    </a-descriptions-item>
    <a-descriptions-item
      label="库存"
      layout="vertical"
      :labelStyle="{ width: '200px', color: '#808080' }"
    >
      999
    </a-descriptions-item>
    <a-descriptions-item
      label="浏览次数"
      layout="vertical"
      :labelStyle="{ width: '200px', color: '#808080' }"
    >
      {{ data.salesInitial }}
    </a-descriptions-item>
    <a-descriptions-item
      label="下载次数"
      layout="vertical"
      :labelStyle="{ width: '200px', color: '#808080' }"
    >
      {{ data.salesInitial }}
    </a-descriptions-item>
    <a-descriptions-item
      label="库存计算方式"
      layout="vertical"
      :labelStyle="{ width: '200px', color: '#808080' }"
    >
      付款减库存
    </a-descriptions-item>
  </a-descriptions>
</template>
<script lang="ts" setup>
  import { Product } from '@/api/oa/product/model';
  import { openUrl } from '@/utils/common';

  defineProps<{
    data: Product;
    logo: [] | any;
  }>();
</script>
