<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="业务类型:">
                        <el-select v-model="query.action" style="width: 90%" placeholder="请选择业务类型" clearable="true" size="mini">
                            <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-input v-model="query.corpName" style="width: 90%" placeholder="请输入往来单位" clearable></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="当前仓库:">
                        <el-select v-model="query.invCode" style="width: 90%" placeholder="请选择当前仓库" clearable="true"
                                   @change="subInvChange"
                                   size="mini">
                            <el-option
                                v-for="item in subInvList"
                                :key="item.name"
                                :label="item.name"
                                :value="item.code">
                                <span style="float: left">{{ item.name }}</span>
                            </el-option>
                        </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
              <el-row>
                <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" show-overflow-tooltip></el-table-column>
                <el-table-column label="往来单位" prop="fromName" show-overflow-tooltip></el-table-column>
                <el-table-column label="单据来源" prop="fromType" width="150">
                    <template slot-scope="scope">
                        <span>{{ sourceMap[scope.row.fromType] }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="单据日期" prop="createTime"></el-table-column>
                <el-table-column label="单据状态">
                    <template slot-scope="scope">
                        {{ scope.row.status | statusFilterName }}
                    </template>
                </el-table-column>
                <el-table-column label="业务类型" prop="billTypeName" width="150">
                </el-table-column>
                <el-table-column label="当前仓库" prop="invName" width="150">
                </el-table-column>

                <el-table-column label="所属科室" prop="deptName" width="120">
                </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="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="reCount"></el-table-column>
                <el-table-column label="单据数量" prop="count"></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%"
            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"

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: "",
            },
            detailQuery: {
                orderIdFk: "",
                page: 1,
                limit: 20
            },
            isSp: store.getters.customerId,
            storageList: [],
            subInvList: [],
            busTypes: [],
            list: [],
            detailList: [],
            total: 0,
            detailTotal: 0,
            loading: false,
            detailLoading: false,
            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: [],
            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: "3",
                page: 1,
                limit: 10,
                startTime: "",
                endTime: "",
            };
            this.getList();

            this.haveDistributionVisible = true;
            this.actDateRange = [];
        },
        hideSearch() {
          this.showSearch = !this.showSearch;
        },
        onSubmit() {
            this.query.page=1;
            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.status=3
            stockOrderList(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 = {
                code: this.query.invWarehouseCode,
                enabled: true,
            };
            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>
