<template>
  <div class="inline-16">
    <el-button type="primary" :disabled="data.status==='审核'" size="small" @click="onShow">编 辑</el-button>
    <el-dialog title="编辑产品" :visible.sync="dialogFormVisible" top="20px" width="80%">
      <el-row :gutter="40">
        <el-form label-position="left" label-width="80px" :model="form" :rules="rules" ref="form" size="small">
          <el-col :span="6">
            <el-form-item label="产品编号" prop="itemno">
              <el-input v-model="form.itemno" placeholder="输入产品编号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="产品名称" prop="itemname">
              <el-input v-model="form.itemname"  placeholder="输入产品名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="型号" prop="model">
              <el-input v-model="form.model" placeholder="输入产品型号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="规格" prop="spec">
              <el-input v-model="form.spec" placeholder="输入产品规格"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="辅助单位">
              <el-checkbox :true-label="1" :false-label="0" v-model="form.isauxunit" @change="isauxunitChange">是否需要辅助单位</el-checkbox>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="主单位" prop="unitid">
              <el-select style="width:100%" v-model="form.unitid" placeholder="请选择" @change="unitChange">
                <el-option
                  v-for="item in unitData"
                  :key="item.unitid"
                  :label="item.unitname"
                  :value="item.unitid">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="辅助单位">
              <el-select style="width:100%" v-model="form.unitgroupid" :disabled="form.isauxunit === 0" placeholder="请选择">
                <el-option
                  v-for="item in unitGroupData"
                  :key="item.unitgroupid"
                  :label="item.unitgroupname"
                  :value="item.unitgroupid">
                  <p style="float: left">{{ item.unitgroupname }}</p>
                  <p style="float:right;color: #8492a6; font-size: 13px">{{ item.conversionrate }}{{item.unitname}}/{{item.auxunitname}},换算率:{{'1:'+ item.conversionrate}}</p>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="9">
            <el-form-item label="换算率">
              <el-input v-model="form.itemname" readonly></el-input>
            </el-form-item>
          </el-col> -->
          <el-col :span="7">
            <el-form-item label="起订量" prop="orderminqty">
              <el-input placeholder="起订量" v-model="form.orderminqty" class="input-with-select">
                <el-select style="width:100px" v-model="form.orderminqty_auxunit" slot="prepend" placeholder="请选择">
                  <el-option label="主单位" :value="0"></el-option>
                  <el-option :disabled="form.isauxunit === 0" label="辅助单位" :value="1"></el-option>
                </el-select>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="增量" prop="orderaddqty">
              <el-input placeholder="增量" v-model="form.orderaddqty" class="input-with-select">
                <el-select style="width:100px" v-model="form.orderaddqty_auxunit" slot="prepend" placeholder="请选择">
                  <el-option label="主单位" :value="0"></el-option>
                  <el-option :disabled="form.isauxunit === 0" label="辅助单位" :value="1"></el-option>
                </el-select>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="批次管理">
              <el-checkbox :true-label="1" :false-label="0" v-model="form.batchcontrol" @change="isauxunitChange">是否需要批次管理</el-checkbox>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="单品管理">
              <el-checkbox :true-label="1" :false-label="0" v-model="form.skucontrol" @change="isauxunitChange">是否需要单品管理</el-checkbox>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="毛重(g)" prop="grossweight">
              <el-input v-model="form.grossweight" placeholder="输入产品毛重(g)"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="	净重(g)" prop="weight">
              <el-input v-model="form.weight" placeholder="输入产品净重(g)"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="高度" prop="height">
              <el-input v-model="form.height" placeholder="输入产品高度(mm)"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="宽度" prop="width">
              <el-input v-model="form.width" placeholder="输入产品宽度(mm)"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="长度" prop="length">
              <el-input v-model="form.length" placeholder="输入产品长度(mm)"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="条形码" prop="barcode">
              <el-input v-model="form.barcode" placeholder="输入条形码"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="备注">
              <el-input v-model="form.remarks" type="textarea" placeholder="输入产品备注"></el-input>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <div class="dialog-footer">
        <el-button size="small" @click="dialogFormVisible = false" class="normal-btn-width">取 消</el-button>
        <el-button size="small" type="warning" @click="onSubmit" class="normal-btn-width btn-warning">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props:['data'],
  data () {
    return {
      dialogFormVisible:false,
      form:{
        "itemid":0,
        "isauxunit":0,
        "unitid":'',
        "unitgroupid":'',
        "itemno":'',
        "itemname":'',
        "model": "",
        "spec": "",
        "orderminqty": '', //订单起订量
        "orderaddqty": '', //订单增量
        "orderminqty_auxunit": 0, //订单起订量控制单位（0:主单位；1:辅助单位）
        "orderaddqty_auxunit": 0 //订单增量控制单位（0:主单位；1:辅助单位）
      },
      unitGroupData:[],
      unitData:[],
      classList:[],
      rules:{
         itemno: [
          { required: true, message: '请输入输入产品编号', trigger: 'blur' },
        ],
        itemname: [
          { required: true, message: '请输入输入产品名称', trigger: 'blur' },
        ],
        model: [
          { required: true, message: '请输入输入产品型号', trigger: 'blur' },
        ],
        spec: [
          { required: true, message: '请输入输入产品规格', trigger: 'blur' },
        ],
        orderminqty: [
          { required: true, message: '请输入起订量', trigger: 'blur' },
        ],
        orderaddqty: [
          { required: true, message: '请输入增量', trigger: 'blur' },
        ],
        grossweight: [
          { required: true, message: '请输入毛重', trigger: 'blur' },
        ],
        weight: [
          { required: true, message: '请输入净重', trigger: 'blur' },
        ],
        height: [
          { required: true, message: '请输入高度', trigger: 'blur' },
        ],
        width: [
          { required: true, message: '请输入宽度', trigger: 'blur' },
        ],
        length: [
          { required: true, message: '请输入长度', trigger: 'blur' },
        ],
        barcode: [
          { required: true, message: '请输入条形码', trigger: 'blur' },
        ],
        isauxunit: [
          { type: 'number', required: true, message: '辅助单位管理不可为空', trigger: 'change' },
        ],
        unitid: [
          { required: true,message: '主计量单位不可为空', trigger: 'blur'}
        ],
        batchcontrol: [
          { required: true,message:'批次管理不可为空', trigger:'change'}
        ],
        skucontrol: [
          { required: true,message:'单品管理不可为空', trigger:'change'}
        ]
      }
    }
  },
  methods:{
    onShow () {
      this.dialogFormVisible = true
      this.queryMain(()=>{
        this.unitlist()
        this.unitGrouplist()
      })
    },
    async queryMain(fn) {
      const res = await this.$api.requested({
        "id": 20220923155302,
        "content": {
          "itemid": this.data.itemid
        },
      })
      this.form = Object.assign({},this.form,res.data)
      fn()
    },
    async unitlist () {
      const res = await this.$api.requested({
        "id": "20220922084803",
        "version":1,
        "nocache": true,
        "content": {
          "pageSize":1000,
          "where":{
            "condition":""
          }
        }
      })
      this.unitData = res.data
    },
    async unitGrouplist () {
      const res = await this.$api.requested({
        "id": "20220922084503",
        "version":1,
        "nocache": true,
        "content": {
          "pageSize":1000,
          "where":{
            "condition":"",
            "unitid":this.form.unitid
          }
        }
      })
      this.unitGroupData = res.data
    },
    async onSubmit () {
      this.$refs['form'].validate(async (valid) => {
        if (!valid) return false
        const res = await this.$api.requested({
          "id": 20220923141502,
          "content": this.form
        })
        this.tool.showMessage(res,()=>{
          this.dialogFormVisible = false
          this.$emit('onSuccess')
        })
      })
    },
    unitChange () {
       this.unitGrouplist()
    },
    isauxunitChange (val) {
      if (val === 0) {
        this.form.orderminqty_auxunit = this.form.orderaddqty_auxunit = 0
        this.form.unitgroupid = ''
      }
    }
  },
  mounted () {
  }
}

</script>
<style>
</style>