<!--
 * @Descripttion:
 * @Version: 1.0
 * @Author: +C
 * @Date: 2022-03-26 14:27:49
 * @LastEditors: lr
 * @LastEditTime: 2022-06-04 21:42:56
 使用:
<dxxDetail v-model="detailObj" :labelWidth="180">
        <template slot="fileA" slot-scope="item">
          <img :src="imgitem" v-for="(imgitem,imgi) in item.value" :key="imgi" class="fileImg">
        </template>
      </dxxDetail>

detailObj: [
        {
          title: '大标题',
          children: [
            {
              label: "tit1",
              value: ""
            },{
              label: "tit2",
              value: "",
              span: 2//左右两边占满
            },
            {
              label: "材料一(相关证明材料)",
              value: ['http://iph.href.lu/100x150', 'http://iph.href.lu/100x150'],
              span: 2,
              customRender: 'fileA'//插槽名
            }
          ]
        }
      ]
-->
<template>
  <div>
    <div v-for="(item,index) in value" :key="index">
      <div v-show="item.title" class="detail-tit">
        <span>{{ item.title }}</span>
        <div v-if="item.hasOwnProperty('extraRender')" class="extra">
          <template>
            <slot :name="item.extraRender" :value="item.title"></slot>
          </template>
        </div>
      </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">
              <template v-if="item.children[tdItem.index]['label'] != null">
                <td :key="tdi+'td1'" class="tl detail-label">
                  {{ item.children[tdItem.index]['label'] }}：
                </td>
                <td :key="tdi+'td2'" class="detail-con" :class="{bg:item.children[tdItem.index].hasOwnProperty('contentBg')?item.children[tdItem.index]['contentBg']:true}" :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>
                    {{ item.children[tdItem.index]['value'] }}
                  </template>
                </td>
              </template>
              <template v-else>
                <td :key="tdi+'td2'" class="detail-con" colspan="4">
                  <template v-if="item.children[tdItem.index].hasOwnProperty('customRender')">
                    <slot :name="item.children[tdItem.index]['customRender']" :value="item.children[tdItem.index]['value']"></slot>
                  </template>
                </td>
              </template>
            </template>
          </tr>
        </tbody>
      </table>
    </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 () {
      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   lang="less">
.detail-tit {
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid #e2e2e2;
  position: relative;
  margin-bottom: 10px;

  .extra {
    position: absolute;
    right: 0;
  }

  & > span {
    display: inline-block;
    padding: 0 10px;
    position: absolute;
    height: 100%;
    left: 0;
    font-size: 16px;
    top: 3px;
    font-weight: bold;
  }
}

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

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

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

      &.detail-con {
        padding: 10px 20px;
        height: 100%;
        position: relative;
      }

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