<template>
  <div id="coordinate-transform" class="map-tool-model">
    <common-map-tool-title @close="close" title="坐标转换"/>
    <div class="main-content p20">
      <div class="single-block">
        <common-num-title title="选择是否批量处理" :num="1"/>
        <div class="single-row">
          <el-radio v-model="form.handle_number" label="单条处理">单条处理</el-radio>
          <el-radio v-model="form.handle_number" label="批量处理">批量处理</el-radio>
        </div>
      </div>
      <div class="single-block">
        <common-num-title title="选择处理方式" :num="2"/>
        <div class="single-row">
          <el-radio v-model="form.handle_type" label="1">坐标</el-radio>
          <el-radio v-model="form.handle_type" label="3">地址</el-radio>
        </div>
      </div>
      <div v-if="form.handle_number =='批量处理'" class="single-block">
        <common-num-title title="请上传文件" :num="3"/>
        <div class="single-row">
          <el-upload action="http://10.81.66.9:9250/Analysis/queryExcelDataList"
                     ref="upload"
                     :limit="1"
                     :on-change="getAll"
                     :onError="uploadError"
                     :onSuccess="uploadSuccess"
                     :beforeUpload="beforeAvatarUpload"
                     :file-list="fileList"
                     :data="uploadData"
                     :auto-upload="false">
            <el-button class="role_button" type="primary">选择文件</el-button>
          </el-upload>
        </div>
      </div>
      <div v-if="form.handle_number =='单条处理'" class="single-block">
        <common-num-title v-if="form.handle_type =='1'" title="请输入坐标" :num="3"/>
        <common-num-title v-if="form.handle_type =='3'" title="请输入位置" :num="3"/>
        <div class="single-row">
          <div v-if="form.handle_type =='1'">
            <el-input type="text" v-model="form.single_longitude" placeholder="请输入经度"  style="width: 45%"></el-input>
            <el-input type="text" v-model="form.single_latitude" placeholder="请输入纬度" style="width: 45%;padding-left: 20px"></el-input>
          </div>
          <div v-if="form.handle_type =='3'" style="width: 100%">
            <el-input type="text" v-model="form.single_address" placeholder="请输入地址"  style="width:96%"></el-input>
          </div>
        </div>
      </div>
      <div v-if="form.handle_number =='批量处理'" class="single-block">
        <common-num-title title="请选择空间位置" :num="4"/>
        <div v-if="form.handle_type =='1'" class="single-row">
          <el-select v-model="form.longitude":popper-append-to-body="false" filterable collapse-tags style="width: 45%;" placeholder="请选择">
            <el-option
                v-for="item in fieldList"
                :key="item.name"
                :label="item.name"
                :value="item.name">
            </el-option>
          </el-select>
          <el-select v-model="form.latitude":popper-append-to-body="false" filterable collapse-tags style="width: 45%;margin-left: 20px" placeholder="请选择">
            <el-option
                v-for="item in fieldList"
                :key="item.name"
                :label="item.name"
                :value="item.name">
            </el-option>
          </el-select>
        </div>
        <div v-if="form.handle_type =='3'" class="single-row">
          <el-select v-model="form.address":popper-append-to-body="false" filterable collapse-tags style="width: 45%;" placeholder="请选择">
            <el-option
                v-for="item in fieldList"
                :key="item.name"
                :label="item.name"
                :value="item.name">
            </el-option>
          </el-select>
        </div>
      </div>
      <div v-if="form.handle_type =='1'" class="single-block">
        <common-num-title title="请选择源坐标系" :num="5"/>
        <div class="single-row">
          <el-select v-model="form.origin":popper-append-to-body="false" filterable collapse-tags style="width:95%" placeholder="请选择">
            <el-option
                v-for="item in originList"
                :key="item.name"
                :label="item.name"
                :value="item.name">
            </el-option>
          </el-select>
        </div>
      </div>
      <div v-if="form.handle_type =='1'" class="single-block">
        <common-num-title title="请选择目标坐标系" :num="6"/>
        <div class="single-row">
          <el-select v-model="form.target":popper-append-to-body="false" filterable collapse-tags style="width:95%" placeholder="请选择">
            <el-option
                v-for="item in targetList"
                :key="item.name"
                :label="item.name"
                :value="item.name">
            </el-option>
          </el-select>
        </div>
      </div>
    </div>
    <div class="bottom-btn">
      <div class="btn single_button" @click="runTransform">运行分析</div>

    </div>
  </div>
</template>

<script>
import CommonMapToolTitle from "@/components/common/CommonMapToolTitle";
import CommonNumTitle from "@/components/common/CommonNumTitle";
const {mapState,mapActions} =createNamespacedHelpers('platform');
import XLSX from "xlsx"
import {createNamespacedHelpers} from "vuex";
import {
  CHANGE_COORDINATE_TRANSFORM_DATA_ACTION,
  CHANGE_COORDINATE_RESULT_HEADER_ACTION,
  CHANGE_CURRENT_RETURN_CALCULATION_ACTION, CHANGE_RIGHT_TOOL_STATE_ACTION
} from "@/view/show-platform/store/action-constant";
import {getAddressList, getCoordinateList} from "@/service/show-platform";
export default {
  name: "CoordinateTransform",
  components:{
    CommonMapToolTitle,CommonNumTitle
  },
  computed:{
    ...mapState({
      rightToolState:'rightToolState'
    })
  },
  data(){
    return{
      fieldList:[],
      originList:[
        {
          name:'经纬度'
        }
      ],
      targetList:[
        {
          name:'城建坐标'
        }
      ],
      showList:false,
      fileList:[],
      uploadData: {
        type:'1',
        mapX:'',
        mapY:''
      },
      form:{
        handle_number:'',
        handle_type:'',
        longitude:'',
        latitude:'',
        address:'',
        origin:'',
        target:'',
        single_longitude:'',
        single_latitude:'',
        single_address:''
      }
    }
  },
  methods:{
    runTransform(){
      this.$emit('setLoading',true);
      this.$emit('setToolDetailType','coordinateTransformResult');
      this[CHANGE_COORDINATE_RESULT_HEADER_ACTION](
          this.form
      )
      if(this.form.handle_number =="批量处理"){
        this.$refs.upload.submit();
      }else{
        if(this.form.handle_type =='1'){
          getCoordinateList(this.form.single_longitude,this.form.single_latitude).then(res =>{
            this[CHANGE_COORDINATE_TRANSFORM_DATA_ACTION](
                res.msg[0].Rows
            )
          })
        }else{
          getAddressList(this.form.single_address).then(res =>{
            this[CHANGE_COORDINATE_TRANSFORM_DATA_ACTION](
                res
            )
          })

        }
      }
    },
    uploadError (response, file, fileList) {
      debugger
      this.fileList = [];
      //this.loading=false;
      console.log('上传失败，请重试！',response, file, fileList)
    },
    uploadSuccess (response, file, fileList) {
      debugger
      console.log('上传文件', response,file, fileList)
      this.fileList = [];
      if(response.msg[0].Rows.length > 0){
        this[CHANGE_COORDINATE_TRANSFORM_DATA_ACTION](
            response.msg[0].Rows
        )
        //this.loading=false;
        //this.onCommit();
        // MessageBox.alert('文件上传成功', '提示', {
        //   confirmButtonText: '确定'
        // });
      }else{
        //this.loading=false;
        //this.onCommit();
        // MessageBox.alert('文件上传失败', '提示', {
        //   confirmButtonText: '确定'
        // });
      }
    },
    // 上传前对文件的大小的判断
    beforeAvatarUpload (file) {
      const extension = file.name.split('.')[1] === 'xls'
      const extension2 = file.name.split('.')[1] === 'xlsx'
      const isLt2M = file.size / 1024 / 1024 < 10
      if (!extension && !extension2) {
        this.loading=false;
        MessageBox.alert('上传模板只能是 xls、xlsx格式!', '提示', {
          confirmButtonText: '确定'
        });
      }
      if (!isLt2M) {
        this.loading=false;
        MessageBox.alert('上传模板大小不能超过 10MB!', '提示', {
          confirmButtonText: '确定'
        });
      }

      debugger
      if(this.form.handle_number =="单条处理"){
        if(this.form.handle_type == '1'){

        }else{

        }
      }else if(this.form.handle_number =="批量处理"){
        if(this.form.handle_type == '1'){
          this.uploadData = {
            type:this.form.handle_type,
            mapX:this.form.longitude,
            mapY:this.form.latitude,
          }
        }else{
          this.uploadData = {
            type:this.form.handle_type,
            addressFieldName:this.form.address,
          }
        }
      }
      console.log(this.uploadData)
      let promise = new Promise((resolve) => {
        this.$nextTick(function () {
          resolve(extension || extension2&& isLt2M&&true);
        });
      });
      return promise; //通过返回一个promis对象解决
    },

    getAll(file){
      debugger
      const _this = this
      _this.fieldList = []
      const fileName = file.name;
      const reader = new FileReader();
      reader.readAsArrayBuffer(file.raw);
      reader.onload = function () {
        const buffer = reader.result;
        const bytes = new Uint8Array(buffer);
        const length = bytes.byteLength;
        let binary = "";
        for (let i = 0; i < length; i++) {
          binary += String.fromCharCode(bytes[i]);
        }
        const XLSX = require("xlsx");
        const wb = XLSX.read(binary, {
          type: "binary",
        });
        const outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);
        // outdata.forEach((i) => {
        //   let obj = {
        //     namez: i.姓名,
        //     phone: i.手机号,
        //   };
        //   _this.tableData.push(obj);  //此处是把数据添加到表格中
        // });
        if(outdata.length >0){
          for(let obj in outdata[0]){
            let temp = {
              name:obj
            }
            _this.fieldList.push(temp)
          }
        }
      };
    },
    close(){
      this[CHANGE_COORDINATE_TRANSFORM_DATA_ACTION]([]);
      this[CHANGE_RIGHT_TOOL_STATE_ACTION](!this.rightToolState
      )
      this.$emit('setToolType','');
    },
    ...mapActions({
      [CHANGE_COORDINATE_TRANSFORM_DATA_ACTION]:CHANGE_COORDINATE_TRANSFORM_DATA_ACTION,
      [CHANGE_COORDINATE_RESULT_HEADER_ACTION]:CHANGE_COORDINATE_RESULT_HEADER_ACTION,
      [CHANGE_RIGHT_TOOL_STATE_ACTION]:CHANGE_RIGHT_TOOL_STATE_ACTION
    })
  }
}
</script>

<style scoped lang="scss">
::v-deep{
  .el-button--primary{
    background-color: transparent;
  }
  .el-select__tags{
    white-space: nowrap;
    overflow: hidden;
  }
  .el-select__input{
    color: #fff;
  }
  .el-select-dropdown__wrap{
    max-height: 150px;
  }
  .el-scrollbar__wrap{
    overflow-y: scroll;
    height: 100%;
  }
  .el-select-dropdown{
    position: absolute !important;
    left: 0px !important;
    border: 1px solid #00a1ff !important;
    background-color: rgba(0, 31, 112, 0.8) !important;
  }
  .el-select-dropdown__item.hover, .el-select-dropdown__item:hover{
    background-color: rgba(0, 31, 112, 1);
    color: #409EFF;
  }
  .el-select-dropdown.is-multiple .el-select-dropdown__item.selected.hover{
    background-color: rgba(0, 31, 112, 1);
    color: #409EFF;
  }
  .el-select-dropdown.is-multiple .el-select-dropdown__item.selected{
    background-color: rgba(0, 31, 112, 1);
    color: #409EFF;
  }
  .el-tag.el-tag--info .el-tag__close{
    color: transparent !important;
  }
  .el-select .el-tag__close.el-icon-close{
    color: #409EFF  !important;
    background-color: transparent  !important;
  }
  .el-popper[x-placement^=bottom] .popper__arrow::after{
    border-bottom-color: rgba(0, 31, 112, 1);
  }
  .el-tag.el-tag--info {
    background-color: rgba(0, 31, 112, 0.8);
    border-color: #00a1ff;
    color: #409EFF;
  }
  .el-select-dropdown__item{
    color:#fff
  }
  .el-radio{
    color: #fff;
  }
}
#coordinate-transform{
  position: absolute;
  z-index: 1;
  width: 400px;
  top: 89px;
  right: 120px;
  .main-content {
    .single-block {
      display: flex;
      flex-direction: column;

      .title_type{
        color: #fff;
        .span_1{
          padding-left: 15px;
        }
        .span_2{
          padding-left: 130px;
        }
        padding-bottom: 5px;
      }
      .single-row {
        padding-bottom: 10px;
        padding-left: 20px;
        color: #fff;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        .type_icon{
          cursor: pointer;
          padding: 5px 20px;
          border-radius: 2px;
          border: 1px solid rgba(0, 170, 255, 0.8);
        }
        .type_icon_chosen{
          background-color: rgba(0, 204, 255, 0.7);
        }
      }
      .single_result{
        padding-left: 20px;
        color: #fff;
      }
    }
  }
}
</style>
