/*
 *@description:
 *@author: hudw
 *@date: 2022-03-14 15:14:53
*/
<template>
  <p-table
    class="plan-table"
    :id="$route.meta.menuId + '_main'"
    :sign="true"
    autoColWidth
    :activeKey="activeID"
    rowKey="planBillId"
    :scroll="{ x: true, y: 400 }"
    :selectedRowKeys="selectedRowKeys"
    ref="mainTable"
    bordered
    :autoLoad="false"
    :dataSource="minDataSource"
    :columns="mx_columns"
    :doneBefore="doneBefore"
    :remoteBefore="remoteBefore"
    dragle
    :bodyStyle="{ maxHeight: mianHeight, minHeight: mianHeight }"
    :pagination="20"
    @change="change"
    :rowSelectFixed="false"
    :rowSelectType="2"
    @expand="expand"
    :getCheckboxProps="
      (record) => ({
        props: {
          get indeterminate() {
            return record._indeterminate;
          },
          get disabled() {
            return record._disabled;
          },
        },
      })
    "
    :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="margin: -1px">
      <!-- @selectAll="(...args)=>c_selectAll(record,...args)" -->

      <p-table
        v-if="record._children && record._children.length > 0"
        :scroll="{ x: true, y: 300 }"
        :pagination="false"
        bordered
        rowKey="id"
        :customRow="customRow"
        :getCheckboxProps="
          (c_record) => {
            return {
              props: {
                get disabled() {
                  //&&record._c_disabled.includes(c_record.id)
                  return record._disabled
                },
              },
            };
          }
        "
        @selectChange="(...args) => c_selectChange(record, ...args)"
        :dataSource="record._children"
        :hasRowCount="false"
        :selectedRowKeys.sync="record._selectedRowKeys"
        :filterDropdownColumn="false"
        :columns="mx_columnsChildren"
        :rowSelectType="2"
      />
      <a-alert v-else message="暂无数据" banner />

      <!-- <span v-else>暂无数据</span> -->
    </div>
  </p-table>
</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;
    this.customRow=customRow
    return {
      minDataSource: [],
      confirmLoading: false,
      mx_remoteUrl: {
        method: 'post',
        url: this.url,
        data: {
          status: 10,
          pageSize: 99999999,
          pageNum: 1,
        },
      },

      expandedRowKeys: [],
      selectedRows: [],
      mx_columnsChildren: setColumnsChildren(this),
      mx_columns: !this.columns ? this.setMainColumns(this, this.tableExtendedField) : this.columns,
    };
  },
  mounted() {
    this.init();
  },
  watch: {
    tableExtendedField(value) {
      if (value.length > 0) {
        this.mx_columns = !this.columns ? this.setMainColumns(this, value) : this.columns;
      }
    },
  },
  computed: {
    mianHeight() {
      return 'calc(100vh - 310px)';
    },
  },
  methods: {
    delRowItem(key) {
      this.$refs.mainTable.delRowItem(key)
    },
    init() {
      this.expandedRowKeys = []

      this.$refs.mainTable.vLoading = true;
      this.axios(this.mx_remoteUrl)
        .then((response) => {
          this.$emit('updateData')

          if (response.success) {
            this.minDataSource = response.data.list;
          } else {
            this.$exception(response);
          }
        })
        .finally(() => {
          this.$refs.mainTable.vLoading = false;
        });

      //  :remoteUrl="mx_remoteUrl"
    },
    // c_selectAll(parnetRecord, selected, selectedRows, changeRows) {
    //   parnetRecord._checked = selected
    //  let selectedRowKeys  = []
    //   if (selected) {
    //     selectedRowKeys= this.selectedRowKeys.concat([parnetRecord.planBillId])
    //   } else {
    //     selectedRowKeys=this.selectedRowKeys.filter(key => key != parnetRecord.planBillId);
    //     parnetRecord._selectedRowKeys = []
    //   }

    //   this.$emit('select',parnetRecord, parnetRecord._checked, null, null,selectedRowKeys)
    // },
    c_selectChange(parnetRecord, selectedRowKeys, selectedRows) {
      parnetRecord._selectedRowKeys = selectedRowKeys;
      let p_selectedRowKeys = [];
      if (selectedRowKeys.length > 0) {
        parnetRecord._indeterminate = selectedRowKeys.length != parnetRecord._children.length;
        parnetRecord._checked = true;
      } else {
        parnetRecord._checked = false;
        parnetRecord._indeterminate = false;
      }
      if (parnetRecord._checked) {
        p_selectedRowKeys = this.selectedRowKeys.concat([parnetRecord.planBillId]);
      } else {
        p_selectedRowKeys = this.selectedRowKeys.filter((key) => key != parnetRecord.planBillId);
      }
      parnetRecord.planBillDetailDTOList = selectedRows


      this.$emit('select', null, null, null, null, p_selectedRowKeys);
    },
    _doneBefore(node, res) {
      this.expandedRowKeys = [];
      this._doneBefore?.(node, res);
    },
    closure() {
      return [];
    },
    change() {
      this.init();
    },
    expandedRowsChange(expandedRowKeys) {
      this.closure = function () {
        return expandedRowKeys;
      };
    },
    expandIcon(props) {
      const { expanded, onExpand, record } = props;
      if (record.status !== 10) return undefined;

      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&&!record._children) {
        this.$set(record, 'loading', true);

        getChildrenShipbill(this, record)
          .then((data) => {
            if (data) {
              record._selectedRowKeys = [];
              record._c_disabled=[]

              if (record._checked) {
                record._selectedRowKeys = data.map((item) => {
                  return item.id;
                });
              }
              this.expandedRowKeys = expandedRowKeys;

              this.$set(record, '_children', data);
            }
          })
          .finally(() => {
            record.loading = false;
            this.$refs.mainTable.resize();
          });

      } else {
        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);
    },
    remove() {
      this.$refs.mainTable;
    },

    remoteBefore(vNode, remoteUrl) {},
  },
};
</script>

<style lang="less">
.c_table {
  .scrollbar {
    z-index: 2;
  }
}
.plan-table {
  .ant-table-header {
    .ant-table-selection {
      display: none;
    }
  }
}
</style>