<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 width="30"></el-table-column>
      <el-table-column prop="name" label="规格" width="360"></el-table-column>
      <el-table-column prop="descript" label="规格说明"></el-table-column>
    </el-table>
  </div>
</template>

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

export default {
  components: {
    typeGroup,
  },
  props: {
    data: {
      type: Array,
      required: true,
    },
  },
  data: () => ({
    type: 1,
    types: [
      {
        name: "按月",
        value: 1,
      },
      {
        name: "按年",
        value: 2,
      },
    ],
  }),
  computed: {
    tableData() {
      return this.data.filter((item) => item.type === this.type);
    },
  },
};
</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>
