<template>
    <div>
        <el-form :inline="true" :model="query" class="query-form" size="mini">
            <el-row>
                <el-form-item class="query-form-item">
                    <el-input
                        v-model="filterQuery.coName"
                        placeholder="产品通用名"
                    ></el-input>
                </el-form-item>
                <el-form-item class="query-form-item">
                    <el-input
                        v-model="filterQuery.unit"
                        placeholder="生产企业"
                    ></el-input>
                </el-form-item>
                <el-form-item class="query-form-item">
                    <el-input
                        v-model="filterQuery.nameCode"
                        placeholder="产品编码"
                    ></el-input>
                </el-form-item>

                <el-form-item>
                    <el-button-group>
                        <el-button
                            type="primary"
                            icon="el-icon-refresh"
                            @click="onReset"
                        ></el-button>
                        <el-button type="primary" icon="search" @click="getList"
                        >查询
                        </el-button
                        >
                        <el-button type="primary" icon="search" @click="intentDetail"
                        >选入器械信息
                        </el-button
                        >
                        <!-- <el-button type="primary" icon="search" @click="getList"
                          >导出</el-button
                        > -->
                    </el-button-group>
                </el-form-item>
            </el-row>
        </el-form>

        <el-table
            v-loading="loading"
            :data="list"
            style="width: 100%"
            @selection-change="handleSelectionChange"
        >
            <el-table-column label="序号" type="index" fixed></el-table-column>

            <el-table-column
                label="最小销售产品标识"
                prop="nameCode"
                width="140"
                show-overflow-tooltip
            ></el-table-column>
            <el-table-column
                label="生产企业"
                prop="ylqxzcrbarmc"
                show-overflow-tooltip
            ></el-table-column>
            <el-table-column
                label="产品通用名"
                prop="cpmctymc"
                show-overflow-tooltip
            ></el-table-column>

            <el-table-column
                label="产品类型"
                prop="cplb"
                show-overflow-tooltip
            ></el-table-column>
            <el-table-column
                label="规格型号"
                prop="ggxh"
                show-overflow-tooltip
            ></el-table-column>
            <el-table-column
                label="分类编码"
                prop="flbm"
                show-overflow-tooltip
            ></el-table-column>
            <el-table-column
                label="器械类别"
                prop="qxlb"
                show-overflow-tooltip
            ></el-table-column>

            <el-table-column label="操作" fixed="right">
                <template slot-scope="scope">
                    <el-button
                        type="text"
                        size="small"
                        @click.native.stop="handleModifyClick(scope.row)"
                    >编辑
                    </el-button
                    >
                    <el-button
                        type="text"
                        size="small"
                        @click.native.stop="deleteDialog(scope.row)"
                    >删除
                    </el-button
                    >
                </template>
            </el-table-column>
        </el-table>
        <el-dialog
            title="产品信息编辑"
            :visible.sync="editDialogVisible"
            width="70%"
            v-if="editDialogVisible"
        >
            <el-table
                v-loading="loading"
                :data="detailList"
                style="width: 100%"
                @current-change="handleDetail"
            >
                <el-table-column
                    label="产品标识"
                    prop="nameCode"
                    show-overflow-tooltip
                ></el-table-column>

                <el-table-column
                    label="产品通用名"
                    prop="cpmctymc"
                    show-overflow-tooltip
                ></el-table-column>
                <el-table-column
                    label="包装级别"
                    prop="packLevel"
                    show-overflow-tooltip
                ></el-table-column>
                <el-table-column
                    label="包装层级"
                    prop="bzcj"
                    show-overflow-tooltip
                ></el-table-column>
            </el-table>

            <el-form
                :model="editQuery"
                :rules="rules"
                ref="editQuery"
                label-width="100px"
                style="margin-top: 20px"
            >
                <el-row :gutter="20" class="el-row" type="flex">
                    <el-col :span="10" class="el-col">
                        <div class="text item">
                            <div class="itemTag">
                                <span>第三方系统编码:&nbsp;</span>
                            </div>

                            <el-form-item prop="thirdId">
                                <el-input
                                    style="width: 200px"
                                    size="small"
                                    :disabled="true"
                                    splaceholder="请输入内容"
                                    v-model="relevanceEdit.thirdId"
                                    @input="change()"
                                ></el-input>
                            </el-form-item>
                        </div>
                    </el-col>

                    <el-col :span="10" class="el-col">
                        <div class="text item">
                            <div class="itemTag">
                                <span>产品编码:&nbsp;</span>
                            </div>
                            <el-form-item prop="nameCode">
                                <el-input
                                    style="width: 200px"
                                    :disabled="true"
                                    size="small"
                                    splaceholder="请输入内容"
                                    v-model="editQuery.nameCode"
                                ></el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
                <el-row :gutter="20" class="el-row" type="flex">
                    <el-col :span="10" class="el-col">
                        <div class="text item">
                            <div class="itemTag">
                                <span>上级产品编码:&nbsp;</span>
                            </div>

                            <el-form-item prop="packRatio">
                                <el-input
                                    style="width: 200px"
                                    size="small"
                                    splaceholder="请输入内容"
                                    :disabled="true"
                                    v-model="editQuery.sjcpbm"
                                    @input="change()"
                                ></el-input>
                            </el-form-item>
                        </div>
                    </el-col>

                    <el-col :span="10" class="el-col">
                        <div class="text item">
                            <div class="itemTag">
                                <span>包装级别:&nbsp;</span>
                            </div>
                            <el-form-item prop="packLevel">
                                <el-input
                                    style="width: 200px"
                                    size="small"
                                    splaceholder="请输入内容"
                                    :disabled="true"
                                    v-model="editQuery.packLevel"
                                ></el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
                <el-row :gutter="20" class="el-row" type="flex">
                    <el-col :span="10" class="el-col">
                        <div class="text item">
                            <div class="itemTag">
                                <span>计量单位/包装级别:&nbsp;</span>
                            </div>

                            <el-form-item prop="bzcj">
                                <el-input
                                    style="width: 200px"
                                    size="small"
                                    splaceholder="请输入内容"
                                    v-model="editQuery.bzcj"
                                    :disabled="true"
                                    @input="change()"
                                ></el-input>
                            </el-form-item>
                        </div>
                    </el-col>

                    <el-col :span="10" class="el-col">
                        <div class="text item">
                            <div class="itemTag">
                                <span>包含下级包装数量:&nbsp;</span>
                            </div>
                            <el-form-item prop="bhxjsl">
                                <el-input
                                    style="width: 200px"
                                    size="small"
                                    splaceholder="请输入内容"
                                    :disabled="true"
                                    v-model="editQuery.bhxjsl"
                                ></el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
                <el-row :gutter="20" class="el-row" type="flex">
                    <el-col :span="10" class="el-col">
                        <div class="text item">
                            <div class="itemTag">
                                <span>包含下级产品编码:&nbsp;</span>
                            </div>

                            <el-form-item prop="bhxjcpbm">
                                <el-input
                                    style="width: 200px"
                                    size="small"
                                    :disabled="true"
                                    splaceholder="请输入内容"
                                    v-model="editQuery.bhxjcpbm"
                                    @input="change()"
                                ></el-input>
                            </el-form-item>
                        </div>
                    </el-col>

                    <el-col :span="10" class="el-col">
                        <div class="text item">
                            <div class="itemTag">
                                <span>包含最小销售包装数量:&nbsp;</span>
                            </div>
                            <el-form-item prop="bhzxxsbzsl">
                                <el-input
                                    style="width: 200px"
                                    size="small"
                                    :disabled="true"
                                    splaceholder="请输入内容"
                                    v-model="editQuery.bhzxxsbzsl"
                                ></el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
                <el-row :gutter="20" class="el-row" type="flex">
                    <el-col :span="10" class="el-col">
                        <div class="text item">
                            <div class="itemTag">
                                <span>最小包装单元内包含使用单元数量:&nbsp;</span>
                            </div>
                            <el-form-item prop="zxxsbzbhsydysl">
                                <el-input
                                    style="width: 200px"
                                    :disabled="!checked"
                                    size="small"
                                    splaceholder="请输入内容"
                                    v-model="editQuery.zxxsbzbhsydysl"
                                ></el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="10" class="el-col">
                        <el-form-item prop="name">
                            <el-checkbox v-model="checked" class="text item itemTag" :disabled="!isUseDyCheck"
                            >以使用单元数量入库
                            </el-checkbox
                            >
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>

            <div style="text-align: center">
                <el-button
                    type="primary"
                    size="small"
                    icon="search"
                    @click="onAddSubmit"
                >提交
                </el-button
                >
                <el-button
                    type="primary"
                    size="small"
                    icon="search"
                    @click="cancelDialog"
                >取消
                </el-button
                >
            </div>
        </el-dialog>
        <el-dialog
            title="选入器械信息"
            :visible.sync="selectUdiDialogVisible"
            width="85%"
            v-if="selectUdiDialogVisible"
        >
            <selectUdi @closeUdi="closeUdi"></selectUdi>
        </el-dialog>

        <el-pagination
            :page-size="filterQuery.limit"
            @current-change="handleCurrentChange"
            layout="prev, pager, next"
            :total="total"
        ></el-pagination>
    </div>
</template>

<script>
    import {
        getProductInfos,
        deleteProductInfos,
        updateProductInfos,
    } from "../../api/receipts/productInfo";
    import {
        filterByUuid,
        updatetUdiInfos,
        deletetUdiInfos,
    } from "../../api/erp/udiRelevance";
    import selectUdi from "./udiRelevance";

    export default {
        data() {
            return {
                filterQuery: {
                    unit: "",
                    coName: "",
                    nameCode: "",
                    page: 1,
                    limit: 20,
                    addType: 1,
                },
                editQuery: null,
                isUseDyCheck: false,
                relevanceEdit: {
                    zxxsbzbhsydysl: null,
                    uuid: null,
                    isUseDy: false,
                },
                checked: false,
                list: [],
                total: 0,
                detailList: [],
                multipleSelection: [],
                editDialogVisible: false,
                selectUdiDialogVisible: false,
            };
        },

        methods: {
            onReset() {
                this.$router.push({
                    path: "",
                });
                this.filterQuery = {
                    unit: "",
                    coName: "",
                    nameCode: "",
                    page: 1,
                    limit: 20,
                    addType: 1,
                };
                this.getList();
            },
            getList() {
                this.loading = true;
                getProductInfos(this.filterQuery)
                    .then((response) => {
                        this.loading = false;
                        this.list = response.data.list || [];
                        this.total = response.data.total || 0;
                    })
                    .catch(() => {
                        this.loading = false;
                        this.list = [];
                        this.total = 0;
                    });
            },
            handleDetail(row) {
                this.editQuery = row;
                console.log(row);
            },
            deleteOrders(data) {
                this.loading = true;
                let tquery = {
                    id: data.uuid + "",
                };

                deletetUdiInfos(tquery)
                    .then((response) => {
                        this.getList();
                        this.$message({
                            type: "success",
                            message: "删除成功！",
                        });
                    })
                    .catch(() => {
                    });
            },

            deleteDialog(rowId) {
                this.$confirm("此操作将永久删除该产品信息, 是否继续?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                })
                    .then(() => {
                        this.deleteOrders(rowId);
                    })
                    .catch(() => {
                    });
            },

            exportTxt() {
            },

            intentDetail() {
                // this.$router.push({ path: "../product/udirevance" });
                this.selectUdiDialogVisible = true;
                //  this.$router.push({name:'home',query: {id:'1'}})
            },

            handleSelectionChange(val) {
                console.log("----" + val);
                this.multipleSelection = val;
            },

            cancelDialog() {
                this.editDialogVisible = false;
            },
            handleCurrentChange(val) {
                this.filterQuery.page = val;
                this.getList();
            },
            handleModifyClick(row) {
                this.editDialogVisible = true;
                this.editQuery = row;

                this.checked = row.isUseDy == 1;

                let ttquery = {
                    uuid: row.uuid,
                    page: 1,
                    limit: 10,
                };
                console.log("this.editQuery.isUseDy = " + this.editQuery.isUseDy);

                this.getDetailList(ttquery);
            },
            closeUdi(val) {
                this.selectUdiDialogVisible = false;
                if (val) {
                    this.getList();
                } else {
                }
            },
            getDetailList(detailQuery) {
                filterByUuid(detailQuery)
                    .then((response) => {
                        this.isUseDyCheck = false;
                        this.detailList = response.data || [];
                        this.detailList.forEach((item, index, array) => {
                            //执行代码
                            if (item.diType == 1) {
                                this.editQuery = item;
                            }
                            if(item.zxxsbzbhsydysl>1){
                                this.isUseDyCheck = true;
                            }
                        });
                    })
                    .catch(() => {
                        this.detailList = [];
                    });
            },
            onAddSubmit() {
                this.relevanceEdit = {
                    zxxsbzbhsydysl: this.editQuery.zxxsbzbhsydysl,
                    uuid: this.editQuery.uuid,
                    isUseDy: this.editQuery.isUseDy,
                };
                if (this.checked == true) {
                    this.relevanceEdit.isUseDy = 1;
                } else {
                    this.relevanceEdit.isUseDy = 0;
                }

                console.log(this.relevanceEdit.isUseDy);
                updatetUdiInfos(this.relevanceEdit)
                    .then((response) => {
                        this.loading = false;
                        this.getList();
                        this.cancelDialog();
                    })
                    .catch(() => {
                        this.loading = false;
                        this.cancelDialog();
                    });
            },
        },
        mounted() {
        },
        components: {
            selectUdi,
        },
        created() {
            this.getList();
        },
    };
</script>
<style>
    .checkitemTag {
        float: left;
        text-align: left;
        margin-top: 5px;
        width: 100%;
    }
</style>
