<template>
    <div class="dz content-form"  ref="mainBox">
        <el-form ref="form" :model="form" label-width="160px">
            <Qlr ref="qlrxxModule" :bsm="bsm" :type="lx"></Qlr>
            <table border="1" width="100%" cellspacing="0" cellpadding="0" class="dzTable">
                <tbody>
                <tr height="30">
                    <th colspan="12"><font size="4"></font>多幢基本信息</th>
                </tr>
                <tr height="30">
                    <td  colspan="2" align="center">宗地代码</td>
                    <td  colspan="4"  >
                        <input class="formInput" disabled maxlength="19" v-model="form.zddm">
                    </td>
                    <td  colspan="2" align="center"  ><i class="requisite">*</i>不动产单元号</td>
                    <td  colspan="4"  class="psr">
                        <input class="formInput percent80" :disabled="disabled"  maxlength="28" v-model="form.bdcdyh" @blur="inputBlur($event)" ref="bdcdyh">
                        <el-button @click.prevent="generatorCode" :disabled="disabled"  size="mini" class="createBtn" type="warning">生成</el-button>
                    </td>
                </tr>
                <tr height="30">
                    <td  colspan="2" align="center"  ><i class="requisite">*</i>项目名称</td>
                    <td  colspan="4"  >
                        <input class="formInput" :disabled="disabled" v-model="form.xmmc" @blur="inputBlur($event)" ref="xmmc">
                    </td>
                    <td  colspan="2" align="center"  >房屋性质</td>
                    <td  colspan="4"  >
                        <el-select class="formSelect" :disabled="disabled" 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>
                </tr>

                <tr height="30">
                    <td  colspan="2" align="center"  >共有土地面积（㎡）</td>
                    <td  colspan="4"  >
                        <input class="formInput" :disabled="disabled" type="number" v-model="form.zdmj">
                    </td>
                    <td  colspan="2" align="center"  >竣工日期</td>
                    <td  colspan="4"  >
                        <el-date-picker
                                style="width:100%"
                                v-model="form.jgrq"
                                :disabled="disabled"
                                type="date"
                                placeholder="选择日期">
                        </el-date-picker>
                    </td>
                </tr>

                <tr height="30">
                    <td  colspan="2" align="center"  >分摊土地面积（㎡）</td>
                    <td  colspan="4"  >
                        <input class="formInput" type="number"  :disabled="disabled" v-model="form.fttdsymj">
                    </td>
                    <td  colspan="2" align="center"  >产别</td>
                    <td  colspan="4"  >
                        <el-select class="formSelect" :disabled="disabled" v-model="form.fwcbbsm" placeholder="请选择" >
                            <el-option
                                    v-for="item in $store.state.cbOptions"
                                    :key="item.bsm"
                                    :label="item.mc"
                                    :value="item.bsm">
                            </el-option>
                        </el-select>
                    </td>
                </tr>

                <tr height="30">
                    <td  colspan="2" align="center" >多幢独用土地面积（㎡）</td>
                    <td  colspan="4"  >
                        <input class="formInput" :disabled="disabled" type="number"  v-model="form.dlsytdmj">
                    </td>
                    <td  colspan="2" align="center"  >产权来源</td>
                    <td  colspan="4"  >
                        <el-select class="formSelect" :disabled="disabled" v-model="form.fwcqlybsm" 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 height="30" 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" v-if="!disabled"></i>
						<i class="iconfont iconicon-test1" style="margin-right: 8px;color:#66b1ff;font-size:30px;cursor: not-allowed"  v-if="disabled"></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)" v-if="!disabled"></i>
					    <i class="iconfont iconicon-test" style="color:#FA6400;font-size:30px;cursor: not-allowed" v-if="disabled" ></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="disabled"
                                :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="disabled"
                                :data="$store.state.fwytList"
                                :props="treeProps"
                                :check-strictly="checkStrictly"
                                :clearable="clearable"
                                v-model="item1.fwsjytbsm"
                        ></el-select-tree>
                    </td>
                </tr>

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


                <tr height="30">
                    <td   colspan="2" align="center"  >
                        <span><i class="requisite">*</i>坐落</span>
                    </td>
                    <td   colspan="10"  >
                        <input class="formInput" v-model="form.zl" :disabled="disabled" @blur="inputBlur($event)" ref="zl">
                    </td>
                </tr>

                <tr height="30">
                    <td   colspan="2" rowspan="2" align="center"  >
                        <span>附加说明</span>
                    </td>
                    <td   colspan="10" rowspan="2"   >
                        <input class="formInput" v-model="form.bz" :disabled="disabled" type="textarea">
                    </td>
                </tr>
                <tr height="30">
                </tr>

                <tr height="30">
                    <td   colspan="2" rowspan="2" align="center"  >
                        <span>调查意见</span>
                    </td>
                    <td   colspan="10"  >
                        <input class="formInput" v-model="form.name" :disabled="disabled">
                    </td>
                </tr>

                <tr height="30">
                    <td   colspan="4" rowspan="2" align="right"  style="width:8.33%;padding-right:10px">
                        <span>审查员</span>
                    </td>
                    <td   colspan="2"  >
                        <input class="formInput" v-model="form.name" :disabled="disabled">
                    </td>
                    <td   colspan="2" rowspan="2" align="right"  style="width:8.33%;padding-right:10px">
                        <span>审查日期</span>
                    </td>
                    <td   colspan="2"  >
                        <el-date-picker  style="width:100%"
                                v-model="form.date"
                                type="date"
                                :disabled="disabled"
                                placeholder="选择日期">
                        </el-date-picker>
                    </td>
                </tr>
                </tbody>
            </table>
        </el-form>
        <div class="header-button" :style="{width:mainBoxWidth+'px'}" v-if="$store.state.isWorkFlow && workitemInstanceFlag">
            <el-button type="primary" class="saveBtn" @click="onSave" :disabled="disabled">保存</el-button>
            <el-button type="primary" @click="registerCall">登记调用</el-button>
        </div>
        <div class="sh-btn" v-if="$store.state.isWorkFlow && workitemInstanceFlag">
            <el-button type="primary" @click="lczz" v-show="workFlowphase == 'modify'">终止</el-button>
            <el-button type="primary" @click="thzd" v-show="rollbackDetails.length>0">退回</el-button>
            <el-button type="primary" @click="onSubmit" :disabled="disabled" v-if="!workFlowState">提交</el-button>
            <el-button type="primary" @click="shdz" v-if="workFlowState">审核</el-button>
        </div>
    </div>

</template>

<script>
    import Qlr from "@components/formMenu/qlr";
    import Qlxz from "@components/formMenu/qlxz";
    import {saveDzInfo,getBdcdyh,getDzDetailByBsm} from "@api/dz";
    import {getQjZdjbxxDetailById} from "@api/zd";
    import { getActivityDetail } from "@api/user";
    import {submit,registerCall} from "@api/common"
    export default {
        name:'zrz',
        components:{
            Qlr,
            Qlxz,
        },
        inject:['getTreeByBsm'],
        data () {
            return {

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

                lx:'dz',
                bsm:'', //此页面的多幢标识码
                form:{
                    dzbsm:'',  //多幢标识码
                    zdbsm:'',  //宗地标识码
                    zddm:'',  //宗地代码
                    dyhbsm:'',  //不动产单元号标识码
                    bdcdyh:'',  //不动产单元号标识码
                    zl:'',  //坐落
                    xmmc:'',  //项目名称
                    jgrq:'',  //竣工日期
                    bz:'',  //备注
                    fwxzbsm:'',  //房屋性质ID
                    fwcbbsm:'',  //房屋产别ID
                    fwcqlybsm:'',  //房屋产权来源ID
                    dlsytdmj:'',  //独立使用土地面积
                    fttdsymj:'',  //分摊土地使用面积
                    zdmj:'',  //占地面积
                    name:'',
                    date:'',
                    fwytList:[{
                        glbsm:'',     //关联标识码
                        fwytzdbsm:'',  //房屋用途字典标识码
                        sx:'',         //顺序
                        fwsjytbsm:'',  //房屋实际用途字典标识码
                    }],
                    qlxzList:[{
                        qlxzdm:'',  //权利性质代码
                        glbsm:'',  //宗地BSM、自然幢BSM、户BSM、多幢BSM、宗海BSM
                        qlxzzdbsm:'',  //权利性质字典表标识码
                        qlxzmc:'',   //权利名称名称
                        zhqlxzlx:'',  //除宗海数据外，默认都是空；0:用海类型权利性质;2:海岛用途权利性质
                        addQjTdytRequestList:[{
                        }],   //土地用途新增实体列表
                    }]
                },
                options: [{
                    value: '选项1',
                    label: '黄金糕'
                }, {
                    value: '选项2',
                    label: '双皮奶'
                }, {
                    value: '选项3',
                    label: '蚵仔煎'
                }, {
                    value: '选项4',
                    label: '龙须面'
                }, {
                    value: '选项5',
                    label: '北京烤鸭'
                }],
                value: '',
                ytTitleRowspan:1,  //用途的单元格垂直合并数量
                mainBoxWidth: 0,
                rules:[],
                workFlowState:false,
                workFlowData:{},
                workFlowphase:'',
                rollbackDetails:[],
                workitemInstanceFlag:false
            }
        },
        created() {
            if(this.source===1){
                this.bsm=this.$route.query.bsm;
                this.form.dzbsm=this.$route.query.bsm;
                this.getZddm(this.$store.state.zdbsm);
            }else {
                this.bsm=this.$route.query.bsm;
                this.form.dzbsm=this.$route.query.bsm;
                this.getDzDetailByBsm(this.$route.query.bsm)
            }
        },
        mounted(){
            this.getActivityDetail();
            this.$nextTick(() => {
                this.mainBoxWidth = this.$refs.mainBox.clientWidth;
            });
            if(typeof this.$route.query.workitemInstanceId !== 'undefined'){
                this.workitemInstanceFlag = true;
            }
        },
        methods: {


            getActivityDetail(){
                if (this.$route.query.workitemInstanceId) {
                    let params = {
                        "params": {},
                        "workflowPeriod": "current",
                        "workitemInstanceId": this.$route.query.workitemInstanceId
                    }
                    getActivityDetail(params).then(res => {
                        this.workFlowData= res;
                        this.workFlowphase = res.properties.phase;
                        this.rollbackDetails = res.rollbackDetails;
                        this.workFlowState = res.workitemInstance.apps.some(function(item) {
                            return item == 'shenpibiao';
                        });
                    })
                }
            },

            shdz(){
                let data = {
                    bdcdyh:this.form.bdcdyh,
                    zl:this.form.zl,
                    shyj:'',
                    shr:'admin',
                    shsj:'2021-01-22'
                };
                vm.setShDialog(true,data)
            },

            thdz(){
                let data = {
                    "targetNodeId": this.workFlowData.rollbackDetails[0].id,
                    "workitemInstanceId": this.$route.query.workitemInstanceId
                }
                vm.rollback(data);
            },
            //宗地流程终止
            lczz(){
                vm.termProcess(this.workFlowData.processInstance.id);
            },

            registerCall(){
                let data={
                    type:'dz',
                    bsm:this.$route.query.bsm
                }
                registerCall(data).then(res=>{
                    if (res.success) {
                        this.$message.success("登记成功")
                        this.getTreeByBsm(this.$route.query.bsm,'dz','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;
                }
            },
            addQlxzGroup(){
                this.form.qlxzList.push({
                    qlxzdm: '',  //权利性质代码
                    glbsm: '',  //宗地BSM、自然幢BSM、户BSM、多幢BSM、宗海BSM
                    qlxzzdbsm: '',  //权利性质字典表标识码
                    qlxzmc: '',   //权利名称名称
                    zhqlxzlx: '',  //除宗海数据外，默认都是空；0:用海类型权利性质;2:海岛用途权利性质
                    addQjTdytRequestList: [{}]
                });
            },
            deleteQlxzGroup(index){
                if(this.form.qlxzList.length<=1){
                    this.$message({
                        message: '不能删除，最少含有一条权利性质信息',
                        type: 'warning'
                    });
                }else{
                    this.form.qlxzList.splice(index,1);
                }
            },
            addQlxzItem(index){
                this.form.qlxzList
            },

            inputBlur(e) {
                if (e.target.value != '') {
                    e.target.style.border = ""
                } else {
                    e.target.style.border = "1px solid red";
                    e.target.style.boxSizing = 'border-box';
                }
            },

            deleteQlxzItem(index){

            },
            getDzDetailByBsm(data){
                getDzDetailByBsm(data).then((res)=>{
                    if(res.code===200) {
                        this.form = res.result;
                        if(res.result.gygyqlrqk!=null){
                            this.$refs.qlrxxModule.changeGyfs(res.result.gygyqlrqk);
                        }
                        if(this.form.bblx === 0  && this.form.qszt === '0' && this.form.bhqkbsm == null){
                            this.disabled = false
                        }else {
                            this.disabled = true
                        }
                        console.log(this.form+"fwytList")
                        console.log(this.form)
                        if(this.form.fwytList.length===0){
                            this.form.fwytList.push({
                                glbsm:'',     //关联标识码
                                fwytzdbsm:'',  //房屋用途字典标识码
                                sx:'',         //顺序
                                fwsjytbsm:'',  //房屋实际用途字典标识码
                            })
                        }
                        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
                        }
                    }
                })
            },


            onSave(){

                this.rules=[
                    {
                        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.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, //非空
                        },
                    )
                })

                console.log(this.form)
                this.form.dzbsm=this.bsm;
                let flag = true;
                this.form.qlxzList= this.$refs.qlxzModule.getQlxzDataList();
                this.$refs.qlxzModule.getRules();
                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()) {
                        vm.loadingShow('请求发送中');
                        saveDzInfo(this.form).then((res)=>{
                            vm.loadingHide();
                            if(res.code===200){
                                this.$message.success("保存完成！")
                            }else {
                                this.$message({
                                    message: res.message,
                                    type: "warning",
                                });
                            }
                        })
                        .catch((error) => {
                                    vm.loadingHide();
                                    console.log(error);
                                });
                    }else {
                        this.$message({
                            // message: item.name+'不能为空',
                            message: '请完善表单后再继续操作',
                            type: "warning",
                        });
                    }
                })
            },
            onSubmit(){
                vm.setTjDialog(true);
                // console.log(this.form)
                // let data={
                //     glbsm:this.bsm,
                //     status:1,
                //     type:"dz"
                // }
                // submit(data).then((res)=>{
                //     if(res.code===200){
                //         this.$message.success("提交完成！");
                //         this.getDzDetailByBsm(this.$route.query.bsm)
                //         this.getTreeByBsm(this.$route.query.bsm,'dz','0,1,2')
                //     }
                // })
            },
            getZddm(zdbsm){
                getQjZdjbxxDetailById(zdbsm).then((res)=>{
                    if(res.code===200){
                        this.form.zddm=res.result.zddm;
                    }
                })
            },

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

            open() {
                this.$confirm('已经存在不动产单元号或者自然幢号, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    getBdcdyh(this.form.zddm,"dz")
                        .then((res)=>{
                            this.form.bdcdyh=res.result;
                        })
                    this.$message({
                        type: 'success',
                        message: '生成成功!'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消'
                    });
                });
            },
            generatorCode(){
                if(this.form.bdcdyh!=null&&this.form.bdcdyh!==''){
                    this.open();
                    return;
                }
                getBdcdyh(this.form.zddm,"dz")
                    .then((res)=>{
                        this.form.bdcdyh=res.result;
                    })
            },
        },
        computed: {
            dzbsm() {
                return this.$route.query.bsm;
            },
        },
        watch:{

            dzbsm:function (val) {
                console.log(val,'多幢BSM')
                this.getDzDetailByBsm(val)
            },

            "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.bdcdyh":function (val) {
                if (val != '') {
                    this.$refs.bdcdyh.style.border = '';
                }
            },

            "$store.state.sxdrType": {
                handler(n) {
                    this.$nextTick(()=>{
                        if (n === 'dz') {
                            this.getDzDetailByBsm(this.$route.query.bsm)
                        }
                    })
                },
                immediate: false,
                deep: true,
            }
        }
    }
</script>
<style rel="stylesheet/less" lang="less" scoped>
    .dz {
        box-sizing: border-box;
        padding: 18px;
        padding-bottom: 0;
        margin-bottom: 50px;
        .iconfont{
            cursor: pointer;
        }

        /deep/textarea{
            width: 100%;
            border: 0;
        }


        .el-form-item{
            font-weight: bold;
            font-size: xx-large
        }

        table{
            background: #fff;
            table-layout: fixed;
        }

        th {
            height: 36px;
            line-height: 36px;
            font-size: 16px;
        }

        td{
            height: 36px;
            width:8.33%;
            text-align: right;
            padding-right: 10px;
        }

        .el-select{
            width: 100%;
        }

        table{
            font-size: 14px;
        }

        .dzTable{
            margin-top: 10px;
            /deep/.el-input__inner {
                margin: 0;
                height: 36px;
                outline: none;
                border: none;
                color: #606764;
                overflow: visible;
                text-align: center;
            }
        }
        .header-button {
            z-index: 3;
            height: 50px;
            position: fixed;
            bottom: 0;
            right: 0;
            text-align: center;
            background-color: #ffffff;
            .el-button {
                padding: 10px 30px;
                margin-top: 8px;
            }
            .saveBtn {
                background-color: #00CACD;
                border-color: #00CACD;
            }
            .saveBtn:hover {
                background-color: rgba(0, 202, 205, .8);
                border-color: rgba(0, 202, 205, .8);
            }
        }

        .sh-btn{
            position: fixed;
            top: 74px;
            right: 20px;
            z-index: 999;
            .el-button{
                padding: 10px 30px;
            }
        }
    }
</style>