<template>
  <div class="inline-16">
    <el-button type="primary" :disabled="data.status==='审核'" size="small" @click="onShow">编 辑</el-button>
    <el-dialog title="新增产品" :visible.sync="dialogFormVisible">
      <el-row :gutter="40">
        <el-form label-position="left" label-width="80px" :model="form" size="small">
          <el-col :span="12">
            <el-form-item label="产品编号">
              <el-input v-model="form.itemno" placeholder="输入产品编号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="产品名称">
              <el-input v-model="form.itemname"  placeholder="输入产品名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="型号">
              <el-input v-model="form.model" placeholder="输入产品型号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="规格">
              <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="12">
            <el-form-item label="主单位">
              <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="12">
            <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="12">
            <el-form-item label="起订量">
              <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="12">
            <el-form-item label="增量">
              <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-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:[]
    }
  },
  methods:{
    onShow () {
      this.dialogFormVisible = true
      this.queryMain()
      this.unitlist()
      this.unitGrouplist()
    },
    async queryMain() {
      const res = await this.$api.requested({
        "id": 20220923155302,
        "content": {
          "itemid": this.data.itemid
        },
      })
      this.form = Object.assign({},this.form,res.data)
      console.log(this.form)
    },
    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 () {
      const res = await this.$api.requested({
        "id": 20220923141502,
        "content": this.form
      })
      this.tool.showMessage(res,()=>{
        this.dialogFormVisible = false
      })
    },
    unitChange () {
       this.unitGrouplist()
    },
    isauxunitChange (val) {
      if (val === 0) {
        this.form.orderminqty_auxunit = this.form.orderaddqty_auxunit = 0
        this.form.unitgroupid = ''
      }
    }
  },
  mounted () {
  }
}

</script>
<style>
</style>