<template>
  <el-dialog
    title="详情"
    width="1050px"
    :visible.sync="isShowAdd"
    append-to-body
    @close="close"
  >
    <div class="codeDialog">
      <div class="content">
        <div class="inputContent">
          <div class="inputBox">
            <red-star /><input-vue title="	SN码固定标识表主键id" class="inputWidth">
              <el-select
                v-model="addInfo.snFixedId"
                filterable
                style="width: 300px"
                @change="snFixedIdChange"
              >
                <el-option
                  v-for="item in snCodeList"
                  :key="item.id"
                  :label="item.id"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </input-vue>
          </div>
          <div class="inputBox">
            <red-star /><input-vue title="SN码（固定标识）"    width="300px" class="inputWidth"   v-model="addInfo.snFixedCode">
        
            </input-vue>
          </div>
          <div class="inputBox">
            <red-star /><input-vue
              title="SN码（起始序列号）"
              width="300px"
              class="inputWidth"
              placeholder="请输入起始编码"
              v-model.number="addInfo.snStartCode"
            ></input-vue>
          </div>
          <div class="inputBox">
            <red-star /><input-vue
              title="产品型号编码 "
              width="300px"
              class="inputWidth"
              v-model="addInfo.productCode"
            >
            <el-select
                v-model="addInfo.productCode"
                filterable
                style="width: 300px"
                @change="productChange"
              >
                <el-option
                  v-for="(item,index) in productList"
                  :key="index"
                  :label="item.productCode"
                  :value="item.productCode"
                >
                </el-option>
              </el-select>
            </input-vue>
          </div>
          <div class="inputBox">
            <red-star />
            <input-vue title="断码个数" width="300px" class="inputWidth" v-model.number="snSegmentNum">
            </input-vue>
          </div>
          <div class="inputBox">
            <red-star /><input-vue
              title="硬件版本 "
              width="300px"
              class="inputWidth"
              placeholder="请输入硬件版本"
              v-model="addInfo.hardwareVersion"
            ></input-vue>
          </div>
          <div class="inputBox">
            <red-star /><input-vue title="生产日期" class="inputWidth">
              <el-date-picker
                v-model="addInfo.productDate"
                style="width: 300px"
                type="date"
                format="yyyy - MM - dd "
                value-format="yyyy-MM-dd"
              >
              </el-date-picker>
            </input-vue>
          </div>
          <div class="inputBox">
            <input-vue
              title="备注"
              width="300px"
              class="inputWidth"
              placeholder="请输入备注"
             v-model="addInfo.remark"></input-vue>
          </div>
        </div>
        <div class="inputContent">
          <div class="inputBox">
            <red-star /><input-vue
              title="SN码固定标识名字 "
              class="inputWidth"
                width="300px"
                placeholder="根据标识自动生成的说明"
                v-model="addInfo.snFixedIllustration"
            >

            </input-vue>
          </div>
          <div class="inputBox">
            <red-star /><input-vue
              title="SN码（终止序列码） "
              width="300px"
              class="inputWidth"
              placeholder="请输入终止码"
              v-model.number="addInfo.snEndCode"
            ></input-vue>
          </div>
          <div class="inputBox">
            <red-star /><input-vue
              title="产品表id "
              width="300px"
              class="inputWidth"
                v-model="addInfo.productId"
            >
            </input-vue>
          </div>
          <div class="inputBox">
            <red-star /><input-vue
              title="产品型号名称 "
              width="300px"
              class="inputWidth"
              v-model="addInfo.productName"
            ></input-vue>
          </div>
          <div class="inputBox">
            <red-star /><input-vue title="品牌编号" class="inputWidth">
              <el-select
                v-model="addInfo.productBrandCode"
                filterable
                style="width: 300px"
                @change="brandCodeChange"
              >
                <el-option
                  v-for="(item,index) in brandList"
                  :key="index"
                  :label="item.brandCode"
                  :value="item.brandCode"
                >
                </el-option> </el-select
            ></input-vue>
          </div>
          <div class="inputBox">
            <red-star /><input-vue title="品牌名称" width="300px" placeholder="请根据型号自动填充品牌" class="inputWidth"  v-model="addInfo.productBrandName">
              </input-vue>
          </div>
          <div class="inputBox">
            <red-star /><input-vue
              title="软件版本"
              width="300px"
              class="inputWidth"
              placeholder="请输入软件版本"
              v-model="addInfo.softwareVersion"
            ></input-vue>
          </div>
          <div class="inputBox">
            <red-star /><input-vue
              title="核心配件 "
              width="300px"
              class="inputWidth"
              placeholder="请输入核心配件"
              v-model="addInfo.coreParts"
            ></input-vue>
          </div>
        </div>
      </div>
     
      <div class="btnBox">
        <el-button type="primary" class="save" @click="save">保存</el-button>
        <el-button type="info" class="close" @click="close">取消</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
// import InputVue from "../../input/inputVue.vue";
import dialogHeader from "../dialog/dialogHeader.vue";
import RedStar from "../redStar.vue";
import InputVue from "../input/inputVue.vue";
import {S_list} from "../../../api/product/snCodeRuls"
import {list} from "../../../api/product/product"
import {SelectList} from "../../../api/product/brand"
import {SN_add} from "../../../api/product/snCodeField"
export default {
  components: { dialogHeader, RedStar, InputVue },
  props: {
    isShowAdd: {
      type: Boolean,
      default: false,
    },
  },
  mounted(){
    // snFixedId 
S_list({}).then(res => {

  this.snCodeList=res
})
list().then(res=>{
 
  this.productList= res
})
SelectList().then(res=>{
  //  console.log(res,"==============");
  this.brandList = res
})

  },
  data(){
    return {
      brandList:[],
      productList:[],
      snCodeList:[],
      addInfo:{
        snFixedId:'',
        snFixedCode:'',
        snFixedIllustration:'',
        snStartCode:0,
        snEndCode:0,
        snSegmentNum:'',
        productCode:'',
        productName:'',
        productBrandCode:'',
        productBrandName:'',
        hardwareVersion:'',
        softwareVersion:'',
        productId:'',
        productDate:'',
        coreParts:'',
        remark:''
      }
    }
  },
  methods: {
    save(){
      const temp = {...this.addInfo}
        temp.snSegmentNum= this.snSegmentNum
        SN_add(temp).then(res=>{
         if(res!=""){
             this.$message.success("添加成功")
           this.close()
           this.reset()
         }
        })
        
    },
    close() {
      this.$emit("close");
     
    },
    reset(){
        this.addInfo ={
        snFixedId:'',
        snFixedCode:'',
        snFixedIllustration:'',
        snStartCode:0,
        snEndCode:0,
        snSegmentNum:'',
        productCode:'',
        productName:'',
        productBrandCode:'',
        productBrandName:'',
        hardwareVersion:'',
        softwareVersion:'',
        productId:'',
        productDate:'',
        coreParts:'',
        remark:''
      }
    },
    snFixedIdChange(){
      const index = this.snCodeList.findIndex(item=>{
         return item.id ==this.addInfo.snFixedId
      })
      console.log(this.snCodeList[index].snCode ,index);
      this.addInfo.snFixedCode =this.snCodeList[index].snCode
      this.addInfo.snFixedIllustration = this.snCodeList[index].snIllustration
    },
    productChange(){
        const index = this.productList.findIndex(item=>{
         return item.productCode ==this.addInfo.productCode
      })
   
      this.addInfo.productName = this.productList[index].productName
      //    this.addInfo.productBrandCode =this.snCodeList[index].brandId
      // this.addInfo.productBrandName = this.snCodeList[index].brandName
    },
    brandCodeChange(){
         const index = this.brandList.findIndex(item=>{
         return item.brandCode ==this.addInfo.productBrandCode
      })
   
      this.addInfo.productBrandName = this.brandList[index].brandName
    }
  },
  computed:{
    snSegmentNum(){
       
        return this.addInfo.snEndCode  -this.addInfo.snStartCode 
    }
  }
};
</script>

<style lang="scss" scoped>
.codeDialog {
  width: 1000px;
  .content {
    padding: 10px;
    display: flex;
    .inputContent {
      display: flex;
      flex: 1;
      justify-content: space-between;
      flex-direction: column;
      .inputBox {
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
    }
  }
  .btnBox {
    padding: 30px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    .save,
    .close {
      width: 100px;
    }
  }
}
</style>