<template>
  <div>
    <!-- 运费录入 -->
    <p-card title="波次进度查询">
      <p-grid-form ref="form" :span="8" :items="config.items" @submit="hanlderSubmit" />
      <!-- <div class="waring">请谨慎填写,保存后不能修改!</div> -->
      <p-table
        ref="table"
        row-key="waveNo"
        bordered
        :autoLoad="false"
        :remoteUrl="config.remoteUrl"
        :columns="columns"
        :remoteParams="remoteParams"
        :rowSelectType="false"
        :dataSource="data"
        :scroll="{ x: true }"
      >
        <template slot="replenishmentCompleted" slot-scope="text, record">
          <a-progress size="small" :percent="(record.replenishmentCompleted / record.replenishmentAll) * 100 || 0" />
        </template>
        <template slot="pickingCompleted" slot-scope="text, record">
          <a-progress size="small" :percent="(record.pickingCompleted / record.orderWaveNum) * 100 || 0" />
        </template>
        <template slot="reviewPackagingCompleted" slot-scope="text, record">
          <a-progress size="small" :percent="(record.reviewPackagingCompleted / record.orderWaveNum) * 100 || 0" />
        </template>
        <template slot="thereView" slot-scope="text, record">
          <a-progress size="small" :percent="(record.thereView / record.orderWaveNum) * 100 || 0" />
        </template>
        <template slot="thereView" slot-scope="text, record">
          <a-progress size="small" :percent="(record.thereView / record.orderWaveNum) * 100 || 0" />
        </template>
      </p-table>
    </p-card>
  </div>
</template>

<script>
import config from "./config.js";
import pick from "lodash.pick";
import { queryFreightEnter, saveFreightEnter } from "./api";
import { diffOption } from "@/views/kzyWMS/utils/index.js";
export default {
  data() {
    return {
      columns: [],
      config: config(this),
      data: [],
      type: true,
      remoteParams: {},
      visible: false,
      confirmLoading: false,
    };
  },
  mounted() {
    // this.getinfo();
    console.log(this.$store.state.user.warehouse);
  },
  created() {
    diffOption(this.config.columns).then((res) => {
      this.columns = res;
    });
  },
  methods: {
    print() {},
    hanlderSubmit(e, form) {
      e.preventDefault();
      form.validateFields((error, values) => {
        if (!error) {
          console.log(error, values, "valuesvaluesvaluesvaluesvalues");
          this.remoteParams = { ...this.remoteParams, ...values };
          //   this.getinfo();
        }
      });
    },
    async getinfo() {
      this.$refs.form.form.validateFields(async (error, values) => {
        if (!error) {
          console.log(values, "valuesvaluesvaluesvaluesvalues");

          try {
            let res = await queryFreightEnter({ ...values, ...this.$store.state.user.warehouse });
            console.log(res);
            if (res.success) {
              this.data = res.data;
              //   this.$message.success(res.message);
              //   this.remoteParams = { ...this.remoteParams };
            } else {
              this.$exception(res);
            }
          } catch (error) {
            this.$exception(error);
          }
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.waring {
  padding: 15px;
  text-align: center;
  font-size: 28px;
  color: red;
  line-height: 50px;
}
</style>
