<template>
    <div class="main">
        <div class="button">
            <el-button type="primary" @click="oneExit">编辑</el-button>
            <el-button type="primary" @click="save">保存</el-button>
            <el-button type="primary" @click="batchExit">批量修改</el-button>
        </div>
        <div class="table">
            <table border="1">
                <tr>
                    <td><input type="checkbox" @click="allcheck" v-model="isCheckAll"/></td>
                    <td>起始点</td>
                    <td>终止点</td>
                    <td>界址点距(m)</td>
                    <td>界址线类型</td>
                    <td>界址线位置</td>
                    <td>界限性质</td>
                    <td>说明</td>
                </tr>
                <tr v-if="jzxlist.length==0">
                    <td colspan="8"><span class="nodata">暂无数据</span></td>
                </tr>
                <tr v-for="(item,index) in jzxlist" :key="index" v-else>
                    <td><input type="checkbox" v-model="item.isCheck" @change="changeAll"/></td>
                    <td><input type="text" class="formInput" v-model="item.qdh" readonly="readonly"/></td>
                    <td><input type="text" class="formInput" v-model="item.zdh" readonly="readonly"/></td>
                    <td><input type="text" class="formInput" v-model="item.jzjj" :readonly="item.jjisdisabled"/></td>
                    <td>
                        <el-select v-model="item.jzxlb" :disabled="item.jzxisdisabled">
                            <el-option
                                    v-for="i in jzxlx"
                                    :key="i.key"
                                    :label="i.label"
                                    :value="i.value"
                            ></el-option>
                        </el-select>
                    </td>
                    <td>
                        <el-select v-model="item.jzxwz" :disabled="item.jzxisdisabled">
                            <el-option
                                    v-for="i in jzxwz"
                                    :key="i.key"
                                    :label="i.label"
                                    :value="i.value"
                            ></el-option>
                        </el-select>
                    </td>
                    <td>
                        <el-select v-model="item.jxxz" :disabled="item.jzxisdisabled">
                            <el-option
                                    v-for="i in jxxz"
                                    :key="i.key"
                                    :label="i.label"
                                    :value="i.value"
                            ></el-option>
                        </el-select>
                    </td>
                    <td>
                        <input type="text" class="formInput" v-model="item.sm" readonly="readonly"/>
                    </td>
                </tr>
            </table>
        </div>
        <div>
            <el-dialog
                    title="批量修改"
                    :visible.sync="centerDialogVisible"
                    width="30%"
                    center>
                <div class="plxg">
                    <div class="batchlx">
                        <span class=""> 界址线类型:</span>
                        <el-select v-model="batchJzx.jzxlx">
                            <el-option
                                    v-for="i in jzxlx"
                                    :key="i.key"
                                    :label="i.label"
                                    :value="i.value"
                            ></el-option>
                        </el-select>
                    </div>
                    <div class="batchlx">
                        <span>界址线位置:</span>
                        <el-select v-model="batchJzx.jzxwz">
                            <el-option
                                    v-for="i in jzxwz"
                                    :key="i.key"
                                    :label="i.label"
                                    :value="i.value"
                            ></el-option>
                        </el-select>
                    </div>
                    <div class="batchlx">
                        <span class="">界线性质:</span>
                        <el-select v-model="batchJzx.jxxz">
                            <el-option
                                    v-for="i in jxxz"
                                    :key="i.key"
                                    :label="i.label"
                                    :value="i.value"
                            ></el-option>
                        </el-select>
                    </div>

                </div>
                <span slot="footer" class="dialog-footer">
                <el-button @click="centerDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="jzxbatchsave">确 定</el-button>
              </span>
            </el-dialog>
        </div>
    </div>
</template>

<script>
    import {queryjzx, jzxsingleModify, jzxsbatchModify} from '../../../api/zd'
    import {Message} from 'element-ui'

    export default {
        name: "jzx",
        components: {},
        props: {},
        data() {
            return {
                bsm: '',
                isCheckAll: false,
                centerDialogVisible: false,
                jzxwz: [
                    {
                        key: '1',
                        label: '内',
                        value: '1'
                    }, {
                        key: '2',
                        label: '中',
                        value: '2'
                    }, {
                        key: '3',
                        label: '外',
                        value: '3'
                    },
                ],
                jxxz: [
                    {
                        key: '600001',
                        label: '已定界',
                        value: '600001'
                    }, {
                        key: '600002',
                        label: '未定界',
                        value: '600002'
                    }, {
                        key: '600003',
                        label: '争议界',
                        value: '600003'
                    }, {
                        key: '600004',
                        label: '工作界',
                        value: '600004'
                    }, {
                        key: '600009',
                        label: '其他',
                        value: '600009'
                    },
                ],
                jzxlx: [
                    {
                        key: '250200',
                        label: '海岸线',
                        value: '250200'
                    }, {
                        key: '250201',
                        label: '大潮平均高潮线',
                        value: '250201'
                    }, {
                        key: '250202',
                        label: '零米等深线',
                        value: '250202'
                    }, {
                        key: '250203',
                        label: '江河入海口陆海分界线',
                        value: '250203'
                    }, {
                        key: '620200',
                        label: '国界',
                        value: '620200'
                    }, {
                        key: '630200',
                        label: '省、自治区、直辖市界',
                        value: '630200'
                    }, {
                        key: '640200',
                        label: '地区、自治州、地级市界',
                        value: '640200'
                    }, {
                        key: '650200',
                        label: '县、区、旗、县级市界',
                        value: '650200'
                    }, {
                        key: '660200',
                        label: '街道、乡、（镇）界',
                        value: '660200'
                    }, {
                        key: '670402',
                        label: '开发区、保税区界',
                        value: '670402'
                    }, {
                        key: '670500',
                        label: '街坊、村界',
                        value: '670500'
                    }, {
                        key: '670600',
                        label: '省、自治区、直辖市间海域行政界线',
                        value: '670600'
                    }, {
                        key: '670700',
                        label: '县际间海域行政界线',
                        value: '670700'
                    },
                ],
                jzxlist: [],
                batchJzx: {
                    bsms: [],
                    jzxlx: '250200',
                    jzxwz: '1',
                    jxxz: '600001'
                }
            }
        },
        created() {

        },
        mounted() {
            let bsm = this.$store.state.zdbsm
            this.getData(bsm)
        },
        methods: {
            getData(bsm) {
                queryjzx(bsm).then(res => {
                    for (let i = 0; i < res.result.length; i++) {
                        res.result[i]['isCheck'] = false;
                        res.result[i]['jjisdisabled'] = 'readonly';
                        res.result[i]['jzxisdisabled'] = true;
                    }
                    this.isCheckAll = false;
                    this.jzxlist = res.result;
                })
            },
            save() {
                jzxsingleModify(this.jzxlist).then(res => {
                    if (res.success) {
                        Message.success("保存成功")
                        this.getData(this.bsm)
                    } else {
                        Message.error(res.message)
                    }
                })
                for (let item of this.jzxlist) {
                    if (item.isCheck) {
                        item.jjisdisabled = 'readonly';
                        item.jzxisdisabled = true;
                    }
                }
            },
            oninput(e) {
                e.target.value = (e.target.value.match(/^\d*(\.?\d{0,4})/g)[0]) || null
            },
            changeAll(e) {
                if (!e.target.checked) {
                    this.isCheckAll = false;
                    return
                }
                for (let item of this.jzxlist) {
                    if (!item.isCheck) {
                        this.isCheckAll = false;
                        return
                    }
                }
                this.isCheckAll = true;
            },
            allcheck(value) {
                for (let item of this.jzxlist) {
                    item.isCheck = value.target.checked;
                }
            },
            oneExit() {
                for (let item of this.jzxlist) {
                    if (item.isCheck) {
                        item.jjisdisabled = false;
                        item.jzxisdisabled = false;
                    }
                }

            },
            batchExit() {
                console.log("批量修改")
                let flag = false;
                for (let item of this.jzxlist) {
                    if (item.isCheck) {
                        flag = true;
                    }
                }
                if (flag) {
                    this.centerDialogVisible = true;
                } else {
                    Message.info("请勾选要修改的数据")
                }
            },
            jzxbatchsave() {
                this.batchJzx.bsms.length = 0;
                for (let item of this.jzxlist) {
                    if (item.isCheck) {
                        this.batchJzx.bsms.push(item.bsm);
                    }
                }
                jzxsbatchModify(this.batchJzx).then(res => {
                    if (res.success) {
                        this.getData(this.bsm)
                        this.centerDialogVisible = false;
                    } else {
                        Message.error(res.message)
                    }
                })
            }
        },
        computed: {},
        watch: {
            "$store.state.zdbsm": function (bsm) {
                this.getData(bsm)
            }
        },
    }
</script>
<style scoped lang="less">

    /*    /deep/ .el-input.is-disabled .el-input__inner {
            color: #606764;
        }*/

    .main {
        box-sizing: border-box;
        padding: 18px;
        height: auto;
        width: 80%;
        table {
            margin-top: 10px;
            background-color: #fff;
            font-size: 14px;
            width: 100%;
            .formInput {
                margin: 0;
                height: 36px;
                outline: none;
                border: none;
                color: #606764;
                overflow: visible;
                text-align: center;
                cursor: text;
            }
        }
        table:hover {
            cursor: pointer;
        }
        td {
            text-align: center;
            height: 36px;
        }
        .batchlx {
            //text-align: justify;
            justify-content: space-between;
        }

        .nodata {
            color: #b2b2b2;
            height: 100px;
        }
    }

</style>