<template>
    <div>
        <el-dialog
            title="发货"
            :visible.sync="objProps.dialogFormVisible"
            width="30%"
            center
            :before-close="handleDialogClose">
            <div>
                <el-form ref="formSend" :model="form" label-width="120px" :rules="rulesSend">
                <el-form-item label="物流公司名称" prop="logisticsName">
                    <el-input v-model="form.logisticsName" placeholder="请输入物流公司名称"></el-input>
                </el-form-item>
                <el-form-item label="物流发货单号" prop="invoiceNo">
                    <el-input v-model="form.invoiceNo" placeholder="请输入物流发货单号"></el-input>
                </el-form-item>
                <el-form-item label="发货件数" prop="deliverQty">
                    <el-input-number v-model="form.deliverQty" controls-position="right" :min="1" :max="100000" placeholder="请输入发货件数"></el-input-number>
                </el-form-item>

                <el-form-item v-if="objProps.showDelayInfo==1" label="延迟发货凭证" :rules="[{ required:true, message: '不能为空'}]">
                  <uploadimg ref="uploadImgRef" @uploadResult="uploadResult"></uploadimg>
                </el-form-item>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="cancelForm('formSend',objProps.dialogFormVisible)">取 消</el-button>
                <el-button type="primary" :disabled="isDisabled" @click="confirmSend('formSend',objProps.dialogFormVisible)">发货</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
  import {getErr} from '@/api/demo/app'
import uploadimg from "@/components/common/uploadImg"
import { mapState,mapMutations } from 'vuex'
import qs from 'qs'
export default {
    name:"orderSendDialog",
    components:{
        uploadimg
    },
    data(){
        return{
            isDisabled:false,
            form:{
                logisticsName:'',
                invoiceNo:'',
                deliverQty:'',
                delayImgPath:''
            },
            rulesSend:{
                logisticsName:[{ required: true, message: '物流公司名称不能为空'}],
                invoiceNo:[
                    { required: true, message: '物流发货单号不能为空'},
                    // { min: 6, message: '请正确填写物流发货单号'}
                ],
                deliverQty:[{ required: true, message: '发货件数不能为空'}]
            }
        }
    },
    props:['objProps'],
    methods:{
     ...mapMutations("navBar",['getOrderTimeOutTip']),
     uploadResult(res){
        //  console.log('图片上传结果--',res)
         this.form.delayImgPath = res?res:''
     },
      confirmSend(formName,val){
            let orderid = this.objProps.orderid;
            let data = this.form;
            data.orderId = orderid;

           this.$refs[formName].validate(valid => {
                if (valid) {

                    // let dataParam = qs.stringify(data);
                    if(this.objProps.showDelayInfo==1 && !this.form.delayImgPath){
                        this.$message.error('请上传延迟发货凭证！')
                        return false
                    }
                    this.isDisabled =true
                    getErr(this.objProps.url,data).then((res)=>{
                        let { code,data,msg,message} = res.data
                        if(code == 200){
                            this.$message.success(message || msg);
                            this.cancelForm('formSend',val);
                            this.getOrderTimeOutTip()
                        }else{
                            this.$message.error(message || msg);
                        }
                        setTimeout(()=>{
                            this.isDisabled =false
                        },3000)
                    }).catch(err=>{
                      if(err.code==400){
                        this.$message.error(err.message)
                        this.isDisabled =false
                      }
                    })
                }
           })

      },
      cancelForm(formName,val){
          this.$refs[formName].resetFields();
          const data = {state:!val,}
          this.$emit("resData", data);
          if(this.objProps.showDelayInfo==1){
            this.$refs.uploadImgRef.imgsJson.supMainImgs =[]
            this.form.delayImgPath =""
          }
      },
      handleDialogClose() {
        this.cancelForm('formSend',true)
        },
    //重新页面加载数据
    changeProfile () {this.$bus.$emit('change')}
    },

}
</script>
<style lang="scss" scoped>

</style>
