<template>
    <div class="main">
        <el-dialog
                title="新增"
                :visible.sync="isVisible"
                width="70%"
                @close="close"
                :modal-append-to-body="false"
                center>
            <div>
                <el-checkbox>层号自动补0</el-checkbox>
                <el-checkbox>层号之前增加分割符</el-checkbox>
                <el-checkbox>室号之前增加分割符</el-checkbox>
                <span class="xl" @click="xl">祥例</span>
                <table border="1">
                    <tr>
                        <td rowspan="2" @click="addRow">+</td>
                        <td rowspan="2">序号</td>
                        <td rowspan="2">单元名称</td>
                        <td rowspan="2">起始层</td>
                        <td rowspan="2">结束层</td>
                        <td rowspan="2">每层户数</td>
                        <td colspan="6" class="gz">
                            室号规则：[单元号][分割符A][层号][分割符A][室号前缀][室号][室号后缀]
                        </td>
                    </tr>
                    <tr>
                        <td>单元号</td>
                        <td>层号</td>
                        <td>室号前缀</td>
                        <td>分割符</td>
                        <td>起始室号</td>
                        <td>室号后缀</td>
                    </tr>
                    <tr v-for="item in 10" :key="item">
                        <td @click="delRow(item)">-</td>
                        <td>{{item}}</td>
                        <td>
                            <el-select>
                                <el-option
                                        v-for="i in cs"
                                        :key="i"
                                        :label="i"
                                        :value="i"
                                ></el-option>
                            </el-select>
                        </td>
                        <td>
                            <el-select>
                                <el-option
                                        v-for="i in cs"
                                        :key="i"
                                        :label="i"
                                        :value="i"
                                ></el-option>
                            </el-select>
                        </td>
                        <td>
                            <el-select>
                                <el-option
                                        v-for="i in cs"
                                        :key="i"
                                        :label="i"
                                        :value="i"
                                ></el-option>
                            </el-select>
                        </td>
                        <td>
                            <input type="text" class="inputtitle"/>
                        </td>
                        <td>
                            <input type="text" class="inputtitle"/>
                        </td>
                        <td>
                            <input type="text" class="inputtitle"/>
                        </td>
                        <td>
                            <input type="text" class="inputtitle"/>
                        </td>
                        <td>
                            <input type="text" class="inputtitle"/>
                        </td>
                        <td>
                            <input type="text" class="inputtitle"/>
                        </td>
                        <td>
                            <input type="text" class="inputtitle"/>
                        </td>
                    </tr>
                </table>
            </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>
    export default {
        name: "plSh",
        props: {
            plShVisible: {
                type: Boolean,
                default: false
            },
            // 单元名称下拉框数据
            dys: {
                type: Array
            },
            // 层数
            cs: {
                type: Number
            }
        },
        data() {
            return {
                isVisible: false,
                xlVisible: false
            }
        },
        methods: {
            xl: function () {
                this.xlVisible = true;
            },
            addRow: function () {

            },
            delRow: function (index) {
                console.log(index)
            },
            close: function () {
                this.$emit("close")
                this.isVisible = false
            },
            result: function () {

            },
            save: function () {

            },
            cancel: function () {
                this.close()
            }
        },
        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;
        :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;
    }
    .xlgz{
        span{
            font-size: 16px;
            line-height: 22px;
            span{
                color: red;
            }
        }
    }
</style>