<template>
    <div>
        <el-card class="el-card">
            <el-form
                :inline="true"
                :model="queryParams"
                size="mini"
            >
                <el-form-item>
                    <el-input
                        v-model="queryParams.name"
                        size="mini"
                        placeholder="请输入通用名称"
                    ></el-input>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="queryParams.manufactureName" placeholder="请输入生产企业" clearable/>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="queryParams.distributorName" placeholder="请输入配送企业" clearable/>
                </el-form-item>

                <el-form-item>
                    <el-input v-model="queryParams.regNum" placeholder="请输入注册证号" clearable/>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="queryParams.model" placeholder="请输入型号" clearable/>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="queryParams.spec" placeholder="请输入规格" clearable/>
                </el-form-item>
                <el-form-item>
<!--            <span style="color: #000; margin-left: 10px; margin-right: 6px"
            >日期:</span>-->
                    <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="el-icon-refresh"
                            @click="onReset"
                        ></el-button>
                        <el-button type="primary" icon="search" @click="onSubmit"
                        >查询
                        </el-button>
                        <el-button @click="getFile">导出文件</el-button>
                        <a style="margin-left: 20px" v-if="downloadFile.url != '' " :href="downloadFile.url" :download="downloadFile.fileName">{{ downloadFile.fileName }}</a>
                    </el-button-group>
                </el-form-item>

            </el-form>
            <el-table
                ref="goodsTable"
                v-loading="loading"
                :data="list"
                style="width: 100%"
            >
                <!--                <el-table-column label="序号" type="index"/>-->
                <el-table-column type="selection" width="55" align="center"/>
                <el-table-column label="配送目录ID" prop="deliveryGoodsId"/>
                <el-table-column label="联采目录编码" prop="projectGoodsCode"/>
                <el-table-column label="生产企业" prop="manufactureName"/>
                <el-table-column label="配送企业" prop="distributorName"/>
                <el-table-column label="产品通用名称" prop="productName" show-overflow-tooltip/>
                <el-table-column label="注册证号" prop="regNum"/>

                <el-table-column label="型号" prop="model" show-overflow-tooltip/>
                <el-table-column label="规格" prop="spec" show-overflow-tooltip/>
                <el-table-column label="医保编码" prop="medicalCode"/>
                <el-table-column label="操作" width="80px">
                    <template slot-scope="scope">
                        <el-button
                            type="text"
                            size="small"
                            @click.native.stop="showDetail(scope.row)"
                        >详情</el-button>
                    </template>
                </el-table-column>
                <!--                <el-table-column label="创建时间" align="center" prop="createTime" :show-overflow-tooltip="true"/>
                                <el-table-column label="更新时间" align="center" prop="updateTime" :show-overflow-tooltip="true"/>-->

            </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">
            <el-form :model="dialog.detail" label-position="left" label-width="100px">
                <el-row :gutter="25">
                    <el-col :span="12">
                        <el-form-item label="配送目录ID" prop="deliveryGoodsId">
                            <el-input v-model="dialog.detail.deliveryGoodsId" readonly/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="联采目录编码">
                            <el-input v-model="dialog.detail.projectGoodsCode" readonly/>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="25">
                    <el-col :span="12">
                        <el-form-item label="配送目录编码" prop="deliveryGoodsCode">
                            <el-input v-model="dialog.detail.deliveryGoodsCode" readonly/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="产品通用名">
                            <el-input v-model="dialog.detail.productName" readonly/>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="25">
                    <el-col :span="12">
                        <el-form-item label="生产企业">
                            <el-input v-model="dialog.detail.manufactureName" readonly/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="配送企业">
                            <el-input v-model="dialog.detail.distributorName" readonly/>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="25">
                    <el-col :span="12">
                        <el-form-item label="注册证编号">
                            <el-input v-model="dialog.detail.regNum" readonly/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="注册证名称">
                            <el-input v-model="dialog.detail.regName" readonly/>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="25">
                    <el-col :span="12">
                        <el-form-item label="注册证有效期">
                            <el-input v-model="dialog.detail.regValidTo" readonly/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="更新时间">
                            <el-input v-model="dialog.detail.changedTime" readonly/>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="25">
                    <el-col :span="12">
                        <el-form-item label="更新内容">
                            <el-input v-model="dialog.detail.changedContent" readonly/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="医保编码">
                            <el-input v-model="dialog.detail.medicalCode" readonly/>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="型号">
                            <el-input type="textarea" v-model="dialog.detail.model"  :autosize="{ minRows: 2, maxRows: 4}" readonly/>
                        </el-form-item>

                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="规格">
                            <el-input type="textarea" v-model="dialog.detail.spec"  :autosize="{ minRows: 2, maxRows: 4}" readonly/>
                        </el-form-item>

                    </el-col>
                </el-row>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
import {GetList, GetGoodsFile,GetDetail} from "@/api/udplat/udplatGoods";
import myMinix from './minixs/commMinixs';

export default {
    name: "udplatGoods",
    mixins: [myMinix],
    data() {
        return {
            queryParams: {
                page: 1,
                limit: 10,
                name: "",
                manufactureName: "",
                distributorName: "",
                regNum: "",
                model: "",
                spec: ""
            },
            dialog:{
                visible: false,
                detail:{}
            },
            downloadFile:{
                url:"",
                fileName:"产品目录.json"
            }
        }
    },
    methods: {
        getList() {
            this.loading = true;
            GetList(this.addDateRange(this.queryParams, this.dateRange)).then(res => {
                this.loading = false;
                this.list = res.data.list || [];
                this.total = res.data.total || 0;
            }).catch(error => {
                this.$message.error(error);
                this.loading = false;
            })
        },
        getFile() {
            let selectData = this.$refs.goodsTable.selection;
            if(selectData.length>0){
                let data = JSON.stringify(selectData);
                this.downloadFile.url="data:text/json;chartset=utf-8,\ufeff"+encodeURIComponent(data);
                return;
            }
            this.downloadFile.url="";
            const loading = this.$loading({
                lock: true,
                text: 'Loading',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });
            GetGoodsFile(this.addDateRange(this.queryParams, this.dateRange)).then(result => {
                this.downloadFile.url=result.data;
                loading.close();
            });
        },
        showDetail(row){
            GetDetail(row.id).then(result => {
                this.dialog.detail = result.data;
                this.dialog.visible = true;
            })

        }
    },
}
</script>

<style scoped>

</style>
