<template>
	<div class="main" ref="mainBox">
		<div class="formMenu">
            <Qlr ref="qlrxxModule" :bsm="bsm" :qszt="form.qszt"></Qlr>
            <table border="1" width="100%" cellspacing="0" cellpadding="0" class="zrzTable">
                <tr>
					<th colspan="12">自然幢基本信息</th>
				</tr>
                <tr>
                    <td colspan="2" class="tdright">宗地代码</td>
                    <td colspan="4" style="min-width:450px">
                        <input v-model="form.zddm" class="formInput" disabled>
                        <input v-show="false" :disabled="form.qszt!='0'"  maxlength="19" class="formInput" v-model="form.zdbsm">
                    </td>
                    <td colspan="2" class="tdright"><i class="requisite">*</i>自然幢号</td>
                    <td colspan="4" class="psr">
                        <input class="formInput percent80" ref="zrzh"  @blur="inputBlur($event)" :disabled="form.qszt!='0'"  maxlength="24" v-model="form.zrzh">
                        <el-button @click.prevent="generatorCode" type="warning" class="createBtn" size="mini">生成</el-button>
                    </td>
                </tr>
                <tr>
                    <td colspan="2" class="tdright"><i class="requisite">*</i>项目名称</td>
                    <td colspan="4"  >
                        <input class="formInput " ref="xmmc"  @blur="inputBlur($event)" :disabled="form.qszt!='0'" v-model="form.xmmc">
                    </td>
                    <td colspan="2" class="tdright"><i class="requisite">*</i>不动产单元号</td>
                    <td colspan="4">
                        <input class="formInput " ref="bdcdyh" @blur="inputBlur($event)" :disabled="form.qszt!='0'" maxlength="28" v-model="form.bdcdyh">
                    </td>
                </tr>

                <tr>
                    <td colspan="2" class="tdright">建筑物名称</td>
                    <td colspan="4"  >
                        <input class="formInput" :disabled="form.qszt!='0'" v-model="form.jzwmc">
                    </td>
                    <td colspan="2" class="tdright">建筑物基本用途</td>
                    <td colspan="4"  >
                        <input class="formInput" :disabled="form.qszt!='0'" v-model="form.jzwjbyt">
                    </td>
                </tr>

                <tr>
                    <td colspan="2" class="tdright"><i class="requisite">*</i>房屋性质</td>
                    <td colspan="4"  >
                        <el-select class="formSelect" ref="fwxz" :disabled="form.qszt!='0'" v-model="form.fwxzbsm" placeholder="请选择" >
                            <el-option
                                    v-for="item in $store.state.fwxzOptions"
                                    :key="item.bsm"
                                    :label="item.mc"
                                    :value="item.bsm">
                            </el-option>
                        </el-select>
                    </td>
                    <td colspan="2" class="tdright">竣工日期</td>
                    <td colspan="4"  >
                        <el-date-picker
                                style="width:100%"
                                :disabled="form.qszt!='0'"
                                v-model="form.jgrq"
                                type="date"
                                placeholder="选择日期">
                        </el-date-picker>
                    </td>
                </tr>
<tr>
                    <td colspan="2" class="tdright">地下层数</td>
                    <td colspan="4"  >
                        <input class="formInput" :disabled="form.qszt!='0'" type="number" v-model="form.dxcs">
                    </td>
                    <td colspan="2" class="tdright">地上层数</td>
                    <td colspan="4"  >
                        <input class="formInput" :disabled="form.qszt!='0'" type="number" v-model="form.dscs">
                    </td>
                </tr>

                <tr>
                    <td colspan="2" class="tdright">总层数</td>
                    <td colspan="4"  >
                        <input class="formInput" :disabled="form.qszt!='0'" type="number" v-model="form.zcs">
                    </td>
                    <td colspan="2" class="tdright">总套数</td>
                    <td colspan="4"  >
                        <input class="formInput" :disabled="form.qszt!='0'" type="number" v-model="form.zts">
                    </td>

                </tr>
                <tr>
                    <td colspan="2" class="tdright">建筑物高度(m)</td>
                    <td colspan="4"  >
                        <input class="formInput" type="number" :disabled="form.qszt!='0'" v-model="form.jzwgd">
                    </td>
                    <td colspan="2" class="tdright">地下深度(m)</td>
                    <td colspan="4"  >
                        <input class="formInput" :disabled="form.qszt!='0'" type="number" v-model="form.dxsd">
                    </td>
                </tr>

                <tr>
                    <td colspan="2" class="tdright">幢用地面积(㎡)</td>
                    <td colspan="4"  >
                        <input class="formInput" :disabled="form.qszt!='0'" type="number" v-model="form.zydmj">
                    </td>
                    <td colspan="2" class="tdright">幢占用地面积(㎡)</td>
                    <td colspan="4"  >
                        <input class="formInput" :disabled="form.qszt!='0'" type="number" v-model="form.zzdmj">
                    </td>
                </tr>

                <tr>
                    <td colspan="2" class="tdright">预测建筑面积(㎡)</td>
                    <td colspan="4"  >
                        <input class="formInput" :disabled="form.qszt!='0'" type="number" v-model="form.ycjzmj">
                    </td>
                    <td colspan="2" class="tdright">实测建筑面积(㎡)</td>
                    <td colspan="4"  >
                        <input class="formInput" :disabled="form.qszt!='0'" type="number" v-model="form.scjzmj">
                    </td>
                </tr>

                

                <tr>
                    <td colspan="2" class="tdright">产别</td>
                    <td colspan="4"  >
                        <el-select v-model="form.fwcbbsm" :disabled="form.qszt!='0'" placeholder="请选择" >
                            <el-option
                                    v-for="item in $store.state.cbOptions"
                                    :key="item.bsm"
                                    :label="item.mc"
                                    :value="item.bsm">
                            </el-option>
                        </el-select>
                    </td>
                    <td colspan="2" class="tdright">产权来源</td>
                    <td colspan="4"  >
                        <el-select v-model="form.fwcqlybsm" :disabled="form.qszt!='0'" placeholder="请选择" >
                            <el-option
                                    v-for="item in $store.state.cqlyOptions"
                                    :key="item.bsm"
                                    :label="item.mc"
                                    :value="item.bsm">
                            </el-option>
                        </el-select>
                    </td>
                </tr>

                <tr v-for="(item1,index) in form.fwytList" :key="index">
                    <td colspan="2" v-if="index===0" :rowspan="ytTitleRowspan" class="tdright"  id="ytTitle">
						<i class="iconfont iconicon-test1" style="margin-right: 8px;color:#66b1ff;font-size:30px" @click="addYtInfo"></i>
                        <span><i class="requisite">*</i>房屋用途</span>
                    </td>

                    <td  colspan="1" style="min-width:120px" class="tdright">
					    <i class="iconfont iconicon-test" style="color:#FA6400;font-size:30px" @click="deleteYtInfo(index)"></i>
                        规划用途
                    </td>
                    <td colspan="3" >
                        <el-select-tree  style="width:100%"
                                ref="ghyt"
                                v-if="show"
                                @change="updateSjfyyt(item1)"
                                :default-expand-all="defaultExpandAll"
                                :multiple="multiple"
                                :placeholder="placeholder"
                                :disabled="form.qszt!='0'"
                                :data="$store.state.fwytList"
                                :props="treeProps"
                                :check-strictly="checkStrictly"
                                :clearable="clearable"
                                v-model="item1.fwytzdbsm"
                        ></el-select-tree>
                    </td>
                    <td colspan="2" class="tdright">实际用途</td>
                    <td colspan="4" >
                        <el-select-tree  style="width:100%"
                                ref="yt"
                                v-if="show"
                                :default-expand-all="defaultExpandAll"
                                :multiple="multiple"
                                :placeholder="placeholder"
                                :disabled="form.qszt!='0'"
                                :data="$store.state.fwytList"
                                :props="treeProps"
                                :check-strictly="checkStrictly"
                                :clearable="clearable"
                                v-model="item1.fwsjytbsm"
                        ></el-select-tree>
                    </td>
                </tr>

                <tr v-for="(item1,index) in form.fwjgList" :key="'jg'+index">
                    <td colspan="2" v-if="index===0" :rowspan="fwjgTitleRowspan" class="tdright">
						<i class="iconfont iconicon-test1"  style="margin-right: 8px;color:#66b1ff;font-size:30px" @click="addFwjgInfo"></i>
                        <span><i class="requisite">*</i>房屋结构</span>
                    </td>
                    <td colspan="1" class="tdright">
                    	<i class="iconfont iconicon-test" style="color:#FA6400;font-size:30px" @click="deleteFwjgInfo(index)"></i>
                        房屋结构

                    </td>
                    <td colspan="9"  >
                        <el-select class="persent78" ref="fwjg" :disabled="form.qszt!='0'" v-model="item1.fwjgzdbsm" placeholder="请选择" >
                            <el-option
                                    v-for="item in  $store.state.jgOptions"
                                    :key="item.bsm"
                                    :label="item.mc"
                                    :value="item.bsm">
                            </el-option>
                        </el-select>
                    </td>
                </tr>

                <tr>
                    <td colspan="12" align="center">
                        <Qlxz ref="qlxzModule" :hasSyqx='false' :formData="form"></Qlxz>
                    </td>
                </tr>

                <tr>
                    <td colspan="2" class="tdright">
                        <span><i class="requisite">*</i>坐落</span>
                    </td>
                    <td colspan="10"  >
                        <input class="formInput" ref="zl" @blur="inputBlur($event)" :disabled="form.qszt!='0'" v-model="form.zl">
                    </td>
                </tr>

                <tr>
                    <td colspan="2" rowspan="2" class="tdright">
                        <span>附加说明</span>
                    </td>
                    <td colspan="10" rowspan="2"   >
                        <input class="formInput" :disabled="form.qszt!='0'" v-model="form.bz" type="textarea">
                    </td>
                </tr>
                <tr>
                </tr>

                <tr>
                    <td colspan="2" rowspan="2" class="tdright">
                        <span>调查意见</span>
                    </td>
                    <td colspan="10"  >
                        <input class="formInput" :disabled="form.qszt!='0'" v-model="form.dcyj">
                    </td>
                </tr>

                <tr>
                    <td colspan="4" rowspan="2" class="tdright">
                        <span>审查员</span>
                    </td>
                    <td colspan="2"  >
                        <input class="formInput" :disabled="form.qszt!='0'" v-model="form.scy">
                    </td>
                    <td colspan="2" class="tdright">
                        <span>审查日期</span>
                    </td>
                    <td colspan="2"  >
                        <el-date-picker
                                :disabled="form.qszt!='0'"
                                v-model="form.date"
                                type="date"
                                style="width: 100%"
                                placeholder="选择日期">
                        </el-date-picker>
                    </td>
                </tr>

            </table>
			<div class="header-button" :style="{width:mainBoxWidth+'px'}">
				<el-button type="primary" class="saveBtn" @click="onSave">保存</el-button>
				<el-button type="primary" @click="onSubmit">提交</el-button>
				<el-button type="primary" @click="registerCall">登记调用</el-button>
				<!-- <el-button type="primary" class="saveBtn"  @click="save">保存</el-button> -->
			</div>
		</div>
	</div>
</template>

<script>
    import Qlr from "@components/formMenu/qlr";
    import Qlxz from "@components/formMenu/qlxz";
    import {getBdcdyh,saveZrzInfo,getZrzDetailByBsm} from "@api/zrz"
    import {getQjZdjbxxDetailById} from "@api/zd"
    import {submit,registerCall} from "@api/common"
    import geoUtils from "@components/lineTree/tx/js/geoUtils";
    export default {
        name:'zrz',
        components:{
            Qlr,
            Qlxz,
        },
        inject:['reload','getTreeByBsm'],
        data () {
            return {

                //树型结构
                show:true,
                clearable: true,
                defaultExpandAll: true,
                multiple: false,
                placeholder: '请选择',
                disabled: false,
                checkStrictly: true,
                treeProps: {
                    value: 'bsm',
                    children: 'children',
                    label: 'mc'
                },

                lx:"zrz",
                bsm:'',
                form:{
                    zrzbsm:'',  //自然幢标识码
                    zdbsm:'',  //宗地标识码
                    zddm:'',   //宗地代码
                    dzbsm:'',  //多幢标识码
                    dzdm:'',  //多幢代码
                    dyhbsm:'',  //不动产单元号标识码
                    bdcdyh:'',  //不动产单元号
                    zrzh:'',  //自然幢号
                    jzwgd:'',  //建筑物高度
                    zzdmj:'',  //幢占地面积
                    zydmj:'',  //幢用地面积
                    ycjzmj:'',  //预测建筑面积
                    scjzmj:'',  //实测建筑面积
                    zcs:'',  //总层数
                    dscs:'',  //地上层数
                    dxcs:'',  //地下层数
                    dxsd:'',  //地下深度
                    zts:'',  //总套数
                    zl:'',  //坐落
                    jzwjbyt:'',  //建筑物基本用途
                    jzwmc:'',  //建筑物名称
                    xmmc:'',  //项目名称
                    jgrq:'',  //竣工日期
                    tfh:'',  //图幅号
                    bz:'',  //备注
                    fwxzbsm:'',  //房屋性质ID
                    fwcbbsm:'',  //房屋产别ID
                    fwcqlybsm:'',  //房屋产权来源ID
                    ydybsm:'',  //原单元标识码
                    dcyj:'',  //调查意见
                    scy:'',  //审查员
                    name:'',
                    date:'',  //审查日期
                    fwytList:[{
                        glbsm:'',     //关联标识码
                        fwytzdbsm:'',  //房屋用途字典标识码
                        sx:'',         //顺序
                        fwsjytbsm:'',  //房屋实际用途字典标识码
                    }],
                    fwjgList:[{
                        fwjgzdbsm:'',  //房屋结构字典标识码
                        glbsm:'',     //关联标识码
                        sx:'',         //顺序
                    }],
                },
                value: '',
                ytTitleRowspan:1,  //用途的单元格垂直合并数量
                fwjgTitleRowspan:1,  //房屋结构的单元格垂直合并数量
                loading:false,
                source:'',
                geoAttributes:{
                    YSDM:"",
                    BDCDYH:"",
                    ZDDM:"",
                    ZRZH:"",
                    XMMC:"",
                    JZWMC:"",
                    JGRQ:"",
                    JZWGD:"",
                    ZZDMJ:0,
                    ZYDMJ:0,
                    YCJZMJ:0,
                    SCJZMJ:0,
                    ZCS:0,
                    DSCS:0,
                    DXCS:0,
                    DXSD:0,
                    GHYT:"",
                    FWJG:"",
                    ZTS:0,
                    JZWJBYT:"",
                    DAH:"",
                    BZ:"",
                    ZT:"",
                    YWZT:"",
                    BLID:"",
                    XMID:"",
                    BGZT:"",
                    BGRQ:"",
                    BGID:"",
                    BBLX:"",
                    QSZT:"",
                    CUTID :"",
                    BHQKID:"",
                    DJZQDM:"",
                    ZDTZM:"",
                    BSM:"",
                },
                rules:[],
                mainBoxWidth:0,
            }
        },
        mixins:[geoUtils],
        methods: {

            updateSjfyyt(data){
                data.fwsjytbsm = data.fwytzdbsm;
            },

            registerCall(){
                let data={
                    type:'zrz',
                    bsm:this.$route.query.bsm
                }
                registerCall(data).then(res=>{
                    if (res.success) {
                        this.$message.success("登记成功")
                        this.getTreeByBsm(this.$route.query.bsm,'zrz','0,1,2')
                    }
                })
            },
            addYtInfo(){
                this.form.fwytList.push({
                    glbsm:'',
                    fwytzdbsm:'',
                    fwsjytbsm:'',
                    sx:'',
                });
                this.ytTitleRowspan=this.form.fwytList.length;
            },
            deleteYtInfo(index){
                if(this.form.fwytList.length<=1){
                    this.$message({
                        message: '不能删除，最少含有一条用途信息',
                        type: 'warning'
                    });
                }else{
                    this.form.fwytList.splice(index,1);
                    this.ytTitleRowspan=this.form.fwytList.length;
                }
            },
            addFwjgInfo(){
                this.form.fwjgList.push({
                    fwjgzdbsm:'',  //房屋结构字典标识码
                    glbsm:'',     //关联标识码
                    sx:'',         //顺序
                });
                this.fwjgTitleRowspan=this.form.fwjgList.length;
            },
            deleteFwjgInfo(index){
                if(this.form.fwjgList.length<=1){
                    this.$message({
                        message: '不能删除，最少含有一条房屋结构信息',
                        type: 'warning'
                    });
                }else{
                    this.form.fwjgList.splice(index,1);
                    this.fwjgTitleRowspan=this.form.fwjgList.length;
                }
            },
            onSave(){
                //判断自然幢号和不动产单元号是否手动修改过（自然幢号和不动产单元号的前19位是否和宗地代码一致）
                console.log(this.form,'this.form');
                //给校验项赋值
                this.rules=[
                    {
                        data:this.form.zrzh,
                        name:'自然幢号',
                        dom:this.$refs.zrzh,
                        rule: /^\s*$/g, //非空
                    },
                    {
                        data:this.form.bdcdyh,
                        name:'不动产单元号',
                        dom:this.$refs.bdcdyh,
                        rule: /^\s*$/g, //非空
                    },
                    {
                        data:this.form.xmmc,
                        name:'项目名称',
                        dom:this.$refs.xmmc,
                        rule: /^\s*$/g, //非空
                    },
                    {
                        data:this.form.fwxzbsm,
                        name:'房屋性质',
                        dom:this.$refs.fwxz,
                        rule: /^\s*$/g, //非空
                    },
                    {
                        data:this.form.zl,
                        name:'坐落',
                        dom:this.$refs.zl,
                        rule: /^\s*$/g, //非空
                    },
                ]
                this.form.fwytList.forEach((item,index)=>{
                    this.rules.push(
                        {
                            data:item.fwytzdbsm,
                            name:'规划用途',
                            dom:this.$refs.ghyt[index],
                            rule: /^\s*$/g, //非空
                        },
                        {
                            data:item.fwytzdbsm,
                            name:'用途',
                            dom:this.$refs.yt[index],
                            rule: /^\s*$/g, //非空
                        },
                    )
                })
                this.form.fwjgList.forEach((item,index)=>{
                    this.rules.push(
                        {
                            data:item.fwjgzdbsm,
                            name:'房屋结构',
                            dom:this.$refs.fwjg[index],
                            rule: /^\s*$/g, //非空
                        },
                    )
                })
                this.loading=true;
                this.form.zrzbsm=this.bsm;
                this.form.qlxzList= this.$refs.qlxzModule.getQlxzDataList();
			    this.$refs.qlxzModule.getRules();
                let flag = true;
                this.rules.forEach(item=>{
                    if(item.rule.test(item.data) || item.data == null){
                        if(item.dom.$el){
                            item.dom.$el.style.border = '1px solid red';
                            item.dom.$el.style.boxSizing = 'border-box';
                        }else{
                            item.dom.style.border = '1px solid red';
                            item.dom.style.boxSizing = 'border-box';
                        }
                        flag = false;
                        return false
                    }
                })
                this.$nextTick(()=>{
                    if (flag && this.$refs.qlxzModule.getRulesResult()) {
                        if(this.form.zrzh.substring(0,19) != this.form.zddm || this.form.bdcdyh.substring(0,19) != this.form.zddm){
                            this.$message({
                                message: '自然幢号或不动产单元号有误，请核对后再试一次',
                                type: "warning",
                            });
                        }else{
                           saveZrzInfo(this.form).then((res)=>{
                                if(res.code===200){
                                    this.$message.success("保存完成！")
                                }else {
                                    this.$message({
                                        message: res.message,
                                        type: "warning",
                                    });
                                }
                                this.loading=false;
                            })
                            this.loading=false;

                            //保存到空间库里面
                            var self = this;
                            for(var key in this.geoAttributes){
                                if(key == "BSM"){
                                    self.geoAttributes[key] = this.bsm
                                }else if(key == 'JGRQ'){
                                    var formKay = key.toLowerCase();
                                    self.geoAttributes[key] = new Date(self.form[formKay]).getTime();
                                }else {
                                    var formKay = key.toLowerCase();
                                    self.geoAttributes[key] = self.form[formKay];
                                }
                            }
                            self.updAttributes(this.bsm,'zrz',this.geoAttributes,function (res) {
                                console.log("属性保存完成!!");
                            });
                        }
                    }else{
                        this.$message({
                            // message: item.name+'不能为空',
                            message: '请完善表单后再继续操作',
                            type: "warning",
                        });
                    }
                })
            },
            onSubmit(){
                let data={
                    glbsm:this.bsm,
                    status:1,
                    type:"zrz"
                }
                submit(data).then((res)=>{
                    if(res.code===200){
                        this.$message.success("提交完成！");
                        this.getZrzDetailByBsm(this.$route.query.bsm)
                    }
                })
            },
            open() {
                this.$confirm('已经存在不动产单元号或者自然幢号, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    getBdcdyh(this.form.zddm,"zrz")
                        .then((res)=>{
                            this.form.zrzh=res.result.substring(0,24);
                            this.form.bdcdyh=res.result;
                        });
                    this.$message({
                        type: 'success',
                        message: '生成成功!'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消'
                    });
                });
            },
            generatorCode(){
                console.log(this.form,'this.form');
                if((this.form.zrzh!=null&&this.form.zrzh!=='')||(this.form.bdcdyh!=null&&this.form.bdcdyh!=='')){
                    this.open();
                    return;
                }
                getBdcdyh(this.form.zddm,"zrz")
                    .then((res)=>{
                        this.form.zrzh=res.result.substring(0,24);
                        this.form.bdcdyh=res.result;
                    })
            },

            getQlrxxData() {
                console.log(this.$refs.qlrxxModule.getQlgyfsData()); //权利共有方式数据
                console.log(this.$refs.qlrxxModule.getQlrxxData()); //权利人表格数据
            },
            getQlxzData() {
                console.log(this.$refs.qlxzModule.getQlxzDataList()); //权利性质数据
            },
            getZddm(zdbsm){
                getQjZdjbxxDetailById(zdbsm).then((res)=>{
                    if(res.code===200){
                        this.form.zddm=res.result.zddm;
                    }
                })
            },
            getZrzDetailByBsm(data){
                getZrzDetailByBsm(data).then((res)=>{
                    if(res.code===200){
                        this.form=res.result;
                        // //如果没有宗地代码，自动生成
                        // if(res.result.zddm == null){
                        //     this.generatorCode()
                        // }
                        this.$store.state.zrzh = res.result.zrzh;
                        if(this.form.fwjgList.length===0){
                            this.form.fwjgList.push({
                                fwjgzdbsm:'',  //房屋结构字典标识码
                                glbsm:'',     //关联标识码
                                sx:'',         //顺序
                            })
                        }
                        if(this.form.fwytList.length===0){
                            this.form.fwytList.push({
                                glbsm:'',     //关联标识码
                                fwytzdbsm:'',  //房屋用途字典标识码
                                sx:'',         //顺序
                                fwsjytbsm:'',  //房屋实际用途字典标识码
                            })
                        }
                        this.fwjgTitleRowspan=this.form.fwjgList.length;
                        this.ytTitleRowspan=this.form.fwytList.length;
                        if(res.result.qjQlxzListVOS.length>0){
                            if(res.result.qjQlxzListVOS[0].list.length<1){
                                res.result.qjQlxzListVOS[0].list.push({
                                    "pzdjbsm": "",
                                    "pzdjmc": "",
                                    "pzytdm": "",
                                    "pzytmc": "",
                                    "pzytmj": 0,
                                    "qlxzbsm": "",
                                    "sjdjbsm": "",
                                    "sjdjmc": "",
                                    "sjytdm": "",
                                    "sjytmc": "",
                                    "sjytmj": 0,
                                    "syqx": "",
                                    "tdsyjssj": "",
                                    "tdsyqssj": "",
                                    "tdzh": ""
                                })
                            }
                            //权利性质数据传给子组件
                            this.$refs.qlxzModule.countList = res.result.qjQlxzListVOS

                        }
                    }
                })
            },
            inputBlur(e){
                if(e.target.value!=''){
                    e.target.style.border=""
                }else{
                    e.target.style.border="1px solid red";
                    e.target.style.boxSizing = 'border-box';
                }
            },
        },
        created(){
            //todo 怎么判断进入到该页面是从新建处进来的，还是从右键宗地进来的！如果是从新建进来的就需要把虚拟宗标识码带过来；
            this.source = this.$route.query.source;
            //source为1代表是从新建中进入道该页面的，source为2代表是从综合查询进入到该页面的
            if(this.source===1){
                this.bsm=this.$route.query.bsm;
                // this.form.zdbsm=this.$store.zdbsm;
                // this.form.xmmc=this.$store.xmmc;
                this.form.zrzbsm=this.$route.query.bsm;
                this.getZddm(this.$store.state.zdbsm);
                this.getZrzDetailByBsm(this.$route.query.bsm)
            }else {
                this.bsm=this.$route.query.bsm;
                this.form.zrzbsm=this.$route.query.bsm;
                this.getZrzDetailByBsm(this.$route.query.bsm)
            }
        },
        mounted() {
            this.$nextTick(() => {
                this.mainBoxWidth = this.$refs.mainBox.clientWidth;
            })
        },
        computed: {
            zrzbsm() {
                return this.$route.query.bsm;
            },
        },
        watch:{
            zrzbsm:function (val) {
                this.getZrzDetailByBsm(val)
                this.reload()
            },
            "form.bdcdyh":function (val) {
                if (val != '') {
                    this.$refs.bdcdyh.style.border = '';
                }
            },
            "form.zrzh":function (val) {
                if (val != '') {
                    this.$refs.zrzh.style.border = '';
                }
            },
            "form.fwxzbsm":{
                handler:function (val) {
                    if (val != '') {
                        this.$refs.fwxz.$el.style.border = '';
                    }
                },
                immediate:false
            },
            "form.fwytList": {
                handler : function (newVal, oldVal) {
                    newVal.forEach((item,ind)=>{
                        if(item.fwytzdbsm != ''){
                            this.$refs.ghyt[ind].$el.style.border=""
                            this.$refs.yt[ind].$el.style.border=""
                        }
                    })
                },
                deep:true
            },
            "form.fwjgList": {
               handler : function (newVal, oldVal) {
                    newVal.forEach((item,ind)=>{
                        if(item.fwjgzdbsm != ''){
                            this.$refs.fwjg[ind].$el.style.border=""
                        }
                    })
                },
                deep:true
            },
            "$store.state.sxdrType": {
                handler(n) {
                    this.$nextTick(()=>{
                        if (n === 'zrz') {
                            this.getZrzDetailByBsm(this.$route.query.bsm)
                        }
                    })
                },
                immediate: false,
                deep: true,
            }
        }
    }
</script>
<style rel="stylesheet/less" lang="less" scoped>
.main {
	box-sizing: border-box;
	padding: 18px;
    height: auto;
    .iconfont{
        cursor: pointer;
    }
	.formMenu {
		width: 100%;
		margin: 0 auto;
		margin-bottom: 50px;
	}
	.zrzTable {
		margin: 10px 0;
		background-color: #fff;
		font-size: 14px;
		width: 100%;
        table-layout: fixed;
		th {
			height: 36px;
			line-height: 36px;
			font-size: 16px;
		}
		td {
			text-align: center;
			height: 36px;
        }

		/deep/ .el-input__inner {
			margin: 0;
			height: 36px;
			outline: none;
			border: none;
			color: #606764;
			overflow: visible;
			text-align: center;
			cursor: text;
		}
		.percent68 {
			width: 68% !important;
			float: left;
			position: relative;
			top: 7px;
		}
		.percent47 {
			width: 45% !important;
			float: left;
		}
		.percent4 {
			height: 20px;
			line-height: 20px;
			width: 4% !important;
			float: left;
		}
		.percent30 {
			width: 30% !important;
			float: left;
		}
		.el-input__icon {
			line-height: 37px;
		}
		.el-select {
			width: 100%;
		}
	}
	.header-button {
        z-index: 3;
		height: 50px;
		position: fixed;
		bottom: 0;
		right: 6px;
		text-align: center;
		background-color: #ffffff;
		.el-button{
			padding: 10px 30px;
            margin-top: 8px;
            cursor: pointer;
		}
		.saveBtn {
			background-color: #00CACD;
			border-color: #00CACD;
		}
		.saveBtn:hover {
			background-color: rgba(0, 202, 205, .8);
			border-color: rgba(0, 202, 205, .8);
		}
	}
}
</style>