<template>
  <el-form ref="form" :rules="rules" label-width="110px" :model="form">
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="产线" prop="proLineId">
          <el-select
            v-model="form.proLineId"
            placeholder="产线"
            style="width: 100%"
            :disabled="showEdit || showOutput"
            @change="getSideLibaryList"
          >
            <el-option
              v-for="item in proLineIdList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="所属线边库" prop="sideLibaryId">
          <el-select
            v-model="form.sideLibaryId"
            placeholder="所属线边库"
            style="width: 100%"
            :disabled="showEdit || showOutput"
          >
            <el-option
              v-for="(item, i) in sideLibaryIdList"
              :key="i"
              :label="item.name"
              :value="item.sideLibaryId"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="耗材名称" prop="name">
          <el-select
            v-model="form.name"
            filterable
            placeholder="耗材名称"
            style="width: 100%"
            :disabled="showEdit || showOutput"
            @change="selectMeta"
          >
            <el-option
              v-for="(item, i) in consumablesNameList"
              :key="i"
              :label="item.name"
              :value="item.name"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="规格" prop="spec">
          <el-select
            v-model="form.spec"
            placeholder="规格"
            style="width: 100%"
            :disabled="showEdit || showOutput"
          >
            <el-option
              v-for="(item, i) in consumablesSpecList"
              :key="i"
              :label="item.spec"
              :value="item.spec"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="批次编码" prop="batchCode" v-if="!showEdit">
          <el-input
            v-if="!showOutput"
            v-model="form.batchCode"
            :disabled="showEdit"
            placeholder="批次编码"
          ></el-input>
          <el-select
            v-if="showOutput"
            v-model="form.batchCode"
            placeholder="批次编码"
            style="width: 100%"
            @change="toggleSupplier"
          >
            <el-option
              v-for="item in batchCodeList"
              :key="item.batchCode"
              :label="item.batchCode"
              :value="item.batchCode"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item
          :label="showOutput ? '出库数量' : '入库数量'"
          prop="num"
          v-if="!showEdit"
        >
          <el-input-number
            v-model="form.num"
            :min="0"
            :max="999999999"
            style="width: 100%"
            :disabled="showEdit"
          ></el-input-number>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="供应商" prop="supplier" v-if="!showEdit">
          <el-input
            v-model="form.supplier"
            :disabled="showEdit || showOutput"
            placeholder="供应商"
          ></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="单位" prop="unit">
          <el-input v-model="form.unit" placeholder="单位" disabled></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20" v-if="showEdit">
      <el-col :span="12">
        <el-form-item label="最低安全库存" prop="minNum">
          <el-input-number
            v-model="form.minNum"
            :min="0"
            :max="999999999"
            style="width: 100%"
          ></el-input-number>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="最高安全库存" prop="maxNum">
          <el-input-number
            v-model="form.maxNum"
            :min="0"
            :max="9999999999"
            style="width: 100%"
          ></el-input-number>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20" v-if="showOutput">
      <el-col :span="12">
        <el-form-item label="领取人" prop="recipient">
          <el-input v-model="form.recipient" placeholder="领取人"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="24">
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" placeholder="备注"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>
<script>
import {
  getMaterialDetail,
  getMaterialManageByid,
  materialManageUpdate,
  materialManageInsert,
  materialManageDelete
} from '@/api/consumablesManagement'
import { sideLibraryList, materialList, getSpecList } from '@/api/basicConfig'
export default {
  name: 'inAndOutManagementAdd',
  data() {
    return {
      form: {
        id: '',
        proLineId: '',
        sideLibaryId: '',
        name: '',
        spec: '',
        batchCode: '',
        num: '',
        supplier: '',
        unit: '',
        remark: '',
        minNum: '',
        maxNum: '',
        recipient: ''
      },
      rules: {
        proLineId: [
          { required: true, message: '请选择产线', trigger: 'change' }
        ],
        sideLibaryId: [
          { required: true, message: '请选择所属线边库', trigger: 'change' }
        ],
        name: [
          { required: true, message: '请选择耗材名称', trigger: 'change' }
        ],
        spec: [{ required: true, message: '请选择规格', trigger: 'change' }],
        batchCode: [
          { required: true, message: '请输入批次编码', trigger: 'blur' }
        ],
        num: [{ required: true, message: '请输入入库数量', trigger: 'blur' }],
        minNum: [
          { required: true, message: '请输入最低安全库存', trigger: 'blur' }
        ],
        maxNum: [
          { required: true, message: '请输入最高安全库存', trigger: 'blur' }
        ]
      },
      proLineIdList: JSON.parse(localStorage.getItem('publicList'))
        .proLineVoList,
      sideLibaryIdList: [],
      consumablesNameList: [],
      consumablesSpecList: [],
      showEdit: false, // 编辑
      showOutput: false, // 出库
      batchCodeList: []
    }
  },
  methods: {
    init(param) {
      this.getMaterialList()
      if (param) {
        this.form.id = param.id
        getMaterialManageByid({ id: this.form.id }).then((res) => {
          this.form.proLineId = '1'
          // this.form.proLineId = res.data.lineID
          this.getSideLibaryList(this.form.proLineId)
          this.form.sideLibaryId = res.data.sideLibaryId
          this.form.name = res.data.materialName
          this.selectMeta(this.form.name)
          this.form.spec = res.data.spec
          this.form.minNum = res.data.minNum ? res.data.minNum : 0
          this.form.maxNum = res.data.maxNum ? res.data.maxNum : 0
          this.form.remark = res.data.remark
          this.form.recipient = this.$store.getters.username
            ? this.$store.getters.username
            : ''
        })
        if (param.type === 'edit') {
          this.showEdit = true
          this.showOutput = false
          console.log('编辑')
        } else {
          this.showOutput = true
          this.showEdit = false
          this.getBatch(this.form.id)
          console.log('出库')
        }
      } else {
        this.form.id = ''
      }
    },
    getSideLibaryList(id) {
      this.form.sideLibaryId = ''
      sideLibraryList({ id }).then((res) => {
        if (res.code === 0) {
          this.sideLibaryIdList = res.data
        }
      })
    },
    getMaterialList() {
      materialList().then((res) => {
        if (res.code === 0) {
          this.consumablesNameList = res.data
        }
      })
    },
    selectMeta(val) {
      this.consumablesNameList &&
        this.consumablesNameList.map((item) => {
          if (item.name === val) {
            this.form.unit = item.unit
          }
        })
      getSpecList({ name: val }).then((res) => {
        console.log(res)
        if (res.code === 0) {
          this.consumablesSpecList = res.data
          if (!this.showEdit && !this.showOutput) {
            this.form.spec = ''
          }
        }
      })
    },
    getBatch(id) {
      getMaterialDetail({ id }).then((res) => {
        if (res.code === 0) {
          this.batchCodeList = res.data
        }
      })
    },
    submitForm() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          if (this.form.id) {
            if (this.showEdit) {
              materialManageUpdate({
                id: this.form.id,
                minNum: this.form.minNum,
                maxNum: this.form.maxNum,
                remark: this.form.remark
              }).then((res) => {
                if (res.code === 0) {
                  this.$message({
                    message: '操作成功',
                    type: 'success',
                    duration: 1500
                  })
                  this.$emit('successSubmit')
                }
              })
            } else {
              materialManageDelete({ ...this.form }).then((res) => {
                if (res.code === 0) {
                  this.$message({
                    message: '操作成功',
                    type: 'success',
                    duration: 1500
                  })
                  this.$emit('successSubmit')
                }
              })
            }
          } else {
            materialManageInsert({ ...this.form }).then((res) => {
              if (res.code === 0) {
                this.$message({
                  message: '操作成功',
                  type: 'success',
                  duration: 1500
                })
                this.$emit('successSubmit')
              }
            })
          }
        } else {
          return false
        }
      })
    },
    formClear() {
      this.showEdit = false
      this.showOutput = false
      this.batchCodeList = []
      this.$refs.form.resetFields()
    },
    toggleSupplier(val) {
      this.batchCodeList &&
        this.batchCodeList.map((item) => {
          if (val === item.batchCode) {
            this.form.supplier = item.supplier
          }
        })
    }
  }
}
</script>
