<template>
  <div class="pivot-main-layout">
    <pivot
      class="pivot-layout"
      :data="asyncData"
      :fields="fields"
      :reducer="reducer"
      hide-settings-text="隐藏设置"
      show-settings-text="显示设置"
      screen-fields-label-text="过滤条件"
      rows-label-text="行"
      cols-label-text="列"
      select-all-text="全选"
      unselect-all-text="取消全选"
      no-data-warning-text="没有数据展示!"
      ref="pivot"
    ></pivot>
  </div>
</template>

<script>
import Pivot from './Pivot'
import previewRealDate from '../../utils/dateUtils'
export default {
  name: 'pivotMainLayout',
  components: { Pivot },
  data: function() {
    return {
      asyncData: [],
      fields: [],
      filterBeforeData: [], // 预览过滤前的数据
      reducer: (acc, item) => {
        let key = 'F_VAL'
        if (!item['F_VAL'] || typeof item['F_VAL'] == 'undefined') {
          return acc
        }
        let val = item['F_VAL']
        if (typeof item['F_VAL'] == 'string') {
          val = Number(item['F_VAL'])
        }
        return acc + val
      }
    }
  },
  created() {
    // this.getData()
  },
  mounted() {},
  methods: {
    getData(busiCode, pivotType, dateType, param) {
      const _this = this
      if (param||this.$parent.onPreview) {
        // 预览搜索
        this.$parent.$refs.previewTable.loading = true
      }
      _this.$refs.pivot ? (_this.$refs.pivot.loading = false) : ''
      this.$refs.pivot.loading = true
      const minDateTypeData = this.getMinType(dateType)
      const minPivotTypeData = this.getMinType(pivotType)
      const data = Object.assign(
        {
          busiCode: busiCode.join(','),
          beginDate: previewRealDate.getRealDate('prev').startDate,
          endDate: previewRealDate.getRealDate('prev').endDate,
          dateType: minDateTypeData.id,
          pivotType: minPivotTypeData.id
        },
        param
      )
      this.$api({
        url: '/ts-bi/api/v4/selectPivotTable',
        method: 'post',
        headers: {
          'Content-Type': 'application/json; charset=utf-8'
        },
        timeout: 100000000,
        data: data
      })
        .then(function(res) {
          _this.$refs.pivot ? (_this.$refs.pivot.loading = false) : ''
          if (res.success) {
            _this.asyncData = [...res.object]
            if (param||_this.$parent.onPreview) {
              _this.$refs.pivot.$refs.pivotTable.isPreviewRefresh = true
              _this.$parent.$refs.previewTable.loading = false
            } else {
              // 保存预览过滤前的数据
              _this.filterBeforeData = [...res.object]
            }
          } else {
            _this.$utils.msg(_this, '加载失败，请联系管理员', 'error')
          }
        })
        .catch(function(error) {
          console.warn(error)
          if (param||_this.$parent.onPreview) {
            // 预览搜索
            _this.$parent.$refs.previewTable.loading = false
          }
          _this.$refs.pivot ? (_this.$refs.pivot.loading = false) : ''
          // 请求失败
        })
    },
    // 获取最小的类型,根据优先级取最小的单位
    getMinType(dateType) {
      if (dateType.length == 1) {
        return dateType[0]
      } else if (dateType.length > 0) {
        const minDateType = Math.min.apply(
          Math,
          dateType.map(item => {
            return item.priority
          })
        )
        return dateType.find(item => minDateType === item.priority)
      } else {
        return {}
      }
    }
  }
}
</script>
<style scoped lang="scss">
.pivot-main-layout {
  margin: 8px;
  height: calc(100% - 16px);
  background: white;
  /deep/.pivot-layout {
    height: 100%;
    .gutter,
    .gutter-x,
    .gutter-y,
    .gutter > *,
    .gutter-sm,
    .gutter-x-sm,
    .gutter-y-sm,
    .gutter-sm > *,
    .gutter-x-sm > *,
    .gutter-y-sm > *,
    .mb-3,
    .my-3 {
      margin: 0;
    }
    .d-flex {
      display: flex;
      &:nth-child(3) {
        height: calc(100% - 220px);
        // overflow: hidden;
        // overflow-y: auto;
      }
    }
    .flex-column {
      flex-direction: column !important;
    }
    .position-relative {
      position: relative !important;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
    }
    .align-items-center {
      align-items: center !important;
    }
    .flex-nowrap {
      flex-wrap: nowrap !important;
    }
    .text-right {
      text-align: right !important;
    }
    .field {
      margin: 0 5px 5px 0;
      .field-dropdown-menu {
        padding: 8px;
        margin: 0;
        .dropdown-header {
          display: block;
          margin-bottom: 0;
          font-size: 12px;
          color: #6c757d;
          white-space: nowrap;
        }
        .dropdown-divider {
          height: 0;
          margin: 5px 0;
          overflow: hidden;
          border-top: 1 px solid var(--border_color);
        }
        .dropdown-item {
          display: block;
          width: 100%;
          clear: both;
          font-weight: 400;
          color: #212529;
          text-align: inherit;
          white-space: nowrap;
          background-color: transparent;
          border: 0;
        }
      }
    }
    .drag-area {
      padding: 8px;
      margin: 8px !important;
      .drag-area-zone {
        padding: 8px 8px 8px 0;
        flex-wrap: wrap-reverse;
      }
    }
    .table-responsive {
      display: block;
      width: 100%;
      height: 100%;
      overflow: auto;
      // overflow-x: auto;
      border-top: 1px solid var(--border_color);
      border-left: 1px solid var(--border_color);
      border-right: 1px solid var(--border_color);
      .table {
        width: 100%;
        height: 100%;
        color: var(--base-black) !important;
        font-size: 12px;
        border: none; //1px solid var(--border_color);
        border-spacing: 0px;
        box-sizing: border-box;
        thead {
          display: table-header-group;
          vertical-align: middle;
          border-color: inherit;
          color: var(--base-black) !important;
          font-size: 13px !important;
          position: relative;
          background-color: var(--color11) !important;
          // height: 40px;
        }
        th,
        td {
          background-image: linear-gradient(
              var(--border_color),
              var(--border_color)
            ),
            linear-gradient(var(--border_color), var(--border_color));
          background-repeat: no-repeat;
          background-size: 1px 100%, 100% 1px;
          background-position: 100% 0, 100% 100%;
          padding: 5px;
        }
        tr {
          height: 32px;
        }
        thead {
          tr {
            height: 40px;
          }
        }

        tbody {
          tr:nth-child(even) {
            background-color: var(--light-blue2) !important;
          }
        }
      }
    }
  }
}
</style>
