<template>
  <div class="main">
    <div v-loading="dataLoading" class="full n-app-container bg-w">
      <div style="margin: 10px 0">
        <el-tabs v-model="listTablName" @tab-click="handleClick">
          <el-tab-pane name="all">
            <span slot="label">所有({{ orderQtyDtos.all }})</span>
          </el-tab-pane>
          <el-tab-pane name="print">
            <span slot="label">未打印({{ orderQtyDtos.PrintQty }})</span>
          </el-tab-pane>
          <el-tab-pane name="noPick">
            <span slot="label">未拣货({{ orderQtyDtos.NoPickQty }})</span>
          </el-tab-pane>
          <el-tab-pane name="pick">
            <span slot="label">已拣货({{ orderQtyDtos.PickQty }})</span>
          </el-tab-pane>
          <el-tab-pane name="check">
            <span slot="label">已校验({{ orderQtyDtos.CheckQty }})</span>
          </el-tab-pane>
        </el-tabs>
        <div style="height: 220px">
          <el-row :gutter="19">
            <el-col :span="8">
              <el-form>
                <el-form-item>
                  <el-input
                    v-model="pagerDto.SearchNumber"
                    type="textarea"
                    :rows="10"
                    resize="none"
                    placeholder="支持客户单号、服务商单号、行运易单号，请录入每行一个单号，最多可以输入500行数据"
                  />
                </el-form-item>
              </el-form>
            </el-col>
            <el-col :span="16">
              <el-form>
                <el-form-item
                  label="下单渠道"
                  style="float: left; margin: 0 10px"
                >
                  <el-select
                    v-model="pagerDto._Eq_PublicChannelName"
                    style="width: 290px"
                    placeholder="下单渠道"
                    clearable
                    filterable
                  >
                    <el-option
                      v-for="item in channels"
                      :key="item.Name"
                      :label="item.Name"
                      :value="item.Name"
                    />
                  </el-select>
                </el-form-item>

                <el-form-item
                  label="客    户"
                  style="float: left; margin: 0 10px"
                >
                  <el-select
                    v-model="pagerDto._Eq_CustomerId"
                    placeholder="所属客户"
                    clearable
                    filterable
                    style="width: 290px"
                  >
                    <el-option
                      v-for="item in Customers"
                      :key="item.Id"
                      :label="item.CompanyName"
                      :value="item.Id"
                    />
                  </el-select>
                </el-form-item>
                <el-form-item
                  label="派送渠道"
                  style="float: left; margin: 0 10px"
                >
                  <el-select
                    v-model="pagerDto._Eq_ChannelName"
                    placeholder="派送渠道"
                    style="width: 290px"
                    clearable
                    filterable
                  >
                    <el-option
                      v-for="item in delvierChannels"
                      :key="item.Name"
                      :label="item.Name"
                      :value="item.Name"
                    />
                  </el-select>
                </el-form-item>
                <el-form-item
                  label="提交时间"
                  style="float: left; margin: 0 10px"
                >
                  <el-date-picker
                    v-model="pagerDto._Range_CreateTime"
                    type="daterange"
                    style="width: 290px"
                    range-separator="~"
                    start-placeholder="提交时间开始"
                    value-format="yyyy-MM-dd"
                    end-placeholder="提交时间结束"
                  />
                </el-form-item>
                <el-form-item
                  label="打印时间"
                  style="float: left; margin: 0 10px"
                >
                  <el-date-picker
                    v-model="pagerDto._Range_PrintTime"
                    type="daterange"
                    style="width: 290px"
                    range-separator="~"
                    start-placeholder="打印时间开始"
                    value-format="yyyy-MM-dd"
                    end-placeholder="打印时间结束"
                  />
                </el-form-item>
                <el-form-item
                  label="拣货时间"
                  style="float: left; margin: 0 10px"
                >
                  <el-date-picker
                    v-model="pagerDto._Range_PickEndTime"
                    type="daterange"
                    style="width: 290px"
                    range-separator="~"
                    start-placeholder="拣货时间开始"
                    value-format="yyyy-MM-dd"
                    end-placeholder="拣货时间结束"
                  />
                </el-form-item>
                <el-form-item
                  label="物品数量大于等于"
                  style="float: left; margin: 0 10px"
                >
                  <el-input-number
                    v-model="pagerDto._GrE_GoodsQty"
                    class="n1"
                    controls-position="right"
                    style="width: 290px"
                  />
                </el-form-item>
                <el-form-item
                  label="物品数量小于等于"
                  style="float: left; margin: 0 10px"
                >
                  <el-input-number
                    v-model="pagerDto._LeE_GoodsQty"
                    class="n2"
                    controls-position="right"
                    style="width: 290px"
                  />
                </el-form-item>
              </el-form>
              <div style="clear: both" />
              <div
                style="text-align: left; margin-top: 20px; margin-left: 10px"
              >
                <el-form>
                  <el-button type="primary" size="medium" @click="pagerSerach()"
                    >查询</el-button
                  >
                  <el-button>重置</el-button>
                </el-form>
              </div>
            </el-col>
          </el-row>
          <div style="margin-top: 40px">
            <div slot="header" class="clearfix">
              <el-button
                v-if="pagerDto._Eq_PickStatus != '10000'"
                @click="outData()"
                >导出</el-button
              >
              <el-button
                v-if="pagerDto._Eq_PickStatus == '1'"
                @click="printPdf()"
                >打印</el-button
              >
              <el-button
                type="danger"
                v-if="
                  pagerDto._Eq_PickStatus == '1' ||
                  pagerDto._Eq_PickStatus == '2'
                "
                @click="deletePick()"
                :loading="deletePickLoading"
                >撤销</el-button
              >
            </div>
            <el-table
              v-loading="dataLoading"
              :highlight-current-row="true"
              :select-on-indeterminate="true"
              border
              aria-checked=""
              :data="data"
              width="100%"
              style="margin-top: 20px"
              height="370"
              @selection-change="onSelection"
            >
              <el-table-column key="Id" prop="Id" type="selection" />
              <el-table-column
                prop="TrackingNumber"
                label="运单号"
                width="300"
              />
              <el-table-column
                prop="CustomerOrderNo"
                label="客户单号"
                width="300"
              />
              <el-table-column prop="SystemNo" label="中转单号" width="200" />
              <el-table-column prop="SKUQty" label="SKU数量" />
              <el-table-column prop="GoodsQty" label="物品数量" />
              <el-table-column prop="ChannelName" label="下单渠道" />
              <el-table-column prop="PublicChannelName" label="服务渠道" />
              <el-table-column prop="StrPickStatus" label="拣货状态" />
              <el-table-column prop="Customer" label="客户" />
              <el-table-column prop="CreateTime" label="提交时间" />
              <!-- <el-table-column prop="PrintTime" label="打印时间" />
              <el-table-column prop="PickEndTime" label="拣货时间" /> -->
            </el-table>
            <el-pagination
              :page-sizes="[10, 20, 40, 100, 400]"
              :current-page="pagerDto.PageIndex"
              :page-size.sync="pagerDto.PageSize"
              background
              layout="prev, pager, next ,total ,jumper,sizes,slot "
              :total="pagerDto.total"
              @size-change="changePager"
              @current-change="pagerSerach"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import BaseList from "@/components/Xyy/baselist";
import { _getCustomers, _getChannel, _getDeliverChannel } from "@/api/baseInfo";
import {
  _getPicks,
  _getPrintUrl,
  _getCounts,
  _out,
  _deletePick,
} from "@/api/order/pick";
export default {
  name: "PickOrder",
  components: { "base-list": BaseList },
  data() {
    return {
      data: [],
      dataLoading: false,
      listTablName: "all",
      deletePickLoading: false,
      orderQtyDtos: {
        all: 0,
        PrintQty: 0,
        NoPickQty: 0,
        PickQty: 0,
        CheckQty: 0,
      },
      channels: [],
      delvierChannels: [],
      Customers: [],
      selectIds: "",
      pagerDto: {
        PageIndex: 0,
        PageSize: 10,
        total: 0,
        _Eq_SearchNumberList: [],
        SearchNumber: "",
      },
    };
  },
  mounted() {
    _getCustomers().then((response) => {
      this.Customers = response;
      this.pagerSerach(1);
    });
    _getChannel().then((res) => {
      this.channels = res;
    });
    _getDeliverChannel().then((res) => {
      this.delvierChannels = res;
    });
  },
  methods: {
    outData() {
      _out(this.pagerDto);
    },
    handleClick(t, event) {
      if (t.index == 0) {
        this.pagerDto._Eq_PickStatus = "";
      } else if (t.index == 1) {
        this.pagerDto._Eq_PickStatus = "1";
      } else if (t.index == 2) {
        this.pagerDto._Eq_PickStatus = "2";
      } else if (t.index == 3) {
        this.pagerDto._Eq_PickStatus = "3";
      } else if (t.index == 4) {
        this.pagerDto._Eq_PickStatus = "4";
      }
      this.pagerSerach();
    },
    printPdf() {
      if (this.selectIds != "") {
        _getPrintUrl(this.selectIds).then((r) => {
          this.pagerSerach();
          window.open(r);
        });
      } else {
        this.$alert("必须勾选需打印的单号");
      }
    },
    deletePick() {
      if (this.selectIds == "") {
        this.$message({ type: "warning", message: "请先勾选需撤销的拣货单" });
        return false;
      }
      this.$confirm("是否撤销该拣货单?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(() => {
          this.deletePickLoading = true;
          _deletePick(this.selectIds).then((data) => {
            this.$message({
              dangerouslyUseHTMLString: true,
              type: "info",
              message: data.length > 0 ? data.join("<br/>") : "撤销成功!",
            });
            this.pagerSerach();
          });
        })
        .catch(() => {})
        .finally(() => {
          this.deletePickLoading = false;
        });
    },
    onSelection(s) {
      var ids = [];
      for (let i = 0; i < s.length; i++) {
        ids.push(s[i].Id);
      }
      this.selectIds = ids.join(",");
    },
    pagerSerach(index) {
      this.pagerDto._Eq_SearchNumberList = [];
      if (index) {
        this.pagerDto.PageIndex = index;
      } else {
        this.pagerDto.PageIndex = 1;
      }
      if (this.pagerDto.SearchNumber != "") {
        this.pagerDto._Eq_SearchNumberList = this.pagerDto.SearchNumber.replace(
          /\r/g,
          ","
        )
          .replace(/\n/g, ",")
          .replace(/\r\n/g, ",");
      }
      this.dataLoading = true;
      _getPicks(this.pagerDto)
        .then((res) => {
          for (var i = 0; i < res.Result.length; i++) {
            var r = res.Result[i];
            var d = this.Customers.filter((x) => x.Id == r.CustomerId);
            if (d && d.length > 0) {
              r.Customer = d[0].CompanyName;
            }
          }
          this.data = res.Result;
          this.pagerDto.total = res.TotalCount;
        })
        .finally((res) => {
          this.dataLoading = false;
        });
      _getCounts(this.pagerDto).then((res) => {
        this.orderQtyDtos.all = 0;
        this.orderQtyDtos.PrintQty = 0;
        this.orderQtyDtos.NoPickQty = 0;
        this.orderQtyDtos.PickQty = 0;
        this.orderQtyDtos.CheckQty = 0;
        for (var i = 0; i < res.length; i++) {
          var status = res[i].PickStatus;
          this.orderQtyDtos.all += res[i].Qty;
          if (status <= 0) {
            this.orderQtyDtos.cancel += res[i].Qty;
          } else if (status == 1) {
            this.orderQtyDtos.PrintQty = res[i].Qty;
          } else if (status == 2) {
            this.orderQtyDtos.NoPickQty = res[i].Qty;
          } else if (status == 3) {
            this.orderQtyDtos.PickQty = res[i].Qty;
          } else if (status == 4) {
            this.orderQtyDtos.CheckQty = res[i].Qty;
          }
        }
      });
    },
    changePager(v) {
      this.PageSize = v;
      this.pagerSerach();
    },
  },
};
</script>
<style scoped>
.bg-w {
  background: white;
}
.full {
  margin: 0 20px;
}
.main {
  background: #f3f3f3;
}
</style>
