<template>
<view class="customer-form">
  <u-navbar
        :title="id?$t('customer_meter.edit')+' '+$t('mine.mater'):$t('customer_meter.add')+' '+$t('mine.mater')"
        :autoBack="true"
        :placeholder="true"
      >
      </u-navbar>
  <u-form 
        labelPosition="left"
				:model="form"
				:rules="rules"
				ref="form1"
        labelWidth='80'>
    <u-form-item :label="$t('customer_meter.materName')" borderBottom prop="name">
      <u--input
          v-model="form.name"
          border="none"
          :placeholder="$t('base.common.placeholderI')+$t('customer_meter.materName')"
      ></u--input>
    </u-form-item>
    
    <u-form-item :label="$t('customer_meter.materType')" borderBottom prop="type">
     <u-radio-group 
          v-model="form.type"
          placement="row">
        <u-radio activeColor="#4680F9" name="101" label="销售"></u-radio>
        <u-radio activeColor="#4680F9" name="102" label="原材料"></u-radio>
        <!-- <u-radio activeColor="#4680F9" name="103" label="倒料"></u-radio> -->
        <!-- <u-radio activeColor="#4680F9" name="104" label="材料"></u-radio> -->
      </u-radio-group>
    </u-form-item>
    <u-form-item :label="$t('customer_meter.kind')" borderBottom prop="kind">
       <u-radio-group 
          v-model="form.kind"
          placement="row">
        <u-radio activeColor="#4680F9" name="101" label="袋装"></u-radio>
        <u-radio activeColor="#4680F9" name="102" label="散装"></u-radio>
      </u-radio-group>
    </u-form-item>
    <u-form-item :label="$t('customer_meter.private')" borderBottom prop="privateFlag">
      <u-switch v-model="form.privateFlag"  size="20"></u-switch>
    </u-form-item>
    
    <div style="margin: 16px;">
      <u-button type="primary" native-type="submit" @click="submit('form1')">{{$t('base.common.submit')}}</u-button>
    </div>
  </u-form>
</view>
  
</template>

<script>
import {addMaterial,editMaterial,getMaterialById} from '../../api/customer'
export default {
  data(){
    return {
      form:{
        name:'',
        type:'',
        kind:'',
        privateFlag:true,
      },
      rules:{
        name:[{ required: true, message: this.$t('base.common.placeholderI')+this.$t('customer_meter.materName') }]
      },
      id:'',
    }
  },
  computed:{
  },
 onLoad(){
  this.getMater()
 },
 methods:{
  getMater(){
    let _this=this
    const routers = getCurrentPages()
    _this.id = routers[routers.length - 1].options?routers[routers.length - 1].options.id:''
    if(_this.id){
      getMaterialById(_this.id).then(res=>{
        if(res.statusCode==200){
          let info=res.data.data
          _this.form.name=info.name
          _this.form.type=info.type
          _this.form.kind=info.kind
          _this.form.privateFlag=info.privateFlag=='1'?true:false
        }
      })
    }
  },
  // onClickLeft(){
  //   uni.navigateBack()
  // },
  submit(ref){
    console.log(this.id);
    let _this=this
    this.$refs[ref].validate().then(()=>{
      let data = JSON.parse(JSON.stringify(_this.form))
      data.privateFlag ? data.privateFlag='1':data.privateFlag='0'
      if(_this.id){
        data.id=_this.id
        console.log('编辑');
         editMaterial(data).then(res=>{
          if(res.statusCode == 200 ){
            uni.showModal({
							showCancel: false,
            // title: '提示',
            content: _this.$t("customer_meter.editOk"),
            success:function(res){
              if(res.confirm){
                uni.navigateBack({ delta: 1 })
              }
            }
            })
            _this.$refs[ref].resetFields()
          }
        })
      }else{
        console.log('新增');
        addMaterial(data).then(res=>{
          if(res.statusCode == 200 ){
            uni.showModal({
							showCancel: false,
            // title: '提示',
            content: _this.$t("customer_meter.addOk"),})
            _this.$refs[ref].resetFields()
          }
        })
      }
    })
    .catch(err=>{
      console.log('err', err);
    })
  }
 }
}
</script>

<style lang="less" scoped>
.customer-form{
  padding: 0 32rpx 32rpx;
  background-color: #fff;
}
</style>