<template>
  <div >
    <div v-if="!resultDialog" class="importDiv">
      <el-upload
          class="upload-demo"
          action="#"
          accept=".txt"
          :show-file-list="false"
          :on-change="txtFileChange"
      >
        <!-- <el-button size="small" type="primary">点击上传</el-button>-->
        <div class="fileUpload">
          <div slot="trigger" class="uploadLeft">
            <i class="iconfont iconwenbenwendang"></i>
          </div>
          <div solt="tip" class="uploadRight">
            <div solt="tip" class="title">TXT文本格式</div>
            <div slot="tip" class="el-upload__tip">支持TXT文本格式，点击查看详情<a href="">文本详情</a></div>
          </div>
        </div>
      </el-upload>
      <el-upload
          class="upload-demo"
          action="/api/tx/shpUtils/readShp"
          accept=".zip"
          :show-file-list="false"
          :on-success="shpFileSuccess"
      >
        <!--<el-button size="small" type="primary">点击上传</el-button>-->
        <div class="fileUpload">
          <div slot="trigger" class="uploadLeft">
            <i class="iconfont iconuploadicon03"></i>
          </div>
          <div solt="tip" class="uploadRight">
            <div solt="tip" class="title">ESRI Shape文件格式</div>
            <div slot="tip" class="el-upload__tip">文件包含.shp、.pdf、.shx、.prj等的压缩文件(.zip)</div>
          </div>
        </div>
      </el-upload>
      <el-upload
          class="upload-demo"
          action="https://jsonplaceholder.typicode.com/posts/"
          accept=".dwg,.dxf"
          :show-file-list="false"
          :on-success="cadFileSuccess"
      >
        <!-- <el-button size="small" type="primary">点击上传</el-button>-->
        <div solt="tip" class="fileUpload">
          <div slot="trigger" class="uploadLeft">
            <i class="iconfont icontubiao_daoruCAD"></i>
          </div>
          <div solt="tip" class="uploadRight">
            <div solt="tip" class="title">CAD文件</div>
            <div slot="tip" class="el-upload__tip">支持.dwg、.dxf文件格式</div>
          </div>
        </div>
      </el-upload>
      <el-upload
          class="upload-demo"
          action="/api/tx/excelGeo/readExcel"
          accept=".xls,.xlsx"
          :show-file-list="false"
          :on-success="excelFileSuccess"
      >
        <!--<el-button size="small" type="primary">点击上传</el-button>-->
        <div solt="tip" class="fileUpload">
          <div slot="trigger" class="uploadLeft">
            <i class="iconfont iconexcel"></i>
          </div>
          <div solt="tip"  class="uploadRight">
            <div slot="tip" class="title">Excel文件格式</div>
            <div slot="tip" class="el-upload__tip">.xls、.xlsx版本,点击查看详情<a href="">Excel格式</a></div>
          </div>
        </div>
      </el-upload>
    </div>
    <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>
</template>
<script>
import geoUtils from "@components/lineTree/tx/js/geoUtils";
import featureUpdate from "@libs/map/featureUpdate";
import {addjzd,addjzx} from "@/api/zd"
export default {
  props:{
    propertyInfo:{
      type:Object,
      default:null
    },
    geoInfo:{
      type:Object,
      default:null
    }
  },
  mixins:[geoUtils,featureUpdate],
  data(){
    return{
      resultData:[],
      resultDialog:false,
      zdForm:{
        zdBsm: ""
      },
      currentClickZd:null
    }
  },
  methods:{
    txtFileChange(file, fileList){
      var self = this;
      var fileReader = new FileReader();
      fileReader.readAsText(file.raw);
      fileReader.onload = function (res){
        var content = this.result;
        self.$emit("closeImportDialog");
      }
    },
    shpFileSuccess(response, file, fileList){
      var self = this;
      if(response.success){
        this.resultData = response.result;
        this.resultDialog = true;
      }else {
         this.$message.warning(response.message);
      }
    },
    cadFileSuccess(response, file, fileList){
      debugger
    },
    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"
        }
        var graphic = {
          attributes:null,
          geometry:geometry
        }
        if(self.propertyInfo.type == "zd"){
          self.saveZd(graphic);
        }else{
          self.saveZRZ(graphic);
        }
      }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
          }
          if(self.propertyInfo.type == "zd"){
           self.saveZd(graphic);
          }else{
            self.saveZRZ(graphic);
          }
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    saveZd(graphic){
      var self = this;
      var points = null,lines = null,
      layer = self.getLayerByName("ZDJBXX");
      var featureUrl = layer.layerUrl.replace("MapServer","FeatureServer");
      featureUrl += "/"+layer.id;
      if(self.geoInfo){
        //替换 生成图像 高亮
        self.geoInfo.attributes.BSM = this.propertyInfo.zdbsm;
        self.geoInfo.attributes.ZDDM = this.propertyInfo.zddm;
        self.geoInfo.attributes.XMMC = this.propertyInfo.mc;
        graphic.attributes = self.geoInfo.attributes;
        self.updateGraphic(featureUrl,graphic,function (res) {
          //保存成功之后生成界址点 界址线
          //生成坐标点
          //跳转至map界面updateResults
          var updResult = res.updateFeatureResults[0];
          if(updResult.objectId){
            var OBJECTID = updResult.objectId;
            points = self.craetJZPoint(graphic);
            self.savejzd(points)
            //生成边框线
            self.createJZLine(graphic,function (res){
              lines = res;
              self.saveJzx(lines);
            });
            self.goMap();
          }
        });
      }else{
        //生成图像  保存
        graphic.attributes = {
          BSM:this.propertyInfo.zdbsm,
          ZDDM:this.propertyInfo.zddm,
          XMMC:this.propertyInfo.mc
        }
        self.addGraphic(featureUrl,graphic,function (res) {
          var addRresult = res.addFeatureResults[0];
          if(addRresult.objectId){
            var OBJECTID = addRresult.objectId;
            points = self.craetJZPoint(graphic);
            self.savejzd(points)
            //生成边框线
            self.createJZLine(graphic,function (res){
              lines = res;
              self.saveJzx(lines);
            });
            self.goMap();
          }
        });
      }
    },
    savejzd(points){
      var savePoints = []
      for(var i = 0;i < points.length;i++){
        var obj = {
          glbsm:this.propertyInfo.zdbsm,
          jzdh:points[i].jzdh,
          sxh:points[i].sxh,
          xzbz:points[i].x,
          yzbz:points[i].y,
          jblx:"",
          jzdlx:""
        }
        savePoints.push(obj);
      }
      addjzd(savePoints).then(res=>{
        if(res.succcess){
          //触发查询接口
          console.log("界址点保存成成功！！！");
        }
      });
    },
    saveJzx(lines){
      var jzxLines = [];
      for(var i = 0;i < lines.length;i++){
        var obj = {
          glbsm: this.propertyInfo.zdbsm,
          qsd:lines[i].startPoint,
          zzd:lines[i].endPoint,
          jzjj:lines[i].distance,
          qdh:lines[i].qdh,
          zdh:lines[i].zdh,
          jzxlx:"",
          jzxwz:"",
          jxxz:"",
          sm:""
        }
        jzxLines.push(obj);
      }
      addjzx(jzxLines).then(res=>{
        if(res.success){
          //触发查询界址线
          console.log("界址线保存成功!!!!!");
        }
      });
    },
    saveZRZ(graphic){
      var self = this;
      var layer = null;
      layer = self.getLayerByName("ZRZ");
      var featureUrl = layer.layerUrl.replace("MapServer","FeatureServer");
      featureUrl += "/"+layer.id;
      if(self.geoInfo){
        self.geoInfo.BSM = this.propertyInfo.bsm;
        graphic.attributes = self.geoInfo;
        //替换 生成图像 高亮
        self.updateGraphic(featureUrl,graphic,function (res) {
            var addRresult = res.updateFeatureResults[0];
            if(addRresult.objectId) {
              self.goMap();
            }
        });
      }else{
        var attributes = {
          BSM:this.propertyInfo.bsm,
          XMMC:this.propertyInfo.xmmc
        }
        graphic.attributes = attributes;
        //生成图像  保存
        self.addGraphic(featureUrl,graphic,function (res) {
            var addRresult = res.addFeatureResults[0];
            if(addRresult.objectId) {
              self.goMap();
            }
        });
      }
    },
    //操作成功跳转
    goMap(){
      var bsm = "", type = this.propertyInfo.type;
      if(type == "zd"){
        bsm = this.propertyInfo.zdbsm;
      }else {
        bsm = this.propertyInfo.bsm;
      }
      this.resultDialog = false;
      this.$emit("closeImportDialog");
      var curretRouterInfo = {
        path: this.$route.path,
        query: this.$route.query
      }
      sessionStorage.setItem("curretRouterInfo", JSON.stringify(curretRouterInfo));
      this.$router.push({
        path: "/viewMap",
        query: {
          bsm: bsm,
          type: this.propertyInfo.type
        }
      });
    },
    //取消
    cancel(){
      this.zdForm.zdBsm = "";
      this.currentClickZd = null;
    },
    //宗地选择发生改变
    zdChange(value){
      this.zdForm.zdBsm = value.XMMC;
      this.currentClickZd = value;
    }

  }
}
</script>
<style scoped lang="less">
.upload-demo{
  line-height: 34px;
}
.fileUpload{
  height: 100%;
  width: 100%;
  .uploadLeft{
    float: left;
    line-height: 61px;
    .iconfont{
      font-size: 42px;
    }
  }
  .uploadRight{
    float: right;
    margin-left: 5px;
    .title{
      text-align: initial;
      font-weight: 600;
    }
    .el-upload__tip{
      margin-top: 0px;
      a{
        color: cornflowerblue;
      }
    }
  }
}

</style>