<template>
  <!-- 入库 -->
  <el-dialog title="新增生产执行详情" :visible.sync="executeDetailOpen" width="800px" append-to-body destroy-on-close :close-on-click-modal="false">

    <div class="execute-detail-form">
      <div class="execute-detail-item" v-for="(item,index) in detailInfoList">
        <div class="execute-detail-info">
          <el-select v-model="item.type" placeholder="请选择关联类型" size="small">
            <el-option label="图纸" value="1" />
            <el-option label="配件" value="2" />
            <el-option label="装配模板" value="3" />
          </el-select>
        </div>
        <div class="execute-detail-info">
          <el-select v-model="item.typeId" v-if="item.type == '1'" placeholder="请选择图纸" clearable size="small" @change="pictureChange($event,index)">
            <el-option
              v-for="picture in pictureList"
              :key="picture.id"
              :label="picture.title"
              :value="picture.id"
            />
          </el-select>

          <el-select v-model="item.typeId"  v-if="item.type == '2'" placeholder="请选择配件" clearable size="small" @change="storeChange($event,index)">
            <el-option
              v-for="store in storeInfoList"
              :key="store.id"
              :label="store.title"
              :value="store.id"
            />
          </el-select>

          <el-select v-model="item.typeId" v-if="item.type == '3'" placeholder="请选择转配模版" clearable size="small" @change="markChange($event,index)">
            <el-option
              v-for="mark in markList"
              :key="mark.id"
              :label="mark.title"
              :value="mark.id"
            />
          </el-select>
        </div>

        <div class="execute-detail-info">
          <el-input :disabled="item.type != 2" type="number" v-model.number="item.number" placeholder="请输入数量" size="small"/>
        </div>

        <div class="execute-detail-operate">
          <i style="color:#1890ff" class="el-icon-circle-plus-outline" v-if="detailInfoList.length -1 == index" @click="addDetail"></i>
          <i style="color: #ff9292" class="el-icon-remove-outline" v-else @click="delDetail(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 { drawInfoList } from "@/api/track/drawing";
  import { getStores } from "@/api/track/store";
  import { markInfoList } from "@/api/track/mark";
  import { batchAddDetailInfo } from "@/api/track/executeDetail";
  export default {
    name: "add-detail",
    props:{
      executeId:{
        type: Number
      }
    },
    data(){
      return{
        executeDetailOpen: false,
        storeList: [],
        detailInfoList: [{type: '1',inspectId: this.executeId}],
        pictureList: [],
        storeInfoList: [],
        markList: []
      }
    },
    methods:{
      openExecuteDetail(){
        this.initInExecuteDetail();
        this.getPictureInfo();
        this.getStoreInfo();
        this.getMarkInfo();
        this.executeDetailOpen = true;
      },
      addDetail(){
        this.detailInfoList.push({type: '1',inspectId: this.executeId});
      },
      delDetail(index){
        this.detailInfoList.splice(index, 1);
      },
      getPictureInfo(){
        drawInfoList().then(res =>{
          if(res.code == 200){
              this.pictureList = res.data;
          }
        })
      },
      getStoreInfo(){
        getStores().then(res =>{
          if(res.code == 200){
              this.storeInfoList = res.data;
          }
        })
      },
      getMarkInfo(){
        markInfoList().then(res =>{
          if(res.code == 200){
              this.markList = res.data;
          }
        })
      },
      pictureChange(val,index){
        const store = this.detailInfoList.filter(item => item.id == val && item.type == '1');
        if(store.length > 1){
          this.detailInfoList[index].id = "";
          this.$message.error("此图纸已被选中")
        }
      },
      storeChange(val,index){
        const store = this.detailInfoList.filter(item => item.id == val && item.type == '2');
        if(store.length > 1){
          this.detailInfoList[index].id = "";
          this.$message.error("此配件已被选中")
        }
      },
      markChange(val,index){
        const store = this.detailInfoList.filter(item => item.id == val && item.type == '3');
        if(store.length > 1){
          this.detailInfoList[index].id = "";
          this.$message.error("此装配模版已被选中")
        }
      },
      submitStore(){
        if(this.validateData()) return;
        batchAddDetailInfo(this.detailInfoList).then(res =>{
          if(res.code == 200){
            this.executeDetailOpen = false;
            this.$parent.getList();
          }
        })

      },
      validateData(){
        //检查信息是否完整
        for(var i = 0; i< this.detailInfoList.length; i++){
          if(!(this.detailInfoList[i].typeId && this.detailInfoList[i].type && this.detailInfoList[i].number) && 2 == this.detailInfoList[i].type){
            this.$message.error("请检查信息是否填完整");
            return true;
          }
          if(!(this.detailInfoList[i].typeId && this.detailInfoList[i].type)  && 2 !== this.detailInfoList[i].type){
            this.$message.error("请检查信息是否填完整");
            return true;
          }
        }
        /*if(this.detailInfoList.findIndex(item => item.type == '1') == -1){
          this.$message.error("未选择图纸");
          return true;
        }
        if(this.detailInfoList.findIndex(item => item.type == '2') == -1){
          this.$message.error("未选择配件");
          return true;
        }
        if(this.detailInfoList.findIndex(item => item.type == '3') == -1){
          this.$message.error("未选择装配模版");
          return true;
        }*/
      },
      cancel(){
        this.executeDetailOpen = false;
        this.initInExecuteDetail();
      },
      initInExecuteDetail(){
        this.detailInfoList = [{type: '1',inspectId: this.executeId}];
      }
    }
  }
</script>

<style scoped lang="scss">
  .execute-detail-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;
    }
  }

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

  .execute-detail-info{
    flex: 2;
  }

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

</style>
