<template>
  <div class="gis">
    <div class="gis-container" ref="main">
      <div class="flex-transverse" ref="transverse">
        <div id="arcgisMap0" class="flex-single"></div>
      </div>
      <div class="flex-vertical" ref="vertical"></div>
    </div>

    <el-card class="box-card">
      <div v-for="( item, i ) in curr" :key="i" class="text item">
        <el-row>
          <el-col :span="10">
            <div class="grid-content">{{ item.key }}</div>
          </el-col>
          <el-col :span="14">
            <div class="grid-content">{{ item.value }}</div>
          </el-col>
        </el-row>
      </div>
    </el-card>
  </div>
</template>

<script> 

  import apiWrapper from '@union/gis-sdk';
  import layerJson from '@/api/json/layer.json';
  import axios from 'axios';
  import { log } from 'bpmn-js-token-simulation';

  export default {
    props: {
      formData: {
        type: Object,
        default: () => {
          return {}
        }
      }
    },
    data () {
      return {
        curr: []
      }
    },
    mounted () {
      let doc = document.querySelector('.gis');
      this.$nextTick(() => {
        Object.assign(doc.style, { width: + doc.clientWidth + 'px', height: '700px' });
      })
    },
    created () {
      let { special2 } = apiWrapper.thematic, { wrapper } = apiWrapper, id = this.formData.bsmZd
      wrapper.reduction(special2).then(() => {
        let { children } = layerJson[0].children[2], i = 0, o, name, url, { Layer } = wrapper;
        for (; o = children[i]; i++) if (o.id === 'ZDJBXX' && (name = o.name) === 'zd') { url = o.url + '/' + i; break; }

        Layer.createLayer([{ type: 'FeatureServer', url, name, spatial: true, visible: false }]).then(() => {
          this.positioning(id, name);
        });
      });
    },
    methods: {
      positioning (id, name) {
        let { Layer } = apiWrapper.wrapper;
        Layer.attrGraph({
          grap: id, name, where: { id }, sym: { color: [0, 139, 0, 100], outline: { color: [0, 139, 0, 150], width: 2 } },
          callback: d => {
            d.length ? this.analysis(id) : this.$message.error(' 暂无图形');
          }
        });
      },
      analysis (id) {

        let { Views, Action } = apiWrapper.wrapper;
        Views.grapsExtent(id);
        setTimeout(() => { Action.gighlight({ name: id, about: 1000 }) }, 1500);

        axios.get(window._config.services.management + '/bdcqjdc/rest/zd/qjZdjbxx/getQjZdjbxxDetailById', { params: { id } }).then(d => {
          if (d.status !== 200) return;
          let { result = {} } = d.data, data = [];
          Object.keys(result).forEach(e => { result[e] && data.push({ key: e, value: result[e] }) });
          this.curr.splice(0, ...data);
          document.querySelector('.box-card').style.display = 'block';
        });
      }
    }
  }

</script>

<style scoped lang="scss">
  .gis-container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    width: 100%;
    height: 100%;
  }

  .flex-transverse {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    width: 100%;
    height: 100%;
  }

  .flex-single {
    width: 100%;
    height: 100%;
    background-color: white;
  }

  .box-card {
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 8px;
    top: 30px;
    right: 30px;
    position: absolute;
    width: 16%;
    padding: 10px;
    display: none;
  }

  .el-row {
    margin-bottom: 20px;
  }
  .el-col {
    border-radius: 4px;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 20px;
    font-family: "Helvetica Neue";
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>