<template>
    <div class="main">
        <div class="button">
            <el-button type="primary" @click="oneExit">编辑</el-button>
            <el-button type="primary">保存</el-button>
            <el-button type="primary" @click="batchExit">批量修改</el-button>
        </div>
        <div class="table">
            <table border="1">
                <tr>
                    <td><input type="checkbox" @click="allcheck"/></td>
                    <td>界址点号</td>
                    <td>顺序号</td>
                    <td>X坐标值</td>
                    <td>Y坐标值</td>
                    <td>界标类型</td>
                    <td>界址点类型</td>
                </tr>
                <tr v-for="(item,index) in jzdlist" :key="index">
                    <td><input type="checkbox" v-model="item.isCheck"/></td>
                    <td><input type="text" class="formInput" v-model="item.jzdh" readonly="readonly"/></td>
                    <td><input type="text" class="formInput" v-model="item.sxh" readonly="readonly"/></td>
                    <td><input type="text" class="formInput" v-model="item.xzbz" :readonly="item.iszb"/></td>
                    <td><input tepe="text" class="formInput" v-model="item.yzbz" :readonly="item.iszb"/></td>
                    <td>
                        <el-select v-model="item.jblx" :disabled="item.jbisdisabled">
                            <el-option
                                    v-for="i in jblx"
                                    :key="i.key"
                                    :label="i.label"
                                    :value="i.value"
                            ></el-option>
                        </el-select>
                    </td>
                    <td>
                        <el-select v-model="item.jzdlx" :disabled="item.jzdisdisabled">
                            <el-option
                                    v-for="i in jzdlx"
                                    :key="i.key"
                                    :label="i.label"
                                    :value="i.value"
                            ></el-option>
                        </el-select>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</template>

<script>
    export default {
        name: "",
        components: {},
        props: {},
        data() {
            return {
                jblx: [
                    {
                        key: '1',
                        label: '钢钉',
                        value: '1'
                    }, {
                        key: '2',
                        label: '水泥桩',
                        value: '2'
                    }, {
                        key: '3',
                        label: '石灰桩',
                        value: '3'
                    }, {
                        key: '4',
                        label: '喷绘',
                        value: '4'
                    }, {
                        key: '5',
                        label: '瓷标志',
                        value: '5'
                    }, {
                        key: '6',
                        label: '无标志',
                        value: '6'
                    }, {
                        key: '7',
                        label: '其他',
                        value: '7'
                    },
                ],
                jzdlx: [
                    {
                        key: '1',
                        label: '解析界址点',
                        value: '1'
                    }, {
                        key: '2',
                        label: '图解界址点',
                        value: '2'
                    }, {
                        key: '3',
                        label: '航测界址点',
                        value: '3'
                    }, {
                        key: '4',
                        label: '其他',
                        value: '4'
                    }
                ],
                jzdlist: [
                    {
                        isCheck: false,
                        jzdh: 'JZDH001',
                        sxh: '1',
                        xzbz: '10.0',
                        yzbz: '11.0',
                        jblx: '1',
                        jzdlx: '1',
                        iszb: 'readonly',
                        jbisdisabled: true,
                        jzdisdisabled: true
                    }, {
                        isCheck: false,
                        jzdh: 'JZDH002',
                        sxh: '2',
                        xzbz: '10.0',
                        yzbz: '11.0',
                        jblx: '2',
                        jzdlx: '2',
                        iszb: 'readonly',
                        jbisdisabled: true,
                        jzdisdisabled: true
                    }, {
                        isCheck: false,
                        jzdh: 'JZDH003',
                        sxh: '3',
                        xzbz: '10.0',
                        yzbz: '11.0',
                        jblx: '3',
                        jzdlx: '3',
                        iszb: 'readonly',
                        jbisdisabled: true,
                        jzdisdisabled: true
                    },

                ]
            }
        },
        created() {
        },
        mounted() {
        },
        methods: {
            allcheck(value) {
                console.log(value.target.checked)
                console.log("全选");
                for (let item of this.jzdlist) {
                    item.isCheck = value.target.checked;
                }
            },
            oneExit() {
                console.log("单一修改");
                for (let item of this.jzdlist) {
                    console.log(item)
                    if (item.isCheck) {
                        item.iszb = false;
                        item.jbisdisabled = false;
                        item.jzdisdisabled = false;
                    }
                }

            },
            batchExit() {
                console.log("批量修改")
            }
        },
        computed: {},
        watch: {},
    }
</script>
<style scoped lang="less">
    .main {
        box-sizing: border-box;
        padding: 18px;
        height: auto;
        width: 80%;
    }

    table {
        margin-top: 10px;
        background-color: #fff;
        font-size: 14px;
        width: 100%;
    }

    td {
        text-align: center;
        height: 36px;
    }

    table .formInput {
        margin: 0;
        height: 36px;
        outline: none;
        border: none;
        color: #606764;
        overflow: visible;
        text-align: center;
        cursor: text;
    }
</style>