<template>
    <div class="grid-container">
        <div class="operate-container">
            <!-- <el-input type="text" size="mini" style="width:300px;margin-right:14px;" placeholder='请输入搜索关键字'></el-input> -->
            <!-- <el-button icon="el-icon-search" size="mini" type="default">查询</el-button> -->
            <el-button icon="el-icon-plus" size="mini" type="primary" @click="addDialog">添加</el-button>
            <el-button icon="el-icon-edit" size="mini" type="primary" @click="createDialog">编辑</el-button>
            <el-button icon="el-icon-delete" size="mini" type="danger" @click="deleteWg">删除</el-button>
        </div>
        <el-table :data="tableData" size="mini" height=" " border style="width: 100%;height: 65%; background: rgb(26, 39, 75);;"
            @selection-change="handleSelectionChange">

            <el-table-column type="selection" width="55">
            </el-table-column>

            <el-table-column prop="styleName" label="样式名称">
            </el-table-column>

            <el-table-column prop="typeName" label="数据格式">
            </el-table-column>

        </el-table>
        <!-- <div class="page-container">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="listQuery.pageNum" :page-sizes="[20,50,100, 200, 300, 400]"
                :page-size="listQuery.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div> -->
        <el-dialog :title="titleStr" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
            <!-- ------------------------------------------- -- 配置页------------------------------------------------------------------------------- -->
            <div class="tuceng_ys">
                <div class="tuceng_ys_son">
                    <el-form ref="forms" :model="form" label-width="80px" size="mini">
                        <template v-if="typeName == 'add'">
                            <el-form-item label="样式名称">
                                <el-input style="width: 300px" v-model="form.styleName"></el-input>
                            </el-form-item>
                            <el-form-item label="数据格式">
                                <el-select style="width: 300px" v-model="form.type" placeholder="请选择数据格式">
                                    <el-option label="线" value="1"></el-option>
                                    <el-option label="面" value="2"></el-option>
                                </el-select>
                            </el-form-item>
                        </template>
                        <template v-else>
                            <el-form-item label="样式名称">
                                <el-input style="width: 300px" v-model="form.styleName" disabled></el-input>
                            </el-form-item>
                            <el-form-item label="数据格式">
                                <el-input style="width: 300px" v-model="form.typeName" disabled></el-input>
                            </el-form-item>
                        </template>
                       

                        <el-form-item v-show="form.type == 2" label="填充颜色">
                            <el-color-picker v-model="form.fillColor"></el-color-picker>
                        </el-form-item>
                        <el-form-item v-show="form.type == 2" label="透明度">
                            <el-input style="width: 300px" v-model="form.fillOpacity"></el-input>
                        </el-form-item>
                        <el-form-item v-show="form.type == 2 || form.type == 1" label="线条颜色">
                            <el-color-picker v-model="form.strokeColor"></el-color-picker>
                        </el-form-item>
                        <el-form-item v-show="form.type == 2 || form.type == 1" label="线条宽度">
                            <el-input style="width: 300px" v-model="form.strokeWidth"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="onSubmit" v-if="typeName == 'add'">创建</el-button>
                            <el-button type="primary" @click="onCreate" v-else>编辑</el-button>
                            <el-button @click="dialogVisible = false">取消</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </div>

        </el-dialog>
    </div>
</template>

<script>
    import { getMethodCommon } from '../../api/Api'
    import { saveLayerStyle,getLayerStyleAndType ,deleteLayerStyle,updateLayerStyle} from "../../api/datamange";

    export default {
        name: 'index',
        data() {
            return {
                titleStr: '添加',
                rules: {

                },
                dialogVisible: false,
                total: 100,
                listQuery: {
                    pageSize: 10,
                    pageNum: 1,
                },
                data: null,
                defaultProps: {
                    children: 'child',
                    label: 'areaName'
                },
                tableData: [
                    {
                        name: "样式一",
                        geshi: '面',
                        toumingdu: '0.1',
                        tianchong: '0.1',
                        kuandu: '0.1',
                        yanse: '0.1',
                    }
                ],
                checkTreeId: null,
                selectIdList: [],
                WGYTypesList: [],
                typeName: 'add',
                form: {
                    type: "1",
                    styleName: "",
                    fillColor: "",
                    fillOpacity: "",
                    strokeColor: "",
                    strokeWidth: "",
                },
                selectItem:[]
            }
        },
        created() {
           
        },
        mounted() {
            this.getList()
        },
        methods: {
            getList(){
                getLayerStyleAndType().then((res) => {
                    console.log(res)
                    var list = res.data.data.data
                    list.forEach(element => {
                        element.typeName = element.type == 1 ? '线' : '面'
                    });
                    this.tableData= list;
            });
            },
            onSubmit() {
                // console.log(this.form);
                var _this = this
                if (!/[\u4E00-\u9FA5]/g.test(this.form.styleName)) {
                    saveLayerStyle(this.form).then((res) => {
                        if (res.data.code == 200) {
                            this.$message.success("创建成功");
                            this.dialogVisible = false
                            _this.getList()
                        } else {
                            this.$message.error("创建失败");
                        }
                        // console.log(res);
                    });
                } else {
                    this.$message.error('不能输入中文')
                }
            },
            handleSizeChange(e) {
                this.listQuery.pageSize = e;
                this.getList();
            },
            handleCurrentChange(e) {
                this.listQuery.pageNum = e;
                this.getList();
            },
            submitForm() {
                var _this = this
                console.log(this.ruleForm)
                this.ruleForm.pId = this.checkTreeId
                this.ruleForm.households = Number(this.ruleForm.households)
                this.ruleForm.peopleNum = Number(this.ruleForm.peopleNum)
                this.$refs['ruleForm'].validate((valid) => {
                    if (valid) {
                        addGrid(_this.ruleForm).then(res => {
                            if (res.data.code == 200) {
                                this.$message.success(res.data.msg);
                                _this.dialogVisible = false
                                _this.getUserList({ id: _this.checkTreeId });
                            }
                        })
                    }
                })
            },
            createForm() {
                var _this = this
                console.log(this.ruleForm)
                this.ruleForm.areaId = this.selectIdList[0]
                this.ruleForm.pId = this.checkTreeId
                this.ruleForm.households = Number(this.ruleForm.households)
                this.ruleForm.peopleNum = Number(this.ruleForm.peopleNum)
                this.$refs['ruleForm'].validate((valid) => {
                    if (valid) {
                        editGrid(_this.ruleForm).then(res => {
                            if (res.data.code == 200) {
                                this.$message.success(res.data.msg);
                                _this.dialogVisible = false
                                _this.getUserList({ id: _this.checkTreeId });
                            }
                        })
                    }
                })
            },
            handleSelectionChange(e) {
                this.selectItem = e
                console.log("handleSelectionChange",e);
                this.selectIdList = []
                e.forEach(item => {
                    this.selectIdList.push(item.styleName)
                })
            },
            // 关闭弹窗
            handleClose(done) {
                done();
            },
            addDialog() {
                this.dialogVisible = true;
                this.titleStr = '添加'
                this.typeName = 'add'
                this.form = {
                    type: "1",
                    styleName: "",
                    fillColor: "",
                    fillOpacity: "",
                    strokeColor: "",
                    strokeWidth: "",
                }

            },
            createDialog() {
                if (this.selectIdList.length == 0) {
                    this.$message.warning('至少选中一个进行编辑');
                    return
                } else if (this.selectIdList.length > 1) {
                    this.$message.warning('只能选中一个进行编辑');
                    return
                }

                var _this = this
                this.dialogVisible = true;
                this.titleStr = '编辑'
                this.typeName = 'create'
                this.form = this.selectItem[0]
                this.form.type = this.form.type.toString()
              
            },
            deleteWg() {
                var _this = this
                if (this.selectIdList.length == 0) {
                    this.$message.warning('至少选中一个进行删除');
                    return
                } else if (this.selectIdList.length > 1) {
                    this.$message.warning('只能选中一个进行删除');
                    return
                }
                this.$confirm("确认删除？")
                    .then(() => {
                        console.log("selectIdList",this.selectIdList);
                        deleteLayerStyle(this.selectIdList[0]).then(res => {
                            if (res.data.code == 200) {
                                this.$message.success(res.data.msg);
                                _this.dialogVisible = false
                                _this.getList()
                            }
                        })
                    })
                    .catch((_) => { });

            },
            onCreate(){
                updateLayerStyle(this.form).then((res) => {
                        if (res.data.code == 200) {
                            this.$message.success("编辑成功");
                            this.dialogVisible = false
                            _this.getList()
                        } else {
                            this.$message.error("编辑失败");
                        }
                        // console.log(res);
                    });
            }
        }
    }
</script>

<style scoped>
    .page-container {
        width: 100%;
        height: 40px;
        padding: 15px;
    }

    ::v-deep .el-pagination__total {
        color: #fff;
    }

    ::v-deep .el-pagination__jump {
        color: #fff;
    }

    ::v-deep .el-pagination button:disabled {
        background: none;
    }



    .tuceng_ys ::v-deep.tuceng_ys_son .el-input__inner {
        background-color: transparent;
        border: 1px solid #10a2e1;
        color: #fff;
    }

    .tuceng_ys ::v-deep.tuceng_ys_son .el-form-item__label {
        color: #10a2e1;
    }

    .tuceng_ys ::v-deep.tuceng_ys_son .el-color-picker__trigger {
        width: 300px;
    }

    ::v-deep .el-checkbox {
        margin-top: 4px !important;
    }

    ::v-deep .el-checkbox__inner {
        background-color: transparent;
        border: 0.0625rem solid #00b2ff;
        color: #fff;
        border-radius: 0px
    }

    ::v-deep .el-dialog__title {
        color: #fff;
        font-size: 14px;
    }

    ::v-deep .el-dialog {
        background: rgba(0, 0, 0, 0.7);
        color: #fff;
    }

    .operate-container {
        text-align: right;
        width: 100%;
        height: 44px;
        border-bottom: 1px solid #108eff;
        margin-bottom: 10px;
    }

    .grid-container {
        width: calc(100% - 0px);
        min-height: 500px;
        padding: 40px;
        padding-bottom: 0;
    }

    /*  */
    ::v-deep .el-tree {

        color: #ffffff;
        /* // 整体背景透明 */
        background: rgba(0, 0, 0, 0);
    }

    ::v-deep .el-checkbox__inner {
        /*// checkbox 背景透明  */
        background: rgba(0, 0, 0, 0);
    }

    ::v-deep .el-tree-node__content:hover {
        /* // hover 节点背景色，否则是白色 */
        background: rgba(104, 147, 215, 0.4);
    }

    ::v-deep .el-tree-node:focus>.el-tree-node__content {
        /*  // focus 节点背景透明，否则是白色 */
        background-color: rgba(0, 0, 0, 0);
    }


    ::v-deep .el-table {
        background: none;
    }

    ::v-deep .el-form-item__label {
        /* padding:0px; */
    }

    ::v-deep .el-form-item {
        /* margin-bottom:5px; */
    }


    ::v-deep .el-table__fixed-right::before,
    .el-table__fixed::before {
        height: 0px;
    }

    ::v-deep .el-table::before {
        height: 0px;
    }

    ::v-deep .el-form--inline {
        height: 30px;
    }

    ::v-deep .mapboxgl-ctrl {
        display: block;
    }

    ::v-deep .el-table td.el-table__cell,
    .el-table th.el-table__cell.is-leaf {
        border-bottom: 1px solid hsl(240, 100%, 37%, 0.2);
    }


    ::v-deep .el-input__inner {
        background-color: transparent;
        border: 0.0625rem solid #00b2ff;
        color: #fff;
        border-radius: 0px;
    }

    ::v-deep .el-button {
        border-radius: 0px;
    }

    ::v-deep .el-form-item__label {
        color: #00b2ff;
        /* line-height: 2.1875rem; */
    }

    ::v-deep .el-button--small {
        padding: 0.625rem 2.1875rem;
    }

    ::v-deep .el-form--inline .el-form-item {
        /* margin-left: 1.875rem; */
    }

 

    /* “表格内背景颜色“ */
    ::v-deep.el-table th,
    ::v-deep.el-table tr,
    ::v-deep.el-table td {
        background-color: transparent !important;
    }

    /*  按钮样式修改 */
    ::v-deep .el-button--success {
        background: #266a94;
        color: #00f261;
        border: 0;
    }

    ::v-deep .el-button--info {
        background: #482c27;
        color: #8ac2da;
        border: 0;
    }

    ::v-deep.el-button--primary {
        background: #266a94;
        color: #8ac2da;
        border: 0;
    }

    ::v-deep.el-button--primary {
        background: #578ef0;
        color: #fff;
        border: 0;
    }

    /*修改element-ui的table 在鼠标悬停hover时的高亮颜色*/
    ::v-deep.el-table tbody tr:hover>td {
        background-color: black !important;
    }

    /* 第一个 dialog修改  */
    ::v-deep.dialog_one .el-dialog {
        background: #266a94 !important;
        border: 1px solid #10a2e1;
    }

    ::v-deep.dialog_one .el-dialog__title {
        color: #00b2ff;
        font-size: 2rem;
    }

    ::v-deep.dialog_one .el-dialog__header {
        text-align: center;
    }

    /* 第二个 dialog 修改 */
    ::v-deep.dialog_two .el-dialog {
        background: rgba(37, 61, 75, 0.7) !important;
        border: 1px solid #797979;
    }

    ::v-deep.dialog_two .el-dialog__body {
        padding: 10px 0;
    }

    ::v-deep.dialog_two .el-dialog__header {
        padding: 0;
    }


    ::v-deep .el-table__cell {
        background: none;
        padding: 0px;
        font-size: 14px;
        color: #ccc;
    }

    ::v-deep .cell {
        padding: 0px;
        height: 40px;
        line-height: 40px;
        /* background:hsl(212, 43%, 49%,0.5); */
        text-align: center;
        font-size: 12px;
    }

    ::v-deep .number {
        background: none;
        color: #fff;
    }

    ::v-deep .btn-next {
        background: none;
        color: #fff;
    }

    ::v-deep .btn-prev {
        background: none;
        color: #fff;
    }

    ::v-deep .el-pagination__total {
        color: #fff;
    }

    ::v-deep .el-pagination__jump {
        color: #fff;
    }

    ::v-deep .el-pagination button:disabled {
        background: none;
    }

    ::v-deep .disabled {
        background: none;
    }

    ::v-deep .el-descriptions__body {
        background: none;
        color: #ccc;
    }

    ::v-deep .el-descriptions-row {
        background: none;
        color: #eee;
    }


    ::v-deep .el-descriptions-item__label {
        background: hsl(212, 43%, 49%, 0.5);
        color: #eee;
        font-weight: bold;
    }

    ::v-deep .el-descriptions .is-bordered .el-descriptions-item__cell {
        border-color: hsl(212, 43%, 49%, 1);
    }



    ::v-deep .el-checkbox {
        margin-top: 14px;
    }

    ::v-deep .el-table--scrollable-y .el-table__body-wrapper {
        overflow-x: auto;
        overflow-y: auto;
    }

    ::v-deep .el-table--scrollable-x .el-table__body-wrapper {}

    ::v-deep .el-table--scrollable-x .el-table__body-wrapper::-webkit-scrollbar {
        display: block !important;
        z-index: 99999999999999;
    }

    /* 滑道样式 */
    ::v-deep .el-table--scrollable-x .el-table__body-wrapper::-webkit-scrollbar {
        width: 0px;
        height: 10px;
        background: #304156;
        border-radius: 6px;
        z-index: 99999999999999;
    }

    /* 定义滑块的样式 */
    ::v-deep .el-table--scrollable-x .el-table__body-wrapper::-webkit-scrollbar-thumb {
        border-radius: 0px;
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
        background-color: rgba(0, 0, 0, 0.3);
        z-index: 99999999999999;
    }

    /* 定义滑块鼠标移入时的样式 */
    ::v-deep .el-table--scrollable-x .el-table__body-wrapper .el-table__body-wrapper .is-scrolling-left::-webkit-scrollbar-thumb:hover {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
        background-color: rgba(0, 0, 0, 0.4);
        z-index: 99999999999999;
    }

    ::v-deep .el-pagination__jump {
        margin-left: 0px;
    }


    ::v-deep .el-pagination .el-select {
        width: 80px;
    }

    ::v-deep .el-pager li {
        width: 10px !important;
    }

    ::v-deep .el-pager .number {
        padding: 0px;
        width: 10px !important;
    }

    ::v-deep .el-pagination .el-input__inner {
        width: 80px;
    }

    ::v-deep .mapboxgl-ctrl {
        /* display:none; */
    }

    ::v-deep .mapboxgl-ctrl-attrib-inner {
        display: none;
    }

    ::v-deep .el-form-item__content .is-disabled .el-input__inner {
        background-color: none !important;
    }

    ::v-deep .mapboxgl-map canvas {
        position: absolute;
        top: 0;
        left: 0;
    }

    ::v-deep .el-pager li {
        min-width: 25px !important;
    }

    ::v-deep .el-table--border::after,
    .el-table--group::after,
    .el-table::before {
        background: none;
    }

    ::v-deep .el-table--border,
    .el-table--group {
        border: 0px;
    }

    ::v-deep .el-table--border th.el-table__cell,
    .el-table__fixed-right-patch {
        /* border:0px; */
    }

    ::v-deep .el-table--border .el-table__cell,
    .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed {
        border: 0px;
    }

    .page-container {
        width: 100%;
        height: 60px;
        padding: 15px 0px;
        border-top: 1px solid #ccc;
    }
</style>