<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="less">
    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>