<template>
    <div class="gzw content-form">
        <el-form ref="form" :model="form" label-width="160px">
            <Qlr ref="qlrxxModule" :bsm="bsm"></Qlr>
            <table border="1" width="100%" cellspacing="0" cellpadding="0" class="gzwTable">
                <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" maxlength="19" v-model="form.zdzhdm" disabled="disabled">
                    </td>
                    <td  colspan="2" align="center"  >项目名称</td>
                    <td  colspan="4"  >
                        <input class="formInput" v-model="form.xmmc" :disabled="form.qszt!=='0'" @blur="inputBlur($event)" ref="xmmc">
                    </td>
                </tr>
                <tr height="30">
                    <td  colspan="2" align="center"  >坐落</td>
                    <td  colspan="4"  >
                        <input class="formInput" v-model="form.zl" :disabled="form.qszt!=='0'" @blur="inputBlur($event)" ref="zl">
                    </td>
                    <td  colspan="2" align="center"  >不动产单元号</td>
                    <td  colspan="4"  class="psr">
                        <input class="formInput percent80"  maxlength="28" v-model="form.bdcdyh" :disabled="form.qszt!=='0'" @blur="inputBlur($event)" ref="bdcdyh">
                        <el-button @click.prevent="generatorCode"  size="mini" class="createBtn" type="warning" :disabled="form.qszt!=='0'">生成</el-button>
                    </td>
                </tr>

                <tr height="30">
                    <td  colspan="2" align="center"  >构(建)筑物类型</td>
                    <td  colspan="4"  >
                        <el-select-tree  style="width:100%"
                                         ref="ghyt"
                                         v-if="show"
                                         :default-expand-all="defaultExpandAll"
                                         :multiple="multiple"
                                         :placeholder="placeholder"
                                         :disabled="form.qszt!='0'"
                                         :data="$store.state.gzwlxList"
                                         :props="treeProps"
                                         :check-strictly="checkStrictly"
                                         :clearable="clearable"
                                         v-model="form.gzwlx"
                        ></el-select-tree>
                    </td>
                    <td  colspan="2" align="center"  >构(建)筑物规划用途</td>
                    <td  colspan="4"  >
                        <input class="formInput percent80"  maxlength="28" v-model="form.gzwghyt" :disabled="form.qszt!=='0'">
                    </td>
                </tr>

                <tr height="30">
                    <td  colspan="2" align="center">构(建)筑物面积（㎡）</td>
                    <td  colspan="4"  >
                        <input class="formInput" type="number" v-model="form.mj" :disabled="form.qszt!=='0'">
                    </td>
                    <td  colspan="2" align="center"  >竣工日期</td>
                    <td  colspan="4"  >
                        <el-date-picker
                                style="width:100%"
                                v-model="form.jgrq"
                                type="date"
                                value-format="yyyy-MM-dd"
                                placeholder="选择日期"
                                :disabled="form.qszt!=='0'">
                        </el-date-picker>
                    </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" type="textarea" :disabled="form.qszt!=='0'">
                    </td>
                </tr>
            </table>
        </el-form>
        <div class="header-button">
            <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>
        </div>
    </div>
</template>

<script>

    import Qlr from "@components/formMenu/qlr";
    import {getQjZdjbxxDetailById} from "@api/zd"
    import {submit,registerCall} from "@api/common"
    import {getBdcdyh,updateGzwjbxx,getQjGzwDetailInfo} from "@api/gzw";
    export default {
        name: "index",
        components:{
            Qlr
        },
        data(){
            return{

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

                bsm:'',
                form:{
                    zdzhdm:'',
                    xmmc:'',
                    bdcdyh:'',
                    zl:'',
                    gzwlx:'',
                    gzwghyt:'',
                    mj:'',
                    jgrq:'',
                    bz:'',
                    qszt:0,
                    bsm:'',
                },
                zdbsm:'',
                rules:[],
            }
        },
        methods:{
            getZddm(zdbsm){
                getQjZdjbxxDetailById(zdbsm).then((res)=>{
                    if(res.code===200){
                        this.form.zdzhdm=res.result.zddm;
                        console.log(this.form.zdzhdm+"============")
                    }
                })
            },

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

            generatorCode(){
                if(this.form.bdcdyh!=null&&this.form.bdcdyh!==''){
                    this.open();
                    return;
                }
                getBdcdyh(this.form.zdzhdm,"gzw")
                    .then((res)=>{
                        if(res.code === 200){
                            this.form.bdcdyh=res.result;
                        }else {
                            this.$message.warning(res.message)
                        }

                    })
            },
            open() {
                this.$confirm('已经存在不动产单元号, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    getBdcdyh(this.form.zdzhdm,"gzw")
                        .then((res)=>{
                            if(res.code === 200){
                                this.form.bdcdyh=res.result;
                                this.$message({
                                    type: 'success',
                                    message: '生成成功!'
                                });
                            }else {
                                this.$message.warning(res.message)
                            }

                        })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消'
                    });
                });
            },
            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, //非空
                    },
                ]

                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) {
                        console.log(this.form,'this.form');
                        this.bsm=this.$route.query.bsm;
                        this.form.bsm=this.bsm;
                        this.form.jgsj=this.form.jgrq;
                        updateGzwjbxx(this.form).then((res)=>{
                            if(res.code === 200){
                                this.$message.success("保存完成!");
                            }
                        })
                    }
                })


            },
            getGzwDetailInfo(data){
                getQjGzwDetailInfo(data).then((res)=>{
                    if(res.code === 200){
                        this.form.xmmc = res.result.xmmc;
                        this.form.zl = res.result.zl;
                        this.form.gzwlx = res.result.gzwlx;
                        this.form.gzwghyt = res.result.gzwghyt;
                        this.form.mj = res.result.mj;
                        this.form.jgrq = res.result.jgsj;
                        this.form.bz = res.result.bz;
                        this.form.bdcdyh = res.result.bdcdyh;
                        this.form.qszt = res.result.qszt;
                        this.zdbsm = res.result.zdzhbsm;
                        this.getZddm(this.zdbsm);
                    }
                })
            },
            onSubmit(){
                let data={
                    glbsm:this.bsm,
                    status:1,
                    type:"gzw"
                }
                submit(data).then((res)=>{
                    if(res.code===200){
                        this.$message.success("提交完成！");
                        this.getGzwDetailInfo(this.bsm)
                    }
                })
            },
            registerCall(){
                let data={
                    type:'gzw',
                    bsm:this.bsm
                }
                registerCall(data).then(res=>{
                    if (res.success) {
                        this.$message.success("登记成功")
                        this.getTreeByBsm(this.bsm,'gzw','0,1,2')
                        this.getGzwDetailInfo(this.bsm)
                    }
                })
            },
        },
        created() {
            this.bsm = this.$route.query.bsm;
        },
        mounted() {
            this.getGzwDetailInfo(this.bsm);
        },
        computed: {
            gzwbsm() {
                return this.$route.query.bsm;
            },
        },
        watch:{
            gzwbsm:function (val) {
                this.getGzwDetailInfo(val)
                this.reload()
            },

            "form.bdcdyh":function (val) {
                if (val != '') {
                    this.$refs.bdcdyh.style.border = '';
                }
            },
        }
    }
</script>

<style rel="stylesheet/less" lang="less" scoped>
    .gzw {
        box-sizing: border-box;
        padding: 18px;
        padding-bottom: 0;

        /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;
        }

        .gzwTable{
            margin-top: 10px;
            /deep/.el-input__inner {
                margin: 0;
                height: 36px;
                outline: none;
                border: none;
                color: #606764;
                overflow: visible;
                text-align: center;
            }
        }
    }

    .header-button{
        margin-top: 12px;
        text-align: center;
    }
</style>