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

      <service-step v-if="item.type == 'step'"></service-step>
      <p
        v-else-if="item.type == 'text'"
        class="detail-text"
        v-text="item.value"
      ></p>
      <ul v-else-if="item.type == 'list'">
        <li v-for="(v, i) in item.value" :key="'detail-li_' + index + '_' + i">
          <p class="detail-text">
            <span v-text="v.name + '：'"></span>
            <span v-text="v.value"></span>
          </p>
        </li>
      </ul>
      <el-table
        v-else-if="item.type == 'table'"
        class="detail-table"
        :row-key="(row) => item.name + '_' + row.zdbm"
        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>
    </li>
  </ul>
</template>

<script>
import serviceStep from "@/components/service-step";

export default {
  components: {
    serviceStep,
  },
  props: {
    data: {
      type: Array,
      required: true,
    },
  },
  data: () => ({}),
  methods: {},
  created() {},
};
</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-table {
  width: 100%;
}
</style>
