<template>
    <div  v-loading="fullscreenLoading">
        <div class="groupedit">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <div class="required-box">
                    <el-form-item label-width="120px" label="销售报价号:">
                        <el-input :readonly="true"  el-input v-model="ruleForm.quotenum"></el-input>
                    </el-form-item>
                    <el-form-item label-width="120px" label="本团成单人:" prop="person">
                        <el-select v-model="ruleForm.person" placeholder="请选择本团成单人     ">
                            <el-option v-for="(item,index) in personarr" :key="index" :label="item.cnName" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label-width="120px" label="客户级别:" prop="grades">
                        <el-select v-model="ruleForm.grades" placeholder="请选择客户级别">
                            <el-option  v-for="(item,index) in gradearr" :key="index" :label="item.name" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label-width="120px" label="团组类型:" prop="OP">
                        <el-select class="op-type" v-model="ruleForm.OP" placeholder="请选择团组类型">
                            <el-option  v-for="(item,index) in OPtype" :key="index" :label="item.name" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label-width="120px" label="团组名称:" prop="groupname">
                        <el-input   el-input v-model="ruleForm.groupname"></el-input>
                    </el-form-item>
                    <el-form-item label-width="120px" label="客户名称:" prop="customername">
                        <el-input   el-input v-model="ruleForm.customername"></el-input>
                    </el-form-item>
                    <el-form-item label-width="120px" label="客户单位:" prop="customerunits">
                        <el-input   el-input v-model="ruleForm.customerunits"></el-input>
                    </el-form-item>
                    <el-form-item label-width="120px" label="出访国家:" prop="countriesvisited">
                        <el-input   el-input v-model="ruleForm.countriesvisited"></el-input>
                    </el-form-item>
                    <el-form-item  label-width="120px" label="出访时间:" prop="visitingtime">
                        <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.visitingtime" style="width: 100%;"></el-date-picker>
                    </el-form-item>
                    <el-form-item label-width="120px" label="出访天数:" prop="numdays">
                        <el-input   el-input v-model="ruleForm.numdays"></el-input>
                    </el-form-item>
                    <el-form-item label-width="120px" label="出访人数:" prop="numperson">
                        <el-input   el-input v-model="ruleForm.numperson"></el-input>
                    </el-form-item>
                    <el-form-item  label-width="120px" label="合同时间:" prop="contracttime">
                        <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.contracttime" style="width: 100%;"></el-date-picker>
                    </el-form-item>
                </div>
                <div class="advance-box">
                    <el-form-item label-width="120px" label="于出访时间前" prop="occasion">
                        <el-input style="width: 100px;" el-input v-model="ruleForm.occasion"></el-input>
                    </el-form-item>
                    <el-form-item label-width="98px" label="日支付款项:" prop="payments">
                        <el-input   el-input v-model="ruleForm.payments"></el-input>
                    </el-form-item>
                    <span style="margin-bottom: 22px;display: inline-block;color: #606266;font-size: 14px;">（预付款,请输入RMB）</span>
                </div>
                <el-form>
                    <el-form-item label-width="120px" label="出访目的:">
                        <el-input type="textarea" v-model="ruleForm.purposevisit"></el-input>
                      </el-form-item>
                      <el-form-item label-width="120px" label="特殊需求:">
                          <el-input type="textarea" v-model="ruleForm.specialneeds"></el-input>
                      </el-form-item>
                      <el-form-item label-width="120px" label="其他需求:">
                          <el-input type="textarea" v-model="ruleForm.otherneeds"></el-input>
                      </el-form-item>
                </el-form>
                <el-form class="approval-box">
                    <el-form-item label-width="160px" label="出国任务审批部门名称:">
                        <el-input  el-input v-model="ruleForm.approvalname"></el-input>
                    </el-form-item>
                    <el-form-item label-width="120px" label="批件文号:">
                        <el-input   el-input v-model="ruleForm.approvalnumber1"></el-input>
                    </el-form-item>
                    <el-form-item label-width="130px" label="政治审查部门名称:">
                        <el-input   el-input v-model="ruleForm.censorshipdepartment"></el-input>
                    </el-form-item>
                    <el-form-item label-width="120px" label="批件文号:">
                        <el-input   el-input v-model="ruleForm.approvalnumber2"></el-input>
                    </el-form-item>
                </el-form>
                <el-form>
                    <el-form-item label-width="120px" label="备注:">
                        <el-input type="textarea" v-model="ruleForm.remark"></el-input>
                    </el-form-item>
                    <el-form-item label-width="120px" label="手机号:">
                        <el-input type="textarea" v-model="ruleForm.phonenumber"></el-input>
                    </el-form-item>
                </el-form>
                <el-form-item>
                  <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
                  <el-button @click="resetForm('ruleForm')">重 置</el-button>
                  <el-button @click="clickback()">返 回</el-button>
                </el-form-item>
              </el-form>
        </div>
    </div>
</template>

<script>
import { el } from '@fullcalendar/core/internal-common';
import { all } from 'q';
export default {
    data() {
      return {
        editid:'',
        token:'',
        userid:'',
        ruleForm: {
          quotenum:'',
          groupname: '',
          customername: '',
          customerunits:'',
          countriesvisited:'',
          visitingtime:'',
          contracttime:'',
          numdays:'',
          numperson:'',
          occasion:'',
          payments:'',
          purposevisit: '',
          specialneeds:'',
          otherneeds:'',
          approvalname:'',
          approvalnumber1:'',
          approvalnumber2:'',
          censorshipdepartment:'',
          remark:'',
          phonenumber:'',
          OP:'',
          grades:'',
          person:''
        },
        personarr:[],
        gradearr:[],
        OPtype:[],
        rules: {
          groupname: [
            { required: true, message: '请输入团组名称', trigger: 'blur' },
          ],
          customername: [
            { required: true, message: '请输入客户名称', trigger: 'blur' },
          ],
          customerunits:[
            { required: true, message: '请输入客户单位', trigger: 'blur' },
          ],
          countriesvisited:[
            { required: true, message: '请输入出访国家', trigger: 'blur' },
          ],
          person: [
            { required: true, message: '请选择成团人', trigger: 'change' }
          ],
          grades:[
            { required: true, message: '请选择级别', trigger: 'change' }
          ],
          OP:[
            { required: true, message: '请选择类型', trigger: 'change' }
          ],
          visitingtime: [
            { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
          ],
          contracttime: [
            { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
          ],
          numdays:[
            { required: true, message: '请输入出访天数', trigger: 'blur' },
            {pattern:"^\\d+$",message: "请输入正整数",trigger: "blur"}
          ],
          numperson:[
            { required: true, message: '请输入出访人数', trigger: 'blur' },
            {pattern:"^\\d+$",message: "请输入正整数",trigger: "blur"}
          ],
          occasion:[
            { required: true, message: '请输入出天数', trigger: 'blur' },
            {pattern:"^\\d+$",message: "请输入正整数",trigger: "blur"}
          ],
          payments:[
            { required: true, message: '请输入出款额', trigger: 'blur' },
            {pattern:"^\\d+(\\.\\d+)?$",message: "请输入正浮点数或整数",trigger: "blur"}
          ]
        },
        fullscreenLoading:false
      };
    },
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
            if (valid) {
                this.addGroupInfo()
            } else {
                console.log('error submit!!');
                return false;
            }
            });
        },
        //清空
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        //返回
        clickback(){
            this.$router.go(-1);
        },
        //获取下拉列表
        getdown(){
            var url="/api/Groups/GroupEditBasicSource"
            var that=this
            this.$axios({
                method: 'post',
                url:url,
                headers:{
                    Authorization:'Bearer '+this.token
                },
                data:{
                    portType: 1,
                }
            }).then(function(res){
                if(res.data.code==200){
                    that.personarr=res.data.data.userData;
                    that.gradearr=res.data.data.teamLevData;
                    that.OPtype=res.data.data.teamTypeData;
                }
            })
        },
        //新增获取销售号
        getSalesQuoteNo(){
            if(this.editid==undefined){
                var url="/api/Groups/GetGroupSalesQuoteNo"
                var that=this
                if(this.editid==undefined){
                    this.$axios({
                        method: 'post',
                        url:url,
                        headers:{
                            Authorization:'Bearer '+this.token
                        },
                    }).then(function(res){
                        if(res.data.code==200){
                            that.ruleForm.quotenum=res.data.data.salesQuoteNo;
                        }
                    })
                }
            }
            
        },
        //处理时间
        disposeTime(val){
            var date = new Date(val);
            var y = date.getFullYear();
            var m = date.getMonth() + 1;
            m = m < 10 ? ('0' + m) : m;
            var d = date.getDate();
            d = d < 10 ? ('0' + d) : d;
            let time = y + '-' + m + '-' + d;
            return time
        },
        //编辑获取原数据
        getGroupInfo(){
            var url="/api/Groups/GetGroupInfo"
            var that=this
            var datagroup
            if(this.editid!=undefined){
                this.$axios({
                    method: 'post',
                    url:url,
                    headers:{
                        Authorization:'Bearer '+this.token
                    },
                    data:{
                        portType:1,
                        id:that.editid
                    }
                }).then(function(res){
                    if(res.data.code==200){
                        datagroup=res.data.data;
                        console.log(datagroup)
                        that.ruleForm.quotenum=datagroup.salesQuoteNo;
                        that.ruleForm.groupname=datagroup.teamName;
                        that.ruleForm.customername=datagroup.clientName;
                        that.ruleForm.customerunits=datagroup.clientUnit;
                        that.ruleForm.countriesvisited=datagroup.visitCountry.replaceAll("|","、");
                        that.ruleForm.visitingtime=new Date(datagroup.visitDate.split(' ')[0]);
                        that.ruleForm.numdays=datagroup.visitDays+"";
                        that.ruleForm.numperson=datagroup.visitPNumber+"";
                        that.ruleForm.contracttime=new Date(datagroup.tontractTime.split(' ')[0]);
                        that.ruleForm.payments=datagroup.paymentMoney+'';
                        that.ruleForm.occasion=datagroup.payDay+'';
                        that.ruleForm.purposevisit=datagroup.visitPurpose;
                        that.ruleForm.specialneeds=datagroup.specialNeeds;
                        that.ruleForm.otherneeds=datagroup.otherNeeds;
                        that.ruleForm.approvalname=datagroup.cgrwspbmmc;
                        that.ruleForm.approvalnumber1=datagroup.cgrwspwh;
                        that.ruleForm.censorshipdepartment=datagroup.zzscbmmc;
                        that.ruleForm.approvalnumber2=datagroup.zzscspwh;
                        that.ruleForm.remark=datagroup.remark;
                        that.ruleForm.phonenumber=datagroup.tellPhone;
                        that.ruleForm.OP=datagroup.teamDid;
                        that.ruleForm.grades=datagroup.teamLevSId;
                        that.ruleForm.person=datagroup.jietuanOperator;
                    }
                })
            }
        },
        //新增编辑
        addGroupInfo(){
            var url="/api/Groups/GroupOperation";
            var that=this;
            that.fullscreenLoading = true;
            var status
            if(this.editid!=undefined){
                status=2
            }else{
                status=1
            }
            this.$axios({
                    method: 'post',
                    url:url,
                    headers:{
                        Authorization:'Bearer '+this.token
                    },
                    data:{
                        portType:1,
                        status:status,//添加1//修改2//删除3
                        id:that.editid,
                        userId:that.userid,
                        salesQuoteNo:that.ruleForm.quotenum,
                        jietuanOperator:parseInt(that.ruleForm.person),//
                        teamLevSId:parseInt(that.ruleForm.grades),//
                        teamDid:parseInt(that.ruleForm.OP),//
                        teamName:that.ruleForm.groupname,
                        clientName:that.ruleForm.customername,
                        clientUnit:that.ruleForm.customerunits,
                        visitCountry:that.ruleForm.countriesvisited.replaceAll("、","|"),
                        visitDate:that.disposeTime(that.ruleForm.visitingtime),
                        visitDays:parseInt(that.ruleForm.numdays),
                        visitPNumber:parseInt(that.ruleForm.numperson),
                        tontractTime:that.disposeTime(that.ruleForm.contracttime),
                        payDay:parseInt(that.ruleForm.occasion),
                        paymentMoney:parseInt(that.ruleForm.payments),
                        visitPurpose:that.ruleForm.purposevisit,
                        specialNeeds:that.ruleForm.specialneeds,
                        otherNeeds:that.ruleForm.otherneeds,
                        cgrwspbmmc:that.ruleForm.approvalname,
                        cgrwspwh:that.ruleForm.approvalnumber1,
                        zzscbmmc:that.ruleForm.censorshipdepartment,
                        zzscspwh:that.ruleForm.approvalnumber2,
                        tellPhone:that.ruleForm.phonenumber,
                        remark:that.ruleForm.remark,
                    }
                }).then(function(res){
                    console.log(res)
                    if(res.data.code==200){
                        that.$message({
                            message: res.data.msg,
                            type: 'success',
                            offset:50
                        });
                        that.fullscreenLoading = false;
                    }else{
                        that.$message({
                            message:res.data.msg,
                            type: 'warning',
                            offset:50
                        });
                        that.fullscreenLoading = false;
                    }
                })
        }
    },
    mounted(){
        this.editid=this.$route.query.id;
        this.token=JSON.parse(localStorage.getItem('userinif')).token;
        this.userid=JSON.parse(localStorage.getItem('userinif')).userInfo.userId;
        this.getSalesQuoteNo();
        this.getdown();
        this.getGroupInfo();
    }
}
</script>
<style>
    .groupedit{
        background-color: #fff;
        border-radius: 10px;
        padding: 20px;
    }
    .required-box{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .required-box>div{
        width: 30%;
    }
    .required-box .el-select{
        width: 100%;
    }
    .approval-box{
        display: flex;
        justify-content: space-between;
    }
    .approval-box>div{
        width: 23%;
    }
    .approval-box>div:nth-child(1){
        width: 30%;
    }
    .advance-box{
        display: flex;
        align-items: center;
    }
</style>>
