<template>
    <div>
        <ul  class="uploadDiv" v-if="!resultDialog && !txtResultDialog">
            <li>
           <el-upload
                    class="avatar-uploader"
                    action="#"
                    accept=".txt"
                    :auto-upload="false"
                    :on-change="txtFileChange"
            >
                <i class="el-icon-upload"></i>
                <div class="title">TXT文本格式</div>
                <div class="templateDowload">
                    <a href="#" @click.stop="downloadFile('./fileTemplate/txttemplet.txt','txttemplet.txt')">TXT模板下载</a>
                </div>

            </el-upload>
            </li>
            <li>
            <el-upload
                    class="avatar-uploader"
                    action="/api/tx/shpUtils/readShp"
                    accept=".zip"
                    :show-file-list="false"
                    :on-success="shpFileSuccess"
            >
                <i class="el-icon-upload"></i>
                <div class="title">ESRI Shape文件格式</div>
            </el-upload>
            </li>
            <li>
            <el-upload
                    class="avatar-uploader"
                    :show-file-list="false"
                    action="https://jsonplaceholder.typicode.com/posts/"
                    accept=".dwg,.dxf"
            >
                <i class="el-icon-upload"></i>
                <div class="title">CAD文件</div>
            </el-upload>
            </li>
            <li>
            <el-upload
                    class="avatar-uploader"
                    action="/api/tx/excelGeo/readExcel"
                    accept=".xls,.xlsx"
                    :show-file-list="false"
                    :on-success="excelFileSuccess"
            >
                <i class="el-icon-upload"></i>
                <div class="title">Excel文件格式</div>
                <div class="templateDowload">
                  <a href="#"  @click.stop="downloadFile('./fileTemplate/exceltemplet.xlsx','exceltemplet.xlsx')">Excel模板下载</a>
                </div>
            </el-upload>
            </li>
        </ul>
        <div v-if="resultDialog">
            <el-form :model="zdForm" ref="zdCheckForm" label-width="100px" size="small" @submit.native.prevent class="demo-ruleForm">
                <el-form-item
                        label="宗地"
                        prop="zdBsm"
                        :rules="[
      { required: true, message: '请选择宗地', trigger: 'change' },
    ]"
                >
                    <el-select v-model="zdForm.zdBsm" filterable placeholder="请选择" @change="zdChange">
                        <el-option
                                v-for="item in resultData"
                                :key="item.objectid"
                                :label="item.XMMC"
                                :value="item">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('zdCheckForm')">导入</el-button>
                    <el-button @click="cancel('zdCheckForm')">取消</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div v-if="txtResultDialog">
            <el-form :model="txtZd" ref="txtZdForm" label-width="100px" size="small" @submit.native.prevent class="demo-ruleForm">
                <el-form-item
                        label="地块名称"
                        prop="name"
                        :rules="[
      { required: true, message: '请选择地块', trigger: 'change' },
    ]"
                >
                    <el-select v-model="txtZd.name" filterable placeholder="请选择" @change="txtChange">
                        <el-option
                                v-for="(item,index) in txtResult"
                                :key="index"
                                :label="item.attributes.name"
                                :value="item.attributes.name">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitTxtForm('txtZdForm')">导入</el-button>
                    <el-button @click="cancelTxtForm('txtZdForm')">取消</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
<script>
    import mapTools from "./js/mapTools";
export default {
    data(){
        return{
            resultData:[],
            resultDialog:false,
            zdForm:{
                zdBsm: ""
            },
            currentClickZd:null,
            txtResult:[],
            txtResultDialog:null,
            txtZd:{
                name:""
            }
        }
    },
    mixins:[mapTools],
    methods:{
        downloadFile(url,fileName){
            let link = document.createElement("a");
            link.style.display = "none";
            link.href = url;
            link.setAttribute("download", fileName);
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
        },
        txtFileChange(file, fileList){
            var self = this;
            var fileReader = new FileReader();
            fileReader.readAsText(file.raw);
            fileReader.onload = function (res){
                var content = this.result;
                if(!content || content.length == 0){
                    self.$message.warning("文件内容为空!!!");
                    return;
                }
                self.analysisTextFile(content);
            }
        },
        analysisTextFile(content){
            var  index = content.indexOf("[地块坐标]"),
                geoInfos = content.substr(index),
                geoList = geoInfos.split("\n");
            if(geoList.length < 1){
                this.$message.warning("文本内容格式有误，请效验文本内容格式!!!");
                return;
            }
            //this.$emit("closeImportDialog");
            var features = [],attributes = {},points = [],j = 1;
            for(var i =1;i < geoList.length;i++){
                var rowData = geoList[i];
                if((rowData.indexOf("J") != -1 && rowData.indexOf("J") == 0)||(rowData.indexOf("j") != -1 && rowData.indexOf("j") == 0)){
                    //解析坐标点信息
                    var pointInfo = rowData.split(",");
                    var point = [parseFloat(pointInfo[2]),parseFloat(pointInfo[3])];
                    points.push(point);
                }else {
                    if(points.length > 0){
                        var graphic = {
                            attributes:JSON.parse(JSON.stringify(attributes)),
                            geometry:{
                                rings:[points]
                            }
                        }
                        features.push(graphic);
                    }
                    //新建一个信息 坐标名称 类型
                    attributes = {};
                    points = []
                    var info = rowData.split(",");
                    if(info[3] || info[3] == 'null'){
                        attributes.name = '地块'+j;
                        j++
                    }else {
                        attributes.name = info[3];
                    }
                }
            }
            if(points.length > 0){
                var graphic = {
                    attributes:JSON.parse(JSON.stringify(attributes)),
                    geometry:{
                        rings:[[points.concat()]]
                    }
                }
                features.push(graphic);
            }
            //新建一个信息 坐标名称 类型
            attributes = {};
            points = []
            this.txtResult = features;
            this.txtZd.name = "";
            this.txtResultDialog = true;
        },
        shpFileSuccess(response, file, fileList){
            var self = this;
            if(response.success){
                this.resultData = response.result;
                this.resultDialog = true;
            }else {
                this.$message.warning(response.message);
            }
        },
        excelFileSuccess(response, file, fileList){
            var self = this;
            if(response.success){
                var result = response.result;
                var points = [];
                for(var i = 0;i < result.length;i++){
                    var point = [];
                    point[0] = parseFloat(result[i].x);
                    point[1] = parseFloat(result[i].y);
                    points.push(point);
                }
                var wkt = "PROJCS[\"XADFZBX\",GEOGCS[\"GCS_WGS_1984\",DATUM[\"D_WGS_1984\",SPHEROID[\"WGS_1984\",6378137.0,298.257223563]],PRIMEM[\"Greenwich\",0.0],UNIT[\"Degree\",0.0174532925199433]],PROJECTION[\"Transverse_Mercator\"],PARAMETER[\"False_Easting\",0.0],PARAMETER[\"False_Northing\",0.0],PARAMETER[\"Central_Meridian\",0.0],PARAMETER[\"Scale_Factor\",1.0],PARAMETER[\"Latitude_Of_Origin\",0.0],UNIT[\"Meter\",1.0]]";
                var geometry = {
                    rings:[points],
                    spatialReference:{
                        wkt:wkt
                    },
                    type:"polygon"
                }
                //self.checkGeo(graphic);
                self.$emit("setGeometry",geometry);
            }else{
                this.$message.warning(response.message);
            }
        },
        //导入
        submitForm(formName){
            //校验完整性 直接调用空间方法 提交空间表
            var self = this;
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    var geometry = self.parseWktToArc(self.currentClickZd.wkt);
                    geometry.type = "polygon";
                    var wkt = "PROJCS[\"XADFZBX\",GEOGCS[\"GCS_WGS_1984\",DATUM[\"D_WGS_1984\",SPHEROID[\"WGS_1984\",6378137.0,298.257223563]],PRIMEM[\"Greenwich\",0.0],UNIT[\"Degree\",0.0174532925199433]],PROJECTION[\"Transverse_Mercator\"],PARAMETER[\"False_Easting\",0.0],PARAMETER[\"False_Northing\",0.0],PARAMETER[\"Central_Meridian\",0.0],PARAMETER[\"Scale_Factor\",1.0],PARAMETER[\"Latitude_Of_Origin\",0.0],UNIT[\"Meter\",1.0]]";
                    geometry.spatialReference = {
                        wkt:wkt
                    }
                    var graphic = {
                        attributes:self.currentClickZd,
                        geometry:geometry
                    }
                   // self.checkGeo(graphic);
                    self.resultDialog = false;
                    self.$emit("setGeometry",geometry);
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        //文本文档导入
        submitTxtForm(formName){
            var self = this;
            this.$refs[formName].validate((valid) => {
                if(valid){
                    var wkt = "PROJCS[\"XADFZBX\",GEOGCS[\"GCS_WGS_1984\",DATUM[\"D_WGS_1984\",SPHEROID[\"WGS_1984\",6378137.0,298.257223563]],PRIMEM[\"Greenwich\",0.0],UNIT[\"Degree\",0.0174532925199433]],PROJECTION[\"Transverse_Mercator\"],PARAMETER[\"False_Easting\",0.0],PARAMETER[\"False_Northing\",0.0],PARAMETER[\"Central_Meridian\",0.0],PARAMETER[\"Scale_Factor\",1.0],PARAMETER[\"Latitude_Of_Origin\",0.0],UNIT[\"Meter\",1.0]]";
                    var graphics = self.txtResult.filter(item => {
                        return item.attributes.name == self.txtZd.name;
                    })
                    var graphic = graphics[0];
                    graphic.geometry.type = "polygon";
                    graphic.geometry.spatialReference = {
                        wkt:wkt
                    }
                    //self.checkGeo(graphic);
                    self.txtResultDialog = false;
                    self.$emit("setGeometry",geometry);
                }else{
                    console.log('error submit!!');
                    return false;
                }
            })
        },
        //取消
        cancel(){
            this.zdForm.zdBsm = "";
            this.currentClickZd = null;
            this.resultDialog = false;
            //  清空当前图层上显示的图形
            this.clearOverLayer();
        },
        //取消文本选择的弹出框
        cancelTxtForm(){
            this.txtZd.name = "";
            this.txtResultDialog = false;
            //  清空当前图层上显示的图形
            this.clearOverLayer();
        },
        //宗地选择发生改变
        zdChange(value){
            this.zdForm.zdBsm = value.XMMC;
            this.currentClickZd = value;
            var geometry = this.parseWktToArc(this.currentClickZd.wkt);
            geometry.type = "polygon";
            var wkt = "PROJCS[\"XADFZBX\",GEOGCS[\"GCS_WGS_1984\",DATUM[\"D_WGS_1984\",SPHEROID[\"WGS_1984\",6378137.0,298.257223563]],PRIMEM[\"Greenwich\",0.0],UNIT[\"Degree\",0.0174532925199433]],PROJECTION[\"Transverse_Mercator\"],PARAMETER[\"False_Easting\",0.0],PARAMETER[\"False_Northing\",0.0],PARAMETER[\"Central_Meridian\",0.0],PARAMETER[\"Scale_Factor\",1.0],PARAMETER[\"Latitude_Of_Origin\",0.0],UNIT[\"Meter\",1.0]]";
            geometry.spatialReference = {
                wkt:wkt
            }
            this.addOverLayer(geometry);
        },
        txtChange(value){
            var wkt = "PROJCS[\"XADFZBX\",GEOGCS[\"GCS_WGS_1984\",DATUM[\"D_WGS_1984\",SPHEROID[\"WGS_1984\",6378137.0,298.257223563]],PRIMEM[\"Greenwich\",0.0],UNIT[\"Degree\",0.0174532925199433]],PROJECTION[\"Transverse_Mercator\"],PARAMETER[\"False_Easting\",0.0],PARAMETER[\"False_Northing\",0.0],PARAMETER[\"Central_Meridian\",0.0],PARAMETER[\"Scale_Factor\",1.0],PARAMETER[\"Latitude_Of_Origin\",0.0],UNIT[\"Meter\",1.0]]";
            var graphics = this.txtResult.filter(item => {
                return item.attributes.name == value;
            })
            var graphic = graphics[0];
            graphic.geometry.type = "polygon";
            graphic.geometry.spatialReference = {
                wkt:wkt
            }
            this.addOverLayer(graphic.geometry);
        },
    }
}
</script>
<style scoped lang="less">
.uploadDiv{
    display: flex;
    justify-content:center;
	align-content:center;
    li{
        margin: 5px;
        width: 20%;
        .title{
            line-height: 1;
            margin-top: -57px;
            font-size: 14px;
        }
        .templateDowload{
            line-height: 1;
            margin-top: 7px;
			
        }
    }
}
/deep/ .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
	width: 100%;
	height: 178px;
	line-height: 178px;
  }
  /deep/ .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
 /deep/  .el-icon-upload {
    font-size: 28px;
    color: #8c939d;
    width:100%;
    text-align: center;
  }

</style>