<template>
  <ul class="service_tab-detail" v-if="data">
    <li
      class="detail-item"
      v-for="(item, index) in data"
      :key="'detail_' + index"
    >
      <h3 class="detail-title" v-text="item.name + '：'"></h3>

      <service-steps
        v-if="item.type == 'step'"
        :data="item.value"
      ></service-steps>
      <p
        v-else-if="item.type == 'text'"
        class="detail-text"
        v-html="item.value"
      ></p>
      <div
        v-else-if="item.type == 'code'"
        class="detail-code"
        v-html="item.value"
      ></div>
      <el-table
        v-else-if="item.type == 'table'"
        class="detail-table"
        row-key="id"
        default-expand-all
        :border="false"
        :data="item.value.datas"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      >
        <el-table-column
          v-for="(v, i) in item.value.columns"
          :key="'table_column_' + index + '_' + i"
          :prop="v.prop"
          :label="v.label"
          :align="v.align || 'left'"
        ></el-table-column>
      </el-table>
      <el-table
        v-else-if="item.type == 'list'"
        class="detail-table detail-list"
        :border="false"
        :data="item.value"
      >
        <el-table-column prop="name" label="name" width="120"></el-table-column>
        <el-table-column prop="value" label="value"></el-table-column>
      </el-table>
    </li>
  </ul>
</template>

<script>
import serviceSteps from "@/components/service-tabs/service-steps";

export default {
  components: {
    serviceSteps,
  },
  props: {
    url: {
      type: String,
      required: true,
    },
  },
  data: () => ({
    data: null,
  }),
  methods: {
    init() {
      this.$http
        .get("/static/serviceInfo.json")
        .then((response) => {
          this.data = response.body[this.url].detail;
        })
        .catch(function(error) {
          console.log(error);
        });
    },
  },
  mounted() {
    this.init();
  },
};
</script>

<style scoped>
.detail-item:not(:last-child) {
  margin-bottom: 20px;
}
.detail-item .detail-title {
  font-size: 14px;
  line-height: 25px;
  color: #8890a7;
  margin-bottom: 3px;
}
.detail-item .detail-text {
  font-size: 14px;
  line-height: 25px;
  color: #242c43;
}
.detail-item .detail-code {
  padding: 20px 25px;
  box-sizing: border-box;
  border-radius: 7px;
  white-space: pre-wrap;
  word-wrap: break-word !important;
  background-color: #f8f9fd;
  font-size: 14px;
  color: #58617a;
  line-height: 25px;
  margin-top: 8px;
}
</style>
