<template>
    <div>
        <el-card class="el-card">
            <el-form
                :inline="true"
                :model="queryParams"
                size="mini"
            >
                <el-form-item>
                    <el-input v-model="queryParams.udi" placeholder="请扫描或输入UDI码" style="width: 300px"/>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="queryParams.nameCode" placeholder="请输入完整DI" clearable/>
                </el-form-item>
                <el-form-item>
<!--                    <el-input v-model="queryParams.ylqxzcrbarmc" placeholder="医疗器械注册人"/>-->
                    <el-autocomplete v-model="queryParams.ylqxzcrbarmc" :fetch-suggestions="searchByName"
                                     placeholder="医疗器械注册人" @select="handleSelect" clearable></el-autocomplete>
                </el-form-item>
                <el-form-item>
                    <el-input
                        v-model="queryParams.name"
                        size="mini"
                        placeholder="器械通用名称"
                        clearable
                    ></el-input>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="queryParams.ggxh" placeholder="规格型号" clearable/>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="queryParams.zczbhhzbapzbh" placeholder="注册证/备案号" clearable/>
                </el-form-item>

                <el-form-item label="阳光编码对照">
                    <el-select
                        v-model="queryParams.goodsMatchType"
                        placeholder="类型"
                    >
                        <el-option
                            v-for="item in matchTypeOption"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="医保编码对照">
                    <el-select
                        v-model="queryParams.medicalMatchType"
                        placeholder="类型"
                    >
                        <el-option
                            v-for="item in matchTypeOption"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>


                    <el-date-picker
                        :picker-options="pickerOptions"
                        v-model="dateRange"
                        type="daterange"
                        format="yyyy 年 MM 月 dd 日"
                        value-format="yyyy-MM-dd"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                    >
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button-group>

                        <el-button type="primary" icon="search" @click="onSubmit"
                        >查询
                        </el-button
                        >

                    </el-button-group>
                </el-form-item>

            </el-form>
            <el-table
                v-loading="loading"
                :data="list"
                style="width: 100%"
            >
                <el-table-column label="产品标识" prop="nameCode"/>
                <el-table-column label="产品通用名称" prop="cpmctymc"/>
                <el-table-column label="规格" prop="ggxh"/>
                <el-table-column label="注册人名称" prop="ylqxzcrbarmc"/>
                <el-table-column label="注册证号" prop="zczbhhzbapzbh"/>
<!--                <el-table-column label="产品描述" prop="cpms"/>-->
<!--                <el-table-column label="产品key" prop="deviceRecordKey"/>-->
                <el-table-column label="阳光编码" prop="deliveryGoodsId"/>
                <el-table-column label="医保编码" prop="medicalCode"/>
                <el-table-column label="操作" fixed="right" width="80">
                    <template slot-scope="scope">
                        <el-button
                            type="text"
                            size="small"
                            @click.native.stop="showDetail(scope.row)"
                        >详情</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                :current-page="queryParams.page"
                :page-size="queryParams.limit"
                @current-change="handleCurrentChange"
                layout="prev, pager, next"
                :total="total"
            ></el-pagination>
        </el-card>

        <el-dialog title="详情"  :close-on-click-modal="false"
                   :visible.sync="dialog.visible" width="1000px">

            <el-card class="el-card">
                <div slot="header" style="font-weight:bold;">
                    <span>产品标识</span>
                </div>
                <el-table :data="dialog.productlist" style="width: 100%">
                    <el-table-column label="序号" type="index"></el-table-column>
                    <el-table-column prop="nameCode" label="产品标识"></el-table-column>
                    <el-table-column prop="cpmctymc" label="产品通用名称"></el-table-column>
                    <el-table-column prop="packLevel" label="包装级别"></el-table-column>
                    <el-table-column prop="bzcj" label="包装层级"></el-table-column>
                </el-table>
            </el-card>
            <el-card>
            <el-form :model="dialog.productDetail" label-position="left" label-width="100px">
                <el-row :gutter="25">
                    <el-col :span="12">
                        <el-form-item label="产品名称" prop="cpmctymc">
                            <el-input v-model="dialog.productDetail.cpmctymc" :disabled="true" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="产品标识">
                            <el-input v-model="dialog.productDetail.nameCode" :disabled="true"/>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="25">
                    <el-col :span="12">
                        <el-form-item label="规格型号">
                            <el-input v-model="dialog.productDetail.ggxh" :disabled="true"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="器械类别">
                            <el-input v-model="dialog.productDetail.qxlb" :disabled="true"/>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="25">
                    <el-col :span="12">
                        <el-form-item label="产品类别">
                            <el-input v-model="dialog.productDetail.cplb" :disabled="true"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="分类编码">
                            <el-input v-model="dialog.productDetail.flbm" :disabled="true"/>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="25">
                    <el-col :span="12">
                        <el-form-item label="注册人名称">
                            <el-input v-model="dialog.productDetail.ylqxzcrbarmc" :disabled="true"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="英文名称">
                            <el-input v-model="dialog.productDetail.ylqxzcrbarywmc" :disabled="true"/>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="25">
                    <el-col :span="12">
                        <el-form-item label="信用代码">
                            <el-input v-model="dialog.productDetail.tyshxydm" :disabled="true"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="备案证号">
                            <el-input v-model="dialog.productDetail.zczbhhzbapzbh" :disabled="true"/>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="25">
                    <el-col :span="12">
                        <el-form-item label="上级产品编码">
                            <el-input v-model="dialog.productDetail.sjcpbm" :disabled="true"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="包装级别">
                            <el-input v-model="dialog.productDetail.packLevel" :disabled="true"/>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="25">
                    <el-col :span="12">
                        <el-form-item label="包含下级产品编码">
                            <el-input v-model="dialog.productDetail.bhxjcpbm" :disabled="true"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="包含最小销售包装数量">
                            <el-input v-model="dialog.productDetail.bhzxxsbzsl" :disabled="true"/>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="25">
                    <el-col :span="12">
                        <el-form-item label="最小销售标识包含使用单元数量">
                            <el-input v-model="dialog.productDetail.zxxsbzbhsydysl" :disabled="true"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="包含最小销售包装数量">
                            <el-input v-model="dialog.productDetail.bhzxxsbzsl" :disabled="true"/>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="25">
                    <el-col :span="12">
                        <el-form-item label="阳光平台码">
                            <el-input v-model="dialog.productDetail.deliveryGoodsId">
                                <el-button style="padding-right:10px" slot="suffix" type="text" @click="select">选择</el-button>
                            </el-input>

                        </el-form-item>

                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="医保编码">
                            <el-input v-model="dialog.productDetail.medicalCode" />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            </el-card>
            <select-goods :dialog-visible="dialog2.visible" @selectAction="selectAction" @updateVisible="updateVisible"/>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialog.visible = false">取 消</el-button>
                <el-button type="primary" @click="save">保存对照</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import {GetList,GetProductlist,GetProductDetail,Save,SearchByName} from "@/api/udplat/udplatGoodsMatch";
import myMinix from './minixs/commMinixs';
import SelectGoods from "./selectGoods";
export default {
    name: "udplatGoodsMatch",
    components: {SelectGoods},
    mixins:[myMinix],
    created() {
        this.formReset();
    },
    data(){
      return{
          matchTypeOption:[{value:0,label:"全部"},{value:1,label:"已对照"},{value:2,label:"未对照"}],
          timeout:  null,
          queryParams: {
              page: 1,
              limit: 10,
              name:"",
              nameCode:"",
              udi:"",
              ylqxzcrbarmc:"",//注册/备案人名称(医疗器械注册人)
              ggxh:"",//规格型号
              zczbhhzbapzbh:"",//注册/备案证号
              goodsMatchType: 0,
              medicalMatchType: 0
          },
          dialog: {
              visible: false,
              productlist:null,
              productDetail: null,
          },
          dialog2:{
              visible: false
          }
      }
    },
    methods:{
        getList() {
            this.loading = true;
            GetList(this.addDateRange(this.queryParams, this.dateRange)).then(res => {
                //console.log(res);
                this.loading = false;
                this.list = res.data.list || [];
                this.total = res.data.total || 0;
            }).catch(error => {
                this.$message.error(error);
                this.loading = false;
            })
        },
        showDetail(row){
            let key=row.deviceRecordKey;
            let uuid=row.uuid;
            GetProductlist(key).then(res=>{
                this.dialog.productlist = res.data;
            });
            GetProductDetail(uuid).then(res => {
                this.dialog.productDetail = res.data;
            });
            this.dialog.visible = true;
        },
        select(){
          this.dialog2.visible = true;
        },
        formReset(){
            this.dialog.productDetail={
                cpmctymc:"",
                nameCode:''
            }
        },
        selectAction(value){
            console.log(value);
            if(value.deliveryGoodsId && value.deliveryGoodsId != ''){
                this.dialog.productDetail.deliveryGoodsId = value.deliveryGoodsId;
            }
            if(value.medicalCode && value.medicalCode != '')
                this.dialog.productDetail.medicalCode = value.medicalCode;
        },
        updateVisible(val){
            this.dialog2.visible = val;
        },
        save(){
            let param={
                deviceRecordKey: this.dialog.productDetail.deviceRecordKey,
                deliveryGoodsId: this.dialog.productDetail.deliveryGoodsId,
                medicalCode: this.dialog.productDetail.medicalCode
            }
            Save(param).then(result => {
                if(result.code == 20000){
                    this.dialog.visible = false;
                    this.getList();
                }else
                    this.$message.error(result.message);
            })
        },
        searchByName(name,cb){
            //console.log("name:"+name);
            SearchByName(name).then(res=>{
                clearTimeout(this.timeout);
                this.timeout = setTimeout(()=>{
                    cb(this.formatChange(res.data));
                },100);
            })

        },
        formatChange(list){
            return list.map((item)=>{
                return {value:item}
            })
        },
        handleSelect(item){
            console.log("item:"+item);
        }

    }
}
</script>

<style scoped>

</style>
