<template>
    <div>
        <el-dialog v-dialogDrag :close-on-click-modal="false" title="批量坐落" :visible.sync="isVisible" width="60%"
            @close="close" :modal-append-to-body="false">
            <div>
                <table border="1">
                    <tr>
                        <th>前缀</th>
                        <th>宗地</th>
                        <th>自然幢</th>
                        <th>逻辑幢</th>
                        <th>幢单元</th>
                        <th>层</th>
                        <th>户</th>
                        <th>后缀</th>
                    </tr>
                    <tr>
                        <td>
                            <el-input v-model="plzlData.qz"></el-input>
                        </td>
                        <td>
                            <el-select v-model="plzlData.zd">
                                <el-option v-for="i in zdgz" :key="i.label" :label="i.label" :value="i.value"
                                    :disabled="i.disabled">
                                </el-option>
                            </el-select>
                        </td>
                        <td>
                            <el-select v-model="plzlData.zrz">
                                <el-option v-for="i in zrzgz" :key="i.label" :label="i.label" :value="i.value"
                                    :disabled="i.disabled">
                                </el-option>
                            </el-select>
                        </td>
                        <td>
                            <el-select v-model="plzlData.ljz">
                                <el-option v-for="i in ljzgz" :key="i.label" :label="i.label" :value="i.value">

                                </el-option>
                            </el-select>
                        </td>
                        <td>
                            <el-select v-model="plzlData.zdy">
                                <el-option v-for="i in zdygz" :key="i.label" :label="i.label" :value="i.value">

                                </el-option>
                            </el-select>
                        </td>
                        <td>
                            <el-select v-model="plzlData.c">
                                <el-option v-for="i in cgz" :key="i.label" :label="i.label" :value="i.value">

                                </el-option>
                            </el-select>
                        </td>
                        <td>
                            <el-select v-model="plzlData.h">
                                <el-option v-for="i in hgz" :key="i.label" :label="i.label" :value="i.value">

                                </el-option>
                            </el-select>
                        </td>
                        <td>
                            <el-input v-model="plzlData.hz"></el-input>
                        </td>
                    </tr>
                </table>
                <div class="gz">
                    <span>户坐落规则：{{ gz }}</span>
                </div>
            </div>
            <div class="shop">
                <el-button type="primary" @click="save">保存</el-button>
                <el-button type="primary" @click="result" icon="el-icon-refresh">重置</el-button>
                <el-button type="primary" @click="close">取消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
// import { updateZl } from '@api/zrz'
import { Message } from 'element-ui'

export default {
    name: "plZl",
    props: {
        plZlVisible: {
            type: Boolean,
            default: false
        },
        bsms: {
            type: Array
        }
    },
    data () {
        return {
            isVisible: false,
            plzlData: {
                qz: '',
                zd: '3',
                zrz: '3',
                ljz: '3',
                zdy: '3',
                c: '3',
                h: '3',
                hz: ''
            },
            zdgz: [
                {
                    label: '宗地坐落',
                    value: '1',
                    disabled: false
                }, {
                    label: "宗地名称",
                    value: '2',
                    disabled: false
                }, {
                    label: "空",
                    value: '3',
                    disabled: false
                }
            ],
            zrzgz: [
                {
                    label: '自然幢坐落',
                    value: '1',
                    disabled: false
                }, {
                    label: "自然幢名称",
                    value: '2',
                    disabled: false
                }, {
                    label: "空",
                    value: '3'
                }
            ],
            ljzgz: [
                {
                    label: '逻辑幢名称',
                    value: '1'
                }, {
                    label: "逻辑幢号",
                    value: '2'
                }, {
                    label: "空",
                    value: '3'
                }
            ],
            zdygz: [
                {
                    label: '幢单元名称',
                    value: '1'
                }, {
                    label: "幢单元号",
                    value: '2'
                }, {
                    label: "空",
                    value: '3'
                }
            ],
            cgz: [
                {
                    key: '1',
                    label: '名义层',
                    value: '1'
                }, {
                    key: '2',
                    label: '实际层',
                    value: '2'
                }, {
                    label: "空",
                    value: '3'
                }
            ],
            hgz: [
                {
                    key: '1',
                    label: '室号',
                    value: '1'
                }, {
                    key: '2',
                    label: '户号',
                    value: '2'
                }, {
                    label: "空",
                    value: '3'
                }
            ]
        }
    },
    methods: {
        lodding: function () {
            this.$emit('lodding')
        },
        save: function () {
            if (!this.test()) {
                this.$message.info("请选择")
                return;
            }
            this.plzlData['bsms'] = this.bsms;
            // updateZl(this.plzlData).then(res => {
            //     if (res.success) {
            //         this.lodding()
            //         this.close();
            //     } else {
            //         Message.error(res.message)
            //     }
            // })
        },
        test: function () {
            for (let key in this.plzlData) {
                if (this.plzlData[key] !== '' && this.plzlData[key] !== '3') {
                    return true;
                }
            }
            return false;
        },
        cancel: function () {
            this.close();
        },
        close: function () {
            this.$emit("close")
            this.isVisible = false
            this.result();
        },
        result: function () {
            this.plzlData = {
                qz: '',
                zd: '',
                zrz: '',
                ljz: '',
                zdy: '',
                c: '',
                h: '',
                hz: ''
            }
        }
    },
    computed: {
        gz: function () {
            // [前缀][宗地][自然幢][单元][室号][室号][后缀]
            let gz = "";
            if (this.plzlData.qz !== '') {
                gz += this.plzlData.qz
            }
            if (+this.plzlData.zd === 1) {
                gz += "[宗地坐落]";
            } else if (+this.plzlData.zd === 2) {
                gz += "[宗地名称]";
            }

            if (+this.plzlData.zrz === 1) {
                gz += "[自然幢坐落]"
            } else if (+this.plzlData.zrz === 2) {
                gz += "[自然幢名称]";
            }
            if (+this.plzlData.ljz === 1) {
                gz += "[逻辑幢名称]"
            } else if (+this.plzlData.ljz === 2) {
                gz += "[逻辑幢号]"
            }
            if (+this.plzlData.zdy === 1) {
                gz += "[幢单元名称]";
            } else if (+this.plzlData.zdy === 2) {
                gz += "[幢单元号]"
            }
            if (+this.plzlData.c === 1) {
                gz += "[名义层]"
            } else if (+this.plzlData.c === 2) {
                gz += "[实际层]"
            }
            if (+this.plzlData.h === 1) {
                gz += "[室号]"
            } else if (+this.plzlData.h === 2) {
                gz += "[户号]"
            }
            if (this.plzlData.hz !== "") {
                gz += this.plzlData.hz
            }
            if (gz === "") {
                gz += "无"
            }
            return gz;
        }
    },
    watch: {
        plZlVisible: function (val) {
            this.isVisible = val
        },
        plzlData: {
            handler (val) {
                this.zrzgz[0].disabled = +val.zd === 1;
                this.zdgz[0].disabled = +val.zrz === 1;
            },
            deep: true
        }
    }
}
</script>

<style scoped lang="scss">
table {
    margin-top: 10px;
    background-color: #fff;
    font-size: 14px;
    width: 100%;

    :hover {
        cursor: pointer;
    }
}

th {
    height: 36px;
}

td {
    text-align: center;
    height: 36px;
    min-width: 60px;
}

.xl {
    color: blue;
    float: right;
}

.xl:hover {
    cursor: pointer;
}

.inputtitle {
    line-height: 38px;
    width: 90%;
    border: none;
    outline: none;
}

.shop {
    text-align: center;
    margin-top: 20px;
}

.gz {
    color: #b2b2b2;
    font-size: 12px;
    margin-top: 40px;
}

.xlgz {
    span {
        font-size: 16px;
        line-height: 22px;

        span {
            color: red;
        }
    }
}
</style>