<template>
  <div>
    <template v-if="this.activatedConfig.designMode === 'json'">
      <XReportJsonRender
        @updateImg="updateImg"
        :img-prefix="imgPrefix"
        :server-name="serverName"
        :display-only="displayOnly"
        :show-title="showTitle"
        :no-padding="noPadding"
        :no-top-border="noTopBorder"
        :config="activatedConfig"/>
    </template>
    <template v-else>
      <div
        :class=" noPadding ? 'reportMainNoPadding' : 'reportMain'"
        :style="activatedConfig.width > 0 ? ('width:' + activatedConfig.width + 'px') : undefined">
        <!--      大标题      -->
        <h2 class="reportTitle" v-if="showTitle && activatedConfig.title" v-html="activatedConfig.title"></h2>
        <!--      小标题 / 介乎于标题与表格之间的内容      -->
        <div class="subTitle" v-if="activatedConfig.subTitle">
          <div class="subTitleItems" v-for="(item, itemIndex) in activatedConfig.subTitle" :key="itemIndex">
            <template v-if="item.type === 'column'">
              <span>{{ item.text }}</span>
            </template>
            <template v-else-if="item.type === 'inputs'">
              <div class="inputsDiv">
                <div class="inputsDivItem" v-for="(num, index) of calcFormatInputNum(item.format)" :key="index">
                  <span class="inputsDivItemLabel">{{ displayFormatStartText(item.format) }}</span>
                  <a-input
                    v-if="!forDisplay"
                    v-model="data[item.dataIndex][index]"
                    :style="'width:' + (item.inputWidth ? item.inputWidth : '100') + '%'"
                    :disabled="item.inputReadOnly"/>
                  <template v-else>
                    {{ activatedConfig.data[item.dataIndex][index] }}
                  </template>
                  <span class="inputsDivItemLabel">{{ displayFormatText(item.format, index) }}</span>
                </div>
              </div>
            </template>
          </div>
        </div>
        <!--      主体表格      -->
        <table class="reportTable" v-if="render" :style="activatedConfig.style ? activatedConfig.style : undefined">
          <tbody class="reportTable">
            <template v-for="(row, rowIndex) in activatedConfig.columns">
              <!--  普通行  -->
              <x-report-tr-group
                v-if="row[0].type !== 'inputColumns' && row[0].type !== 'list'"
                @updateImg="updateImg"
                :show-img-in-cell="showImgInCell"
                :img-prefix="imgPrefix"
                :server-name="serverName"
                :use-oss-for-img="useOssForImg"
                :key="rowIndex"
                :columns="row"
                :no-top-border="noTopBorder"
                :config-data="activatedConfig.data"
                :config="activatedConfig"
                :display="forDisplay">
              </x-report-tr-group>
              <!--  列表  -->
              <x-report-tr-group
                v-else-if="row[0].type === 'list'"
                v-for="(num, listIndex) in row[0].listLength + 1"
                @updateImg="updateImg"
                :show-img-in-cell="showImgInCell"
                :img-prefix="imgPrefix"
                :server-name="serverName"
                :use-oss-for-img="useOssForImg"
                :config="activatedConfig"
                :key="rowIndex + listIndex"
                :columns="row"
                :no-top-border="noTopBorder"
                :config-data="activatedConfig.data"
                :list-index="listIndex"
                :display="forDisplay">
              </x-report-tr-group>
              <!--  动态行  -->
              <template v-else>
                <x-report-tr-group
                  @updateImg="updateImg"
                  :show-img-in-cell="showImgInCell"
                  :img-prefix="imgPrefix"
                  :server-name="serverName"
                  :use-oss-for-img="useOssForImg"
                  :config="activatedConfig"
                  :columns="row[0].definition"
                  :config-data="{arr: activatedConfig.data[row[0].dataIndex]}"
                  :input-columns="true"
                  :no-top-border="noTopBorder"
                  v-for="(item, definitionIndex) in activatedConfig.data[row[0].dataIndex]"
                  :input-columns-definition-index="definitionIndex"
                  :display="forDisplay"
                  :key="row[0].dataIndex + definitionIndex + rowIndex"></x-report-tr-group>
                <template v-if="!forDisplay">
                  <!--  动态行交互按钮  -->
                  <x-report-tr-group
                    @updateImg="updateImg"
                    :show-img-in-cell="showImgInCell"
                    :img-prefix="imgPrefix"
                    :server-name="serverName"
                    :use-oss-for-img="useOssForImg"
                    :config="activatedConfig"
                    :key="rowIndex"
                    :columns="row"
                    :no-top-border="noTopBorder"
                    :config-data="activatedConfig.data"
                    :input-columns-button="true"
                    :input-columns="true">
                  </x-report-tr-group>
                </template>
              </template>
            </template>
          </tbody>
        </table>
        <div v-if="showImages" style="margin-top: 5%; display: flex;margin-bottom: 5%">
          <p>图片：</p>
          <div :key="imgIndex" v-for="(img,imgIndex) in imageList" style="margin-left: 3%;width: 200px">
            <img :src="img.url" class="img" :alt="img.name"/>
            <p style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;width: 100%;">{{ img.name }}</p>
          </div>
        </div>
      </div>
    </template>
  </div>
</template>

<script>
import XReportTrGroup from '@vue2-client/base-client/components/common/XReport/XReportTrGroup.vue'
import XReportJsonRender from '@vue2-client/base-client/components/common/XReport/XReportJsonRender.vue'
import { getConfigByName } from '@vue2-client/services/api/common'

export default {
  name: 'XReportDesign',
  props: {
    // 配置
    config: {
      type: Object,
      require: true,
      default: () => {
      }
    },
    showImgInCell: {
      type: Boolean,
      default: false
    },
    // 是否是展示用
    forDisplay: {
      type: Boolean,
      default: false
    },
    // 命名空间
    serverName: {
      type: String,
      default: process.env.VUE_APP_SYSTEM_NAME
    },
    // 是否只能展示不可编辑
    displayOnly: {
      type: Boolean,
      default: false
    },
    // 插槽名
    slotConfigName: {
      type: String,
      default: undefined
    },
    // 将图片全部展示在表格之后，挨个罗列
    showImages: {
      type: Boolean,
      default: false
    },
    // 图片罗列的数组
    imageList: {
      type: Array,
      default: undefined
    },
    // 表格没有边距
    noPadding: {
      type: Boolean,
      default: false
    },
    // 表格没有上边框，与noPadding搭配可以实现连续表格
    noTopBorder: {
      type: Boolean,
      default: false
    },
    // 是否展示标题
    showTitle: {
      type: Boolean,
      default: true
    },
    // 图片是否使用OSS来保存
    useOssForImg: {
      type: Boolean,
      default: true
    },
    // 图片上传后添加前缀
    imgPrefix: {
      type: String,
      default: undefined
    }
  },
  components: {
    XReportTrGroup,
    XReportJsonRender
  },
  data () {
    return {
      // 表单的数据
      data: this.config.data,
      // 插槽配置
      slotConfig: undefined,
      // 控制是否渲染
      render: false,
      // 用于展示的配置
      activatedConfig: {}
    }
  },
  methods: {
    updateImg (data) {
      this.$emit('updateImg', data)
    },
    // 根据format计算需要多少个输入框
    calcFormatInputNum (formatStr) {
      let count = 0
      for (let i = 0; i < formatStr.length; i++) {
        if (formatStr[i] == '{') {
          count++
        }
      }
      return count
    },
    // 根据format计算输入框之后的文字显示
    displayFormatText (formatStr, num) {
      let start = 0
      let count = 0
      num++
      for (let i = 0; i < formatStr.length; i++) {
        if (formatStr[i] === '}') {
          start = i
          count++
        }
        if (count === num) {
          for (let j = start + 1; j < formatStr.length; j++) {
            if (formatStr[j] === '{') {
              return formatStr.slice(start + 1, j)
            }
            if (j === formatStr.length - 1 && formatStr[j] !== '}') {
              return formatStr[j]
            }
          }
        }
      }
    },
    // 根据format计算输入框之前的文字显示
    displayFormatStartText (formatStr) {
      let count = 0
      for (let i = 0; i < formatStr.length; i++) {
        if (formatStr[i] === '{') {
          break
        } else {
          count++
        }
      }
      return formatStr.slice(0, count)
    },
  },
  created () {
    if (this.slotConfigName) {
      getConfigByName(this.slotConfigName, undefined, res => {
        this.slotConfig = res
        res.data = { ...res.data, ...this.data }
        this.config.data = res.data
        this.activatedConfig = res
        this.render = true
      })
    } else {
      this.activatedConfig = this.config
      this.render = true
    }
    if (this.activatedConfig.designMode !== 'json') {
      this.activatedConfig.columns.forEach(row => {
        if (row[0] && row[0].type && row[0].type === 'list' && row[0].listLength === 1) {
          row.forEach(cell => {
            cell.listLength = this.activatedConfig.data[cell.dataIndex].length
          })
        }
      })
    }
  },
  mounted () {
  },
  watch: {
    config: {
      deep: true,
      handler (newVal) {
      }
    }
  }
}
</script>

<style lang="less" scoped>
.img {
  width: 95%;
  height: 180px;
  object-fit: cover;
}

.reportMain {
  text-align: center;
  margin: 0 auto;
  font-size: 16px;
  color: #000;
  background-color: #fff;
  padding: 15px;
  border-radius: 8px;

  .reportTitle {
    font-weight: bold;
  }

  .subTitle {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1%;

    .subTitleItems {
      max-width: 30%;
    }
  }

  .inputsDiv {
    display: flex;
    justify-content: space-between;

    .inputsDivItem {
      display: flex;
      align-items: center;
      padding: 0 4px;
      white-space: nowrap;

      .inputsDivItemLabel {
        padding: 0 4px;
      }
    }
  }

  .reportTable {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    word-break: break-all;
  }
}

.reportMainForDisplay {
  text-align: center;
  margin: 10% auto;
  font-size: 16px;
  color: #000;
  background-color: #fff;
  padding: 15px;
  border-radius: 8px;

  .reportTitle {
    font-weight: bold;
  }

  .subTitle {
    display: flex;
    justify-content: space-between;

    .subTitleItems {
      max-width: 30%;
    }
  }

  .inputsDiv {
    display: flex;
    justify-content: space-around;

    .inputsDivItem {
      display: flex;
      align-items: center;
      padding: 0 4px;
      white-space: nowrap;

      .inputsDivItemLabel {
        padding: 0 4px;
      }
    }
  }

  .reportTable {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    word-break: break-all;
  }
}

.reportMainNoPadding {
  text-align: center;
  margin: 0 auto;
  font-size: 16px;
  color: #000;
  background-color: #fff;
  border-radius: 8px;

  .reportTitle {
    font-weight: bold;
  }

  .subTitle {
    display: flex;
    justify-content: space-between;

    .subTitleItems {
      max-width: 30%;
    }
  }

  .inputsDiv {
    display: flex;
    justify-content: space-between;

    .inputsDivItem {
      display: flex;
      align-items: center;
      padding: 0 4px;
      white-space: nowrap;

      .inputsDivItemLabel {
        padding: 0 4px;
      }
    }
  }

  .reportTable {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    word-break: break-all;
  }
}

.tools {
  position: fixed;
  right: 2%;
  text-align: right;
  width: 60%;
  cursor: pointer;

  .toolsItem {
    width: 15%;
    margin-right: 3%;
    display: inline-block;
  }
}
</style>
