<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="rowId"
        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'"
          :width="v.width"
        ></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>
      <mavon-editor
        v-else-if="item.type == 'rich-text'"
        v-model="item.value"
        :boxShadow="false"
        :toolbarsFlag="false"
        :subfield="false"
        defaultOpen="preview"
        :editable="false"
      />
    </li>
  </ul>
</template>

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

export default {
  components: {
    serviceSteps,
  },
  props: {
    data: {
      type: Array,
      required: true,
    },
  },
};
</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 {
  word-break: break-all;
  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>
