<template>
  <div class="container resource close-left-menu contaNEW">
    <div class="pop-banner clearfix">
      	<div class="operate-btns">
				<a v-on:click="exportContentGood()" class="fbtn fb-Print2 ml-10 mr-10">导出</a>
			</div>
      <h3 class="current-module">采购目录清单</h3>
    </div>
    <!--采购目录 start-->
    <div class="purchase-plan">
      <div class="pd-form fast-search-form">
        <div class="group-row">
          <div class="form-group form-label">
            <!-- <label class="label" for="cn1" >商品信息</label> -->
            <div class="control">
              <input type="text" id="cn1" v-model='proList.goodsinfo' title='供应商商品信息' placeholder="供应商商品信息" maxlength="50" v-rule> </div>
          </div>
          <div class="form-group form-label">
            <!-- <label class="label" for='cn2'>供应商名称</label> -->
            <div class="control">
              <input type="text" id="cn2" v-model="proList.medname" title='医院名称' placeholder="医院名称" maxlength="20" v-rule> </div>
          </div>
        </div>
        <div class="group-row">
          <div class="form-group w920">
            <label class="label w80 fl">业务状态</label>
            <div class="control control-filtering control-filtering-green fl w800">
              <a class="option" :class="{'all active':proList.contentstate==''}" href="javascript:void(0)" @click="proList.contentstate=''">全部</a>
              <a class="option" :class="{'all active':proList.contentstate=='P5'}" href="javascript:void(0)" @click="proList.contentstate='P5'">审批中</a>
              <a class="option" :class="{'all active':proList.contentstate=='P6'}" href="javascript:void(0)" @click="proList.contentstate='P6'">已审批</a>
              <a class="option" :class="{'all active':proList.contentstate=='P7'}" href="javascript:void(0)" @click="proList.contentstate='P7'">供应商放弃供应</a>
              <a class="option" :class="{'all active':proList.contentstate=='P8'}" href="javascript:void(0)" @click="proList.contentstate='P8'">驳回</a>
              <a class="option" :class="{'all active':proList.contentstate=='P9'}" href="javascript:void(0)" @click="proList.contentstate='P9'">已废弃</a>
            </div>
          </div>
        </div>

        <div class="group-row t-right">
          <button class="fast-search-form-btn btn-d btn-d-lg btn-d-activate btn-d-circle" @click="getData">查 询</button>
        </div>
      </div>
      <table class="itable  itable-thead-13px">
        <thead id="t_header">
          <tr>
            <th class="w50">序号</th>
            <th class="w150">医院商品</th>
            <th class="w150">供应商商品</th>
            <th class="w50"></th>
            <th class="w90">单位转换系数</th>
            <th class="w100">采购价</th>
            <th class="w100">医院</th>
            <th class="w100">结算方式</th>
            <th class="w70">委托配送商</th>
            <th class="w80">状态</th>
            <th class="w110">操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-if="getContentList.length==0">
            <td colspan="11">暂无数据！</td>
          </tr>
          <tr v-for="pro in getContentList">
            <td>{{$index + 1}}</td>
            <td class="t-left pr10">
              {{pro.medgoodscode}}</br>
              <span class="text-color-blue">{{pro.medgoodsname}}</span></br>
              {{pro.medgoodsspec}}</br>
              {{pro.medproducer}}</br>
              {{pro.medregistkey}}
            </td>
            <td class="t-left pr10">
              {{pro.supgoodscode}}</br>
              <span class="text-color-blue">{{pro.supgoodsname}}</span></br>
              {{pro.supgoodsspec}}</br>
              {{pro.supproducer}}</br>
              {{pro.supregistkey}}
            </td>
            <td>
              <span class="ct-col w30">
                  <span class="table-detail-icon icon-green">医</span>
              <span class="table-detail-icon icon-green mt-10">供</span>
              </span>
            </td>
            <td class="pr10">
              <div style="width: 102px; height: 71px; border:1px solid #999999; border-radius:8px; margin-left: 13px;" v-show="!sh1[$index]">
                <div class="w50 fl">
                  <input type="text" v-model='pro.purconverratio' class="" style="border: 0px; border-radius: 8px 0px 0px 0px;" readonly="readonly">
                  <p style="background: #999999; width: 50px; height: 1px; "></p>
                  <input type="text" v-model='pro.supconverratio' style="border: 0px; border-radius: 0px 0px 0px 8px;" readonly="readonly">
                </div>
                <div class="w50 fl">
                  <!-- <p class=" lh-34 h-34" style="background: #e6e7e8;">{{pro.medunistyle}}</p> -->
                  <input type="text" v-model='pro.medunistyle' class=" t-center" style="border: 0px; border-radius: 0px 8px 0px 0px;" readonly="readonly">
                  <p style="background: #999999; width: 50px; height: 1px; "></p>
                  <input type="text" v-model='pro.supplyunit' class=" t-center" style="border: 0px; border-radius: 0px 0px 8px 0px;" readonly="readonly">
                </div>
              </div>
              <div style="width: 102px; height: 71px; border:1px solid #999999; border-radius:8px; margin-left: 13px;" v-show="sh1[$index]">
                <div class="w50 fl">
                  <input type="text" v-model='pro.purconverratio' class="" style="border: 0px; border-radius: 8px 0px 0px 0px;" @change="medCheckInfo(pro.purconverratio, $index, 7)">
                  <p style="background: #999999; width: 50px; height: 1px;"></p>
                  <input type="text" v-model='pro.supconverratio' style="border: 0px; border-radius: 0px 0px 0px 8px;" @change="supCheckInfo(pro.supconverratio, $index, 7)">
                </div>
                <div class="w50 fl">
                  <!-- <p class=" lh-34 h-34" style="background: #e6e7e8;">{{pro.medunistyle}}</p> -->
                  <input type="text" v-model='pro.medunistyle' class=" t-center" style="border: 0px; border-radius: 0px 8px 0px 0px;" readonly="readonly">
                  <p style="background: #999999; width: 50px; height: 1px; border: 0px;"></p>
                  <select v-on:click="getGoodsUnits($index,pro.supgoodsguid)" v-if="!sh[$index]" style="border: 0px;"> 
                        <option>
                          {{pro.supplyunit}}
                        </option>
                     </select>
                  <select v-model="pro.supplyunit" style="border: 0px;" v-else> 
                        <option v-for="option in getGoodsUnitsList" v-bind:value="option">
                          {{option}}
                        </option>
                     </select>
                </div>
              </div>
            </td>
            <td>
              {{pro.price | numDigit 2 | numFmt}}
            </td>
            <td>{{pro.medname }}</td>
            <td>{{pro.settlemethod | method}}</td>
            <td class="t-center pr10">{{pro.distributionname==null ?'无':pro.distributionname}}</td>
            <td>
                <div v-if="pro.contentstate=='P5'|| pro.contentstate=='P7'" class="text-color-or">{{pro.contentstate | content_state }}</div>
                <div v-if="pro.contentstate=='P8'|| pro.contentstate=='P9'" class="text-color-red">{{pro.contentstate | content_state }}</div>
                <div v-if="pro.contentstate=='P6'">{{pro.contentstate | content_state }}</div> <br><br>
                <select v-model="pro.staffguid" v-if="!sh2[$index]" readonly="readonly" disabled="disabled">
                  <option v-for="option in staffList" v-bind:value="option.guid">
                    {{option.realname}}
                  </option>
                </select>
                <select v-model="pro.staffguid" v-if="sh2[$index]" >
                  <option v-for="option in staffList" v-bind:value="option.guid">
                    {{option.realname}}
                  </option>
                </select>
            </td>

            <td class="pt9">
              <div v-if="pro.contentstate =='P6'">
                <a href="javascript:;" class="btn button-green" v-if="!sh1[$index]" @click='updateList($index)'>修改</a>
                <a href="javascript:;" class="btn button-green" v-if="sh1[$index]" @click='updateUnitAndRatio($index,pro.detailguid,pro.rowno,pro.goodsguid,pro.purconverratio,pro.supconverratio,pro.supplyunit,pro.medname,pro.staffguid)'>保存</a>
              </div>
              <div v-else>
                <a href="javascript:;" class="btn from-button text-color-custom readonly-gray" style="hov" v-if="!sh1[$index]">修改</a>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
      <div class="pagination m-20-0">
        <em class="page">明细条目数【{{ search.total }}】</em>
        <pagination @page-change="getData()" :page-no.sync="search.page" :total-pages.sync="search.totalPages">
        </pagination>
      </div>
    </div>
    <!--采购目录 end-->
  </div>
</template>
<script>
  module.exports = {
    data: function () {
      return {
        sh1: [],
        sh: [],
        sh2: [], 
        staffList:[],
        getContentList: [],
        proList: {
          goodsinfo: '',
          medname: '',
          contentstate: '',
        },
        search: {
          pageSize: 50,
          page: 1,
          totalPages: 0,
          total: 0,
        },
        getGoodsUnitsList: [],
      };
    },
    computed: {
     // 获取vuex中数据的方法
      user: function() {
        return this.$store.state.user.curUser;
            }
     }, 
    methods: {
      getStaffList: function() {
        var self = this;  
        Ajax.post('/relation/getStaffList', {})
          .then(function(response) {
            var data = response.data.data;
            console.log(data);
            self.$set("staffList", data); 
          })
      },
      //加载数据      
      getData: function () {
        var self = this;
        Ajax.post('/relation/getContentList', {
            'page': self.search.page,
            'pageSize': self.search.pageSize,
            'totalPages': self.search.totalPages,
            'goodsinfo': self.proList.goodsinfo,
            'medname': self.proList.medname,
            'contentstate': self.proList.contentstate
          })
          .then(function (response) {
            var data = response.data.data;
            self.$set("getContentList", data.list);
            self.search.totalPages = data.totalPages;
            self.search.total = data.total;
            for (var i = 0; i < self.getContentList.length; i++) {
              self.sh.push(false);
              self.sh1.push(false);
            }
          })
      },
      //对码商品
      getGoodsUnits: function (index, guid) {
        var self = this;
        self.sh.splice(index, 1, true);
        Ajax.post('/relation/getGoodsUnits', {
            'guid': guid
          })
          .then(function (response) {
            var data = response.data.data;
            self.$set("getGoodsUnitsList", data);
          })
      },
      updateList: function (index) {
        var self = this;
        self.sh1.splice(index, 1, true);
        if(self.user.roletype == 1){
          self.sh2.splice(index, 1, true);
        } 
      },
      //保存价格
      updateUnitAndRatio: function (index, guid, rowno, goodsguid, purconverratio, supconverratio, supplyunit,
        medname,staffguid) {
        var self = this;
        var staffname = '';
        for (var i = 0; i < self.staffList.length; i++) {
          if(staffguid == self.staffList[i].guid){
            staffname =  self.staffList[i].realname;
          }
        }
        self.MessageBox({
          title: '提示',
          message: '修改后的转换比将以消息形式发送给【' + medname + '】,确认修改？',
          type: 'success',
          showCancelButton: true
        }, function (action) {
          if (action == 'confirm') {
            Ajax.post('/relation/updateUnitAndRatio', {
                'detailguid': guid,
                'rowno': rowno,
                'goodsguid': goodsguid,
                'purconverratio': purconverratio,
                'supconverratio': supconverratio,
                'supplyunit': supplyunit,
                'staffguid': staffguid
              })
              .then(function (response) {
                var data = response.data.data;
                if (response.data.errorCode == 0) {
                  layer.msg("保存成功！");
                  self.sh1.splice(index, 1, false);
                  self.sh2.splice(index, 1, false);
                  self.getData();
                } else {
                  layer.msg(response.data.message);
                  self.sh1.splice(index, 1, true);
                }
              })
          }
        });
      },
      // 验证医院单位系数
      medCheckInfo: function (po, index, code) {
        var self = this;
        if (po <= 0 || po > 99 || isNaN(po)) {
          self.MessageBox({
            title: '警告',
            message: "请输入大于0小于99的正整数!",
            type: 'alert'
          }, function (action) {
            if (action == 'confirm') {
              if (code == 1) {
                self.$set('getDMResultList[' + index + '].purconverratio', '');
              } else {
                self.$set('getDMResultList[' + index + '].purconverratio', '');
              }
            }
          });
        }
      },
      //验证供应商单位系数
      supCheckInfo: function (po, index, code) {
        var self = this;
        if (po <= 0 || po > 99 || isNaN(po)) {
          self.MessageBox({
            title: '警告',
            message: "请输入大于0小于99的正整数!",
            type: 'alert'
          }, function (action) {
            if (action == 'confirm') {
              if (code == 1) {
                self.$set('getDMResultList[' + index + '].supconverratio', '');
              } else {
                self.$set('getDMResultList[' + index + '].supconverratio', '');
              }
            }
          });
        }
      },
      //  采购目录清单 导出
      exportContentGood: function () {
        var self = this;

        var obj = {
          goodsinfo: self.proList.goodsinfo,
          medname: self.proList.medname,
          contentstate: self.proList.contentstate,
          pageSize: self.search.pageSize,
          totalPages: self.search.totalPages,
          page: self.search.page,
        }
        Ajax.post('/trpo/exportContent', obj)
          .then(function (response) {
            var data = response.data;
            window.open(data);
          })
        
      },
},
    route: {
      activate: function () {
        this.getData();
        this.getStaffList();
      }
    },
    watch:{
      'proList.contentstate':function(){
        this.getData();
      }
    },
    
  };
</script>