<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>
                        <td>前缀</td>
                        <td>宗地</td>
                        <td>自然幢</td>
                        <td>逻辑幢</td>
                        <td>幢单元</td>
                        <td>层</td>
                        <td>户</td>
                        <td>后缀</td>
                    </tr>
                    <tr>
                        <td>
                            <input type="text" class="inputtitle" v-model="plzlData.qz"/>
                        </td>
                        <td>
                            <el-select v-model="plzlData.zd">
                                <el-option v-for="i in zdgz"
                                           :key="i.label"
                                           :label="i.label"
                                           :value="i.value">

                                </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">

                                </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>
                            <input type="text" class="inputtitle" v-model="plzlData.hz"/>
                        </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">重置</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'
                    }, {
                        label: "宗地名称",
                        value: '2'
                    }, {
                        label: "空",
                        value: '3'
                    }
                ],
                zrzgz: [
                    {
                        label: '自然幢坐落',
                        value: '1'
                    }, {
                        label: "自然幢名称",
                        value: '2'
                    }, {
                        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
            }
        }
    }
</script>

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

    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>