<template>
    <!-- 入库 -->
  <el-dialog title="入库" :visible.sync="houseOpen" width="500px" append-to-body destroy-on-close :close-on-click-modal="false">

    <div class="store-form">
      <div class="store-item" v-for="(item,index) in inHouseStore">
        <div class="store-info">
          <el-select v-model="item.id" placeholder="请选择配件" clearable size="small" @change="storeChange($event,index)">
            <el-option
              v-for="store in storeList"
              :key="store.id"
              :label="store.title"
              :value="store.id"
            />
          </el-select>
        </div>

        <div class="store-info">
          <el-input type="number" v-model.number="item.num" placeholder="请输入数量" size="small"/>
        </div>

        <div class="store-operate">
          <i style="color:#1890ff" class="el-icon-circle-plus-outline" v-if="inHouseStore.length -1 == index" @click="addStore"></i>
          <i style="color: #ff9292" class="el-icon-remove-outline" v-else @click="delStore(index)"></i>
        </div>
      </div>
    </div>

    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitStore">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </el-dialog>

</template>

<script>
  import { getStores, inHouse } from "@/api/track/store";
  export default {
    name: "house",
    data(){
        return{
          houseOpen: false,
          storeList: [],
          inHouseStore: [{}]
        }
    },
    methods:{
      openHouse(){
        this.initInHouseStore();
        getStores().then(res =>{
          if(res.code == 200){
              this.storeList = res.data;
              this.houseOpen = true;
          }
        });
      },
      addStore(){
        if(this.storeList.length == this.inHouseStore.length){
          this.$message.error("当前没有更多可添加配件,只有" + this.storeList.length +"种配件可入库");
          return
        };
        this.inHouseStore.push({});
      },
      delStore(index){
        this.inHouseStore.splice(index, 1);
      },
      storeChange(val,index){
        const store = this.inHouseStore.filter(item => item.id == val);
        if(store.length > 1){
          this.inHouseStore[index].id = "";
          this.$message.error("此配件已被选中")
        }
      },
      submitStore(){
        console.log("gege=======",this.inHouseStore)
        this.inHouseStore.forEach(item =>{
          if(!(item.id && item.num)){
             this.$message.error("请检查信息是否填完整");
             return
          }
          inHouse(this.inHouseStore).then(res =>{
            if(res.code == 200){
              this.houseOpen = false;
              this.$parent.getList();
            }
          })
        })

      },
      cancel(){
        this.houseOpen = false;
        this.initInHouseStore();
      },
      initInHouseStore(){
        this.inHouseStore = [{}];
      }
    }
  }
</script>

<style scoped lang="scss">
  .store-form{
    height: 350px;
    overflow-y: scroll;
    &::-webkit-scrollbar {
      /* 设置滚动条宽度 */
      width: 4px;
      /* 设置滚动条背景色 */
      //background: black;
    }

    //滚动条轨道
    &::-webkit-scrollbar-track {
      background-color:transparent;
      -webkit-border-radius: 2em;
      -moz-border-radius: 2em;
      border-radius:2em;
    }

    //滚动条滑块
    &::-webkit-scrollbar-thumb {
      background-color: rgb(147,147,153,0.5);
      -webkit-border-radius: 2em;
      -moz-border-radius: 2em;
      border-radius:2em;
    }
  }

  .store-item{
    display: flex;
    margin: 4px auto;
  }

  .store-info{
    flex: 2;
  }

  .store-operate{
    flex: 0.2;
    text-align: center;
    margin: auto
  }

</style>
