/*
 *@description:
 *@author: hudw
 *@date: 2022-03-14 15:14:53
*/
<template>
  <p-card :bordered="false" :title="title" style="flex: 1">
    <a-space slot="extra">
      <slot name="extra" />
    </a-space>

    <p-table
      :id="$route.meta.menuId + '_main'"
      :sign="true"
      autoColWidth
      :activeKey="activeID"
      rowKey="planBillId"
      :scroll="{ x: true, y: 400 }"
      :selectedRowKeys="selectedRowKeys"
      ref="mainTable"
      bordered
      :columns="mx_columns"
      :doneBefore="doneBefore"
      :remoteUrl="mx_remoteUrl"
      :remoteBefore="remoteBefore"
      dragle
      :rowSelectFixed="false"
      :rowSelectType="2"
      @expand="expand"
      :expandedRowKeys="expandedRowKeys"
      @expandedRowsChange="expandedRowsChange"
      :expandIcon="expandIcon"
      v-on="$listeners"

    >
      <slot name="operation" slot="operation" slot-scope="text, record" :record="record" :text="text" />

      <div class="c_table" slot="expandedRowRender" slot-scope="record" style="padding: 5px">
        <p-table
          :customRow="customRow"
          v-if="record._children && record._children.length > 0"
          :scroll="{ x: true}"
          :pagination="false"
          style="margin-right: 120px"
          bordered
          rowKey="id"
          :dataSource="record._children"
          :hasRowCount="false"
          :filterDropdownColumn="false"
          :columns="mx_columnsChildren"
          :rowSelectType="false"
        />
        <a-alert v-else message="暂无数据" banner />

        <!-- <span v-else>暂无数据</span> -->

      </div>
    </p-table>
  </p-card>
</template>
<script>
import setMainColumns from './tableConfig';
import setColumnsChildren from './childrenTableConfig';
import { getChildrenShipbill } from '../api';
import { customRow } from '@/blocks/components/scheduling/js/table/tableConfig.js';

export default {
  name: 'mainTable',
  props: {
    doneBefore: { type: Function },
    options: {
      type: Object,
      default: () => {},
    },
    operation: {
      type: null,
    },
    selectedRowKeys: {
      type: Array,
      default: () => [],
    },
    tableExtendedField: {
      type: Array,
    },
    getFieldsValue: {
      type: Function,
    },

    activeID: {
      type: String,
    },
    title: {
      type: null,
    },

    url: {
      type: null,
    },
    columns: {
      type: null,
    },
    setMainColumns: {
      type: Function,
      default: setMainColumns,
    },
  },

  data() {
    this.currentExpand = null;

    return {
      customRow,
      confirmLoading: false,
      dataSource: [],
      mx_remoteUrl: {
        method: 'post',
        url: this.url,
      },

      expandedRowKeys: [],
      mx_remoteParams: {},
      mx_columnsChildren: setColumnsChildren(this),
      mx_columns: !this.columns ? this.setMainColumns(this, this.tableExtendedField) : this.columns,
    };
  },
  mounted() {},
  watch: {
    tableExtendedField(value) {
      if (value.length > 0) {
        this.mx_columns = !this.columns ? this.setMainColumns(this, value) : this.columns;
      }
    },
  },
  methods: {
    _doneBefore(node, res) {
      this.expandedRowKeys=[]
      this._doneBefore?.(node,res)
    },
    closure() {
      return [];
    },
    expandedRowsChange(expandedRowKeys) {
      this.closure = function () {
        return expandedRowKeys;
      };
    },
    expandIcon(props) {
      const { expanded,onExpand,record} = props
      if (record.loading) {
        return this._c('a-icon', {
          attrs: {
            type: 'loading',
            spin:true
          },
          style: {
            color:'#888'
          }
        })
      } else {
        return this._c('div', {
        class:!props.expanded?'ant-table-row-expand-icon ant-table-row-collapsed':'ant-table-row-expand-icon ant-table-row-expanded',
        on: {
          click: (event) => {
            onExpand(record,event)
          }
        }
      })
     }
    },
    expand(expanded, record) {

      const expandedRowKeys = this.closure();
      this.currentExpand = { expanded, record };
      if (expanded) {
        this.$set(record, 'loading', true);
        getChildrenShipbill(this, record).then((data) => {
          if (data) {
            this.expandedRowKeys = expandedRowKeys;
            this.$set(record, '_children', data);
            setTimeout(() => {
              let mainTable = this.$refs.mainTable.$el;
              let trs = mainTable.querySelectorAll(`table tr[data-row-key*='-extra-row']`);
              for (let i = 0; i < (trs.length/2); i++){
                let { height } = trs[i].lastChild.getBoundingClientRect();
                  trs[(trs.length/2)+i].lastChild.style.height = height+'px'
              }

            },10)
          }
        }).finally(() => {
          record.loading = false
          this.$refs.mainTable.resize()

        })
      } else {
        record._children=[]
        this.expandedRowKeys = expandedRowKeys;
        this.$refs.mainTable.resize()


      }

    },
    print_item() {
      alert('开发中...');
      this.$emit('print', record);
    },
    copy_item(record) {
      this.$emit('copy', record);
    },
    submit_item(record) {
      this.$emit('submit', [record.id]);
    },
    show_info_item(record) {
      this.$emit('view', record);
    },

    update_item(record) {
      this.$emit('update', [record]);
    },

    reload(args) {
      return this.$refs.mainTable.reload(args);
    },
    remoteBefore(vNode, remoteUrl) {
      this.expandedRowKeys=[]

      let searchBar = this.$parent.$refs.searchBar;
      if (searchBar) {
        const { getFieldsValue } = searchBar;
        console.log(remoteUrl);
        let data = getFieldsValue();
        remoteUrl.data = { ...remoteUrl.data, ...data };

        for (let key in remoteUrl.data) {
          let item = remoteUrl.data[key];
          if (Array.isArray(item)) {
            let keys = key.split('_');
            if (keys.length > 0) {
              remoteUrl.data[keys[0]] = item[0];
              remoteUrl.data[keys[1]] = item[1];
              delete remoteUrl.data[key];
            }
          }
        }
      }
    },
  },
};
</script>

<style lang="less">
.c_table {
  .scrollbar {
    z-index: 2;
  }
}
</style>