<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>

      <div class="step_div" v-if="item.type == 'step'">
        <img
          class="step_img"
          :src="require('@/assets/imgs/shop_img_hqlc.png')"
        />
      </div>
      <div class="step_div" v-else-if="item.type == 'step_app'">
        <img
          class="step_img"
          :src="require('@/assets/imgs/shop_img_hqlc_yingyong.png')"
        />
      </div>
      <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>
      <div v-else-if="item.type == 'table-list'">
        <table class="xq_table">
          <tr>
            <td>数据领域：{{ item.value.sectors_name }}</td>
            <td>服务类型：{{ item.value.data_service_type1_name }}&nbsp;&nbsp;&nbsp;&nbsp;{{ item.value.data_service_type2_name }}</td>
          </tr>
          <tr>
            <td>发布时间：{{ helper.dateStringTransform(item.value.create_time) }}</td>
            <td>更新时间：{{ helper.dateStringTransform(item.value.update_date) }}</td>
          </tr>
          <tr>
            <td>请求方式：{{ item.value.req_type }}</td>
            <td>编码格式：{{ item.value.encode_method }}</td>
          </tr>
        </table>
      </div>
      <div v-else-if="item.type == 'app-list'">
        <table class="xq_table">
          <tr>
            <td>部署来源：{{ item.value.online_state_name }}</td>
            <td>上线时间：{{ item.value.create_date }}</td>
          </tr>
          <tr>
            <td>业务领域：{{ item.value.ywly_name }}</td>
            <td>应用类型：{{ item.value.type_name }}</td>
          </tr>
        </table>
      </div>
      <workflows-view
        v-else-if="item.type == 'workflows'"
        :id="item.value"
      ></workflows-view>
      <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";
import workflowsView from "@/components/work-flow/workflows-view";
import helper from "@/services/helper.js";

export default {
  components: {
    serviceSteps,
    workflowsView,
  },
  props: {
    data: {
      type: Array,
      required: true,
    },
  },
  data() {
    return {
      helper
    }
  }
};
</script>

<style scoped>
.step_div {
  margin-top: 16px;
}
.step_img {
  width: 1140px;
  height: 152px;
}
.detail-item:not(:last-child) {
  margin-bottom: 20px;
}
.detail-item .detail-title {
  font-size: 14px;
  line-height: 14px;
  color: #8890a7;
  margin-bottom: 8px;
  margin-left: 8px;
}
.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;
}
.xq_table {
  border: solid 1px #dde0e9;
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  empty-cells: show;
  margin-top: 16px;
}
.xq_table caption {
  color: #000;
  padding: 1em 0;
  text-align: center;
}
.xq_table td,
.xq_table th {
  border-left: 1px solid #cbcbcb;
  border-width: 0 0 0 1px;
  font-size: inherit;
  margin: 0;
  overflow: visible;
  padding: 0.5em 1em;
}
.xq_table thead {
  background-color: #e0e0e0;
  color: #000;
  text-align: left;
  vertical-align: bottom;
}
.xq_table td {
  background-color: transparent;
}
.xq_table td {
  color: #242c43;
  font-size: 14px;
  line-height: 30px;
  border-bottom: 1px solid #cbcbcb;
}
.xq_table tbody > tr:last-child > td {
  border-bottom-width: 0;
}
</style>
