<style type="text/css" >
    .has-image .text-empty,.has-image .datetime-picker{
        margin-top: 10px;
    }
    .datepickerDate .datetime-picker input{
        text-align: right !important;
    }
    .ep-form .edit-user-big .id-pics .pic-upload{
        width: 250px;
        height: 120px;
    }

    .ep-form  .edit-user-big .id-pics .pic-upload .icon-btn{
        width: 250px;
    }

    .ep-form  .edit-user-big .id-pics .pic-upload .icon-btn{
        width: 250px;
    }

    .ep-form .edit-user-big .id-pics .pic-upload .icon-btn .fbtn{
        width: 125px;
        padding: 5px 52px;
    }
    .ep-infor.edit-user-top .edit-user-left .base-form{
        width: 325px;
    }
    .ep-infor.edit-user-top .edit-user-left{
        width: 330px;
    }
    .ep-infor.edit-user-top .edit-user-left.edit-user-big{
        width: 260px;
    }
    .ep-infor.edit-user-top  .edit-user-left.edit-user-big p{
        width: 250px;
    }
    .ep-infor.edit-user-top .edit-user-right{
        width: 400px;
        margin-left: 0px;
    }

    .ep-infor.edit-user-top  .edit-user-right .sfzh{
        padding-top: 25px;
        height: 235px;
    }
    .ep-infor.edit-user-top .edit-user-left .base-form{
        height: 235px;
        padding-top: 20px;
    }
    .ep-infor.edit-user-top .edit-user-left .form-group{
        width: 270px;
    }
</style>
<template>
    <div>
        <div class="container resource close-left-menu">

            <div class="pop-banner clearfix">
                <div class="operate-btns">
                    <a @click="addmfdemandpublist" class="fbtn fb-save ml-10 mr-10">保存</a>
                    <a @click="commitmfdemandpublist" class="fbtn fb-submit ml-10 mr-10">发布</a>
                </div>
                <h3 class="current-module">医院物资需求发布</h3>
            </div>

            <!--order-orderlist-view start-->
            <div class="order-orderlist-view clearfix mt-10">

                <div class="pd-form fl">
                    <div class="group-row">
                        <div class="form-group form-label form-required">
                            <label for="c1" class="label">联系人</label>
                            <div class="control">
                                <input type="text" v-model="hospitalMaterialRelease.contacts" id="c1" title="联系人" class="inp3">
                            </div>
                        </div>
                        </div>
                        <div class="group-row">
                        <div class="form-group form-label form-required">
                            <label for="c2" class="label">联系电话</label>
                            <div class="control">
                                <input type="text" id="c2" class="inp4" title="联系电话" v-model="hospitalMaterialRelease.tel">
                            </div>
                        </div>
                    </div>
                    <div class="group-row">
                        <div class="form-group form-label form-required">
                            <label for="c3" class="label">联系人科室</label>
                            <div class="control">
                                <input type="text" v-model="hospitalMaterialRelease.contactsdept" id="c3" title="联系人科室" class="inp5">
                            </div>
                        </div>
                        </div>
                        <div class="group-row">
                        <div class="form-group form-label form-required">
                            <label for="c4" class="label">联系地址</label>
                            <div class="control" style="width: 710px;">
                                <input type="text" id="c4" class="inp4" title="联系地址" v-model="hospitalMaterialRelease.address">
                            </div>
                        </div>
                    </div> 
                </div>
                <div class="ep-form fr">
                    <div class="ep-infor  edit-user-top" style="border-top:0;height: 190px;">
                            <div class="edit-user-left  edit-user-big" style="height: 190px;">
                                <imagebox v-bind:imgarr="imgArry">
                                    <span class="pic-max blue-search" id="bigImgs"></span>
                                </imagebox>
                                <div class="sfzh">
                                    <div class="id-pics clearfix">
                                        <div class="pic-upload" id="show0" v-if="uploads0.length>0"
                                             :style="{backgroundImage:'url('+(uploads0.length> 0?uploads0[0].path:'')+')'}"
                                             style='background-position: 50% 50%;background-repeat:no-repeat;background-size: contain;'>

                                            <div class="icon-btn">
                                                <span class="rm-pic" v-on:click="deleteimg(0)"></span>
                                                <span class="fbtn modify-btn" title="修改" @click="modifyPic(0)"><i>|</i></span>
                                                <span class="fbtn magnify-btn" style="width: 124px;" title="放大"
                                                      @click="showBigImgs(uploads0[0])"></span>
                                            </div>
                                        </div>
                                        <uploads v-bind:class="['pic-upload']" :display="'block'" v-if="uploads0.length==0"
                                                 id="showupload0"
                                                 v-on:file-change="fileChange" v-bind:multiple="false" v-bind:readonly="readonly">
                                            <div class="upload-tips" style="margin-top: 25px;">
                                                <b>请上传盖章文件*</b><br>(注： * 为必填信息
                                                盖章文件支持jpg，小于2M
                                                物资全部录入完成后，再点击发布
                                                )
                                            </div>
                                            <div class="icon-btn">
                                                <span class="rm-pic" v-on:click="deleteimg(0)"></span>
                                                <span class="fbtn modify-btn" title="修改" @click="modifyPic(0)"><i>|</i></span>
                                                <span class="fbtn magnify-btn" style="width: 124px;" title="放大"
                                                      @click="showBigImgs(uploads0[0])"></span>
                                            </div>
                                        </uploads>
                                    </div>
                                </div>
                            </div>

                    </div> 
                </div>
                

                <table class="itable itable-td-long-text">
                    <thead>
                    <tr>
                        <th class="w30">序号</th>
                        <th class="w150">物资名称*</th>
                        <th class="w80">类别*</th>
                        <th class="w80"></th>
                        <th class="w60">数量*</th>
                        <th class="w60">单位*</th>
                        <th class="w80">规格</th>
                        <th class="w100">执行标准</th>
                        <th class="w100">备注说明</th>
                        <th class="w80">操作</th>
                    </tr>
                    </thead>
                    <tbody class="txt_v">
                    <!-- <tr v-if="hospitalMaterialReleaseList==null || hospitalMaterialReleaseList.length==0">
                        <td colspan="11">暂无符合条件的记录</td>
                    </tr> -->
                    <tr v-for="ty in hospitalMaterialReleaseList">
                        <td class="w30">
                            {{ $index + 1 }}
                        </td>
                        <td class="pl10 pr10"><input type="text" v-model='ty.goodsname'></td>
                        <td class="pr10">
                        <select v-model="ty.goodstype"><!--   v-show="sh[$index]" -->
                          <option v-for="tys in goodscate" :value="tys.value">{{tys.label}}</option>
                        </select>
                        </td>
                        <td class="pr10">
                        <div class="checkbox-control">
                            <input type="checkbox" name="cb" id="{{$index}}" v-model="ty.infinite" @click="checkbox($index,ty.infinite)">
                                            <label class="checkbox mr-0" for="{{$index}}">不限</label>
                          </div>
                          </td>
                            <!-- <div class="checkbox-control checkbox-alone">
                                <input type="checkbox" id="{{ty.guid}}" v-model="activeTemp[$index]" value="{{ty.guid}}" @click="checkbox($index, ty.guid)">
                                <label for="{{ty.guid}}" class="checkbox">无限</label>
                            </div> -->
                        <td class="pr10">
                            <input type="number" v-model='' v-if="ty.qty == 999999.99" readonly="readonly" style="height: 34px;border: 1px solid #c8c8c8;">
                            <input type="number" v-model='ty.qty' style="height: 34px;border: 1px solid #c8c8c8;" v-else>
                        </td>
                        <td class="pr10"><input type="text" v-model='ty.unitstyle'></td>
                        <td class="pr10"><input type="text" v-model='ty.goodsspec'></td>
                        <td class="pr10"><input type="text" v-model='ty.executivestandard'></td>
                        <td class="pr10"><input type="text" v-model='ty.note'></td>
                        <td>
                            <a class="btn button-green icon cancel" @click="delRate($index)">删除</a>
                        </td>
                    </tr>
                    <tr><td colspan="10"><a class="btn button-green icon add" @click="copyNewObj($index,ty)">添加</a></td></tr>
                    </tbody>
                </table>
            </div>
            <!--order-orderlist-view end-->

        </div>
        <!--新加提示信息 start -->
        <div class="roll-bg" v-show='requestS'>
            <div class="w60" style="margin:0 auto;">
                <img src="/images/roll.gif">
            </div>
            <div class="container resource t-center text-color-red">
                正在处理中，请勿关闭！
            </div>
        </div>
        <!--新加提示信息 end-->
    </div>
</template>
<script>
    module.exports = {
        data: function() {
            return {
                hospitalMaterialRelease:{
                    guid:'',
                    contacts:'',
                    contactsdept:'',
                    address:'',
                    tel:'',
                    pictcontent:''
                },
                activeTemp:[],
                requestS:false,
                uploads0: [],//授权书
                hospitalMaterialReleaseList:[],
                goodscate: [ {
                    "label" : "医疗器械",
                    "value" : "01"
                  }, {
                    "label" : "药品",
                    "value" : "02"
                  }, {
                    "label" : "设施设备",
                    "value" : "07"
                  },{
                    "label" : "其它",
                    "value" : "08"
                  } ],
            };
        },
        methods: {
            showBigImgs: function (obj) {
                var txt='图片', imgReg = /\.(jpg|jpeg|png|gif|bmp)$/i; //判断字符串是否为图片路径
                var pics=JSON.parse(obj.pic);
                var path=imgReg.test(pics[0].original.path) ? pics[0].original.path : pics[0].original.path+pics[0].original.name;
                var jsonStr='[{"img":"'+path+'","txt":"'+txt+'"}]';
                this.$set('imgArry',JSON.parse(jsonStr));
                $("#bigImgs").click();
            },
            modifyPic: function (type) {
                if (type == 0) {
                    this.uploads0 = [];
                }
            },
            fileChange:function(data){
                console.log(data);
                var backObj = JSON.parse(data), imgReg = /\.(jpg|jpeg|png|gif|bmp)$/i; //判断字符串是否为图片路径
                data = backObj.data;
                for (var i = 0; i < data.length; i++) {
                    var path = imgReg.test(data[i].thumbnail.path) ? data[i].thumbnail.path : data[i].thumbnail.path + data[i].thumbnail.name;
                    var json = '{"path":"' + path + '"}';
                    var obj = JSON.parse(json);
                    obj.pic = JSON.stringify(data);
                    this.uploads0.push(obj);
                }
            },
            getData: function() {
                var self = this;
                Ajax.post('/procurment/getmfdemandpublist').
                then(function(response) {
                    var date = response.data.data, imgReg = /\.(jpg|jpeg|png|gif|bmp)$/i; //判断字符串是否为图片路径;
                    if(response.data.errorCode == 0) {
                        if(date != null){
                           self.hospitalMaterialRelease.guid = date.guid;
                           self.hospitalMaterialRelease.contacts = date.contacts;
                           self.hospitalMaterialRelease.contactsdept = date.contactsdept;
                           self.hospitalMaterialRelease.address = date.address;
                           self.hospitalMaterialRelease.tel = date.tel;
                           // self.fileChange(date.pictcontent);
                           self.$set('hospitalMaterialReleaseList',date.mfdemandpublishdetails);
                           for (var j = 0; j < self.hospitalMaterialReleaseList.length; j++) {
                                    if(self.hospitalMaterialReleaseList[j].qty == 999999.99){
                                         self.hospitalMaterialReleaseList[j].infinite = true;
                                    }else{
                                        self.hospitalMaterialReleaseList[j].infinite = false;
                                    } 
                            }
                           console.log(self.hospitalMaterialReleaseList);
                           var picsStr = date.pictcontent;
                            var objPic = JSON.parse(picsStr);
                            for (var i = 0; i < objPic.length; i++) {
                                var path = imgReg.test(objPic[i].thumbnail.path) ? objPic[i].thumbnail.path : objPic[i].thumbnail.path + objPic[i].thumbnail.name;
                                var json = '{"path":"' + path + '"}';
                                var obj = JSON.parse(json);
                                obj.pic = picsStr;
                                self.uploads0.push(obj);
                            }
                        }else{
                            self.hospitalMaterialReleaseList = [];
                            self.hospitalMaterialRelease = {};
                            self.uploads0 = [];
                        }
                    } else {
                        self.MessageBox({
                            title: '提示',
                            message: response.data.message,
                            type: 'alert'
                        }, function(action) {});
                    }
                })
            },
            checkbox: function(index, flg) {
                var self = this;
                if(!flg){
                    self.hospitalMaterialReleaseList[index].qty = 999999.99;
                }else{
                    self.hospitalMaterialReleaseList[index].qty = "";
                }
                console.log(self.hospitalMaterialReleaseList);
            },
             // 复制一行记录
              copyNewObj:function(index,mxObj){
                        var self = this;
                        var newObj = $.extend(true,{},mxObj);   
                        newObj.goodsguid = '';
                        newObj.goodsname = '';
                        newObj.goodstype = '';
                        newObj.infinite = false;
                        newObj.qty = '';
                        newObj.unitstyle = '';
                        newObj.goodsspec = '';
                        newObj.executivestandard = '';
                        newObj.note = '';
                        // self.hospitalMaterialReleaseList.splice(index+1,0,newObj);
                        self.hospitalMaterialReleaseList.push(newObj);
                        console.log(self.hospitalMaterialReleaseList);
              },
              delRate:function(index,guid){ 
                var self = this;
                self.hospitalMaterialReleaseList.splice(index,1);
              },
            addmfdemandpublist: function() {
                var self = this;
                if(!self.hospitalMaterialRelease.contacts){
                    layer.msg('请填写联系人！');
                    return;
                }
                if(!self.hospitalMaterialRelease.tel){
                    layer.msg('请填写联系电话！');
                    return;
                }
                if(!self.hospitalMaterialRelease.contactsdept){
                    layer.msg('请填写联系人科室！');
                    return;
                }
                if(!self.hospitalMaterialRelease.address){
                    layer.msg('请填写联系地址！');
                    return;
                }
                if(self.uploads0.length == 0){
                    layer.msg('请上传盖章图片！');
                    return;
                }
                for (var i = 0; i < self.hospitalMaterialReleaseList.length; i++) {
                    var a = i + 1;
                     if(!self.hospitalMaterialReleaseList[i].goodsname){
                        layer.msg('请填写第'+ a +'行物资名称！');
                        return;
                     }
                     if(!self.hospitalMaterialReleaseList[i].goodstype){
                        layer.msg('请填写第'+ a +'行类别！');
                        return;
                     }
                     if(!self.hospitalMaterialReleaseList[i].qty){
                        layer.msg('请填写第'+ a +'行数量！');
                        return;
                     }
                     if(!self.hospitalMaterialReleaseList[i].unitstyle){
                        layer.msg('请填写第'+ a +'行单位！');
                        return;
                     }
                }

                self.requestS = true;
                Ajax.post('/procurment/addmfdemandpublist', {'guid':self.hospitalMaterialRelease.guid,'contacts':self.hospitalMaterialRelease.contacts,'contactsdept':self.hospitalMaterialRelease.contactsdept,'address':self.hospitalMaterialRelease.address,'tel':self.hospitalMaterialRelease.tel,'pictcontent':self.uploads0[0].pic,'list':self.hospitalMaterialReleaseList}).
                then(function(response) {
                    var res = response.data.data;
                    self.requestS = false; 
                    if(response.data.errorCode == 0) {
                        self.MessageBox({
                            title: '提示',
                            message: '保存成功',
                            type: 'alert'
                        }, function(action) {});
                        self.getData();
                    } else {
                        self.MessageBox({
                            title: '提示',
                            message: response.data.message,
                            type: 'alert'
                        }, function(action) {});
                    }

                })
            },
            commitmfdemandpublist: function() {
                var self = this;
                if(!self.hospitalMaterialRelease.contacts){
                    self.MessageBox({title: '提示',message: '请填写联系人！',type: 'alert'});
                    return;
                }
                if(!self.hospitalMaterialRelease.tel){
                    self.MessageBox({title: '提示',message: '请填写联系电话！',type: 'alert'});
                    return;
                }
                if(!self.hospitalMaterialRelease.contactsdept){
                    self.MessageBox({title: '提示',message: '请填写联系人科室！',type: 'alert'});
                    return;
                }
                if(!self.hospitalMaterialRelease.address){
                    self.MessageBox({title: '提示',message: '请填写联系地址！',type: 'alert'});
                    return;
                }
                if(self.uploads0.length == 0){
                    self.MessageBox({title: '提示',message: '请上传盖章图片！',type: 'alert'});
                    return;
                }
                for (var i = 0; i < self.hospitalMaterialReleaseList.length; i++) {
                    var a = i + 1;
                     if(!self.hospitalMaterialReleaseList[i].goodsname){
                        self.MessageBox({title: '提示',message: '请填写第'+ a +'行物资名称！',type: 'alert'});
                        return;
                     }
                     if(!self.hospitalMaterialReleaseList[i].goodstype){
                        self.MessageBox({title: '提示',message: '请填写第'+ a +'行类别！',type: 'alert'});
                        return;
                     }
                     if(!self.hospitalMaterialReleaseList[i].qty){
                        self.MessageBox({title: '提示',message: '请填写第'+ a +'行数量！',type: 'alert'});
                        return;
                     }
                     if(!self.hospitalMaterialReleaseList[i].unitstyle){
                        self.MessageBox({title: '提示',message: '请填写第'+ a +'行单位！',type: 'alert'});
                        return;
                     }
                }
                self.requestS = true;
                Ajax.post('/procurment/commitmfdemandpublist', {'guid':self.hospitalMaterialRelease.guid,'contacts':self.hospitalMaterialRelease.contacts,'contactsdept':self.hospitalMaterialRelease.contactsdept,'address':self.hospitalMaterialRelease.address,'tel':self.hospitalMaterialRelease.tel,'pictcontent':self.uploads0[0].pic,'list':self.hospitalMaterialReleaseList}).
                then(function(response) {
                    var res = response.data.data;
                    self.requestS = false; 
                    if(response.data.errorCode == 0) {
                        self.MessageBox({
                            title: '提示',
                            message: '发布成功',
                            type: 'alert'
                        }, function(action) {
                            // 跳转 
                            self.$route.router.go('/responseList');
                        });
                    } else {
                        self.MessageBox({
                            title: '提示',
                            message: response.data.message,
                            type: 'alert'
                        }, function(action) {});
                    }
                })
            },
        },
        route: {
            activate: function() {
                this.getData();
            }
        }
    };
</script>