<template>
    <div class="">
        <el-dialog
                title="批量室号"
                :visible.sync="isVisible"
                width="50%"
                @close="close"
                :modal-append-to-body="false"
                center>
            <div>
                <span class="xl" @click="xl">祥例</span>
                <table border="1">
                    <tr>
                        <td>室号前缀</td>
                        <td>单元号</td>
                        <td>分割符A</td>
                        <td>层号前自动补0</td>
                        <td>层</td>
                        <td>分割符B</td>
                        <td>户号</td>
                        <td>室号后缀</td>
                    </tr>
                    <tr>
                        <td>
                            <input type="text" class="inputtitle" v-model="plshData.shqz"/>
                        </td>
                        <td>
                            <el-checkbox v-model="plshData.selectDyh"></el-checkbox>
                        </td>
                        <td>
                            <input type="text" class="inputtitle" v-model="plshData.fgfA"/>
                        </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>
                            <input type="text" class="inputtitle" v-model="plshData.fgfB"/>
                        </td>
                        <td>

                        </td>
                        <td>
                            <input type="text" class="inputtitle" v-model="plshData.shhz"/>
                        </td>
                    </tr>
                </table>
                <div class="gz">
                    <span>室号规则：{{gz}}</span>
                </div>
            </div>
            <div>
                <el-dialog
                        title="祥例"
                        :visible.sync="xlVisible"
                        width="50%"
                        :modal-append-to-body="false"
                >
                    <div class="xlgz">
                        <span>
                            样例1：10101 <span>（1单元01层01室）</span>([单元号][层号]，勾选“层号自动补0”)
                            <br/>
                            样例2：11301室<span>（1单元13层01室）</span>([单元号][层号][室号后缀])
                            <br/>
                            样例3：101<span>(1层01室)</span>([层号])
                            <br/>
                            样例4：1-101<span>(1单元-01层01室)</span>([单元号][层号][分隔符]，勾选“层号之前增加分隔符”)
                             <br/>
                            样例5：1-13-01<span>(1单元13层01室)</span>([单元号][层号][分隔符])
                            <br/>
                            样例6：1-01<span>(1单元13层01室)</span>([层号][分隔符]，勾选“室号之前增加分隔符”)
                        </span>
                    </div>
                </el-dialog>
            </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="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,
                xlVisible: false,
                plshData: {
                    shqz: '',
                    selectDyh: false,
                    fgfA: '',
                    chqbl: false,
                    c: '',
                    fgfB: '',
                    shhz: ''
                },
                cs: [
                    {
                        key: '1',
                        label: '明义层',
                        value: '1'
                    }, {
                        key: '2',
                        label: '实际层',
                        value: '2'
                    }
                ]
            }
        },
        methods: {
            lodding:function(){
              this.$emit('lodding')
            },
            xl: function () {
                this.xlVisible = true;
            },
            close: function () {
                this.$emit("close")
                this.isVisible = false
                this.result();
            },
            result: function () {
                this.plshData = {
                    shqz: '',
                    selectDyh: false,
                    fgfA: '',
                    chqbl: false,
                    c: '',
                    fgfB: '',
                    shhz: ''
                }
            },
            save: function () {
                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="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>