<template>
  <q-card class="q-px-md" style="width:1100px;max-width:1100px;">
    <q-card-section class="row items-center q-pb-none">
      <div class="text-h6">新增出库单</div>
      <q-space />
      <q-btn icon="close" flat round dense v-close-popup />
    </q-card-section>
    <q-card-section style="max-height:75vh;" class="scroll">
      <div class="row" style="margin-bottom:10px ;">
        <div class="col q-mr-md" >
          <q-select dense standout behavior="menu" filled v-model="model.Type" ref="type"
            :options="typeOption" option-label="name" option-value="id" label="类型" emit-value map-options
            :rules="[val => !!val || '请选择类型']"/>
        </div>
        <div class="col ">
          <q-input standout bottom-slots filled v-model="model.Remark" type="text" ref="Remark" label="备注" dense/>
        </div>
      </div>
      <div class="text-subtitle2 text-weight-bold q-mb-md row items-center q-pb-none" >
        <span>列表</span>
        <q-space />
        <q-btn color="primary" size="11px" @click="showhaocai" v-if="model.Type===2">选择耗材</q-btn>
        <q-btn color="primary" size="11px" @click="addclass_haocai" v-if="model.Type===1">添加</q-btn></q-btn>
      </div>
      <div class="q-mt-md">
        <!-- 班级相关 -->
        <q-table :pagination="pageInfo" no-data-label="暂无相关数据" flat
          class="sticky-column-table sticky-header-table sticky-right-column-table no-bottom-table" separator="none"
          :data="dataList_class" :columns="model.Type!=2?columns:columns2" row-key="name" >
           <template v-slot:body-cell-SchoolName="props">
            <q-td :props="props" class="text-negative">
              <q-select dense standout behavior="menu" filled v-model="props.row.SchoolId" ref="school"
             :options="schoolList" option-label="SName" option-value="SId"  emit-value map-options
             :rules="[val => !!val||val>=-1 || '请选择校区']" @input="filterSchoolFn($event,props.rowIndex)"/>
            </q-td>
          </template>
          <template v-slot:body-cell-ClassName="props">
            <q-td :props="props" class="text-negative">
              <q-select dense standout behavior="menu" filled v-model="props.row.ClassId" ref="class" use-input
             :options="classList" option-label="allName" option-value="ClassId" emit-value map-options @filter="classfilter"
             :rules="[val => !!val || '请选择班级']" @input ='filterCourseFn($event,props.rowIndex)'/>
            </q-td>
          </template>
          <template v-slot:body-cell-Name="props">
            <q-td :props="props">
              <div v-for="item in props.row.haocaiList" :key="item.id" class="td_height">
                {{ item.Name||'/' }}
              </div>
            </q-td>
          </template>
          <template v-slot:body-cell-BrandName="props">
            <q-td :props="props" >
              <div v-for="item in props.row.haocaiList" :key="item.id" class="td_height">
                {{ item.BrandName||'/' }}
              </div>
            </q-td>
          </template>
          <template v-slot:body-cell-CategoryName="props">
            <q-td :props="props" >
              <div v-for="item in props.row.haocaiList" :key="item.id" class="td_height">
                {{ item.CategoryName||'/' }}
              </div>
            </q-td>
          </template>
          <template v-slot:body-cell-SupplierName="props">
            <q-td :props="props" >
              <div v-for="item in props.row.haocaiList" :key="item.id" class="td_height">
                {{ item.SupplierName||'/' }}
              </div>
            </q-td>
          </template>
          <template v-slot:body-cell-InventoryNum="props">
            <q-td :props="props" >
              <div v-for="item in props.row.haocaiList" :key="item.id" class="td_height">
                {{ item.InventoryNum}}
              </div>
            </q-td>
          </template>
          
          <template v-slot:body-cell-Number="props">
            <q-td :props="props" class="text-negative">
              <div v-for="(item,index) in props.row.haocaiList" :key="item.id">
                <q-input standout  filled v-model.number="item.Number" type="number" ref="number" :min='0' :max='item.InventoryNum' dense @input="chukuNum_class(item.Number,item.InventoryNum,index,props.rowIndex)"/>
              </div>
            </q-td>
          </template>
          <template v-slot:body-cell-caozuo="props">
            <q-td :props="props" class="text-negative">
              <q-btn flat size="xs" icon="edit" color="accent" style="font-weight:400" label="选择"
                @click="showhaocai(props.rowIndex)" />
                <q-btn flat size="xs" icon="iconfont icon-shanchu" color="negative" style="font-weight:400"
                  class="q-mr-xs" label="" @click="delhaocai_class(props.rowIndex)" />
            </q-td>
          </template>
          <template v-slot:bottom>
            
          </template>
        </q-table>
      </div>

    </q-card-section>
    <q-card-actions align="right" class="bg-white">
      <q-btn label="取消" flat color="primary" v-close-popup />
      <q-btn label="创建出库单" color="accent" class="q-px-md" style="font-weight:400 !important"
        @click="saveStockOut" />
    </q-card-actions>
        <!-- 选择耗材 -->
     <q-dialog v-model="haochaidig" persistent>
       <q-card class="q-px-md" style="width:1000px;max-width:1000px;">
      <q-card-section class="row items-center q-pb-none">
      <div class="text-h6">选择耗材</div>
      <q-space />
      <q-btn icon="close" flat round dense v-close-popup />
    </q-card-section>
        <el-form class="MyEditForm" :model="haochaimsg">
        
        <div class="col row wrap q-mr-lg q-col-gutter-md">
          <div class="col-3">
          <q-input  clearable standout="bg-primary text-white" v-model="haochaimsg.Name" label="耗材名称"
             maxlength="20" />
        </div>
        <div class="col-3">
          <q-input  clearable standout="bg-primary text-white" v-model="haochaimsg.SuppliesNum"
            label="耗材编码"  maxlength="20" />
        </div>
        <div style="display:flex;align-items:center;" >
          <q-btn color="primary" size="11px" @click="gethaocai">查询</q-btn>
        </div>
        </div>
        <el-row>
          <div style="position: relative" class="MyEditForm">
            <div
              class="myScroll"
              style="overflow: scroll; max-height: 500px; margin-top: 20px"
            >
              <table
                style="width: 1250px; min-width: 1000px"
                class="myTable"
                border="0"
                cellspacing="0"
                cellpadding="0"
              >
                <thead>
                  <th>
                    <input
                      class="color-input-red"
                      type="checkbox"
                      v-model="hcisCkedAll"
                      @click="hccheckAll()"
                    />
                  </th>
                  <th>耗材编码</th>
                  <th>耗材名称</th>
                  <th>分类名称</th>
                  <th>品牌名称</th>
                  <th>供应商</th>
                  <th>金额</th>
                  <!-- <th>库存</th> -->
                  <!-- <th>操作时间</th> -->
                  <!-- <th>操作人</th> -->
                </thead>
                <tbody>
                  <tr v-for="(item, index) in haocaiList" :key="index">
                    <td>
                      <input
                        class="color-input-red"
                        type="checkbox"
                        v-model="hccheckList"
                        :value="item"
                        @change="hccheckOne"
                      />
                    </td>
                    <td>{{ item.SuppliesNum }}</td>
                    <td>{{ item.Name }}</td>
                    <td>{{ item.CategoryName }}</td>
                    <td>{{ item.BrandName }}</td>
                    <td>{{ item.SupplierName }}</td>
                    <td>{{ item.Money }}</td>
                    <!-- <td>{{ item.InventoryNum }}</td> -->
                    <!-- <td>{{ item.UpdateDate }}</td> -->
                    <!-- <td>{{ item.UpdateBy }}</td> -->
                  </tr>
                  <tr v-show="haocaiList.length == 0">
                    <td colspan="12" align="center">暂无数据</td>
                  </tr>
                </tbody>
              </table>
            </div>
            <q-pagination class="full-width justify-end" v-model="haochaimsg.pageIndex" color="primary" :max="haocaiPageCount"
            :input="true" @input="changePage" />
            <div class="btnformItem">
              <span class="submitBtn" type="primary" @click="chooseHc"
                >确定</span
              >
              <span class="exitBtn" @click="haochaidig = false">取消</span>
            </div>
          </div>
        </el-row>
      </el-form>
      </q-card>
    </q-dialog>
  </q-card>
</template>

<script>

import {
    getSchoolDropdown,//获取班级下拉列表
    getClassPage_ck
  } from '../../api/school/index';//获取校区列表
  import {GetMaterialPageList,SuppliesStockOutApply} from '../../api/sale/StockOutApplyFor'
  export default {
    props: ["obj"],
    data() {
      return {
        typeOption: [{
            id: 1,
            name: "班级相关"
          },
          {
            id: 2,
            name: "其他业务"
          }
        ],
        model: {
            Type:1,
            Remark:"",
            DetailList:[]
        },
        columns: [
          {
            name: "SchoolName",
            required: true,
            label: "校区",
            align: "left",
            style:"width:200px"
          },
          {
            name: "ClassName",
            required: true,
            label: "班级",
            align: "left",
            style:"width:200px"
          },
           {
            name: "CourseName",
            required: true,
            label: "课程",
            align: "left",
            field:"CourseName",
            style:"width:200px"
          },
           {
            name: "Name",
            required: true,
            label: "耗材名称",
            align: "left",
            field:"Name",
            style:"width:200px"
          },
           {
            name: "BrandName",
            required: true,
            label: "品牌",
            align: "left",
            field:"BrandName",
            style:"width:200px"
          },
           {
            name: "CategoryName",
            required: true,
            label: "分类",
            align: "left",
            field:"CategoryName",
            style:"width:200px"
          },
          //  {
          //   name: "SupplierName",
          //   required: true,
          //   label: "供应商",
          //   align: "left",
          //   field: "SupplierName",
          //   style:"width:200px"
          // },
          {
            name: "InventoryNum",
            required: true,
            label: "库存",
            align: "left",
            field:"InventoryNum",
            style:"width:200px"
          },
          {
            name: "Number",
            required: true,
            label: "出库数量",
            align: "left",
            style:"width:200px"
          },
           {
            name: "caozuo",
            required: true,
            label: "操作",
            align: "left",
            style:"width:200px"
          },     
        ],
       columns2: [
          {
            name: "SchoolName",
            required: true,
            label: "校区",
            align: "left",
            style:"width:200px"
          },
           {
            name: "Name",
            required: true,
            label: "耗材名称",
            align: "left",
            field:"Name",
            style:"width:200px"
          },
           {
            name: "BrandName",
            required: true,
            label: "品牌",
            align: "left",
            field:"BrandName",
            style:"width:200px"
          },
           {
            name: "CategoryName",
            required: true,
            label: "分类",
            align: "left",
            field:"CategoryName",
            style:"width:200px"
          },
           {
            name: "SupplierName",
            required: true,
            label: "供应商",
            align: "left",
            field:"SupplierName",
            style:"width:200px"
          },
          {
            name: "InventoryNum",
            required: true,
            label: "库存",
            align: "left",
            field:"InventoryNum",
            style:"width:200px"
          },
          {
            name: "Number",
            required: true,
            label: "出库数量",
            align: "left",
            style:"width:200px"
          },
           {
            name: "caozuo",
            required: true,
            label: "操作",
            align: "left",
            style:"width:200px"
          },
        ],
        pageInfo: {
          pageIndex: 1,
          pageSize: 12,
          rowsPerPage: 12
        },
        courseList: [], //课程列表
        schoolList:[],
        classList:[],
        allclassList:[],
        dataList_class:[
          {
              SchoolName:"",
              SchoolId:-1,
              ClassName:"",
              ClassId:0,
              CourseName:"",
              haocaiList:[]  
          },
        ],
        dataList: [
            // {
            //     SchoolName:"",
            //     SchoolId:-1,
            //     ClassName:"",
            //     ClassId:0,
            //     CourseName:"",
            // },
        ],
        haochaidig: false, //选择耗材
        haochaimsg: {
        pageIndex: 1,
        pageSize: 10,
        FeeType:0,
        Name: "",
        SuppliesNum: "",
        BrandName: "",
        CategoryId: "",
        SupplierName: "",
        FinanceId: "",
        IsSelectInventory:1,
      },
      haocaiPageCount:0,
      chooseHcIndex:0,
      hcisCkedAll: [], //耗材全选
      hccheckList: [], //耗材多选
      haocaiList: [], //耗材选择列表
      haocaitotal: 0,
      hcisCkedAll: false,
      hccheckAllList: [],
      hcItemList:[]
      };
    },
    watch:{
        dataList:{
            handler(val){
                if(val){
                    this.$forceUpdate();
                }
            },
            deep:true
        }
    },
    created() {

    },
    mounted() {
      this.initObj();
      this.getSchool();
      this.getClass(-1);
      this.gethaocai();
    },
    methods: {
      //初始化对象
      initObj() {
       this.dataList=[]
      },
      //创建出库单
      saveStockOut() {
        this.$refs.type.validate();
        if (
          !this.$refs.type.hasError 
        ) {
          if(this.model.Type===1){
            this.model.DetailList=[]
            this.dataList_class.map(item=>{
              if(item.haocaiList.length>0){
                item.haocaiList.map(_item=>{
                  let obj= {
                    SchoolName:item.SchoolName,
                    SchoolId:item.SchoolId,
                    ClassName:item.ClassName,
                    ClassId:item.ClassId,
                    CourseName:item.CourseName,
                    SuppliesId:_item.Id,
                    Number:_item.Number
                  }
                   this.model.DetailList.push(obj)
                })
                
              }else{
                return
              }
              
           
          })
          
          }else{
          this.model.DetailList=[]
          this.dataList_class.map(item=>{
              if(item.haocaiList.length>0){
                item.haocaiList.map(_item=>{
                  let obj= {
                    SchoolName:item.SchoolName,
                    SchoolId:item.SchoolId,
                    // ClassName:item.ClassName,
                    // ClassId:item.ClassId,
                    // CourseName:item.CourseName,
                    SuppliesId:_item.Id,
                    Number:_item.Number
                  }
                   this.model.DetailList.push(obj)
                })
              }else{
                return
              }
          })
          }
          SuppliesStockOutApply(this.model).then(res=>{
            if(res.data.resultCode===1){
              this.$emit("success")
              this.Success(res.data.message)
            }else{
              this.Error(res.data.message)
            }
          })
        }
      },
      //获取校区列表
      getSchool() {
        getSchoolDropdown({}).then(res => {
          if (res.Code == 1) {
            var tempArray = res.Data;
            if (!tempArray) {
              tempArray = [];
            }
            tempArray.unshift({
              SId: -1,
              SName: "不限"
            })
            this.schoolList = tempArray;
          }
        })
      },
       //获取班级列表
      getClass() {
        getClassPage_ck({}).then(res => {
          if (res.Code == 1) {
           let tempArray = res.Data;
             if (!tempArray) {
              tempArray = [];
            }
            tempArray.forEach(x=>{
              x.allName = x.ClassName+'('+x.ClassNo+')'
            })
            tempArray.unshift({
              ClassId: 0,
              ClassName: "不限",
              allName:'不限'
            })            
            this.classList = tempArray;
            this.allclassList = JSON.parse(JSON.stringify(tempArray))
          }
        })
      },
      classfilter(val, update) {//课程的栓选
          update(() => {
              if (val === '') {
                  this.classList = this.allclassList
              }
              else {
                  const needle = val.toLowerCase();
                  this.classList = this.allclassList.filter(v => v.allName.toLowerCase().indexOf(needle) > -1);
              }
          })
      },
      filterSchoolFn(val,index) {
           let school=this.schoolList.filter(item=>{
               return item.SId==val
           })
            this.dataList_class[index].SchoolName=school[0].SName
           this.$forceUpdate();
      },
      filterCourseFn(val,index) {
           let course=this.classList.filter(item=>{
               return item.ClassId==val
           })
             this.dataList_class[index].CourseName=course[0].CourseName
             this.dataList_class[index].ClassName=course[0].ClassName
           this.$forceUpdate();
      },
      //显示耗材列表
      showhaocai(index){
          if(this.model.Type){
             this.haochaidig=true
             if(this.model.Type===1){
                 this.chooseHcIndex=index
             }
          }else{
              this.$q.notify({
              position: 'center',
              timeout: 2000,
              textColor: 'white',
              actions: [{ icon: 'close', color: 'white' }],
              message: '请选择类型',
            })
          }
      },
    //获取耗材选择列表
    gethaocai() {
    this.hccheckList = [];
    GetMaterialPageList(this.haochaimsg,).then(res=>{
        if (res.data.resultCode === 1) {
            this.haocaiList = res.data.data.pageData;
            this.haocaitotal = res.data.data.count;
            this.haocaiPageCount=res.data.data.pageCount
            this.hccheckAllList = res.data.data.pageData;
          } else {
            this.Error(res.data.message);
          }
    })
    },
    hccheckOne() {
      //单选
      if (this.hccheckList.length < this.hccheckAllList.length) {
        this.hcisCkedAll = false;
      } else {
        this.hcisCkedAll = true;
      }
    },
    //耗材全选
    hccheckAll() {
      if (this.hcisCkedAll == true) {
        this.hccheckList = [];
      } else {
        this.hccheckList = [];
        this.hccheckAllList.forEach((item) => {
          this.hccheckList.push(item);
        });
      }
    },
    //选择耗材
    chooseHc() {
        this.$nextTick(()=>{
        this.haochaidig = false;
        this.hccheckList.forEach((item) => {
        this.hcItemList.push(item);
      });
        let haocaidata=JSON.parse(JSON.stringify(Array.from(new Set(this.hccheckList)))) 
        // haocaidata.forEach(item=>{
        //   item.Number=0
        // })
        this.dataList_class[this.chooseHcIndex].haocaiList=haocaidata
        })
      
    },
    addclass_haocai(){
      let obj= {
                SchoolName:"",
                SchoolId:-1,
                ClassName:"",
                ClassId:0,
                CourseName:"",
                haocaiList:[]
            }
      this.dataList_class.push(obj)
    },
    //删除耗材
    delhaocai_class(index){
      this.dataList_class.splice(index, 1);
    },
    delhaocai(index){
      this.dataList.splice(index, 1);
    },
    
    //翻页
      changePage(val) {
        this.haochaimsg.pageIndex = val;
        this.gethaocai();
      },
       chukuNum_class(val,maxVal,index,rowIndex){
         if(val>maxVal){
          this.dataList_class[rowIndex].haocaiList[index].Number=maxVal
          this.dataList_class[rowIndex-1].haocaiList[index].Number=maxVal
        }else if(val<0||val==undefined||val==null){
           this.dataList_class[rowIndex].haocaiList[index].Number=0
         }
      },
      chukuNum(val,maxVal,index){
         if(val>maxVal){
            this.dataList[index].Number=maxVal
         }else if(val<0||val==undefined||val==null){
             this.dataList[index].Number=0
         }
      },
    },
  };

</script>

<style>
/* myTable */

.myTable {
    width: 100%;
    font-size: 12px;
    border-collapse: collapse;
    font-family: "Microsoft YaHei"!important;
    min-width:1280px;
}

.myTable thead th {
    color: #000000;
    padding-left: 20px;
    height: 50px;
    line-height: 50px;
    text-align: left;
    font-family: "muil";
    font-size: 14px;
}

.myTable thead tr {
    background: transparent!important;
}


/* .myTable .hoverSpan1{
    left: -20px;
}
.myTable .hoverSpan2{
    right: -20px;
} */

.myTable .commonStyle {
    height: 100%;
    background: #fff;
    position: absolute;
    width: 20px;
    top: 0;
    display: none;
}

.myTable tr td {
    padding: 6px 0 6px 20px!important;
}

.myTable tbody tr {
    background: #fff;
    border-bottom: 1px solid #F8FAFB;
    cursor: pointer;
}

.myTable tbody tr:last-child {
    border-bottom: none;
}

.noHoverTable tr {
    border-bottom: none!important;
}

.noHoverTable tr:nth-child(even) {
    background: #fff!important;
}

.myTable tr:nth-child(even) {
    background: #F6F9FB;
}

.myTable tbody .trNobottom:first-child {
    border-top: none!important;
}

.myTable .trNobottom {
    border-top: 1px solid #E2E4EB!important;
    border-bottom: none!important;
}

.myTable tbody tr:hover {
    box-shadow: 0px 0 20px 0px rgba(176, 176, 176, 0.2);
    transition: transform .5s ease;
    /* transform: scaleX(1.02); */
}

.noHoverTable tbody tr:hover {
    box-shadow: 0 0 0 transparent!important;
}

.myTable tbody tr:hover .commonStyle {
    /* display: block; */
    transition: transform .5s ease;
    box-shadow: 0px 0px 0px 0px rgba(176, 176, 176, 0.2);
}

.myTable tbody tr:hover td {
    border-radius: 0!important;
}

.myTable tbody tr:first-child td:first-child {
    border-radius: 20px 0 0 0;
}

.myTable tbody tr:first-child td:last-child {
    border-radius: 0 20px 0 0;
}

.myTable tbody tr:last-child td:first-child {
    border-radius: 0 0 0 20px;
}

.myTable tbody tr:last-child td:last-child {
    border-radius: 0 0 20px 0;
}

.borderTable tbody tr:first-child td:first-child {
    border-radius: 0!important;
}

.borderTable tbody tr:first-child td:last-child {
    border-radius: 0!important;
}



.borderTable {
    width: 100%;
    font-size: 12px;
    border-collapse: collapse;
    font-family: "Microsoft YaHei"!important;
}

.borderTable thead th {
    color: #000000;
    padding-left: 20px;
    height: 50px;
    line-height: 50px;
    text-align: left;
    font-family: "PingFangR";
}

.borderTable thead tr {
    background: transparent!important;
}

.borderTable .hoverSpan1 {
    left: -20px;
}

.borderTable .hoverSpan2 {
    right: -20px;
}

.borderTable .commonStyle {
    height: 100%;
    background: #fff;
    position: absolute;
    width: 20px;
    top: 0;
    display: none;
}

.borderTable tr {
    background: #fff;
    cursor: pointer;
}




/* .borderTable .trNobottom{
    border-top:  4px solid #F8FAFB!important;
    border-bottom:none!important;
} */

.borderTable tbody tr:hover {
    box-shadow: 0px 0 20px 0px rgba(176, 176, 176, 0.2);
    transition: transform .5s ease;
    /* transform: scaleX(1.02); */
}

.borderTable tbody tr:hover .commonStyle {
    display: block;
    transition: transform .5s ease;
    box-shadow: 0px 0px 0px 0px rgba(176, 176, 176, 0.2);
}

.borderTable tbody tr:hover td {
    border-radius: 0!important;
}

.borderTable tbody tr:first-child td:first-child {
    border-radius: 20px 0 0 0;
}

.borderTable tbody tr:first-child td:last-child {
    border-radius: 0 20px 0 0;
}

.borderTable tbody tr:last-child td:first-child {
    border-radius: 0 0 0 20px;
}

.borderTable tbody tr:last-child td:last-child {
    border-radius: 0 0 20px 0;
}

.borderTable tr td {
    position: relative;
    padding: 11px 0 11px 20px;
    border: 1px solid #E2E4EB;
}

.tableMoreUl {
    background: #F6F9FB;
    width: 100%;
    font-size: 12px;
}

.tableMoreUl li {
    border-bottom: 1px solid #E2E4EB;
    padding: 12px;
}

.tableMoreUl li span {
    display: inline-block;
    width: 22%;
}

.tableMoreUl li:last-child {
    border-bottom: none;
}

.el-textarea__inner {
    border: none!important;
    outline: none!important;
}

.myTable tbody .noData td {
    border-radius: 0!important;
}

.MyEditForm .btnformItem {
    display: block!important;
    text-align: center;
    font-size: 12px;
    margin-top: 20px;
    margin-bottom: 10px;
    font-family: "Microsoft YaHei";
}

.MyEditForm .btnformItem span {
    display: inline-block;
    width: 100px;
    height: 40px;
    line-height: 40px;
    border-radius: 22px;
    cursor: pointer;
}

.MyEditForm .btnformItem .submitBtn {
    background-color: var(--q-color-primary);
    color: #fff;
    margin-right: 20px;
}

.MyEditForm .btnformItem .exitBtn {
    border: 1px solid var(--q-color-primary);
    color: var(--q-color-primary);
}

.MyEditForm .is-required::after,
.is-required::before {
    position: absolute;
    left: -12px;
    top: 15px;
    content: '*';
    color: #F56C6C;
    margin-right: 4px;
}
td .q-field--with-bottom{
      padding-bottom: 0px
}
td .td_height{
  height: 40px;
  line-height: 40px;
}
</style>
