<template>
  <el-dialog :title="!id ? '新增规格' : '编辑规格'" :close-on-click-modal="false" :visible.sync="visible"
  >
    
      <el-form :inline="true">
        <el-form-item label="类型">
          <el-select
            v-model="specReq.typeId"
            :disabled="departmentReaderOnly"
            @change="changeType"
          >
            <el-option v-for="item in types" :key="item.id" :label="item.type" :value="item.id"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="品牌">
          <el-select
            v-model="specReq.brandId"
            :disabled="departmentReaderOnly"
            placeholder="请选择"
            @change="changeBrand"
          >
            <el-option v-for="item in brands" :key="item.id" :label="item.brand" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <el-form :inline="true">
        <el-form-item label="规格">
          <el-input v-model="specs" placeholder="规格名称" clearable>{{specs}}</el-input>
        </el-form-item>
        <el-form-item label="排序">
          <el-input v-model="rank" placeholder="请输入数字" clearable>{{rank}}</el-input>
        </el-form-item>
      </el-form>
      <el-form :inline="true">
        <el-form-item label="库存">
          <el-input v-model="skus" placeholder="库存数量" clearable>{{skus}}</el-input>
        </el-form-item>
        <el-form-item label="已使用">
          <el-input v-model="used" placeholder="已使用数量" clearable>{{used}}</el-input>
        </el-form-item>
      </el-form>
      <el-form :inline="true">
        <el-form-item label="备注">
          <el-input v-model="remark" placeholder="备注" clearable>{{remark}}</el-input>
        </el-form-item>
      </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button type="warning" @click="save(0)">取消</el-button>
      <el-button type="primary" @click="save(1)">保存</el-button>
      
    </span>
  </el-dialog>
</template>
<script>
import { apiGetDeviceBrands, apiEditDeviceSpecs, apiAddDeviceSpecs } from "@/api/api_equipment";
export default {
  data() {
    return {
      visible: false,
      types: [],
      brands: [],
      id: null,
      typeId: null,
      brandId: null,
      type:null,
      brand:null,
      specs: "",
      skus: 0, //库存
      rank: 0, //排序
      used: 0, //使用
      remark: "", //备注
      departmentReaderOnly: false,
      isAdd: false,
      specReq: {
        page: 1,
        rows: 10,
        sort: null,
        order: null,
        id: null,
        isDelete: 0,
        gmtCreate: null,
        gmtModified: null,
        specs: null,
        brandId: null,
        typeId: null,
        rank: null, //排序
        skus: null, //库存
        remark: null,
        used: 0, //是否在
      },
    };
  },
  mounted() {},
  computed: {},
  methods: {
    async init(
      obj,
      types,
      brands
    ) {
      console.log("device-spec-detail init")
      this.specReq.typeId = obj.typeId
      this.typeId = obj.typeId
      this.specReq.brandId = obj.brandId
      this.brandId = obj.brandId
      this.id = obj.id
      this.type = obj.type
      this.brand = obj.brand
      this.specs = obj.specs
      this.skus = obj.skus
      this.rank = obj.rank
      this.used = obj.used
      this.remark = obj.remark
      this.brand = obj.brand
      this.types = JSON.parse(JSON.stringify(types))//拷贝一份
      this.types.splice(0, 1)//去掉全部
      this.brands = JSON.parse(JSON.stringify(brands))//拷贝一份
      this.brands.splice(0, 1)//去掉全部
      this.visible = true
      if(!this.id){
        this.isAdd = true
      }else{
        this.isAdd = false
      }
      if(this.typeId){
        this.getBrands()
      }
      
    },
    changeType(val){
      console.log(val)
      this.specReq.brandId = null
      this.getBrands()
      
    },
    changeBrand(val){
      console.log(val)
      
    },
    getBrands(){
      apiGetDeviceBrands(this.specReq).then((data) => {
        console.log(data);
        if (data && data.code === 0) {
          this.brands = data.brands
          this.brands.splice(0, 1);
        } else {
          this.brands = [];
        }
        this.dataListLoading = false;
      });
    },
    save(val){
      if(val == 0){
        this.visible = false
        return
      }
      if(this.specReq.typeId == null){
        this.$message.error('请选择类型')
        return
      }
      console.log(this.specReq.brandId)
      if(this.specReq.brandId == null){
        this.$message.error('请选择品牌')
        return
      }
      if(this.specs == null || this.specs.length == 0){
        this.$message.error('请输入规格名称')
        return
      }
      if(!this.skus  || this.skus.length == 0){
        this.$message.error('请设置库存数量')
        return
      }
      if((!this.rank && this.rank != 0) || this.rank.length == 0){
        this.$message.error('请设置排序')
        return
      }
      if((!this.used  && this.used != 0) || this.used.length == 0){
        this.$message.error('请设置已使用数量')
        return
      }
      this.specReq.specs = this.specs
      this.specReq.skus = this.skus
      this.specReq.rank = this.rank
      this.specReq.remark = this.remark
      this.specReq.used = this.used
      this.specReq.id = this.id
      this.editSpecs()
    },
    editSpecs(){
      console.log('editSpecs')
      if(this.isAdd){
        apiAddDeviceSpecs(this.specReq).then((data) => {
          console.log(data);
          if (data && data.code === 0) {
            this.visible = false
            this.$message('添加成功')
            this.$emit('refreshDataList')
          } else {
            this.$message.error(data.msg)
          }
        });
      } else {
        apiEditDeviceSpecs(this.specReq).then((data) => {
          console.log(data);
          if (data && data.code === 0) {
            this.visible = false
            this.$message('更新成功')
            this.$emit('refreshDataList')
          } else {
            this.$message.error(data.msg)
          }
        });
      }
      
    }
  },
};
</script>