<template>
  <div class="commodity">
    <el-row>
      <el-col :span="24">
        <div class="com_title">{{ datas.productName }}</div>
      </el-col>
      <el-col :span="11">
        <div v-if="datas.img">
          <img :src="datas.img" class="commodity_img" />
        </div>
        <div class="com_item">
          <span class="com_item_title">提供机构：</span>
          <span class="com_data">{{ datas.providedBy }}</span>
        </div>
        <div class="com_item">
          <span class="com_item_title">发布时间：</span>
          <span class="com_data">{{ datas.releaseTime }}</span>
        </div>
        <div class="com_item">
          <span class="com_item_title">更新时间：</span>
          <span class="com_data">{{ datas.updated }}</span>
        </div>
        <div class="com_item">
          <span class="com_item_title">数据领域：</span>
          <span class="com_data">{{ datas.dataField }}</span>
        </div>
        <div class="com_item">
          <span class="com_item_title">服务类型：</span>
          <span class="com_data">
            <span
              v-for="(type, index) in datas.serviceType"
              :key="'type_' + index"
              style="margin-right': 5px;"
            >
              {{ type }}
            </span>
          </span>
        </div>
        <div class="com_item">
          <span class="com_item_title">资源摘要：</span>
          <span class="com_data">{{ datas.resourceSummary }}</span>
        </div>
        <div class="com_item">
          <span class="com_item_title">开放级别：</span>
          <span class="com_data">
            <el-tag size="small">{{ datas.openLevel }}</el-tag>
          </span>
        </div>
        <div class="com_item">
          <span class="com_item_title">浏览次数：</span>
          <span class="com_data_view">{{ datas.views }}</span>
          <span class="com_item_title">获取次数：</span>
          <span class="com_data_get">{{ datas.numberOfAcquisitions }}</span>
        </div>
      </el-col>
      <el-col :span="11" :offset="2">
        <div class="com_item">
          <span class="com_item_title">规格：</span>
          <span class="com_data">
            <el-button
              size="mini"
              class="com_data_button_btm"
              v-for="(item, index) in datas.specifications"
              :key="'specifications_' + index"
            >
              {{ index + 1 + ". " + item.name }}
            </el-button>
          </span>
        </div>
        <div class="com_item">
          <span class="com_item_title">规格说明：</span>
          <span class="com_data">{{
            datas.specifications[0].description
          }}</span>
        </div>
        <div class="com_item">
          <span class="com_item_title">购买方式：</span>
          <span class="com_data">
            <el-button size="mini" class="com_data_button_btm" round
              >超小按钮</el-button
            >
            <el-button size="mini" class="com_data_button_btm" round
              >超小按钮</el-button
            >
          </span>
        </div>
        <div class="com_item">
          <span class="com_item_title">购买时长：</span>
          <span class="com_data">
            <el-input-number
              v-model="num"
              @change="handleChange"
              size="small"
              :min="1"
              :max="12"
              label="描述文字"
            ></el-input-number
            >&nbsp;月
          </span>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    datas: {
      type: Object,
      default: {
        img: "",
        productName: "",
        providedBy: "",
        releaseTime: "",
        updated: "",
        dataField: "",
        serviceType: "",
        resourceSummary: "",
        openLevel: "",
        views: "",
        numberOfAcquisitions: "",
        specifications: "",
      },
    },
  },
  data: () => ({
    num: 1,
  }),
  computed: {},
  watch: {},
  methods: {
    handleChange() {},
  },
  mounted() {},
};
</script>

<style scoped>
.commodity {
  padding: 10px;
}
.com_title {
  font-size: 22px;
}
.com_item {
  font-size: 16px;
  line-height: 26px;
  margin-top: 10px;
  color: #51ac14;
  display: flex;
  align-self: start;
}
.com_item_title {
  width: 80px;
}
.com_data {
  display: inline-block;
  width: calc(100% - 90px);
  color: #f1ac14;
}
.com_data_view {
  color: #f1ac14;
  margin-right: 10px;
}
.com_data_get {
  color: #f1ac14;
}
.com_data_button_btm {
  margin-bottom: 10px;
}
.commodity_img {
  width: 100%;
}
</style>
<style>
.com_data .el-input-number__decrease {
  border-radius: 8px 0 0 8px;
}
.com_data .el-input-number__increase {
  border-radius: 0 8px 8px 0;
}
</style>
