<template>
  <div>
    <!-- 列表 -->
    <AutoResizer :given-height="220">
      <template #default="{ height }">
        <el-table
          v-if="columnsList.length > 0"
          v-loading="loading"
          :height="height"
          :data="list"
          :summary-method="getSummaries"
          show-summary
          border
        >
          <el-table-column
            type="index"
            width="50"
            align="center"
            fixed="left"
          />
          <el-table-column
            v-if="columnsList[4].visible"
            :key="Math.random()"
            label="销售出库单号"
            align="center"
            prop="saleOutNo"
            width="200"
            fixed="left"
          />
          <el-table-column
            v-if="columnsList[5].visible"
            :key="Math.random()"
            label="销售单号"
            align="center"
            prop="saleOrderNo"
            width="120"
            show-overflow-tooltip
          />
          <el-table-column
            v-if="columnsList[6].visible"
            :key="Math.random()"
            label="物料编码"
            align="center"
            prop="materialNo"
            width="120"
            show-overflow-tooltip
          />
          <el-table-column
            v-if="columnsList[7].visible"
            :key="Math.random()"
            label="物料名称"
            align="center"
            prop="materialName"
            width="100"
            show-overflow-tooltip
          />
          <el-table-column
            v-if="columnsList[8].visible"
            :key="Math.random()"
            label="客户名称"
            align="center"
            prop="customerName"
            width="120"
            show-overflow-tooltip
          />
          <el-table-column
            v-if="columnsList[9].visible"
            :key="Math.random()"
            label="箱号"
            align="center"
            prop="boxNo"
            width="170"
          />
          <el-table-column
            v-if="columnsList[10].visible"
            :key="Math.random()"
            label="计划数量"
            align="center"
            prop="planQty"
          />
          <el-table-column
            v-if="columnsList[11].visible"
            :key="Math.random()"
            label="装箱数量"
            align="center"
            prop="boxQty"
          />
          <el-table-column
            v-if="columnsList[12].visible"
            :key="Math.random()"
            label="单位"
            align="center"
            prop="unitCode"
            width="100"
          />
          <el-table-column
            v-if="columnsList[13].visible"
            :key="Math.random()"
            label="创建人"
            align="center"
            prop="creator"
          />
          <el-table-column
            v-if="columnsList[14].visible"
            :key="Math.random()"
            label="创建时间"
            align="center"
            prop="createTime"
            width="160"
          >
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.createTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            align="center"
            class-name="small-padding fixed-width"
            width="100"
            fixed="right"
          >
            <template slot-scope="scope">
              <el-button
                v-hasPermi="['wms:sale-out-order:update']"
                size="mini"
                type="text"
                icon="el-icon-view"
                @click="handleDetails(scope.row)"
                >出库明细</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </template>
    </AutoResizer>

    <!-- 分页组件 -->
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNo"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
// import { getSaleOutedPage } from '@/api/wms/output/salesIssue'
import { getSaleOutDetailPage } from "@/api/wms/inquirePurchase/complexDocuments";
import { getFormColumnsList } from "@/api/system/saveColumns/index";
import { mapGetters } from "vuex";
import { isArray } from "min-dash";

export default {
  name: "SaleOutOrder",
  components: {},
  inject: ["paramsQuery"],
  data() {
    return {
      // 遮罩层
      loading: true,
      // 导出遮罩层
      exportLoading: false,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // wms销售出库单主列表
      list: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 高级查询
      advParams: {},
      // 查询参数
      queryParams: {
        pageNo: 1,
        pageSize: 10,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        saleOrderDetailId: [
          {
            required: true,
            message: "关联销售单明细表ID不能为空",
            trigger: "blur",
          },
        ],
        saleOutNo: [
          { required: true, message: "销售出库单号不能为空", trigger: "blur" },
        ],
      },
      // 显示隐藏列参数
      columns: [
        { key: 0, label: "出货单号", visible: true },
        { key: 1, label: "客户名称", visible: true },
        { key: 2, label: "销售状态", visible: true },
        { key: 3, label: "交货日期", visible: true },
        { key: 4, label: "销售出库单号", visible: true },
        { key: 5, label: "销售单号", visible: true },
        { key: 6, label: "物料编码", visible: true },
        { key: 7, label: "物料名称", visible: true },
        { key: 8, label: "客户名称", visible: true },
        { key: 9, label: "箱号", visible: true },
        { key: 10, label: "计划数量", visible: true },
        { key: 11, label: "装箱数量", visible: true },
        { key: 12, label: "单位", visible: true },
        { key: 13, label: "创建人", visible: true },
        { key: 14, label: "创建时间", visible: true },
      ],
      // 显示隐藏持久化参数
      columnsList: [],
    };
  },
  // 获取当前登录用户id
  computed: {
    ...mapGetters(["userId"]),
  },
  created() {
    this.getColumnsList();
    this.getList();
  },
  methods: {
    // 小数点问题处理
    getHandleTotalNumber(val) {
      return Math.round(parseFloat(val) * 100000000) / 100000000;
    },
    // 总计
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "总计";
          return;
        }
        const values = data.map((item) => Number(item[column.property])) || [];
        if (column.property === "boxQty" || column.property === "planQty") {
          sums[index] = values.reduce((acc, cur) => {
            const value = Number(cur);
            if (!isNaN(value)) {
              return this.getHandleTotalNumber(acc + cur);
            } else {
              return this.getHandleTotalNumber(acc);
            }
          }, 0);
          sums[index];
        }
      });
      return sums;
    },
    /** 查询列表 */
    getList() {
      this.loading = true;
      // 执行查询
      const params = {
        ...this.paramsQuery,
        ...this.queryParams,
        ...this.advParams,
      };
      getSaleOutDetailPage(params)
        .then((response) => {
          this.list = response.data.list;
          this.total = response.data.total;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNo = 1;
      this.getList();
    },
    // 出库明细 sales-in-out /entry-exit
    handleDetails(row) {
      const { saleOrderNo } = row;
      this.$router.push({
        path: "/entry-exit/sales-in-out/sale-out-order-detail",
        query: { saleOrderNo },
      });
    },
    // 获取显示隐藏列
    getColumnsList() {
      const { componentName } = this.$route.meta || null;
      const params = {
        userId: this.userId,
        vueForm: componentName,
      };
      getFormColumnsList(params)
        .then((res) => {
          if (isArray(res.data)) {
            this.columnsList = res.data.length === 0 ? this.columns : res.data;
          } else {
            this.columnsList = this.columns;
          }
        })
        .catch((err) => {
          if (err) {
            this.columnsList = this.columns;
          }
        })
        .finally(() => {
          this.$emit("columns", this.columnsList);
        });
    },
  },
};
</script>
