<!--SN码列表新增弹窗-->
<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">
              <el-select
                v-model="addInfo.snFixedCode"
                filterable
                style="width: 300px"
                @change="snFixedIdChange"
              >
                <el-option
                  v-for="item in snCodeList"
                  :key="item.snCode"
                  :label="item.snCode"
                  :value="item.snCode"
                />
              </el-select>
            </input-vue>
          </div>
          <div class="inputBox">
            <red-star /><input-vue
              v-model.number="addInfo.snStartCode"
              title="SN码（起始序列号）"
              width="300px"
              class="inputWidth"
              placeholder="请输入起始编码"
            />
          </div>
          <div class="inputBox">
            <red-star /><input-vue
              v-model="addInfo.productCode"
              title="产品型号编码 "
              width="300px"
              class="inputWidth"
            >
              <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-select>
            </input-vue>
          </div>
          <div class="inputBox">
            <red-star />
            <input-vue v-model.number="snSegmentNum" title="断码个数" width="300px" class="inputWidth" />
          </div>
          <div class="inputBox">
            <red-star /><input-vue
              v-model="addInfo.hardwareVersion"
              title="硬件版本 "
              width="300px"
              class="inputWidth"
              placeholder="请输入硬件版本"
            />
          </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"
              />
            </input-vue>
          </div>
          <div class="inputBox">
            <input-vue
              v-model="addInfo.remark"
              title="备注"
              width="300px"
              class="inputWidth"
              placeholder="请输入备注"
            />
          </div>
        </div>
        <div class="inputContent">
          <div class="inputBox">
            <red-star /><input-vue
              v-model="addInfo.snFixedIllustration"
              title="SN码固定标识名字 "
              class="inputWidth"
              width="300px"
              placeholder="根据标识自动生成的说明"
            />
          </div>
          <div class="inputBox">
            <red-star /><input-vue
              v-model.number="addInfo.snEndCode"
              title="SN码（终止序列码） "
              width="300px"
              class="inputWidth"
              placeholder="请输入终止码"
            />
          </div>
          <div class="inputBox">
            <red-star /><input-vue
              v-model="addInfo.productId"
              title="产品表id "
              width="300px"
              class="inputWidth"
            />
          </div>
          <div class="inputBox">
            <red-star /><input-vue
              v-model="addInfo.productName"
              title="产品型号名称 "
              width="300px"
              class="inputWidth"
            />
          </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-select>
            </input-vue>
          </div>
          <div class="inputBox">
            <red-star /><input-vue v-model="addInfo.productBrandName" title="品牌名称" width="300px" placeholder="请根据型号自动填充品牌" class="inputWidth" />
          </div>
          <div class="inputBox">
            <red-star /><input-vue
              v-model="addInfo.softwareVersion"
              title="软件版本"
              width="300px"
              class="inputWidth"
              placeholder="请输入软件版本"
            />
          </div>
          <div class="inputBox">
            <red-star /><input-vue
              v-model="addInfo.coreParts"
              title="核心配件 "
              width="300px"
              class="inputWidth"
              placeholder="请输入核心配件"
            />
          </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
    }

  },
  data() {
    return {
      brandList: [],
      productList: [],
      snCodeList: [],
      addInfo: {
        snFixedId: '',
        snFixedCode: '',
        snFixedIllustration: '',
        snStartCode: 0,
        snEndCode: 0,
        snSegmentNum: '',
        productCode: '',
        productName: '',
        productBrandCode: '',
        productBrandName: '',
        hardwareVersion: '',
        softwareVersion: '',
        productId: '',
        productDate: '',
        coreParts: '',
        remark: ''
      }
    }
  },
  computed: {
    snSegmentNum() {
      return this.addInfo.snEndCode - this.addInfo.snStartCode
    }
  },
  mounted() {
    // snFixedId
    S_list({}).then(res => {
      this.snCodeList = res
    })
    list().then(res => {
      this.productList = res
    })
    SelectList().then(res => {
      //  console.log(res,"==============");
      this.brandList = res
    })
  },
  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.snCode == this.addInfo.snFixedCode
      })
      console.log(this.snCodeList[index].snCode, index)
      this.addInfo.snFixedId = this.snCodeList[index].id
      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
    }
  }
}
</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>