<!--产品外观-->
<template>
  <div class="app-container">
    <!-- 添加或修改产品外观对话框 -->
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <el-row>
        <el-col :span="8">
          <el-form-item label="长度cm" prop="length">
            <el-input v-model="form.length" type="number" :precision="2" placeholder="请输入长度" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="宽度cm" prop="width">
            <el-input v-model="form.width" type="number" :precision="2" placeholder="请输入宽度" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="高度cm" prop="height">
            <el-input v-model="form.height" type="number" :precision="2" placeholder="请输入高度" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="厚度mm" prop="thick">
            <el-input v-model="form.thick" type="number" :precision="2" placeholder="请输入厚度" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="成品克重g" prop="weight">
            <el-input v-model="form.weight" type="number" :precision="2" placeholder="请输入成品克重" />
          </el-form-item>
        </el-col>
        <!--<el-col :span="8">
          <el-form-item label="角型" prop="angleType">
            <el-select v-model="form.angleType" placeholder="请选择角型">
              <el-option
                v-for="dict in dict.type.product_shape"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>-->
        <el-col :span="8">
          <el-form-item label="单重(KG)" prop="singleWeight">
            <el-input v-model="form.singleWeight" type="number" :precision="2" placeholder="请输入单重" />
          </el-form-item>
        </el-col>
      </el-row>
      <!-- <el-row>
        <el-col :span="8">
          <el-form-item label="圆角" prop="fillet">
           <el-radio-group v-model="form.fillet" >
              <el-radio
                v-for="dict in dict.type.sys_yes_no"
                :key="dict.value"
                :label="dict.value"
              >{{dict.label}}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="是否异型" prop="isAllotype">
            <el-radio-group v-model="form.isAllotype" >
              <el-radio
                v-for="dict in dict.type.sys_yes_no"
                :key="dict.value"
                :label="dict.value"
              >{{dict.label}}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :span="8" label="是否直角" prop="isRightAngle">
            <el-radio-group v-model="form.isRightAngle">
              <el-radio
                v-for="dict in dict.type.sys_yes_no"
                :key="dict.value"
                :label="dict.value"
              >{{dict.label}}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row> -->
      <el-row>
        <el-col :span="8">
          <el-form-item label="角度(mm)" prop="angle">
            <el-input v-model="form.angle" type="number" :precision="2" placeholder="请输入角度" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="孔径(mm)" prop="aperture">
            <el-input v-model="form.aperture" type="number" :precision="2" placeholder="请输入孔径" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="单层厚(丝)" prop="singleLayerThick">
            <el-input v-model="form.singleLayerThick" type="number" :precision="2" placeholder="请输入单层厚(单位丝)" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>

        <el-col :span="8">
          <el-form-item label="层数" prop="layerNum">
            <el-input v-model="form.layerNum" type="number" :precision="2" placeholder="请输入层数" />
          </el-form-item>
        </el-col>
        <!-- <el-col :span="8">
          <el-form-item label="是否防霉" prop="isMould">
            <el-radio-group v-model="form.isMould" >
              <el-radio
                v-for="dict in dict.type.sys_yes_no"
                :key="dict.value"
                :label="dict.value"
              >{{dict.label}}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="是否写码" prop="isCoding">
            <el-radio-group v-model="form.isCoding" >
              <el-radio
                v-for="dict in dict.type.sys_yes_no"
                :key="dict.value"
                :label="dict.value"
              >{{dict.label}}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col> -->
        <el-col :span="8">
          <el-form-item label="系数" prop="coefficient">
            <el-input v-model="form.coefficient" placeholder="请输入系数" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="角型" prop="shape">
            <el-select v-model="form.shape" placeholder="请选择角型">
              <el-option
                v-for="dict in dict.type.product_shape"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="正面颜色" prop="frontColorName">
            <el-input v-model="form.frontColorName" placeholder="请输入正面颜色" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="反面颜色" prop="oppositeColorName">
            <el-input v-model="form.oppositeColorName"  placeholder="请输入反面颜色" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :md="8" :sm="12">
          <el-form-item label="产品正面">
            <ImageUpload
              :limit="1"
              :value="form.frontImg"
              :fileSize="5"
              @onUploaded="(url) => (this.form.frontImg = url)"
              @onRemoved="() => (this.form.frontImg = '')"
            ></ImageUpload>
          </el-form-item>
        </el-col>
        <el-col :md="8" :sm="12">
          <el-form-item label="产品背面">
            <ImageUpload
              :limit="1"
              :value="form.backImg"
              :fileSize="5"
              @onUploaded="(url) => (this.form.backImg = url)"
              @onRemoved="() => (this.form.backImg = '')"
            ></ImageUpload>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- <el-row>
       
        <el-col :span="8">
          <el-form-item label="样品形状大小" prop="shapeSize">
            <el-input v-model="form.shapeSize" type="number" :precision="4" placeholder="请输入样品形状大小" />
          </el-form-item>
        </el-col>
      </el-row> -->

    </el-form>
  </div>
</template>

<script>
import {getLook } from "@/api/mes/md/look";
export default {
  name: "Look",
  dicts: ['sys_yes_no','product_shape'],
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        itemId: this.itemId
      },
      // 表单参数
      form: {
        length: '',
        width: '',
        height: '',
        thick: '',
        weight: '',
        angleType: '',
        isAllotype:'',
        isRightAngle:'',
        fillet:'',
        angle: '',
        aperture: '',
        singleLayerThick: '',
        singleWeight: '',
        layerNum: '',
        isMould: '',
        isCoding: '',
        certification: '',
        shape: '',
        shapeSize: '',
        createBy: '',
        createTime: '',
        updateBy: '',
        updateTime: '',
        frontColor: [],
        oppositeColor: [],
      },
      // 表单校验
      rules: {
      }
    };
  },

  props: {
    optType: undefined,
    itemId: undefined
  },

  created() {
    this.getProductLook();
  },
  methods: {
    //获取基本信息表单数据
    async getLookFormData(){
      await this.submitForm()
      return this.form
    },

    //回显外观数据
    getProductLook(){
      getLook(this.itemId).then(res=>{
        Object.assign(this.form,res.data)
      })
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        itemId: this.itemId,
        length: null,
        width: null,
        height: null,
        thick: null,
        weight: null,
        angleType: null,
        isAllotype:null,
        isRightAngle:null,
        fillet:null,
        angle: null,
        aperture: null,
        singleLayerThick: null,
        singleWeight: null,
        layerNum: null,
        isMould: null,
        isCoding: null,
        certification: null,
        shape: null,
        shapeSize: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        frontColor: [],
        oppositeColor: [],
      };
      this.resetForm("form");
    },
    /** 提交按钮 */
    async submitForm() {
      return await this.$refs["form"].validate();
    },
  }
};
</script>
