// 左侧 资源目录 组件
<template>
    <div>
        <div class="container">
            <el-card>
                <div slot="header" class="clearfix">
                    <span>查询列表</span>
                    <el-button type="primary" style="float:right;" size="mini" @click="createQue">新建查询</el-button>
                </div>
                <div id="list">
                    <div v-for="o in data" :key="o.id" class="textItem" @click="showProject(o)">
                        <p>{{o.taskname}}</p>
                        <p>
                            {{new Date(o.starttime) | time}} 
                            <i class="el-icon-delete"></i>
                            <i class="el-icon-folder"></i>
                            <i class="el-icon-edit-outline"></i>
                            <i class="el-icon-success"></i>
                        </p>
                    </div>
                </div>
            </el-card>
        </div>

        <div class="newquery" ref="newquery">
            <el-card style="border:none;">
                <div slot="header" class="clearfix">
                    <span>新建查询</span>
                    <i class="el-icon-close" @click="close('newquery')"></i>
                </div>
                <div>
                    <p>
                        <el-button type="primary" style="margin-right:16px;">导入文件</el-button>
                        <i class="bluecls">(仅支持shp、dxf、text格式文件)</i>
                    </p>
                    <p>
                        <i class="whitecls">地块: </i>
                        <el-select v-model="value" placeholder="请选择">
                            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                            </el-option>
                        </el-select>
                        <el-button type="primary" style="margin-left:64px;">建设项目数据</el-button>
                    </p>
                    <p>
                        <i class="whitecls">1. </i>
                        <i class="whitecls">X : </i>
                        <el-input v-model="input"></el-input>
                        <i class="whitecls">Y : </i>
                        <el-input v-model="input"></el-input>
                        <i class="el-icon-thumb redcls"></i>
                        <i class="el-icon-delete redcls"></i>
                    </p>
                    <p>
                        <i class="whitecls">2. </i>
                        <i class="whitecls">X : </i>
                        <el-input v-model="input"></el-input>
                        <i class="whitecls">Y : </i>
                        <el-input v-model="input"></el-input>
                        <i class="el-icon-thumb redcls"></i>
                        <i class="el-icon-delete redcls"></i>
                    </p>
                    <p>
                        <i class="whitecls">3. </i>
                        <i class="whitecls">X : </i>
                        <el-input v-model="input"></el-input>
                        <i class="whitecls">Y : </i>
                        <el-input v-model="input"></el-input>
                        <i class="el-icon-thumb redcls"></i>
                        <i class="el-icon-delete redcls"></i>
                    </p>
                    <p>
                        <i class="whitecls">4. </i>
                        <i class="whitecls">X : </i>
                        <el-input v-model="input"></el-input>
                        <i class="whitecls">Y : </i>
                        <el-input v-model="input"></el-input>
                        <i class="el-icon-thumb redcls"></i>
                        <i class="el-icon-delete redcls"></i>
                    </p>
                    <p>
                        <el-button type="primary" style="margin-right:16px;">添加</el-button>
                        <el-button type="info" style="margin-right:16px;">清空</el-button>
                    </p>
                    <p>
                        <i class="bluecls">西安市坐标范围</i>
                        <i class="redcls">(国家2000坐标系)</i>
                    </p>
                    <p>

                    </p>
                    <p class="foot">
                        <el-button type="primary" style="margin-right:16px;">提交</el-button>
                        <el-button type="info" style="margin-right:16px;">取消</el-button>
                    </p>
                </div>
            </el-card>
        </div>

        <div class="project" ref="project">
            <el-card style="border:none;">
                <div slot="header" class="clearfix">
                    <span>项目</span>
                    <i class="el-icon-close" @click="close('project')"></i>
                </div>
                <p>
                    <el-button type="primary" style="margin-right:16px;">
                        <i class="el-icon-download whitecls"></i>导出WORD
                    </el-button>
                    <el-button type="primary" style="margin-right:16px;">
                        <i class="el-icon-download whitecls"></i>导出PDF
                    </el-button>
                </p><br/>
                <div class="flex-container">
                    <div class="flex-left">
                        <p>
                            <i class="bluecls">总面积: </i>
                            <el-input v-model="input"></el-input>
                        </p>
                        <p v-for="o in formData" :key="o.id">
                            <i class="bluecls">{{ o.layername }}: </i>
                            <el-input v-if="['textarea']" type="textarea" :value="textareaValue(o['textresult'])"></el-input>
                            <el-input v-else :value="textareaValue(o['textresult'])"></el-input>
                        </p>  
                    </div>
                     <div class="flex-right">
                        <div v-for="o in formData" :key="o.id">
                            <div class="mapTitle">{{ o.layername }}</div>
                            <div v-if="!o.showpicture" class="mapImage">
                                {{ textareaValue(o['textresult']) }}
                            </div>
                            <img v-else-if="o.pictureresult" :src="'data:image/jpg;base64,' + o.pictureresult" class="mapImage">
                        </div>
                     </div>
                </div>  
            </el-card>
        </div>

    </div>
</template>

<script>
    import responseData from '../assets/js/map/responseData';
    import graphicAnalyze from '../assets/js/json/graphicAnalyze';
    export default {
        name: 'leftAssert',
        components: {
        },
        data() {
            return {
                data: [], 
                options: [{
                    value: '0',
                    label: '地块一'
                    }, {
                    value: '1',
                    label: '地块二'
                }],
                input: '',
                formData: []
            }
        },
        filters: {
            time: function time(value) {
                var now = new Date(value),
                    y = now.getFullYear(),
                    m = now.getMonth() + 1,
                    d = now.getDate();
                return y + "-" + (m < 10 ? "0" + m : m) + "-" + (d < 10 ? "0" + d : d) + " " + now.toTimeString().substr(0, 8);
            }
        },
        mounted() {
            responseData.data ? this.data = responseData.data : 
            this.$http.get('http://192.168.3.194/XAYZT/analizeTask/getTaskListByUserId?userid=' 
                + responseData.id + '&pageIndex=' + responseData.pageIndex + '&pageSize=' 
                + responseData.pageSize).then(response => {
                response.status === 200 && (this.data = responseData.data = response.data.data)
            });
        },
        methods: {
            createQue() {
                this.$refs.newquery.style.display = 'block';
            },
            showProject(o) {
                this.$http.get('http://192.168.3.194/XAYZT/analizeTask/layerAnalizeResult?taskid=b2098e7941f540f393884881113cb00f').then(response => {
                    if(response.status !== 200) return;
                    this.formData = [];
                    let data = response.data.data.analizeResultList, dataArray = [], i = 0, o;
                    for( ; o = data[i++] ; ) {
                        var layer = this.eachAnalyzeConifg('alias', o.layername);
                        this.formData.push({
                            id: o.id, 
                            taskid: o.taskid, 
                            textarea: !!layer.textarea, 
                            textshow: true, 
                            layername: o.layername, 
                            textresult: o.textresult, 
                            showpicture: true, 
                            pictureresult: o.pictureresult
                        })
                    }
                    this.$refs.project.style.display = 'block';
                });
            },
            close(a) {
                this.$refs[a].style.display = 'none';
            }, 
            eachAnalyzeConifg: function (key, value) {
                let layers = graphicAnalyze.layers;
                for (var index in layers) {
                    if ( layers[index][key] == value ) {
                        return layers[index];
                    }
                }
            }, 
            textareaValue: function (value) {
                if (!value) return "";
                var content = [];
                try {
                    var valObj = JSON.parse(value);
                    var valObjKeys = Object.keys(valObj);
                    for (var key in valObj) {
                        var resultStr = this.contentJoin(key, valObj[key]);
                        if (valObjKeys.length === 1) {
                            content.push(resultStr);
                        } else {
                            content.push(key + ": " + resultStr);
                        }
                    }
                } catch (e) {
                    console.error(e);
                    return '分析出错';
                }
                return content.join("\n");
            }, 
            contentJoin: function (layername, textresult) {
                var totalArea = 0,
                    areaObject = {},
                    yongdixingzhiArray = [];
                for (var key in textresult) {
                    var value = textresult[key];
                    if (value.status === 'error') {
                        return '分析出错';
                    }
                    // 用地性质
                    var oldyongdixingzhi = value.用地性质 + '';
                    var yongdixingzhi = oldyongdixingzhi.replace(/[^\u4E00-\u9FA5]/g,'');
                    if (yongdixingzhiArray.indexOf(yongdixingzhi) === -1) {
                        yongdixingzhiArray.push(yongdixingzhi);
                    }
                    // 用地面积
                    var area = value.area;
                    var oldArea = areaObject[yongdixingzhi];
                    areaObject[yongdixingzhi] = oldArea === undefined ? area : (area + oldArea);
                    // 总面积
                    totalArea += area;
                }

                // 平方米转换为亩
                totalArea = this.squaremeterToAcre(totalArea);
                for (var key in areaObject) {
                    areaObject[key] = this.squaremeterToAcre(areaObject[key]);
                }

                // 根据分析图层显示分析结果
                var resultStr = [];
                switch (layername) {
                    case "详细规划":
                    case "过渡期适用图层":
                        yongdixingzhiArray.forEach(function (yongdixingzh) {
                            var yongdixingzhArea = areaObject[yongdixingzh];
                            if (yongdixingzhArea > 0.001) {
                                resultStr.push(yongdixingzh + ', ' + yongdixingzhArea + '亩。');
                            }
                        });
                        if (resultStr.length == 0) {
                            resultStr.push("未占用");
                        }
                        break;
                    case "停车场规划":
                        let _array = [];
                        yongdixingzhiArray.forEach(function (yongdixingzh) {
                            var yongdixingzhArea = areaObject[yongdixingzh];
                            if (yongdixingzhArea > 0.001) {
                                _array.push(yongdixingzh);
                            }
                        });
                        if (_array.length == 0) {
                            resultStr.push("未涉及停车场规划");
                        } else {
                            resultStr.push("涉及" + _array.join("、"));
                        }
                        break;
                    case "城市快速路体系":
                        if (yongdixingzhiArray.length == 0) {
                            resultStr.push("未涉及城市快速路");
                        } else {
                            resultStr.push("涉及" + yongdixingzhiArray.join("、"));
                        }
                        break;
                    case "铁路南环线":
                        if (yongdixingzhiArray.length == 0) {
                            resultStr.push("未涉及铁路南环线控制区域");
                        } else {
                            resultStr.push("涉及铁路南环线控制区域");
                        }
                        break;
                    case "地铁控制线":
                        if (totalArea < 0.001) {
                            resultStr.push("不在地铁控制线范围内");
                        } else {
                            resultStr.push("在地铁控制线范围内");
                        }
                        break;
                    case "公交场站规划(2018-2021年)":
                        if (totalArea < 0.001) {
                            resultStr.push("不在公交场站选址范围内");
                        } else {
                            resultStr.push("在公交场站选址范围内");
                        }
                        break;
                    case "生态控制红线":
                        if (totalArea < 0.001) {
                            resultStr.push("未占用");
                        } else {
                            resultStr.push("生态控制红线，" + totalArea + "亩");
                        }
                        break;
                    case "基本农田保护区":
                        if (totalArea < 0.001) {
                            resultStr.push("未占用");
                        } else {
                            resultStr.push("基本农田，" + totalArea + "亩");
                        }
                        break;
                    case "城市紫线":
                    case "城市绿线":
                        if (totalArea < 0.001) {
                            resultStr.push("未占用");
                        } else {
                            resultStr.push("占用");
                        }
                        break;
                    case "城市蓝线":
                    case "道路红线":
                    case "城市黄线":
                        if (yongdixingzhiArray.length === 0) {
                            resultStr.push("未占用");
                        } else {
                            resultStr.push("占用");
                        }
                        break;
                    case "影像地图":
                        resultStr.push("/");
                        break;
                    default:
                        yongdixingzhiArray.forEach(function (yongdixingzh) {
                            var yongdixingzhArea = areaObject[yongdixingzh];
                            if (yongdixingzhArea > 0.001) {
                                resultStr.push(yongdixingzh + ', ' + yongdixingzhArea + '亩。');
                            }
                        });
                        if (resultStr.length == 0) {
                            resultStr.push("未占用");
                        }
                        break;
                }
                return resultStr.join("\n");
            },
            squaremeterToAcre: function (number, fixed) {
                if (number === 0) return '0';
                var change1 = number*0.0015;	// 转为亩
                var change2 = change1.toFixed(fixed === undefined ? 3 : fixed); // 取小数点后三位数字
                var change3 = change2.replace(/0+$/g,''); // 舍去最后的零
                return change3;
            }
        }
    }
</script>

<style>
    .textItem {
        font-size: 16px;
        color:#5792C4;
        border-radius: 6px;
        padding: 8px;
        font-weight:bold;
        margin-bottom: 8px;
    }
    .textItem:hover {
        background-color: cornsilk;
    }
    .textItem p {
        height: 26px;
    }
    .textItem p > i {
        font-size: 22px;
        float: right;
        margin-right: 10px;
    }
    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }
    .clearfix:after {
        clear: both
    }
    .clearfix i {
        float: right;
        font-size: 22px;
    }
    .container {
        opacity: 0.6;
    }
    .container .el-card {
        background-color: #010101;
        color: #fff;
        transition: .3s;
        width: 440px;
        border:none; 
        height:834px;
    }
    .newquery {
        opacity: 0.6;
        top: 0px;
        left: 450px;
        position: absolute;
        z-index: 1000;
        display: none;
    }
    .newquery .el-card {
        background-color: #010101;
        color: #fff;
        transition: .3s;
        width: 540px;
        border:none; 
        height:556px;
    }
    .project {
        opacity: 0.6;
        top: 0px;
        left: 1000px;
        position: absolute;
        z-index: 1000;
        display: none;
    }
    .project .el-card {
        background-color: #010101;
        color: #fff;
        transition: .3s;
        width: 864px;
        border:none; 
        height:810px;
    }
    .newquery p {
        height: 48px;
    }
    .project p {
        height: auto;
    }
    .el-card .el-card__header {
        padding: 14px 20px;
        border: none;
        box-sizing: border-box;
        font-size: 18px;
        font-weight: bold;
    }
    .el-card .el-card__body {
        padding: 12px 6px 10px 6px;
    }
    /* 字体样式 */
    .bluecls {
        color: #0086E7;
        font-size: 16px;
        font-weight: bold;
        margin-right: 14px;
    }
    .whitecls {
        color: #fff;
        font-size: 16px;
        font-weight: bold;
        margin-right: 5px;
        margin-left: 5px;
    }
    .redcls {
        margin-left:10px; 
        font-size:18px; 
        color:red;
    }
    .foot {
        float: right;
    }
    p .el-input {
        position: relative;
        font-size: 14px;
        display: inline-block;
        width: 165px;
        background-color: #000;
    }
    .el-input .el-input__inner {
        -webkit-appearance: none;
        background-color: #000;
        background-image: none;
        border-radius: 4px;
        border: 1px solid #DCDFE6;
        box-sizing: border-box;
        color: #ffffff;
        display: inline-block;
        font-size: inherit;
        height: 34px;
        line-height: 40px;
        outline: 0;
        padding: 0 15px;
        transition: border-color .2s cubic-bezier(.645,.045,.355,1);
        width: 100%;
    }
    p .el-textarea {
        position: relative;
        display: inline-block;
        width: 240px;
        vertical-align: top;
        font-size: 14px;
    }
    .el-textarea .el-textarea__inner {
        display: block;
        resize: vertical;
        padding: 5px 15px;
        line-height: 1.5;
        box-sizing: border-box;
        width: 100%;
        height: 70px;
        font-size: inherit;
        color: #fff;
        background-color: #000;
        background-image: none;
        border: 1px solid #DCDFE6;
        border-radius: 4px;
        transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    }
    .flex-container {
        display: -webkit-flex;
        display: flex;
        height: 680px;
    }
    .flex-left {
        margin-top: 10px;
        width: 60%;
        height: 100%;
        overflow-y: scroll;
    }
    .flex-right {
        width: 40%;
        height: 100%;
        overflow-y: scroll;
    }
    .flex-left .el-input {
        position: relative;
        font-size: 14px;
        display: inline-block;
        width: 240px;
        background-color: #000;
    }
    .flex-left p {
        float: right; 
        margin: 4px 16px 4px 10px;
    }
    .flex-left::-webkit-scrollbar {
        width : 10px; 
        height: 1px;
    }
    .flex-left::-webkit-scrollbar-thumb {
        border-radius   : 10px;
        background-color: skyblue;
        background-image: -webkit-linear-gradient(
            45deg,
            rgba(255, 255, 255, 0.2) 25%,
            transparent 25%,
            transparent 50%,
            rgba(255, 255, 255, 0.2) 50%,
            rgba(255, 255, 255, 0.2) 75%,
            transparent 75%,
            transparent
        );
    }
    .flex-right::-webkit-scrollbar {
        width : 10px; 
        height: 1px;
    }
    .flex-right::-webkit-scrollbar-thumb {
        border-radius   : 10px;
        background-color: skyblue;
        background-image: -webkit-linear-gradient(
            45deg,
            rgba(255, 255, 255, 0.2) 25%,
            transparent 25%,
            transparent 50%,
            rgba(255, 255, 255, 0.2) 50%,
            rgba(255, 255, 255, 0.2) 75%,
            transparent 75%,
            transparent
        );
    }
    #list {
        height: 740px;
        overflow-y: scroll;
    }
    #list::-webkit-scrollbar {
        width : 10px; 
        height: 1px;
    }
    #list::-webkit-scrollbar-thumb {
        border-radius   : 10px;
        background-color: skyblue;
        background-image: -webkit-linear-gradient(
            45deg,
            rgba(255, 255, 255, 0.2) 25%,
            transparent 25%,
            transparent 50%,
            rgba(255, 255, 255, 0.2) 50%,
            rgba(255, 255, 255, 0.2) 75%,
            transparent 75%,
            transparent
        );
    }
    .mapTitle {
        color: #0086E7;
        font-size: 16px;
        margin-right: 16px;
        width: 100%;
        text-align: center;
    }
    .mapImage {
        /* margin: 8px auto; */
        width: 100%;
        height: 186px;
        padding: 8px;
    }
</style>