<template>
  <div>
    <el-card class="el-card">
      <el-form :model="query" label-width="100px" v-show="showSearch">
        <el-row style="width: 100%">
          <el-col :span="6">
            <el-form-item label="单号:">
              <el-input v-model="query.billNo" style="width: 90%" placeholder="请输入单号" clearable></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="6">

            <el-form-item label="状态：" prop="inCodeStatus" clearable>
              <el-select v-model="query.inCodeStatus" style="width: 90%">
                <el-option label="未打印" value="1"></el-option>
                <el-option label="已打印" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <!--          <el-col :span="8">-->
          <!--            <el-form-item label="送货单位:">-->
          <!--              <el-input v-model="query.corpName" style="width: 90%" placeholder="请输入送货单位" clearable></el-input>-->
          <!--            </el-form-item>-->
          <!--          </el-col>-->

          <el-col :span="6">
            <el-form-item class="query-form-item" label="单据类型:">
              <el-select v-model="query.action" placeholder="请选择单据类型"
                         style="width: 90%"
                         clearable>
                <el-option
                  v-for="item in busTypes"
                  :key="item.name"
                  :label="item.name"
                  :value="item.action">
                  <span style="float: left">{{ item.name }}</span>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="创建时间:">
              <el-date-picker
                :picker-options="pickerOptions"
                v-model="actDateRange"
                type="daterange"
                format="yyyy 年 MM 月 dd 日"
                style="width: 90%"
                value-format="yyyy-MM-dd"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>

        </el-row>

      </el-form>


      <div class="top-right-btn">
        <el-button-group style="display:flex;">
          <el-button icon="el-icon-view" type="primary" @click="hideSearch">显示/隐藏搜索栏</el-button>
          <el-button type="primary" icon="el-icon-refresh" @click="onReset">重置</el-button>
          <el-button type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>
        </el-button-group>
      </div>

      <el-divider style="margin: 15px"></el-divider>


      <el-table v-loading="loading" :data="list" style="width: 100%;" border highlight-current-row
                @row-click="getStockOrderDetailList" ref="multipleTable">
        <el-table-column type="selection" width="55">
        </el-table-column>
        <el-table-column type="index" label="序号" width="50"></el-table-column>
        <el-table-column label="单据号" prop="billNo" width="140" show-overflow-tooltip></el-table-column>
        <el-table-column label="单据类型" prop="billTypeName" width="120">
        </el-table-column>
        <el-table-column label="创建时间" prop="createTime" width="150"></el-table-column>
        <el-table-column label="打印状态" width="100" prop="inCodeStatus">
          <template slot-scope="scope">
            <span>{{ enableMap[scope.row.inCodeStatus] }}</span>
          </template>
        </el-table-column>
        <el-table-column label="采购部门" prop="deptName" width="120">
        </el-table-column>
        <el-table-column label="收货仓库" prop="invName" width="150">
        </el-table-column>
        <el-table-column label="单据来源" prop="fromType" width="120">
          <template slot-scope="scope">
            <span>{{ sourceMap[scope.row.fromType] }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click.native="qrcodeDetail(scope.row)"
            >内部码
            </el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="total>0"
        :total="total"
        :limit.sync="query.limit"
        :page.sync="query.page"
        @pagination="handleCurrentChange"
      ></pagination>

    </el-card>

    <el-card class="el-card">
      <el-table v-loading="detailLoading" :data="detailList" style="width: 100%" border>
        <el-table-column type="index" label="序号" width="50"></el-table-column>
        <el-table-column label="物资名称" prop="coName"></el-table-column>
        <el-table-column label="规格型号" prop="spec"></el-table-column>
        <el-table-column label="批次号" prop="batchNo"></el-table-column>
        <el-table-column label="单据数量" prop="count"></el-table-column>
        <el-table-column label="实际数量" prop="reCount"></el-table-column>
        <el-table-column label="生产日期" prop="productDate">
          <template slot-scope="scope">
            <span>{{ convertDateFun(scope.row.productDate) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="失效日期" prop="expireDate">
          <template slot-scope="scope">
            <span>{{ convertDateFun(scope.row.expireDate) }}</span>
          </template>
        </el-table-column>

        <el-table-column label="价格" prop="price"></el-table-column>
        <el-table-column label="生产企业" prop="ylqxzcrbarmc"></el-table-column>
        <el-table-column label="注册/备案凭证号" prop="zczbhhzbapzbh"></el-table-column>

      </el-table>

      <pagination
        v-show="detailTotal>0"
        :total="detailTotal"
        :limit.sync="detailQuery.limit"
        :page.sync="detailQuery.page"
        @pagination="detailHandleCurrentChange"
      ></pagination>
    </el-card>

    <el-dialog
      title="内部码详情"
      :visible.sync="qrcodeDetailVisible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      width="70%"
      append-to-body
      v-if="qrcodeDetailVisible"
      @close='closeQRCodeDetailDialog'
    >
      <stockOrderQRCodeDetail
        :closeDialog="closeQRCodeDetailDialog"
        :idQuery="idQuery"
      ></stockOrderQRCodeDetail>
    </el-dialog>

  </div>
</template>

<script>
import {
  stockOrderList, stockOrderDetail, deleteStockOrderById, deleteStockOrderDetailById,
  copyStockOrderDetail, submitStockOrder,
  uploadStockOrderDetail, uploadStockOrderDetailCount,
  generateStockOrderQRCodeText
} from "@/api/inout/stockOrder";
import stockOrderDistribution from "./stockOrderDistribution";
import stockOrderQRCodeDetail from "./stockOrderQRCodeDetail";
import stockQRCodeExport from "./stockQRCodeExport";
import draggable from "vuedraggable";
import {inspectionStockOrderPDFFromTemplateFile, stockOrderPDFFromTemplateFile} from "@/api/itextpdf/itextpdf";
import store from "@/store";
import {getLocalJoinBusType, getLocalJoinByUser} from "@/api/basic/busLocalType";
import {filterAll, filterAllByUser} from "@/api/system/invWarehouse";
import {filterSubByInv, findInvByUser} from '@/api/system/invSubWarehouse'
import {convertDate} from "@/utils/date"
import {filterOrder} from "@/api/inout/order";

export default {
  name: "stockOrder",
  data() {
    return {
      showSearch: true,
      convertDateFun: convertDate,
      query: {
        billType: null,
        corpName: null,
        locStorageCode: this.$store.getters.locInvCode,
        invWarehouseCode: this.$store.getters.locSubInvCode,
        billNo: "",
        status: "",
        page: 1,
        limit: 10,
        startTime: "",
        endTime: "",
        inCodeStatus: null,
      },
      detailQuery: {
        orderIdFk: "",
        page: 1,
        limit: 20
      },
      isSp: store.getters.customerId,
      storageList: [],
      subInvList: [],
      busTypes: [],
      list: [],
      detailList: [],
      total: 0,
      detailTotal: 0,
      loading: false,
      detailLoading: false,
      enableMap: {
        1: "已打印",
        0: "未打印",
      },
      sourceMap: {
        "1": "UDIMS平台",
        "2": "网页新增",
        "3": "pda已校验",
        "4": "pda未校验",
        "5": "pc端扫码精灵",
        "6": "单据流转",
        "7": "供应商平台",
        "8": "平衡补单",
        "9": "单据验收直接补单",
        "10": "单据复制",
        "11": "盘点单据转单",
        "12": "申购计划转单",
        "13": "领用单据转单",
        "14": "第三方单据转单",

      },
      idQuery: {
        id: "",
        filterUDIType: null,
      },
      distributionVisible: false,
      detailFormRules: {
        batchNo: [
          {required: true, message: "请输入批次号", trigger: "blur"}
        ],
        productDate: [
          {required: true, message: "请输入生产日期", trigger: "blur"}
        ],
        expireDate: [
          {required: true, message: "请输入失效日期", trigger: "blur"}
        ],
        sweepCount: [
          {required: true, message: "请输入扫码数量", trigger: "blur"}
        ]
      },
      detailFormVisible: false,
      detailFormData: {},
      detailFormLoading: false,
      haveDistributionVisible: true,
      qrcodeDetailVisible: false,
      qrcodeExportVisible: false,
      filterUDIType: true,
      actDateRange: [],
      auditDateRange: [],
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
    }
  },
  methods: {
    onReset() {
      this.$router.push({
        path: ""
      });
      this.query = {
        billNo: "",
        status: "",
        page: 1,
        limit: 10,
        startTime: "",
        endTime: "",
        locStorageCode: store.getters.customerId,
      };
      this.getList();

      this.haveDistributionVisible = true;
      this.actDateRange = [];
    },
    hideSearch() {
      this.showSearch = !this.showSearch;
    },
    onSubmit() {
      this.query.page = 1;
      if (this.actDateRange !== null) {
        this.query.startTime = this.actDateRange[0];
        this.query.endTime = this.actDateRange[1];
      } else {
        this.query.startTime = null;
        this.query.endTime = null;
      }

      if (this.auditDateRange !== null) {
        this.query.startAduditTime = this.auditDateRange[0];
        this.query.endAduditTime = this.auditDateRange[1];
      } else {
        this.query.startAduditTime = null;
        this.query.endAduditTime = null;
      }
      this.getList();
      this.haveDistributionVisible = true;
    },
    handleCurrentChange(val) {
      this.query.page = val.page;
      this.getList();
    },
    detailHandleCurrentChange(val) {
      this.detailQuery.page = val.page;
      this.getStockOrderDetailList();
    },
    // 刷新表单
    resetForm() {
      if (this.$refs["dataForm"]) {
        // 清空验证信息表单
        this.$refs["dataForm"].clearValidate();
        // 刷新表单
        this.$refs["dataForm"].resetFields();
        this.getList();
      }
    },
    getList() {
      this.loading = true;
      this.query.corpId = store.getters.customerId;
      if (this.actDateRange !== null) {
        this.query.startTime = this.actDateRange[0];
        this.query.endTime = this.actDateRange[1];
      } else {
        this.query.startTime = null;
        this.query.endTime = null;
      }
      this.query.vueType = "supDelivery";
      filterOrder(this.query)
        .then(response => {
          this.loading = false;
          if (response.code == 20000) {
            this.list = response.data.list || [];
            this.total = response.data.total || 0;
            this.detailList = [];
          } else {
            this.$message.error(response.message);
          }
        })
        .catch(() => {
          this.loading = false;
          this.list = [];
          this.detailList = [];
          this.total = 0;
        });
    },

    closeDialog(type) {
      this.distributionVisible = false;
      this.getList();
      if (this.$isNotBlank(type)) {
        this.detailList = [];
      }
    },


    qrcodeDetail(row) {
      this.idQuery.id = '';
      if (this.$isNotBlank(row.id)) {
        this.idQuery.id = row.id;
        this.idQuery.formData = row;
        this.idQuery.filterUDIType = this.filterUDIType;
        this.qrcodeDetailVisible = true;
      }
    },
    closeQRCodeDetailDialog() {
      this.qrcodeDetailVisible = false;
      this.getList();
    },
    getStockOrderDetailList(row) {
      if (this.$isNotBlank(row)) {
        this.detailQuery.orderIdFk = row.billNo;
      }
      this.detailLoading = true;
      stockOrderDetail(this.detailQuery)
        .then((response) => {
          this.detailLoading = false;
          this.detailList = response.data.list || [];
          this.detailTotal = response.data.total;
        })
        .catch(() => {
          this.detailLoading = false;
          this.detailList = [];
        });
    },
    getBusType() {
      let query = {
        enabled: true,
        vueType: "supDelivery",
      };
      getLocalJoinByUser(query)
        .then((response) => {
          this.busTypes = response.data.list || [];
          this.filterQuery.action = this.busTypes[0].action;
          // this.getList();
        })
        .catch(() => {
        });
    },
    getSubInvList() {
      findInvByUser()
        .then((response) => {
          this.subInvList = response.data || [];
        })
        .catch(() => {
        });
    },

    subInvChange() {
      this.getBusType();
    },
  },
  components: {
    draggable,
    stockOrderDistribution,
    stockOrderQRCodeDetail,
    stockQRCodeExport,
  },
  filters: {
    statusFilterType(status) {
      const statusMap = {
        0: "gray",
        1: "success"
      };
      return statusMap[status];
    },
    statusFilterName(status) {
      const statusMap = {
        "1": "草稿",
        "2": "未配货",
        "3": "待校验",
      };
      return statusMap[status];
    },
    typeFilterName(type) {
      const typeMap = {
        1: "预入库",
        2: "普通采购",
      };
      return typeMap[type];
    }
  },
  created() {
    // 加载表格数据
    this.getSubInvList();
    this.getBusType();
    this.getList();
  }
}
</script>

<style scoped>

</style>
