<!--
 * @Descripttion: 
 * @Version: 1.0
 * @Author: +C
 * @Date: 2022-03-26 14:27:49
 * @LastEditors: +C
 * @LastEditTime: 2022-05-05 18:56:47
-->
<template>
  <div>
    <div v-for="(item,index) in value" :key="index" class="steps">
      <div class="steps-li">
        <span class="steps-li-span"></span>
        <div class="steps-top">
          <a-row :gutter="20">
            <a-col span="8"><span>{{ item.time?item.time.split(' ')[0]:'' }}</span> <span class="hui">{{ item.time?item.time.split(' ')[1]:'' }}</span></a-col>
            <a-col v-for="(attr,i) in item.attrArr" :key="i" span="8">
              {{ attr.name }}:<span class="red">{{ attr.value }}</span>
            </a-col>
          </a-row>
        </div>
        <table class="detail-table">
          <colgroup>
            <col :width="labelWidth">
            <col width="">
            <col :width="labelWidth">
            <col width="">
          </colgroup>
          <tbody>
            <tr v-for="(trItem,tri) in trArr[index]" :key="tri">
              <template v-for="(tdItem,tdi) in trItem">
                <td :key="tdi+'td1'" class="tr detail-label">
                  {{ item.children[tdItem.index]['label'] }}：
                </td>
                <td :key="tdi+'td2'" class="detail-con" :class="{bg:!item.children[tdItem.index].hasOwnProperty('customRender')}" :colspan="tdItem.span">
                  <!-- 插槽 -->
                  <template v-if="item.children[tdItem.index].hasOwnProperty('customRender')">
                    <slot :name="item.children[tdItem.index]['customRender']" :value="item.children[tdItem.index]['value']"></slot>
                  </template>
                  <!-- 普通值 -->
                  <template v-else>
                    <div style="white-space: pre-line;">
                      {{ item.children[tdItem.index]['value'] }}
                    </div>
                  </template>

                </td>
              </template>
            </tr>
          </tbody>
        </table>
      </div>

    </div>
  </div>

</template>

<script>
export default {
  name: '',
  //页面引用的组件
  components: {},
  //父页面传递参数
  props: {
    value: {
      type: Array,//类型 String Number Object Array Boolean
      required: true,//是否必填
      default: [] // 默认值
    },
    //左标签宽度
    labelWidth: {
      type: Number,//类型 String Number Object Array Boolean
      required: false,//是否必填
      default: 150 // 默认值
    }
  },
  data() {
    return {};
  },
  //监控计算变量
  computed: {

    // table的tr->td的index 返回多维数组
    trArr: function () {

      console.log(this.value)
      let allArr = []
      this.value.forEach(item => {
        let arr = []
        for (let i = 0; i < item.children.length; i++) {
          let span = item.children[i].hasOwnProperty('span') ? item.children[i]['span'] : 1;
          let span2 = !item.children[i + 1] ? 0 : item.children[i + 1].hasOwnProperty('span') ? item.children[i + 1]['span'] : 1;
          if (span == 2) {
            arr.push([{ index: i, span: 3 }])
          } else {
            if (span2 == 0 || span2 == 2) {
              //最后一个
              arr.push([{ index: i, span: 1 }])
            } else {
              arr.push([{ index: i, span: 1 }, { index: i + 1, span: 1 }])
              i = i + 1
            }
          }
        }
        allArr.push(arr)
      });
      return allArr
    }
  },
  //监听
  watch: {},
  //页面的构造方法
  created() { },
  //父页面定义方法给子页面inject调用
  providee() { return {} },
  //子组件调用注入到父页面providee
  inject: [],
  //dom加载完
  mounted() { },
  //页面的自定义方法
  methods: {},
};
</script>

<style scoped lang="less">
.steps-top {
  line-height: 50px;
  font-size: 15px;
}
.steps {
  padding-left: 100px;
  padding-right: 50px;
}

.steps-li {
  border-left: 1px dashed #e2e2e2;
  padding-left: 20px;
  position: relative;
}
.steps-li-span {
  position: absolute;
  width: 10px;
  height: 10px;
  border: 1px solid #49ade7;
  background: #fff;
  border-radius: 5px;
  left: -5px;
  top: 18px;
}
.detail-tit {
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid #e2e2e2;
  position: relative;
  margin-bottom: 10px;

  span {
    display: inline-block;
    padding: 0 10px;
    position: absolute;
    height: 100%;
    left: 0;
    font-size: 16px;
    top: 3px;
    font-weight: bold;
    // border-bottom: 4px solid #3abedf;
  }
}

.detail-table {
  color: #696969;
  font-size: 14px;
  width: 100%;
  border-collapse: separate;
  border-spacing: 10px;
  background: #fafafa;

  tr {
    display: table-row;
    vertical-align: inherit;
    border-color: inherit;
    td {
      min-height: 30px;
      padding: 0;
      word-break: break-all;

      &.detail-label {
        // font-weight: bold;
        padding: 0;
        font-size: 15px;
      }

      &.detail-con {
        padding: 0;
        height: 100%;
      }

      &.bg {
        // background-color: #f5f5f5;
      }
    }
  }
}
</style>
