<style>
  .materialQuery .template_comheader {
    padding: 13px 20px;
    border-bottom: 1px solid #EBEEF5;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background: #fff;
  }

  .materialQuery .template_comheader>div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
  }

  .materialQuery .temp_content {
    margin-top: 10px;
    background: #fff;
    padding: 20px;
  }

  .materialQuery .temp_imgStyle {
    display: inline-block;
    margin-right: 10px;
  }
 .materialQuery .app-add-cat .el-checkbox-group{
    font-size: 14px!important;
}
 .materialQuery .app-add-cat .el-checkbox {
    margin-right: 0;
}
 .materialQuery .app-add-cat .el-dialog__body{
    padding:10px 20px!important;
}
   .materialQuery .app-add-cat .tag-box .tag-item {
    margin-right: 5px;
}
 .materialQuery .app-add-cat .tag-box {
    margin: 20px 0;
}
 .materialQuery .app-add-cat .app-goods-cat-list .active {
    background: #FAFAFA;
}
 .materialQuery .app-add-cat .app-goods-cat-list .cat-item {
    cursor: pointer;
    padding: 5px 10px;
}
 .materialQuery .app-add-cat .app-goods-cat-list {
    border: 1px solid #E8EAEE;
    border-radius: 5px;
    margin-top: -5px;
    padding: 10px 0;
    overflow: scroll;
    height: 400px;
}
.materialQuery .el-table td, .el-table th{
  padding: 5px 0;
  font-size: 14px;
}
.materialQuery .shopinformation{
  display: flex;
  flex-direction: row;
  font-size: 12px;
}
</style>
<template>
  <div class="materialQuery">
    <div class="template_comheader">
      <div>
        <span>物料查询</span>
        <el-button type="primary" size="small" @click="flDig=true">同步商品</el-button>
      </div>
    </div>
    <div class="temp_content">
        <div>
            <span>仓库</span>
            <el-select v-model="msg.WareHouseId" placeholder="请选择" size="small" filterable @change="msg.pageIndex=1,getList()">
              <el-option label="不限" :value="0"></el-option>
              <el-option :label="item.Name" :value="item.Id" v-for="(item,index) in getWareHouseList" :key="index"></el-option>
            </el-select>
            <div class="searchInput" style="width:150px;margin-right: 10px;">
                <el-input @keyup.enter.native="msg.pageIndex=1,getList()" style="display:inline-block;width:125px;height:30px"
                placeholder="请输入商品id"
                v-model="msg.GoodsId"
                @clear="msg.pageIndex=1,getList()"
                size="small"
                clearable>
                </el-input>
                <span @click="msg.pageIndex=1,getList()" class="el-icon-search" style="color:#979dad;font-size:14px;position:relative;top:1px"></span>
            </div>
            <div class="searchInput" style="width:250px;margin-right: 10px;">
                <el-input @keyup.enter.native="msg.pageIndex=1,getList()" style="display:inline-block;width:225px;height:30px"
                placeholder="请输入商品名称"
                v-model="msg.Name"
                @clear="msg.pageIndex=1,getList()"
                size="small"
                clearable>
                </el-input>
                <span @click="msg.pageIndex=1,getList()" class="el-icon-search" style="color:#979dad;font-size:14px;position:relative;top:1px"></span>
            </div>
        </div>
        <el-table :data="dataList" border style="width: 100%;margin-Top:10px" v-loading="loading">
            <el-table-column prop="Id" label="ID" width="60"></el-table-column>
            
            <el-table-column prop="Name" label="商品信息" width="500">
                <template slot-scope="scope">
                  <div class="shopinformation">
                    <img :src=" scope.row.ImageList[0]" alt="" style="width: 60px; height: 60px;">
                    <div style="margin-left:5px">
                      <span>{{scope.row.Name}}</span>
                      <div style="width:400px">
                        <span>
                          商品分类：
                          <span v-for="(item,index3) in scope.row.GoodsCategoryList" :key="index3" >{{item}} </span>
                        </span>
                        <span style="margin-left:10px">物料编码:{{scope.row.SuppliesNum}}</span>
                      </div>
                    </div>
                  </div>
                </template>
            </el-table-column>
            <el-table-column label="商品规格列表">
              <template slot-scope="scope">
                  <span v-for="(item,index2) in scope.row.GoodsSpecificationList" :key="index2" >{{item}} </span>
              </template>
            </el-table-column>
            <el-table-column prop="Money" label="成本价格" width="80"></el-table-column>
            <el-table-column prop="Units" label="单位" width="80"></el-table-column>
            <el-table-column  width="80">
               <template slot="header" >
                库存
                <el-tooltip effect="dark" content="选择仓库后有值" placement="top">
                  <i class="el-icon-info"></i>
                </el-tooltip>
              </template>

              <template slot-scope="scope">

                <span >{{scope.row.InventoryNum}}</span>

              </template>
            </el-table-column>
            <el-table-column prop="Remark" label="备注"></el-table-column>
            
            <el-table-column prop="UpdateDate" label="操作时间"></el-table-column>           
        </el-table>
        <el-pagination style="text-align:right" background @current-change="handleCurrentChange"  :current-page.sync="msg.pageIndex"
            :page-size="msg.pageSize" layout="prev, pager, next" :total="total">
        </el-pagination>
    </div>
      <!-- 选择分类 -->
    <el-dialog custom-class="app-add-cat" title="选择分类" :visible.sync="flDig" width="1100px">
        <el-row>
            <el-col :span="8" style="padding:0 10px;box-sizing:border-box">
                <h3 style="padding:15px 0">一级分类</h3>
                <div class="app-goods-cat-list active">
                    <el-checkbox-group v-model="checkList">
                        <div v-for="(item,index) in fenleiData" :key="index" flex="dir:left box:first" class="cat-item">
                            <el-checkbox :label="item">
                                <span style="display: none;">{{item.Name}}</span>
                            </el-checkbox>
                            <div flex="box:last cross:center">
                                <span>{{item.Name}}</span>
                                <i v-if="item.ChildList.length>0" @click="getChild2(item.ChildList)" class="el-icon-arrow-right"></i>
                            </div>
                        </div>
                    </el-checkbox-group>

                </div>
            </el-col>
            <el-col v-show="childList2.length>0" :span="8" style="padding:0 10px;box-sizing:border-box">
                <h3 style="padding:15px 0">二级分类</h3>
                <div class="app-goods-cat-list active">
                    <el-checkbox-group v-model="checkList">
                        <div v-for="(item,index) in childList2" :key="index" flex="dir:left box:first" class="cat-item">
                            <el-checkbox :label="item">
                                <span style="display: none;">{{item.Name}}</span>
                            </el-checkbox>
                            <div flex="box:last cross:center">
                                <span>{{item.Name}}</span>
                                <i v-if="item.ChildList.length>0" @click="getChild3(item.ChildList)" class="el-icon-arrow-right"></i>
                            </div>
                        </div>
                    </el-checkbox-group>

                </div>
            </el-col>
            <el-col v-show="childList3.length>0" :span="8" style="padding:0 10px;box-sizing:border-box">
                <h3 style="padding:15px 0">三级分类</h3>
                <div class="app-goods-cat-list active">
                    <el-checkbox-group v-model="checkList">
                        <div v-for="(item,index) in childList3" :key="index" flex="dir:left box:first" class="cat-item">
                            <el-checkbox :label="item">
                                <span style="display: none;">{{item.Name}}</span>
                            </el-checkbox>
                            <div flex="box:last cross:center">
                                <span>{{item.Name}}</span>
                                <i class="el-icon-arrow-right"></i>
                            </div>
                        </div>
                    </el-checkbox-group>

                </div>
            </el-col>
        </el-row>
        <div class="tag-box">
            <el-tag @close="exitCheck(item)" v-for="(item,index) in checkList" :key="index" type="warning" closable style="margin-right:5px">{{item.Name}}</el-tag>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button size="small" @click="flDig = false">取 消</el-button>
            <el-button @click="chooseFl" size="small" type="primary">确 定</el-button>
        </span>
    </el-dialog>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        loading:false,
        dataList: [],
        fenleiData:[],
        childList2:[],
        childList3:[],
        checkList:[],
        getWareHouseList:[],
        msg: {
          pageIndex: 1,
          pageSize: 10,
          WareHouseId:0,
          GoodsId:'',
          Name:'',
        },
        flDig:false,
        total: 0
      };
    },
    created() {

    },
    methods: {
      handleCurrentChange(val) {
        this.msg.pageIndex = val;
        this.getList();
      },
            // 仓库列表  
      getWareHouse(){
          this.apiJavaPost("/api/Supplies/GetWareHouseList",{Name:''},
              res => {
              if (res.data.resultCode === 1) {
                  this.getWareHouseList=res.data.data;
              } else {
                  this.Error(res.data.message);
              }
              },
              null
          );
      },
      getList() {
        
        if(this.msg.GoodsId!=''){
          this.msg.GoodsId = Number(this.msg.GoodsId)
        }
        this.assetsApipost("/api/property/GetMaterialPageList", this.msg, res => {
          if (res.data.resultCode == 1) {
            this.dataList = res.data.data.pageData;
            this.total = res.data.data.count;
          } else {
            this.Info(res.data.message);
          }
        })
      },
      getTree(){
            let msg1={
                Id:0,
                Name:'',
                Tier:0,
                ParentId:0,
                Enabled:1,
                IsShow:1,
            }
            this.apipost("/api/product/GetProductCategoryTreeList", msg1, res => {
                if(res.data.resultCode==1){
                    let pageData=res.data.data;
                    this.fenleiData=pageData;
                }

            })
        },
        setSyncGoodsToMaterial(CategoryIds){
          this.loading = true
           this.assetsApipost("/api/property/SetSyncGoodsToMaterial", {CategoryIds:CategoryIds}, res => {
             this.loading = false
                if(res.data.resultCode==1){
                   this.Success(res.data.message);
                   this.getList()
                }else{
                   this.Info(res.data.message);
                }

            })
        },
        chooseFl(){
            let CategoryIds=[];
            console.log(this.checkList)
            this.checkList.forEach(item=>{
                CategoryIds.push(item.Id)
            })
            this.msg.pageIndex=1
            console.log(CategoryIds)
            // this.getList();
            this.setSyncGoodsToMaterial(CategoryIds)
            this.flDig=false;
        },
        getChild3(ChildList){
            this.childList3=ChildList;
        },
        getChild2(ChildList){
            this.childList2=ChildList;
        },
        exitCheck(item,index){
            this.checkList.forEach((list,k)=>{
                if(list.Id==item.Id){
                    this.checkList.splice(k,1);
                }
            })
        },
    },
    mounted() {
      this.getList();
      this.getTree();
      this.getWareHouse()
    }
  };

</script>
