<template>
  <div class="container resource basic-mechanics-data contaNEW">
      <div class="pop-banner clearfix">
        <div class="operate-btns">
          <a @click="saveHospital" href="javascript:;" class="fbtn fb-modify">修改</a>
          <a href="javascript:;" class="fbtn fb-save">保存</a>
        </div>
        <h3 class="current-module">医疗机构资料</h3>
      </div>
      <!--basic-data-form start-->
      <div class="epi-form basic-data-form">
        <div class="fpart ">
          <div class="fheader">
            <h4 class="fh-notes">基本资料</h4>
          </div>
          <div class="group-row">
            <div class="form-group">
              <label for="cn1" class="label">医疗机构名称</label>
              <div class="control">
                <input type="text" v-model="mechanics.medName" id="cn1"> </div>
            </div>
            <div class="form-group"> </div>
          </div>
          <div class="group-row edit-logo">
            <div class="form-group">
              <label for="cn2" class="label">医疗机构图标</label>
              <div class="control">
                <div class="edit-logo-show" style="background-image: url(../assets/c6.png)"></div>
                <!-- <div class="edit-logo-show">
                  <avatar :json-str="mechanics.avatar"></avatar>
                </div> -->
                <button class="edit-logo-btn">上传</button>
                <!-- <upload :class="['edit-logo-btn']" :model.sync="mechanics.avatar" type="avator"> <a href="###">上传</a>
                </upload>-->
              </div>
            </div>
          </div>
          <div class="group-row">
            <div class="form-group form-radio">
              <label class="label">医疗机构类别</label>
              <div class="control">
                <div class="radio-control">
                  <radio :list="orgTypeList" :checked.sync="mechanics.orgType"></radio>
                </div>
              </div>
            </div>
            <div class="form-group select-style">
              <label for="cn8" class="label">医疗机构等级</label>
              <div class="control">
                <select-ui :list="mainLevelSelect" :selected.sync="mechanics.mainLevel" ></select-ui>
                <select-ui :list="subLevelSelect" :selected.sync="mechanics.subLevel" ></select-ui>
              </div>
            </div>
          </div>
          <div class="group-row group-row-area">
            <div class="form-group">
              <label for="cn1" class="label">省份</label>
              <div class="control">
                <input type="text" v-model="mechanics.province" id="cn1"> </div>
            </div>
            <div class="form-group">
              <label for="cn1" class="label">地区市</label>
              <div class="control">
                <input type="text" v-model="mechanics.city" id="cn1"> </div>
            </div>
            <div class="form-group">
              <label for="cn1" class="label">县级市</label>
              <div class="control">
                <input type="text" v-model="mechanics.district" id="cn1"> </div>
            </div>
          </div>
          <div class="form-group">
            <label for="cn1" class="label">详细地址</label>
            <div class="control">
              <input type="text" v-model="mechanics.address" id="cn1"> </div>
          </div>
          <div class="group-row">
            <div class="form-group">
              <label for="cn1" class="label">联系人</label>
              <div class="control">
                <input type="text" v-model="mechanics.linkman" id="cn1"> </div>
            </div>
            <div class="form-group">
              <label for="cn1" class="label">联系电话</label>
              <div class="control">
                <input type="text" v-model="mechanics.tel" id="cn1"> </div>
            </div>
          </div>
          <div class="group-row">
            <div class="form-group">
              <label for="cn1" class="label label-name-long">物资部门
                <br>负责人</label>
              <div class="control">
                <input type="text" v-model="mechanics.materialDeptLinkman" id="cn1"> </div>
            </div>
            <div class="form-group">
              <label for="cn1" class="label label-name-long">物资部门
                <br>电话</label>
              <div class="control">
                <input type="text" v-model="mechanics.materialDeptTel" id="cn1"> </div>
            </div>
          </div>
          <div class="group-row">
            <div class="form-group">
              <label for="cn1" class="label label-name-long">药剂部门
                <br>负责人</label>
              <div class="control">
                <input type="text" v-model="mechanics.drugDeptLinkMan" id="cn1"> </div>
            </div>
            <div class="form-group">
              <label for="cn1" class="label label-name-long">药剂部门
                <br>电话</label>
              <div class="control">
                <input type="text" v-model="mechanics.drugDeptLinkTel" id="cn1"> </div>
            </div>
          </div>
        </div>
      </div>
      <!--basic-data-form end-->
      <div class="fpart">
        <div class="fheader">
          <h4 class="fh-book">科室信息</h4>
          <div class="group-btns fr">
            <a href="javascript:;" class="tbtn tb-modify">修改</a>
            <a href="javascript:;" class="tbtn tb-add">增加</a>
            <a href="javascript:;" class="tbtn tb-remove">删除</a>
            <a @click="saveDeptInfo" href="javascript:;" class="tbtn tb-save">保存</a>
          </div>
        </div>
        <!--department start -->
        <div class="department clearfix">
          <!--department-category start-->
          <div class="department-category fl">
            <!--多加一层后期可以加scroll-->
            <ul class="department-category-root">
              <li :class="{ 'active': $index == activeDeptIndex }" v-for="dept in deptList" @click="selectDept($index)">{{dept.label}}</li>
            </ul>
          </div>
          <!--department-category end-->
          <!--department-info start-->
          <div class="department-info">
            <div class="epi-form">
              <div class="group-row">
                <div class="form-group">
                  <label for="cn1" class="label">编码</label>
                  <div class="control">
                    <input type="text" id="cn1" v-model="deptInfo.code" > </div>
                </div>
                <div class="form-group">
                  <label for="cn1" class="label">主管</label>
                  <div class="control">
                    <input type="text" id="cn1" v-model="deptInfo.admin" > </div>
                </div>
              </div>
              <div class="group-row">
                <div class="form-group">
                  <label for="cn1" class="label">名称</label>
                  <div class="control">
                    <input type="text" id="cn1" v-model="deptInfo.name" > </div>
                </div>
                <div class="form-group">
                  <label for="cn1" class="label">HIS编码</label>
                  <div class="control">
                    <input type="text" id="cn1" v-model="deptInfo.hisCode" > </div>
                </div>
              </div>
              <div class="group-row">
                <div class="form-group">
                  <label for="cn1" class="label">订货权限</label>
                  <div class="control select-style">
                    <select>
                      <option value="">允许</option>
                    </select>
                  </div>
                </div>
                <div class="form-group">
                  <label for="cn1" class="label">类别</label>
                  <div class="control select-style">
                   <select-ui :list="deptTypeSelect" :selected.sync="deptInfo.type.id" empty-text="请选择类别"></select-ui>
                  </div>
                </div>
              </div>
            </div>
            <div class="di-row di-top-border">
              <h5>送货周期</h5>
            </div>
            <div class="di-content di-top-border">
              <div class="delivery-period">
                <table>
                  <thead>
                    <tr>
                      <th class="w90"></th>
                      <th class="w70">周一</th>
                      <th class="w70">周二</th>
                      <th class="w70">周三</th>
                      <th class="w70">周四</th>
                      <th class="w70">周五</th>
                      <th class="w70">周六</th>
                      <th class="w70">周日</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td>上午</td>
                      <td>
                        <checkbox :list="['am-1']" :layout="['green', 'inline', 'alone']" :selected.sync="deliverCycle"></checkbox>
                      </td>
                      <td>
                        <checkbox :list="['am-2']" :layout="['green', 'inline', 'alone']" :selected.sync="deliverCycle"></checkbox>
                      </td>
                      <td>
                        <checkbox :list="['am-3']" :layout="['green', 'inline', 'alone']" :selected.sync="deliverCycle"></checkbox>
                      </td>
                      <td>
                        <checkbox :list="['am-4']" :layout="['green', 'inline', 'alone']" :selected.sync="deliverCycle"></checkbox>
                      </td>
                      <td>
                        <checkbox :list="['am-5']" :layout="['green', 'inline', 'alone']" :selected.sync="deliverCycle"></checkbox>
                      </td>
                      <td>
                        <checkbox :list="['am-6']" :layout="['green', 'inline', 'alone']" :selected.sync="deliverCycle"></checkbox>
                      </td>
                      <td>
                        <checkbox :list="['am-7']" :layout="['green', 'inline', 'alone']" :selected.sync="deliverCycle"></checkbox>
                      </td>
                    </tr>
                    <tr>
                      <td>下午</td>
                      <td>
                        <checkbox :list="['pm-1']" :layout="['green', 'inline', 'alone']" :selected.sync="deliverCycle"></checkbox>
                      </td>
                      <td>
                        <checkbox :list="['pm-2']" :layout="['green', 'inline', 'alone']" :selected.sync="deliverCycle"></checkbox>
                      </td>
                      <td>
                        <checkbox :list="['pm-3']" :layout="['green', 'inline', 'alone']" :selected.sync="deliverCycle"></checkbox>
                      </td>
                      <td>
                        <checkbox :list="['pm-4']" :layout="['green', 'inline', 'alone']" :selected.sync="deliverCycle"></checkbox>
                      </td>
                      <td>
                        <checkbox :list="['pm-5']" :layout="['green', 'inline', 'alone']" :selected.sync="deliverCycle"></checkbox>
                      </td>
                      <td>
                        <checkbox :list="['pm-6']" :layout="['green', 'inline', 'alone']" :selected.sync="deliverCycle"></checkbox>
                      </td>
                      <td>
                        <checkbox :list="['pm-7']" :layout="['green', 'inline', 'alone']" :selected.sync="deliverCycle"></checkbox>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
            <div class="di-row di-top-border">
              <h5>库房管理品种</h5>
              <div class="radio-control">
                <radio :list="warehouseGoopAdmin" :checked.sync="deptInfo.warehouseGoopAdmin"></radio>
              </div>
            </div>
            <template v-if="deptInfo.warehouseGoopAdmin == 1">
            <div class="di-row di-top-border">
              <div class="tabBtn-type fl">
                <radio :list="showGoodsType" :checked.sync="deptInfo.showGoodsType"></radio>
              </div>
              <div v-if="deptInfo.showGoodsType == 0" class="min-search min-search-green fr">
                <input class="min-search-txt" v-model="search.search_LIKE_code" @keydown.enter.prevent="findGoosPage" type="text" placeholder="输入商品名称">
                <button class="min-search-btn" @click="findGoosPage(true)"></button>
              </div>
            </div>
            <!--di-type-show one start-->
            <div v-if="deptInfo.showGoodsType == 0" class="di-type-show di-top-border">
              <div class="group-btns">
                <a href="javascript:;" class="tbtn tb-remove" @click="delGoos">删除</a>
              </div>
              <table class="di-table itable itable-lr-blank">
                <thead>
                  <tr>
                    <th class="w80">选择</th>
                    <th class="w90 t-left">序号</th>
                    <th class="t-left">商品</th>
                    <th class="w80">商品大类</th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="good in goodList">
                    <td>
                      <checkbox :list="[good.id]" :layout="['alone']" :selected.sync="allDetailSelectedArray"></checkbox>
                    </td>
                    <td class="t-left">{{$index + 1}}</td>
                    <td class="t-left">
                      <p>{{good.code}}</p>
                      <a class="td-tit" href="javascript:;">{{good.goodsName}}</a>
                      <p>{{good.spec}}</p>
                      <p>{{good.factory}}</p>
                      <p>{{good.zczh}}</p>
                    </td>
                    <td>{{good.bigType.name}}</td>
                  </tr>
                </tbody>
              </table>
              <pagination 
                   @page-change="findGoosPage" 
                   :class="['m-20-0']"
                   :page-no.sync="search.page" 
                   :total-pages.sync="search.totalPages"></pagination>
            </div>
            <!--di-type-show one end-->
            <!--di-type-show two start-->
            <div v-else class="di-type-show di-top-border">
              <div class="group-btns">
                <a href="javascript:;" class="tbtn tb-remove">删除</a>
                <!-- <a href="javascript:;" class="tbtn tb-save">保存</a> -->
              </div>
              <div class="search-and-list">
                <div class="min-search min-search-green">
                  <input class="min-search-txt" v-model="searchByHospital.search_LIKE_code" @keydown.enter.prevent="findGoosPage" type="text" placeholder="输入商品名称">
                <button class="min-search-btn" @click="findGoosPage(true)"></button>
                </div>
                <table class="di-table itable ">
                  <tbody>
                    <tr  v-for="hospitalGood in goodByHospitalList">
                      <td class="">{{$index + 1}}
                        <a class="btn-d btn-d-green btn-d-activate td-add-btn ">添加</a>
                      </td>
                      <td class="t-left">
                        <a class="td-tit" href="javascript:;">{{hospitalGood.goodsName}}</a>
                        <p>{{hospitalGood.spec}}</p>
                        <p>{{hospitalGood.factory}}</p>
                        <p>{{hospitalGood.zczh}}</p>
                      </td>
                    </tr>
                  </tbody>
                </table>
                <pagination 
                   @page-change="findGoosByHospitalPage" 
                   :class="['m-20-0']"
                   :page-no.sync="searchByHospital.page" 
                   :total-pages.sync="searchByHospital.totalPages"></pagination>
              </div>
              <div class="has-di-table">
                <div class="table-height">
                  <table class="di-table itable itable-lr-blank">
                    <thead>
                      <tr>
                        <th class="w40">选择</th>
                        <th class="w50 t-left">序号</th>
                        <th class="t-left">商品</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr v-for="good in goodList">
                        <td>
                          <div class="checkbox-control checkbox-alone">
                            <input type="checkbox" name="cb" id="cb1" checked="checked">
                            <label class="checkbox" for="cb1"></label>
                          </div>
                        </td>
                        <td class="t-left">{{$index + 1}}</td>
                        <td class="t-left">
                          <p>{{good.code}}</p>
                          <a class="td-tit" href="javascript:;">{{good.goodsName}}</a>
                          <p>{{good.spec}}</p>
                          <p>{{good.factory}}</p>
                          <p>{{good.zczh}}</p>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
                <pagination 
                   @page-change="findGoosPage" 
                   :class="['m-20-0']"
                   :page-no.sync="search.page" 
                   :total-pages.sync="search.totalPages"></pagination>
              </div>
            </div>
            </template>
            <!--di-type-show two end-->
          </div>
          <!--department-info end-->
        </div>
        <!--department end -->
      </div>
      <!-- -->
    </div>
    </template>
</template>


<script>
module.exports={
  data: function(){
    return {
      mechanics: {},
      orgTypeList: [{
        value: "0",
        label: "医院"
      }, {
        value: "1",
        label: "诊所"
      }, {
        value: "2",
        label: "卫生院"
      }],
      mainLevelSelect: [{
        value: "0",
        label: "一级"
      }, {
        value: "1",
        label: "二级"
      }],
      subLevelSelect: [{
        value: "0",
        label: "甲等"
      }, {
        value: "1",
        label: "乙等"
      }],
      deptList: [{
        value: "",
        label: ""
      }],
      activeDeptIndex: -1,
      deptInfo: {
        type: {}
      },
      deliverCycle: [],
      deptTypeSelect: [{
        value: "",
        label: ""
      }],
      warehouseGoopAdmin: [{
        value: "0",
        label: "全品种管理"
      }, {
        value: "1",
        label: "指定品种管理"
      }],
      showGoodsType: [{
        value: "0",
        label: "查看所有明细"
      }, {
        value: "1",
        label: "指定品种"
      }],
      search: {
        pageSize: 1,
        page: 1,
        totalPages: 0,
        search_LIKE_code: ''
      },
      searchByHospital: {
        pageSize: 50,
        page: 1,
        totalPages: 0,
        search_LIKE_code: ''
      },
      goodList: [
        
      ],
      goodByHospitalList: [

      ],
      allDetailSelectedArray: []
    };
  },
  watch: {
    activeDeptIndex: function () {
      this.findDeptInfo();
    },
    deliverCycle: function (list) {
      this.deptInfo.deliveryCycle = list.join(',');
    },
    'deptInfo.warehouseGoopAdmin': function (index) {
      
    },
    'deptInfo.showGoodsType': function (index) {
      this.findGoosPage();
      if (index == '1') {
        this.search.search_LIKE_code="";
        this.findGoosByHospitalPage();
      }
    },
    allDetailSelectedArray: function (list) {
      this.goodsId = list.join(',');
    }
  },
  methods: {
    getData: function(){
      var self = this;
      Ajax.get('/mechanics')
        .then(function (response){
          var data = response.data.data;
          self.$set('mechanics',data);
        })
    },
    saveHospital:function(){
      var self = this;
      Ajax.post('/mechanics/save',this.mechanics)
        .then(function(response){
          // alert("保存成功！");
          // self.$route.router.go('/user');
        });
    },
    getDeptTree:function(){
      var self = this;
      Ajax.get('/dept')
        .then(function (response){
          var data = response.data.data;
          var deptArry = [];
          _.each(data, function (item) {
            deptArry.push({
              value: item.id,
              label: "【"+item.code+"】" + item.name
            });
          });
          self.$set('deptList', deptArry);
          self.activeDeptIndex = 0;
        })
    },
    selectDept: function (index) {
      this.activeDeptIndex = index;
    },
    findDeptInfo: function () {
      var self = this;
      Ajax.get('/dept/item/'+ this.deptList[this.activeDeptIndex]['value'])
        .then(function (response){
          var data = response.data.data;
          self.$set('deptInfo',data);
          if (data.deliveryCycle) {
            self.deliverCycle = data.deliveryCycle.split(/\,\s*/);
          } else {
            self.deliverCycle = [];
          }
        });
    },
    getDeptTypeSelect:function(){
      var self = this;
      Ajax.get('/dept/types')
        .then(function (response){
          var deptType = [];
          _.each(response.data.data, function (item) {
            deptType.push({
              value: item.id,
              label: item.name
            });
          });
          self.$set('deptTypeSelect', deptType);
        });
    },
    saveDeptInfo:function(){
      var self = this;
      Ajax.post('/dept/save',this.deptInfo)
        .then(function(response){
          // alert("保存成功！");
          self.getDeptTree();
        });
    },
    findGoosPage: function(isRefresh){
      var self = this;
      if(isRefresh) {
        this.search.page = 1;
      }
      this.search.search_EQ_deptId = this.deptList[this.activeDeptIndex].value
      Ajax.get('/dept/findGoodPage', this.search)
        .then(function (response){
          var data = response.data.data;
          self.$set('goodList',data.list);
          self.search.totalPages = data.totalPages;
        })
    },
    findGoosByHospitalPage: function(isRefresh){
      var self = this;
      if(isRefresh) {
        this.searchByHospital.page = 1;
      }
      this.searchByHospital.search_EQ_deptId = this.deptList[this.activeDeptIndex].value
      Ajax.get('/dept/findGoosByHospitalPage', this.searchByHospital)
        .then(function (response){
          var data = response.data.data;
          self.$set('goodByHospitalList',data.list);
          self.searchByHospital.totalPages = data.totalPages;
        })
    },
    delGoos:function(data){
      var self = this;
      Ajax.post('/dept/delGoos',this.allDetailSelectedArray)
        .then(function(response){
          // alert("删除成功！");
          self.findGoosPage();
        });
    }
  },
  route:{
    activate : function(){
      this.getData();
      this.getDeptTree();
      this.getDeptTypeSelect();
    }
  }
};
</script>