<template>
    <div class="">
        <el-dialog v-dialogDrag :close-on-click-modal="false" title="批量室号" :visible.sync="isVisible" width="50%"
            @close="close" :modal-append-to-body="false">
            <div>
                <table border="1">
                    <tr>
                        <th>室号前缀</th>
                        <th>幢单元号</th>
                        <th>分割符A</th>
                        <th>层号前自动补0</th>
                        <th>层号</th>
                        <th>分割符B</th>
                        <th>户号前自动补零</th>
                        <th>户号</th>
                        <th>室号后缀</th>
                    </tr>
                    <tr>
                        <td>
                            <el-input v-model="plshData.shqz"></el-input>
                        </td>
                        <td>
                            <el-checkbox v-model="plshData.selectDyh"></el-checkbox>
                        </td>
                        <td>
                            <el-input v-model="plshData.fgfA"></el-input>
                        </td>
                        <td>
                            <el-checkbox v-model="plshData.chqbl"></el-checkbox>
                        </td>
                        <td>
                            <el-select v-model="plshData.c">
                                <el-option v-for="i in cs" :key="i.key" :label="i.label" :value="i.value"></el-option>
                            </el-select>
                        </td>
                        <td>
                            <el-input v-model="plshData.fgfB"></el-input>
                        </td>
                        <td>
                            <el-checkbox v-model="plshData.hhqbl"></el-checkbox>
                        </td>
                        <td>
                        </td>
                        <td>
                            <el-input v-model="plshData.shhz"></el-input>
                        </td>
                    </tr>
                </table>
                <div class="gz">
                    <span>室号规则：{{ gz }}</span>
                </div>
                <div class="xlgz">
                    <span>
                        样例1：1011 <span>（1单元01层01室）</span>([单元号][层号]，勾选“层号自动补0”)
                        <br />
                        样例2：1131室<span>（1单元13层01室）</span>([单元号][层号][后缀],后缀填写'室')
                        <br />
                        样例3：101<span>(1层01室)</span>([层号],勾选“户号自动补0”)
                        <br />
                        样例4：1-011<span>(1单元-01层01室)</span>([单元号][分隔符A][层号]，勾选“层号自动补0”)
                        <br />
                        样例5：1-12-1<span>(1单元12层01室)</span>([单元号][分隔符A][层号][分隔符B])
                        <br />
                        样例6：1-12<span>(1层12室)</span>([层号][分隔符B])
                    </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="cancel">取消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

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

export default {
    name: "plSh",
    props: {
        plShVisible: {
            type: Boolean,
            default: false
        },
        bsms: {
            type: Array
        }
    },
    data () {
        return {
            isVisible: false,
            plshData: {
                shqz: '',
                selectDyh: false,
                fgfA: '',
                chqbl: false,
                c: '',
                fgfB: '',
                hhqbl: false,
                shhz: ''
            },
            cs: [
                {
                    key: '1',
                    label: '名义层',
                    value: '1'
                }, {
                    key: '2',
                    label: '实际层',
                    value: '2'
                }, {
                    key: '3',
                    label: '空',
                    value: '3'
                }
            ]
        }
    },
    methods: {
        test: function () {
            for (let key in this.plshData) {
                if (key === 'chqbl') {
                    continue;
                }
                if (this.plshData[key] !== '' && this.plshData[key] !== '3' && this.plshData[key] !== false) {
                    return true;
                }
            }
            return false;
        },
        lodding: function () {
            this.$emit('lodding')
        },
        close: function () {
            this.$emit("close")
            this.isVisible = false
            this.result();
        },
        result: function () {
            this.plshData = {
                shqz: '',
                selectDyh: false,
                fgfA: '',
                chqbl: false,
                hhqbl: false,
                c: '',
                fgfB: '',
                shhz: ''
            }
        },
        save: function () {
            if (!this.test()) {
                this.$message.info("请选择")
                return;
            }
            this.plshData['bsms'] = this.bsms
            // updateSh(this.plshData).then(res => {
            //     if (res.success) {
            //         this.lodding();
            //         this.close();

            //     } else {
            //         Message.error(res.message)
            //     }
            // })
        },
        cancel: function () {
            this.close()
        }
    },
    computed: {
        gz: function () {
            let gz = "";
            if (this.plshData.shqz !== "") {
                gz += this.plshData.shqz
            }
            if (this.plshData.selectDyh) {
                gz += "[单元号]"
            }
            if (this.plshData.fgfA !== "") {
                gz += this.plshData.fgfA
            }
            if (+this.plshData.c === 1) {
                gz += "[名义层]"
            } else if (+this.plshData.c === 2) {
                gz += "[实际层]"
            }
            if (this.plshData.fgfB !== "") {
                gz += this.plshData.fgfB
            }
            gz += "[户号]";
            if (this.plshData.shhz !== "") {
                gz += this.plshData.shhz
            }
            return gz;
        }
    },
    watch: {
        plShVisible: function (val) {
            this.isVisible = val
        }
    }
}
</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: 14px;
    margin-top: 40px;
}

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

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