/*
 *@description:编辑
 *@author: hudw
 *@date: 2022-04-26 16:41:46
*/
<template>
  <p-card class="full-card-panel" :bordered="false" ref="card" :loading="pageLoad">
    <a-space slot="extra">
      <p-button @click="back(record && record.id, false)">取消</p-button>
    </a-space>
    <a-space slot="title">
      <a-icon type="arrow-left" @click="back(record && record.id, false)" :style="{ color: '#08c' }" />
      {{ title }}
    </a-space>
    <p-grid-form selfUpdate @submit="searchSubmit" class="p-grid-view" ref="grid" :items="formItems" :span="6" :labelCol="{ span: 6 }" :wrapperCol="{ span: 16 }"></p-grid-form>

    <p-card :bordered="false" :title="`容器总数：${countList.containersNumbers} 托盘：${countList.palletsNumbers}   周转箱：${countList.totesNumbers} `" style="margin-top: 20px">
           <!-- <a-statistic title="容器总数" :value="countList.containersNumbers" />
            <a-statistic title="托盘" :value="countList.palletsNumbers" />
            <a-statistic title="周转箱" :value="countList.totesNumbers" /> -->
      <p-table
        bordered
        :customScrollbar="true"
        :scroll="{ x: true }"
        :id="$route.meta.menuId + '_details_table'"
        :autoLoad="false"
        ref="table"
        :remoteBefore="remoteBefore"
        rowKey="_row_count"
        :rowSelectType="false"
        :selectedRowKeys.sync="selectedRowKeys"
        :columns="columns"
        :remoteUrl="remoteUrl"
        :dataSource.sync="details"
        :pagination="20"

        @clickRow="handleRowClick"
        dragle
      >
        <a-space slot="operation" slot-scope="value, record">

          <a href="javascript:;" :disabled="![3].includes(record.status)" @click.stop="handel(record, '取消')">取消</a>
          <a href="javascript:;" :disabled="![3].includes(record.status)" @click.stop="handel(record, '修改')">修改</a>
          <a href="javascript:;" @click.stop="handel(record, '签收')">签收</a>
        </a-space>
      </p-table>
    </p-card>
    <p-card :bordered="false" :title="`容器明细 托盘：${countListDetail.palletsNumbers}  周转箱：${countListDetail.totesNumbers}`" style="margin-top: 20px">
      <p-table
        bordered
        :autoLoad="false"
        :customScrollbar="true"
        rowKey="_row_count"
        ref="table_2"
        :scroll="{ x: true }"
        :rowSelectType="false"
        :columns="columns_2"
        :remoteUrl="remoteUrl2"
        :dataSource.sync="details_2"
        :pagination="false"
        dragle
      >
        <a-space slot="operation" slot-scope="value, record">
          <a href="javascript:;" :disabled="record.abnormalStatus == 0" @click.stop="handel(record, '异常处理')">异常处理</a>
        </a-space>
      </p-table>
    </p-card>
  </p-card>
</template>
<script>
import viewGetFormList from './viewGetFormList.js';
import { setColumns } from './containerTable.js';
import { setContinerColumns } from '../mainTable/tableConfig';
import { getContainerBillReturnCount, mainTableInfoUrl3, detailsTableUrl, containerCaancel } from '../api';
function infoCount() {
  return {
    containersNumbers: 0,
    palletsNumbers: 0,
    totesNumbers: 0,
  };
}
function infoCountDetail() {
  return {
    palletsNumbers: 0,
    totesNumbers: 0,
  };
}
export default {
  inheritAttrs: false,
  components: {},
  data() {
    this.remoteUrl = {
      method: 'post',
      url: mainTableInfoUrl3,
    };
    this.remoteUrl2 = {
      method: 'post',
      url: detailsTableUrl,
    };
    return {
      ...this.$attrs,
      countList: infoCount(),
      countListDetail: infoCountDetail(),
      btnLoad: false,
      shipbillId: '',
      dataView: null,
      load: true,
      pageLoad: false,
      formItems: viewGetFormList(this),
      columns: setColumns(this),
      columns_2: setContinerColumns(this),
      selectedRowKeys: [],
      details: [], //
      details_2: [], //
      affixed: true, //
    };
  },

  props: {
    options: {
      //字典
      type: Object,
      default: () => {
        return {};
      },
    },

    record: {
      type: null,
    },
    st: {
      type: Number,
      default: 1,
    },
    title: {
      type: null,
    },
    formName: {
      type: null,
      default: 'main',
    },
  },
  mounted() {},
  watch: {
    st(v) {
      if (v === 2) {
        this.reload();
      }
    },
    record(value) {
      let form = this.form();
      form && form.resetFields();

      if (!value) {
        this.shipbillId = '';
        return;
      }
      // this.getView(value.shipbillId)
    },
  },

  methods: {
    handleRowClick(event, key, data) {
      event?.stopPropagation();

      // "containerType": 1,//托盘
      // "containerType": 2,//周转箱


      if (key) {
        this.countListDetail = infoCountDetail();

        this.$refs.table_2.reload({ data: { containerBillNo: data.containerBillNo } }).then( (res)=> {

          if (res.success) {
            res.data.forEach((item, inde) => {
              console.log( this.countListDetail)
              if (item.containerType === 1) {

                this.countListDetail.palletsNumbers+=1
              } else if (item.containerType === 2) {
                this.countListDetail.totesNumbers+=1
              }

            },this);

          }


        });
      } else {
        this.details_2 = [];
      }
    },

    searchSubmit(event) {
      event.preventDefault();
      this.reload();
    },
    remoteBefore(vNode, remoteUrl) {
      let value = this.$refs.grid.form.getFieldsValue();
      remoteUrl.data = { ...value, ...remoteUrl.data };

      this.$nextTick(() => {
        getContainerBillReturnCount(this, remoteUrl.data, (data) => {
          this.countList = { ...this.countList, ...data };
        });
      });
    },
    form() {
      let { st, formName } = this.$attrs;
      if (this.$refs.form.$refs[formName]) {
        return this.$refs.form.$refs[formName].form;
      }
      return undefined;
    },

    handel(record, name) {
      if (name == '修改') {
        this.$emit('edit', record);
      } else if (name == '异常处理') {
        this.$emit('abnormal', record);
      } else if (name == '签收') {
        this.$emit('receipted', record);
      } else if (name == '取消') {
        containerCaancel(this, [{ containerBillNo: record.containerBillNo }]);
      }
    },

    reload(args) {
      this.details_2 = [];
      this.countListDetail = infoCountDetail();
      this.countList = infoCount();

      this.$refs.table.reload(args);
    },
    back(id, isReload = true) {
      this.$emit('back', this.formName, id, isReload);
      let form = this.form();
      form && form.resetFields();
      this.details = [];
    },

    form() {
      if (this.$refs.grid) {
        return this.$refs.grid.form;
      }
      return undefined;
    },
  },
};
</script>
<style lang="less" >
.p-grid-view {
  .plg-grid-from .form-item-flex-wrapper .form-item-children-wrapper {
    flex: 0;
  }

  .time {
    display: none;
  }
}
</style>