<!--SN码列表新增弹窗-->
<template>
  <el-dialog
    title="新增"
    width="1050px"
    :visible.sync="isShowAdd"
    append-to-body
    @close="close"
  >
    <div class="codeDialog">
      <el-form ref="dataForm" :rules="rules" :model="addInfo" class="inputContent" label-position="right" label-width="160px">
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="SN码(固定标识)" prop="snFixedId">
              <el-select
                v-model="addInfo.snFixedId"
                filterable
                style="width: 100%"
                @change="snFixedIdChange"
              >
                <el-option
                  v-for="(item,index) in snCodeList"
                  :key="index"
                  :label="item.snCode"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="SN码固定标识名字" prop="snFixedIllustration">
              <el-input v-model.trim="addInfo.snFixedIllustration" type="text" placeholder="根据标识自动生成的说明" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="SN码(起始序列号)" prop="snStartCode">
              <el-input v-model.trim="addInfo.snStartCode" type="text" placeholder="请输入起始编码" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="SN码(终止序列号)" prop="snEndCode">
              <el-input v-model.trim="addInfo.snEndCode" type="text" placeholder="请输入终止码" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="设备型号" prop="productCode">
              <el-select v-model="addInfo.productCode" filterable style="width: 100%" @change="productChange">
                <el-option
                  v-for="(item,index) in productList"
                  :key="index"
                  :label="item.productCode"
                  :value="item.productCode"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="设备品牌" prop="productBrandName">
              <el-input v-model.trim="addInfo.productBrandName" type="text" placeholder="根据型号自动填充品牌" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="硬件版本" prop="hardwareVersion">
              <el-input v-model.trim="addInfo.hardwareVersion" type="text" placeholder="请输入硬件版本" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="软件版本" prop="softwareVersion">
              <el-input v-model.trim="addInfo.softwareVersion" type="text" placeholder="请输入软件版本" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="生产日期" prop="productDate">
              <el-date-picker
                v-model="addInfo.productDate"
                style="width: 100%"
                type="date"
                format="yyyy-MM-dd "
                value-format="yyyy-MM-dd"
                aria-placeholder="请选择生产日期"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="核心配件" prop="coreParts">
              <el-input v-model.trim="addInfo.coreParts" type="text" placeholder="请输入核心配件" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="备注" prop="remark">
              <el-input v-model.trim="addInfo.remark" type="text" placeholder="请输入备注" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div slot="footer" class="dialog-footer">
      <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 { 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 {
  props: {
    isShowAdd: {
      type: Boolean,
      default: false
    }

  },
  data() {
    return {
      brandList: [],
      productList: [],
      snCodeList: [],
      addInfo: {
        snFixedId: '',
        snFixedCode: '',
        snFixedIllustration: '',
        snStartCode: 0,
        snEndCode: 99,
        snSegmentNum: '',
        productCode: '',
        productName: '',
        productBrandCode: '',
        productBrandName: '',
        hardwareVersion: '',
        softwareVersion: '',
        productId: '',
        productDate: '',
        coreParts: '',
        remark: ''
      },
      rules: {
        snFixedId: [{ required: true, message: '此项不能为空', trigger: ['blur', 'change'] }],
        snFixedIllustration: [{ required: true, message: '此项不能为空', trigger: ['blur', 'change'] }],
        snStartCode: [{ required: true, message: '此项不能为空', trigger: ['blur', 'change'] }],
        snEndCode: [{ required: true, message: '此项不能为空', trigger: ['blur', 'change'] }],
        productCode: [{ required: true, message: '此项不能为空', trigger: ['blur', 'change'] }],
        productParams: [{ required: true, message: '此项不能为空', trigger: ['blur', 'change'] }],
        productBrandName: [{ required: true, message: '此项不能为空', trigger: ['blur', 'change'] }],
        hardwareVersion: [{ required: true, message: '此项不能为空', trigger: ['blur', 'change'] }],
        softwareVersion: [{ required: true, message: '此项不能为空', trigger: ['blur', 'change'] }],
        productDate: [{ required: true, message: '此项不能为空', trigger: ['blur', 'change'] }],
        coreParts: [{ required: true, message: '此项不能为空', trigger: ['blur', 'change'] }]
      }
    }
  },
  computed: {
    snSegmentNum() {
      return this.addInfo.snEndCode - this.addInfo.snStartCode
    }
  },
  mounted() {
    this.fetchSnFixedList()
    this.fetchProductList()
    SelectList().then(res => {
      //  console.log(res,"==============");
      this.brandList = res
    })
  },
  methods: {
    // 获取sn固定标识列表
    fetchSnFixedList() {
      const params = {
        snCode: '',
        snQuantity: ''
      }
      S_list(params).then(res => {
        this.snCodeList = res
      })
    },
    // 获取产品列表
    fetchProductList() {
      const data = {
        productCode: '',
        productName: '',
        categoryId: ''
      }
      list(data).then(res => {
        this.productList = res
      })
    },
    save() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          const temp = { ...this.addInfo }
          temp.snSegmentNum = this.snSegmentNum
          SN_add(temp).then(res => {
            if (res != '') {
              this.$message.success('添加成功')
              this.close()
              this.reset()
              this.$nextTick(() => {
                this.$refs['dataForm'].clearValidate()
              })
            }
          })
        }
      })
    },
    close() {
      this.$emit('close')
    },
    reset() {
      this.addInfo = {
        snFixedId: '',
        snFixedCode: '',
        snFixedIllustration: '',
        snStartCode: 0,
        snEndCode: 99,
        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.productId = this.productList[index].id
      this.addInfo.productName = this.productList[index].productName
      this.addInfo.productBrandCode = this.productList[index].brandCode
      this.addInfo.productBrandName = this.productList[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>