/*
 *@description:表格
 *@author: hudw
 *@date: 2022-03-14 15:14:53
*/
<template>
  <vxe-table
    border
    :row-config="{ isHover: true }"
    @checkbox-change="checkboxChange"
    :checkbox-config="{
      checkMethod: checCheckboxkMethod,
      checkStrictly: true,
      checkField: 'checked',
      trigger: 'row',
    }"
    :loading="loading"
    size="small"
    resizable
    :row-class-name="rowClassName"
    ref="t1_table"
    show-footer
    :footer-method="footerMethod"
    :footer-span-method="colspanMethod"
    :height="vxeMaxHeight"
    row-id="id"
    :data="dataSource"
    :tree-config="treeConfig"
  >
    <vxe-column v-for="(column, index) in vxe_t_1_column" :key="index" v-bind="column">
      <template v-if="column.field === 'groupName'" #default="{ row }">
        <a-space>
          <a-button  v-if="actiovOrderItme && actiovOrderItme.uuData[row.id]"  type="dashed" class="vx-table-circle" shape="circle" icon="delete" @click.stop="removeGroupRow(row)" />
          {{ row.groupName }}
          <a-badge v-if="row.recordTagWord" :numberStyle="{ boxShadow: 'none' }" recordTgWord :count="row.recordTagWord" :overflowCount="Infinity"></a-badge>
        </a-space>
      </template>
      <template v-else-if="column.field === 'oderQty'" #default="{ row }">
        <span :style="!row.pId ? 'color:#2b80ff' : 'color:#ccc'"> {{ customOderQty(row.oderQty, row) }}</span>
      </template>
    </vxe-column>

    <a-modal :okButtonProps="{ props: { disabled: !t1_checkedList.length } }" :confirmLoading="confirmLoading" v-model="t1_visible" title="选择分组" ok-text="确认" cancel-text="取消" @ok="hideModal">
      <a-checkbox-group v-model="t1_checkedList" style="width: 100%">
        <a-row :gutter="10">
          <a-col :span="6" style="margin-bottom: 10px" v-for="item in GROUP_DISPATCH_PLAN" :key="item.value">
            <a-checkbox :value="item.value">{{ item.label }}</a-checkbox>
          </a-col>
        </a-row>
      </a-checkbox-group>
    </a-modal>
  </vxe-table>
</template>
<script>
import setMainColumns from './tableConfig';
import { getChildrenShipbill } from '../api';
import { customRow } from '@/blocks/components/scheduling/js/table/tableConfig.js';
import vxe_table from './vxe_table.mixins.js';
import { vxe_setColumns } from './vxe_tableConfig.js';
export default {
  mixins: [vxe_table],

  name: 'mainTable',
  props: {
    doneBefore: { type: Function },
    cache: {
      type: Object,
    },
    actiovOrderItme: {
      type: null,
    },
    loading: {
      type: null,
    },
    options: {
      type: Object,
      default: () => {},
    },
    getForm: {
      type: Function
    },
    selectedRowKeys: {
      type: Array,
      default: () => [],
    },
    orderList: {
      type: Array,
    },
    disabledIds: {
      type: Array,
    },
    dataSource: {
      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;
    this.vxe_t_1_column = vxe_setColumns(this);

    return {
      t1_visible:false,
      confirmLoading:false,
      expandedRowKeys: [],
      selectedRows: [],
    };
  },
  mounted() {
    //this.init();
  },
  watch: {},
  computed: {

  },
  methods: {
    delRowItem(key) {
      this.$refs.mainTable.delRowItem(key);
    },

    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();
      }
    },


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

    reload(args) {
      return this.$refs.mainTable.reload(args);
    },

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

<style lang="less">
.vx-table-circle {
  margin: 0 -3px;
}

.vertical-transfer {
  &.no-footer {
    .ant-transfer-list-footer {
      border-top: 0;
    }
  }
}

.ts-transfer {
  &.ant-transfer-customize-list .ant-transfer-list {
    width: 180px;
  }
}

.order-active {
  background-color: #f0f8ff;
  border: 1px solid #a6d2ff;
}
.ant-transfer-disabled {
  .p-table {
    opacity: 0.7;
  }
  .ant-table-fixed-header > .ant-table-content > .ant-table-scroll > .ant-table-body,
  .ant-table-placeholder {
    background: transparent;
  }
}

.vertical-transfer {
  .ant-transfer-list-body-customize-wrapper {
    padding: 0;
    height: 100%;
    margin: -1px;
  }
  flex-direction: column;
  height: 100%;
  .ant-transfer-list {
    flex: 1;
  }
  .ant-transfer-list-body {
    overflow-x: hidden;

    overflow-y: auto;
  }
  &.ant-transfer-customize-list .ant-transfer-operation {
    display: flex;
    width: 100%;
    justify-content: center;
    padding: 10px 0 8px;
    .anticon-right,
    .anticon-left {
      transform: rotate(90deg);
    }
    .ant-btn:first-child {
      margin-right: 10px;
    }
  }

  .table-body-height {
    .ant-table-placeholder {
      // display: none;
      border-left: 0;
      border-right: 0;
      border-bottom: 0;
    }
    .ant-table-body {
      // max-height: 330px;
      // min-height: 330px;
      overflow-y: auto;
    }
    .ant-pagination.ant-table-pagination li {
      &:last-child {
        display: none;
      }
    }
  }
}
</style>