<template>
  <div class="commodity">
    <el-row>
      <el-col :span="24">
        <div class="com_title">{{ datas.productName }}</div>
      </el-col>
      <el-col :span="11">
        <div>
          <img
            src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
            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">{{ datas.serviceType }}</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" round>超小按钮</el-button>
            <el-button size="mini" class="com_data_button_btm" round>超小按钮</el-button>
            <el-button size="mini" class="com_data_button_btm" round>超小按钮</el-button>
            <el-button size="mini" class="com_data_button_btm" round>超小按钮</el-button>
            <el-button size="mini" class="com_data_button_btm" round>超小按钮</el-button>
            <el-button size="mini" class="com_data_button_btm" round>超小按钮</el-button>
            <el-button size="mini" class="com_data_button_btm" round>超小按钮</el-button>
            <el-button size="mini" class="com_data_button_btm" round>超小按钮</el-button>
            <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">{{ datas.specifications }}</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: {
        productName: "",
        providedBy: "",
        releaseTime: "",
        updated: "",
        dataField: "",
        serviceType: "",
        resourceSummary: "",
        openLevel: "",
        views: "",
        numberOfAcquisitions: "",
        specifications: ""
      }
    }
  },
  data: () => ({
    num: 1
  }),
  computed: {},
  watch: {},
  methods: {},
  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>