<template>
  <div class="aos-table aos-table-inline clearfix" ref="aosTableLeaseContainer">
    <div class="aos-table__explain">
      <div class="aos-table__cross-container">
        <div
          class="aos-table__refresh"
          :style="{'transform': 'rotate(' + rotate+ 'deg)'}"
          v-if="showRefresh"
          @click="handleDebounceRefresh">
          <i class="el-icon-refresh" title="点击刷新"></i>
        </div>
        <div class="aos-table__cross-container-main" v-if="showCrossSelection && copyTableTemplate.selection && copyTableTemplate.selection.showSelection">
          <el-checkbox class="aos-table__cross-container-checkbox" v-model="crossPageSelect" size="mini" @change="crossPageSelectChange">跨页选择</el-checkbox>
          <el-popover
            placement="right"
            title="跨页已选数据"
            width="600"
            trigger="click">
            <el-table
              :data="currentCrossSelectList"
              ref="AosTable"
              stripe
              highlight-current-row
              height="600"
              style="width: 100%"
              @row-click="handleRowClick">
              <template v-for="item in copyTableTemplate.tableItem">
                <el-table-column
                  v-if="!item.hide"
                  :key="item.prop"
                  :prop="item.prop"
                  :label="item.label"
                  :width="item.width"
                  :min-width="item.minWidth || '100px'"
                  :show-overflow-tooltip="item.showOverflowTooltip"
                  :sortable="item.sortable"
                  :align="item.align ? item.align : 'left'">
                  <template slot-scope="scope" >
                    <slot v-if="item.showSlot" :name="item.prop + '-slot'" :scope="scope"></slot>
                    <template v-else-if="item.type === 'defdoc'">
                      <aos-defdoc 
                        :value="scope.row[item.prop]"
                        :editable="false"
                        :defCode="item.defCode"
                        :tag="item.tag"
                        :customerUrl="item.customerUrl"
                        :multiple="item.multiple"
                        :no-def-code="item.noDefCode"
                        :orm-code="item.ormCode"
                        :orm-name="item.ormName"
                        :orm-status="item.ormStatus"
                        :orm-data="item.ormData">
                      </aos-defdoc>
                    </template>
                    <template v-else-if="item.type === 'rule-defdoc'">
                      <aos-rule-defdoc :value="scope.row[item.prop]" :editable="false" :defCode="item.defCode" :multiple="item.multiple"></aos-rule-defdoc>
                    </template>
                    <template v-else-if="item.type === 'ref'">
                      <aos-ref :value="scope.row[item.prop]" :editable="false" :refCode="item.refCode" :filters="item.filters" :multiple="item.multiple" :onlyTranslate="true" :translateRefValueLable="scope.row[item.prop + 'Label']"></aos-ref>
                    </template>
                    <template v-else-if="item.type === 'money'">
                      <aos-money :editable="false" v-model="scope.row[item.prop]" :decimal="item.decimal || 2" :suffixString="item.suffixString"></aos-money>
                    </template>
                    <template v-else-if="item.type === 'city'">
                      <aos-city :templateValue="scope.row" :edit="false" :province="item.province" :city="item.city" :county="item.county" :customerUrl="item.customerUrl" :customerMethod="item.customerMethod"></aos-city>
                    </template>
                    <template v-else-if="item.type === 'date-picker'">
                      <span>{{ $time.formatTime(scope.row[item.prop], ((item.attrs && item.attrs.format) || ''))}}</span>
                    </template>
                    <span v-else :title="scope.row[item.prop]">{{scope.row[item.prop]}}</span>
                  </template>
                </el-table-column>
              </template>
              <el-table-column
                fixed="right"
                label="操作"
                width="100px">
                <template slot-scope="scope">
                  <el-button type="text" @click="handleDeleteCrossItem(scope)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-button size="mini" type="text" slot="reference">已选择</el-button>
          </el-popover>
        </div>
        <div class="aos-table__other-container" v-if="$slots.headerLeft || $slots['header-left']">
          <slot name="headerLeft"></slot>
          <slot name="header-left"></slot>
        </div>
      </div>
      <div class="aos-table__explain-container">
        <div v-if="copyTableTemplate.operationColumn && copyTableTemplate.operationColumn.showOperation && copyTableTemplate.operationColumn.operationType === 'icon' && copyTableTemplate.operationColumn.iconList && copyTableTemplate.operationColumn.iconList.length > 0">
          <span class="aos-table__explain-title">操作列图标说明：</span>
          <span v-for="icon in copyTableTemplate.operationColumn.iconList" :key="icon.code" class="aos-table__explain-item">
            <i :class="'el-icon-'+icon.icon"></i>
            <span>：{{icon.detail ? icon.detail : icon.title}}</span>
          </span>
        </div>
        <div class="aos-table__setting">
          <el-dropdown trigger="click" :hide-on-click="false"  @command="handleSettingItem">
            <i class="el-icon-setting" title="设置操作列的显示/隐藏"></i>
            <el-dropdown-menu slot="dropdown">
              <!-- <el-dropdown-item>
                <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
              </el-dropdown-item> -->
              <!-- <el-checkbox-group v-model="allItem" @change="handleItemChange"> -->
                <el-dropdown-item v-for="(item,index) in copyTableTemplate.tableItem" :key="item.prop">
                  <el-checkbox :value="!item.hide" :checked="!item.hide" :label="item.prop" @change="handleItemTypeChange(index)">{{item.label}}</el-checkbox>
                </el-dropdown-item>
              <!-- </el-checkbox-group> -->
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
    </div>
    <div class="aos-table__container">
      <el-table
        :data="data"
        ref="AosTableLease"
        stripe
        highlight-current-row
        :height="tableHeight"
        :border="border"
        :fit="fit"
        :show-summary="showSummary"
        :select-on-indeterminate="selectOnIndeterminate"
        :sum-text="sumText"
        :row-key="rowKey"
        :empty-text="emptyText"
        :default-expand-all="defaultExpandAll"
        :expand-row-keys="expandRowKeys"
        :default-sort="defaultSort"
        :tooltip-effect="tooltipEffect"
        :summary-method="summaryMethod"
        :span-method="spanMethod"
        :indent="indent"
        :lazy="lazy"
        :load="load"
        :tree-props="treeProps"
        style="width: 100%"
        @select="handleSelect"
        @selection-change="handleSelectionChange"
        @row-click="handleRowClick">
        <el-table-column
          v-if="copyTableTemplate.selection && copyTableTemplate.selection.showSelection"
          type="selection"
          :selectable="selectable"
          :width="copyTableTemplate.selection.width || '50'">
        </el-table-column>
        <template v-for="item in copyTableTemplate.tableItem">
          <el-table-column
            v-if="!item.hide"
            :key="item.prop"
            :prop="item.prop"
            :label="item.label"
            :width="item.width"
            min-width="150px"
            :resizable="((item.sortable === undefined || item.sortable === null) ? true : item.sortable)"
            :sortable="((item.sortable === undefined || item.sortable === null) ? false : item.sortable)">
            <template slot="header" slot-scope="scope">
              <div v-if="item && item.prop" class="header">
                <div :class=" { 'header-center': inlineSearch}">
                  {{ item.label }}
                </div>
                <div v-if="inlineSearch && item.header.show">
                  <template v-if="item.header.type === 'input'">
                    <el-input v-model="copySearchData[item.prop]" @change="function(data) { handleInlineSearchChange(data, item.prop)}"></el-input>
                  </template>
                  <template v-if="item.header.type === 'defdoc-lease'">
                    <aos-defdoc-lease :value="copySearchData[item.prop]" :defCode="item.defCode" :field="item.prop" :multiple="true" :collapse-tags="true" :editable="true" @change="function(data) { handleInlineSearchChange(data, item.prop)}"></aos-defdoc-lease>
                  </template>
                  <template v-if="item.header.type === 'date'">
                    <inline-date :value="copySearchData[item.prop]" @end="function(data) { handleInlineSearchChange(data, item.prop)}"></inline-date>
                  </template>
                  <template v-if="item.header.type === 'number-range'">
                    <inline-number-range :value="copySearchData[item.prop]" @change="function(data) { handleInlineSearchChange(data, item.prop)}"></inline-number-range>
                  </template>
                </div>
                <div v-if="inlineSearch && !item.header.show" style="height:32px"></div>
              </div>
            </template>
            <template slot-scope="scope" >
              <slot v-if="item.showSlot" :name="item.prop + '-slot'" :scope="scope"></slot>
              <template v-else-if="item.type === 'defdoc-lease'">
                <aos-defdoc-lease :editable="false" :value="scope.row[item.prop] || ''" :field="item.prop" :defCode="item.defCode"></aos-defdoc-lease>
              </template>
              <template v-else-if="item.type === 'ref-lease'">
                <aos-ref-lease :editable="false" :value="scope.row[item.prop] || ''" :field="item.prop" :refUrl="item.refUrl" :baseUrl="item.baseUrl" :queryParams="item.queryParams"></aos-ref-lease>
              </template>
              <template v-else-if="item.type === 'money'">
                <aos-money :editable="false" v-model="scope.row[item.prop]" :decimal="item.decimal || 2" :suffixString="item.suffixString"></aos-money>
              </template>
              <template v-else-if="item.type === 'date-picker'">
                <span>{{ $time.formatTime(scope.row[item.prop], ((item.attrs && item.attrs.format) || ''))}}</span>
              </template>
              <span v-else :title="scope.row[item.prop]">{{scope.row[item.prop]}}</span>
            </template>
          </el-table-column>
        </template>
        <el-table-column
          v-if="copyTableTemplate.operationColumn && copyTableTemplate.operationColumn.showOperation"
          :fixed="copyTableTemplate.operationColumn.fixed || 'right'"
          :label="copyTableTemplate.operationColumn.label || '操作'"
          :width="copyTableTemplate.operationColumn.width || '120px'"
          show-overflow-tooltip>
          <template v-if="inlineSearch" slot="header">
            <div>
              <div v-if="copyTableTemplate.operationColumn.label">{{ copyTableTemplate.operationColumn.label }}</div>
              <div v-else>操作</div>
              <div v-if="inlineSearch" style="height:32px"></div>
            </div>
          </template>
          <template slot-scope="scope">
            <div class="aos-table-operation">
              <slot v-if="copyTableTemplate.operationColumn.showOperationSlot" name="operation-slot" :scope="scope"></slot>
              <template v-if="copyTableTemplate.operationColumn.operationType === 'icon' && copyTableTemplate.operationColumn.iconList && copyTableTemplate.operationColumn.iconList.length > 0">
                <span v-for="icon in copyTableTemplate.operationColumn.iconList" :key="icon.code">
                  <i class="aos-table-icon"
                    :class="'el-icon-'+icon.icon" 
                    :title="icon.title"
                    v-if="iconable(scope.row, icon.code)"
                    @click="handleIconClick(icon.code,scope)">
                  </i>
                </span>
              </template>
              <template v-else-if="copyTableTemplate.operationColumn.operationType === 'button' && copyTableTemplate.operationColumn.iconList && copyTableTemplate.operationColumn.iconList.length > 0">
                <span v-for="icon in copyTableTemplate.operationColumn.iconList" :key="icon.code">
                  <el-button
                    class="aos-table-button"
                    type="text"
                    v-if="iconable(scope.row, icon.code)"
                    @click="handleIconClick(icon.code,scope)">{{icon.title}}</el-button>
                  
                </span>
                <!-- <el-dropdown @command="handleCommand">
                  <span class="el-dropdown-link">
                    更多<i class="el-icon-arrow-down el-icon--right"></i>
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="a">黄金糕</el-dropdown-item>
                    <el-dropdown-item command="b">狮子头</el-dropdown-item>
                    <el-dropdown-item command="c">螺蛳粉</el-dropdown-item>
                    <el-dropdown-item command="d" disabled>双皮奶</el-dropdown-item>
                    <el-dropdown-item command="e" divided>蚵仔煎</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown> -->
              </template>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          class="aos-table-pagination"
          v-if="showPagination"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          @prev-click="handlePrevClick"
          @next-click="handleNextClick"
          :current-page="currentPage"
          :page-sizes="[5,10,20,30,40,50]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>
</div>
</template>
<script>
import ElTable from '../../table';
import ElPagination from '../../pagination';
import {addResizeListener,removeResizeListener} from 'aos-element/src/utils/resize-event.js'
import debounce from 'throttle-debounce/debounce';
import InlineDate from './inline-date'
import InlineNumberRange from './inline-number-range'
export default {
  name: 'AosTableInline',
  components: {
    ElTable,
    ElPagination,
    InlineDate,
    InlineNumberRange
  },
  props:{
    // table绑定的数据
    data: {
      type: Array,
      required: true,
      default: function(){
        return []
      }
    },
    searchData: {
      type: Object,
      default: function () {
        return {}
      }
    },
    // 是否在表格的头部显示搜索
    headerSearch: {
      type: Boolean,
      default: false
    },
    // 头部搜索模板
    headerSearchTemplate: {
      type: Array,
      default: function () {
        return []
      }
    },
    // table构成列属性
    tableTemplate: {
      type: Object,
      required: true
    },
    // 是否显示分页
    showPagination: {
      type: Boolean,
      default: true
    },
    // 分页的当前页
    currentPage: {
      type: Number,
      default: 1
    },
    // 分页的页的数量
    pageSize: {
      type: Number,
      default: 10
    },
    // 当前table数据总共的数量
    total: {
      type: Number,
      default: 0
    },
    showType: {
      type: String,
      default: 'table'
    },
    fixedHead: {
      type: Boolean,
      default: false
    },
    maxTableHeight: {
      type: Number
    },
    inlineSearch: {
      type: Boolean,
      default: false
    },
    // 当使用复选框是设置复选框是否可选
    selectable: {
      type: Function,
      default: function () {
        return function () { return true }
      }
    },
    // 根据条件设置icon显示或者隐藏
    iconable: {
      type: Function,
      default: function () {
        return function () {
          return true
        }
      }
    },
    fit: {
      type: Boolean,
      default: true
    },

    border: Boolean,

    rowKey: [String, Function],

    context: {},

    showHeader: {
      type: Boolean,
      default: true
    },

    showSummary: Boolean,

    sumText: String,

    summaryMethod: Function,

    rowClassName: [String, Function],

    rowStyle: [Object, Function],

    cellClassName: [String, Function],

    cellStyle: [Object, Function],

    headerRowClassName: [String, Function],

    headerRowStyle: [Object, Function],

    headerCellClassName: [String, Function],

    headerCellStyle: [Object, Function],

    highlightCurrentRow: Boolean,

    currentRowKey: [String, Number],

    emptyText: String,

    expandRowKeys: Array,

    defaultExpandAll: Boolean,

    defaultSort: Object,

    tooltipEffect: String,

    spanMethod: Function,

    selectOnIndeterminate: {
      type: Boolean,
      default: true
    },

    indent: {
      type: Number,
      default: 16
    },

    treeProps: {
      type: Object,
      default() {
        return {
          hasChildren: 'hasChildren',
          children: 'children'
        };
      }
    },

    lazy: Boolean,

    load: Function,
    showRefresh: {
      type: Boolean,
      default: false
    },
    showCrossSelection: {
      type: Boolean,
      default: false
    }
  },
  data(){
    return {
      tableHeight: null,
      copySearchData: {},
      pickerOptions: {
        shortcuts: [{
          text: '本月',
          onClick(picker) {
            picker.$emit('pick', [new Date(), new Date()]);
          }
        }, {
          text: '今年至今',
          onClick(picker) {
            const end = new Date();
            const start = new Date(new Date().getFullYear(), 0);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近六个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setMonth(start.getMonth() - 6);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      checkAll: false,
      copyTableTemplate: {},
      isIndeterminate: false,
      copyTableItemObject: {},
      isIndeterminate: false,
      allItem: [],
      currentTableTemplate: [],
      crossPageSelect: false,
      currentCrossSelectList: [],
      currentSelectionList: [],
      rotate: 0,
      handleDebounceRefresh
    }
  },
  // computed: {
    // copyData: {
    //   get: function() {
    //     return this.data instanceof Array ? this.data : [];
    //   },
    //   set: function(){}
    // },
    // copyTableTemplate(){
    //   return this.tableTemplate
    // }
  // },
  watch: {
    handleCrossSelectionChange(array){
      if(Array.isArray(array)){
        this.currentCrossSelectList = array
        this.$emit('table-selection-change', this.currentCrossSelectList);
      }
    },
    fixedHead(val, oldVal) {
      if (val && !this.$_.isEqual(val, oldVal)) {
        if (this.maxTableHeight) {
          this.tableHeight = this.maxTableHeight;
        } else {
          addResizeListener(this.$refs.aosTableLeaseContainer.parentElement.parentElement, this.resizeTableHeight);
        }
      }
    },
    tableTemplate: {
      handler: function (val, oldVal) {
        if (val && !this.$_.isEqual(val, oldVal)) {
          this.copyTableTemplate = this.$_.cloneDeep(val);
          this.copyTableTemplate.tableItem.forEach(item => {
            this.$set(this.copyTableItemObject, item.prop, item)
            if (!item.hasOwnProperty('hide')) {
              this.$set(item, 'hide', false)
            }
          })
        }
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    handleSettingItem () {},
    handleInlineSearchChange: function (data, prop) {
      const self = this
      self.$set(self.copySearchData, prop, data)
      let conditionStr = this.$Base64.encode(self.buildSearchCondition())
      self.$emit('search', conditionStr)
    },
    buildSearchCondition () {
      let sql = ''
      let type = ''
      Object.keys(this.copySearchData).forEach(item => {
        if (this.copyTableItemObject[item] && this.copyTableItemObject[item].header) {
          type = this.copyTableItemObject[item].header.type ? this.copyTableItemObject[item].header.type : 'default'
        }
        if (this.copySearchData[item]) {
          sql += this.sqlMaker(type)(this.copySearchData[item], this.copyTableItemObject[item].dbField)
        }
      })
      console.log('buildSearchCondition', sql)
      return sql;
    },
    sqlMaker (type) {
      let fn = ''
      switch (type) {
        case 'defdoc-lease':
          fn = function (value, dbField) {
            return " and " + dbField + " in (" + value + ")";
          }
          break;
        case 'date':
          fn = function (value, dbField) {
            let sql = ''
            if (value && Array.isArray(value)) {
              if (value[0] && value[0] !== ' ') {
                sql = " and " + dbField + " >= to_date('" + value[0] + " 23:59:59', 'yyyy-mm-dd hh24:mi:ss')";
              }
              if (value[1] && value[1] !== ' ') {
                sql += " and " + dbField + " <= to_date('" + value[1] + " 00:00:00', 'yyyy-mm-dd hh24:mi:ss')";
              }
            } 
            return sql;
          }
          break;
        case 'number-range':
          fn = function (value, dbField) {
            let sql = ''
            if (value && Array.isArray(value)) {
              if (value[0] && value[0] !== ' ') {
                sql = " and " + dbField + " >= " + value[0];
              }
              if (value[1] && value[1] !== ' ') {
                sql += " and " + dbField + " <= " + value[1];
              }
            } 
            return sql;
          }
          break;
        case 'input':
          fn = function (value, dbField) {
            return " and " + dbField + " like '%" + value + "%'";
          }
          break;
        default:
          fn = function (value, dbField) {
            return " and " + dbField + " like '%" + value + "%'";
          }
          break;
      }
      return fn;
    },
    handleCheckAllChange (val) {
      const propList = []
      this.copyTableTemplate.tableItem.forEach(item => {
        item.hide = !item.hide
        propList.push(item.prop)
      })
      this.isIndeterminate = false;
    },
    handleItemTypeChange(index) {
      this.copyTableTemplate.tableItem[index].hide = !this.copyTableTemplate.tableItem[index].hide
    },
    handleItemChange (value) {
      const checkedCount = value.length;
      this.checkAll = checkedCount === this.copyTableTemplate.tableItem.length
      this.isIndeterminate = checkedCount > 0 && checkedCount === this.copyTableTemplate.tableItem.length
    },
    handleDeleteCrossItem (scope) {
      this.$confirm('确认删除当前数据?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.currentCrossSelectList.splice(scope.$index, 1)
      })
    },
    crossPageSelectChange (value) {
      if (!value) {
        this.currentCrossSelectList = []
      }
    },
    // 多选框选择事件TODO:翻页触发事件问题
    handleSelectionChange(data){
      this.currentSelectionList = cloneDeep(data)
      const selectionList = cloneDeep(data)
      if (this.crossPageSelect) {
        const list = cloneDeep(this.currentCrossSelectList)
        selectionList.forEach(item => {
          let flag = true
          for (let index = 0; index < this.currentCrossSelectList.length; index++) {
            const element = this.currentCrossSelectList[index];
            if (isEqual(element, item)) {
              flag = false
              break
            }
          }
          if (flag) {
            list.push(item)
          }
        })
        this.$emit('table-selection-change', list);
      } else {
        this.$emit('table-selection-change', data);
      }
    },
    handleRowClick(row,column,event){
      this.$emit('table-row-click',row,column,event);
    },
    // 抛出操作列点击按钮
    handleIconClick(type,scope){
      this.$emit('table-'+type+'-click',scope)
    },
    // 当前数量改变
    handleSizeChange(size){
      this.$emit('table-size-change',size);
    },
    // 当前页数改变
    handleCurrentChange(page){
      if (this.crossPageSelect) {
        const currentCrossSelectList = this.currentCrossSelectList.concat(this.currentSelectionList)
        for (let index = 0; index < currentCrossSelectList.length; index++) {
          const element = currentCrossSelectList[index];
          for (let j = index + 1; j < currentCrossSelectList.length; j++) {
            const childElement = currentCrossSelectList[j];
            if (isEqual(element, childElement)) {
              currentCrossSelectList.splice(j, 1)
            }
          }
        }
        this.currentCrossSelectList = cloneDeep(currentCrossSelectList)
      }
      this.$emit('table-current-change',page);
    },
    // 点击上一页
    handlePrevClick(page){
      this.$emit('table-prev-click',page);
    },
    // 点击下一页
    handleNextClick(page){
      this.$emit('table-next-click',page);
    },
    resizeTableHeight(){
      const self = this;
      this.$nextTick(() => {
        let boxHeight
        if (self.$refs && self.$refs.aosTableContainer && self.$refs.aosTableContainer.parentElement && self.$refs.aosTableContainer.parentElement.parentElement) {
          boxHeight = self.$refs.aosTableContainer.parentElement.parentElement.offsetHeight;
        }
        if(boxHeight < 600){
          if(self.showPagination){
            self.tableHeight  = boxHeight - 134
          } else {
            self.tableHeight = boxHeight - 69;
          }
        } else {
          self.tableHeight = 600
        }
      });
    },
    handleInlineSearch () {},
    translateRef (val) {
      if (val.length > 0 && this.refPropList.length > 0) {
        // 拿到对应prop列的值
        this.refPropList.forEach(item => {
          this.$set(this.refValueDataListObject, item.prop, {})
          val.forEach((dataItem, index) => {
            if (dataItem && !dataItem[item.prop + 'Label']) {
              this.$set(dataItem, item.prop + 'Label', '');
            }
            if (!this.refValueDataListObject[item.prop].valueList) {
              this.$set(this.refValueDataListObject[item.prop], 'valueList', [])
            }
            if (!this.refValueDataListObject[item.prop].labelValueList) {
              this.$set(this.refValueDataListObject[item.prop], 'labelValueList', [])
            }
            if (!this.refValueDataListObject[item.prop].labelValueObject) {
              this.$set(this.refValueDataListObject[item.prop], 'labelValueObject', {})
            }
            if (dataItem[item.prop]) {
              if (this.refValueDataListObject[item.prop].valueList.indexOf(dataItem[item.prop]) === -1) {
                this.refValueDataListObject[item.prop].valueList.push(dataItem[item.prop])
              }
            }
          });
        });
        let allGetLabel = []
        this.refPropList.forEach(item => {
          // this.getRefLabel(item.refCode, this.refValueDataListObject[item.prop])
          allGetLabel.push(this.getRefLabel(item.refCode, this.refValueDataListObject[item.prop]))
        })
        window.Promise.allSettled(allGetLabel).then(() => {
          this.refPropList.forEach(item => {
            val.forEach((dataItem, index) => {
              if (this.refValueDataListObject[item.prop].labelValueObject[dataItem[item.prop]]) {
                dataItem[item.prop + 'Label'] = this.refValueDataListObject[item.prop].labelValueObject[dataItem[item.prop]]
              } else {
                dataItem[item.prop + 'Label'] = dataItem[item.prop]
              }
            });
          });
          this.$emit('update: data', val)
        }).catch(error => {
          console.log('error===>', error)
        })
      }
    },
    getRefLabel(refCode, refValueDataListObject) {
      if (!refCode) {
        this.$message({
          type: 'error',
          message: '参照对应的 refCode 不能为空.'
        });
        return;
      }
      const paramsData = refValueDataListObject.valueList.join(',')
      if (!paramsData) {
        return;
      }
      return this.$optimizeHttp({
        url: '/core/api/ref/translate/' + refCode,
        method: 'get',
        params: {
          code: paramsData
        }
      }).then(res => {
        refValueDataListObject.labelValueList = cloneDeep(res.data);
        refValueDataListObject.labelValueObject = this.arrayToObject(refValueDataListObject.labelValueList)
      })
    },
    arrayToObject (array) {
      if (!array && !Array.isArray(array))  return {}
      let object = {}
      array.forEach(item => {
        object[item.code] = item.value
      })
      return object
    },
    refreshClick() {
      this.rotate += 180
      this.$emit('refresh')
    }
  },
  created () {
    this.copySearchData = this.$_.cloneDeep(this.searchData)
    this.handleDebounceRefresh = debounce(800,this.refreshClick)
  },
  mounted(){
    if(this.fixedHead){
      if (this.maxTableHeight) {
        this.tableHeight = this.maxTableHeight
      } else {
        addResizeListener(this.$refs.aosTableContainer.parentElement.parentElement,this.resizeTableHeight);
      }
    }
  },
  beforeDestroy(){
    if(this.fixedHead && !this.maxTableHeight){
      removeResizeListener(this.$refs.aosTableContainer.parentElement.parentElement,this.resizeTableHeight);
    }
  }
}
</script>

