<template>
  <div class="service_tab-specification" v-if="data">
    <div class="specification_header">
      <p>申请方式：</p>
      <type-group v-model="type" :types="types"></type-group>
    </div>
    <el-table class="specification_table" :data="tableData" :border="false">
      <el-table-column prop="gg" label="规格" width="360"></el-table-column>
      <el-table-column prop="ggsm" label="规格说明"></el-table-column>
    </el-table>
  </div>
</template>

<script>
import typeGroup from "@/components/type-group";

export default {
  components: {
    typeGroup,
  },
  props: {
    url: {
      type: String,
      required: true,
    },
  },
  data: () => ({
    data: null,
    type: "",
    types: [],
  }),
  computed: {
    tableData() {
      return this.types.length > 0 ? this.data[this.type].data : [];
    },
  },
  methods: {
    init() {
      this.$http
        .get("/static/serviceInfo.json")
        .then((response) => {
          this.data = response.body[this.url].specification;

          this.types = this.data.map((item, index) => ({
            name: item.name,
            value: index,
          }));

          if (this.types.length) {
            this.type = 0;
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
  },
  mounted() {
    this.init();
  },
};
</script>

<style scoped>
.specification_header > p {
  font-size: 14px;
  color: #8890a7;
  line-height: 25px;
  margin-bottom: 10px;
}
.specification_table {
  width: 100%;
  margin-top: 20px;
}
</style>
