<template>
  <div :style="styleVar">
    <dv-scroll-board
      :id="`${index}${key}`"
      :config="configData"
      :key="`${index}${key}`"
      :style="`width: 100%, height: ${height}`"
    />
  </div>
</template>
<script>
export default {
  name: "new-scroll-table",
  props: ["option", 'config', "modalSet", "index", "site", 'scale', 'ext', 'contentH'],
  data() {
    return {
      configData: {},
      key: 1
    };
  },
  computed: {
    height() {
      let height = this.site.h
      if (this.contentH) {
        height = this.site.h * 44
      }
      return height + "px";
    },
    styleVar() {
      return {
        "--headerBGC":
          this.option.headerBGC && this.option.headerBGCJ
            ? this.option.headerBGC
            : "",
        "--headerBGCJ":
          this.option.headerBGC && this.option.headerBGCJ
            ? this.option.headerBGCJ
            : "",
        "--oddRowBGC":
          this.option.oddRowBGC && this.option.oddRowBGCJ
            ? this.option.oddRowBGC
            : "",
        "--oddRowBGCJ":
          this.option.headerBGC && this.option.oddRowBGCJ
            ? this.option.oddRowBGCJ
            : "",
        "--evenRowBGC":
          this.option.evenRowBGC && this.option.evenRowBGCJ
            ? this.option.evenRowBGC
            : "",
        "--evenRowBGCJ":
          this.option.evenRowBGC && this.option.evenRowBGCJ
            ? this.option.evenRowBGCJ
            : "",
      };
    }
  },
  watch: {
    site: {
      handler() {
        this.init();
      },
      deep: true,
    },
    option: {
      handler() {
        this.init();
      },
      deep: true,
    },
  },
  created() {
  },
  mounted() {
  },
  methods: {
    init() {
      let header = [];
      let tabledata = [];
      let nameMap = [
        ...this.config.rowParamList,
        ...this.config.indexParamList,
      ];
      XEUtils.arrayEach(nameMap, (item) => {
        header.push(
          `<div style="color:${this.option.headerColor};font-size: ${this.option.headerfontSize}px;text-align:${this.option.align}">${item.columnTitle}</div>`
        );
        }
      );
      XEUtils.arrayEach(this.originData, (item) => {
        tabledata.push(nameMap.map((i) => item[i.columnTitle]));
      });
      XEUtils.arrayEach(tabledata, (item, key) => {
        let v = [];
        XEUtils.arrayEach(item, (value) => {
          v.push(
            `<div style="color:${this.option.bodyColor};font-size: ${this.option.bodyFontSize}px;text-align: ${this.option.align}">${value}</div>`
          );
        });
        tabledata[key] = v;
      });
      this.configData = {
        header: header,
        data: tabledata,
        rowNum: this.option.rowNum,
        oddRowBGC: this.option.oddRowBGC,
        evenRowBGC: this.option.evenRowBGC,
        headerHeight:this.option.headerHeight,
        index: this.option.index,
        headerBGC: this.option.headerBGC,
        columnWidth: [this.option.columnWidth],
        align: [this.option.align],
        waitTime: this.option.waitTime,
        carousel: this.option.carousel
      }
      this.$nextTick(() => {
        this.key++;
      });
    },
    update(data) {
      this.originData = data;
      this.init();
    },
    initRender() {
      this.header = ['列1', '列2', '列3']
      this.data = [
        ['行1列1', '行1列2', '行1列3'],
        ['行2列1', '行2列2', '行2列3'],
        ['行3列1', '行3列2', '行3列3'],
        ['行4列1', '行4列2', '行4列3'],
        ['行5列1', '行5列2', '行5列3'],
        ['行6列1', '行6列2', '行6列3'],
        ['行7列1', '行7列2', '行7列3'],
        ['行8列1', '行8列2', '行8列3'],
        ['行9列1', '行9列2', '行9列3'],
        ['行10列1', '行10列2', '行10列3']
      ]
      this.init();
    },
  },
};
</script>
<style lang="scss">
.row-item:nth-of-type(odd) {
  background-image: linear-gradient(
      var(--oddRowBGC),
      var(--oddRowBGCJ)
  )
}

.row-item:nth-of-type(even) {
  background-image: linear-gradient(
      var(--evenRowBGC),
      var(--evenRowBGCJ)
  )
}
</style>
