<template>
  <div>
    <div class="map" id="map" :style="{'height':mapHeight+'px'}">
      <div class="tabs">
        <div :class="!addCur?'tabcur':''" @click="changeMask(1)">抢险队伍</div>
        <div :class="addCur?'tabcur':''" @click="changeMask(2)">防汛仓库</div>
      </div>
    </div>
    <div ref='infoWindow' id="infoWindow">
      <div class="iconClose">
        <i @click='closeWin' class="el-icon-close"></i>
      </div>
      <div v-for="item in openData">
        <template v-if="item.type=='teams'">
          <div class="teams">
            <p>名称：<span>{{item.mingcheng}}</span></p>
            <p>负责人：<span>{{item.fuzeren?item.fuzeren:''}}</span></p>
            <p>联系电话：<span>{{item.lianxidianhua?item.lianxidianhua:''}}</span></p>
            <p>队长：<span>{{item.duizhang?item.duizhang:''}}</span></p>
            <p>人数：<span>{{item.renshu?item.renshu:''}}</span></p>
          </div>

        </template>
        <template v-if="item.type=='storages'">
          <div class="storages">
            <div>
              <div>
                <p>名称：<span>{{item.cangkumingcheng}}</span></p>
                <p>所在区域：<span>{{item.suozaiquyu?item.suozaiquyu:''}}</span></p>
              </div>
              <div>
                <p>建设年代：<span>{{item.jiansheniandai?item.jiansheniandai:''}}</span></p>
                <p>仓库面积：<span>{{item.cangkumianji?item.cangkumianji:''}}</span></p>
              </div>
              <div>
                <p>负责人：<span>{{item.fuzeren?item.fuzeren:''}}</span></p>
                <p>联系电话：<span>{{item.lianxidianhua?item.lianxidianhua:''}}</span></p>
              </div>
              <div>
                <p>仓库现存物资：<span>{{total?total:0}}</span>项</p>
              </div>

            </div>
            <div>
              <xy-table :list="materList" :height="300" :isPage="false" v-loading="loading" :table-item="table">
                <template v-slot:btns>
                  <div></div>
                </template>

              </xy-table>
            </div>
          </div>

        </template>

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

<script>
  import {
    index,
    destroy
  } from "@/api/system/baseForm.js"
  export default {
    data() {
      return {
        zoom: 10,
        center: [120.585294, 31.299758],
        mapHeight: 0,
        map: null,
        markerList: [],
        makerObj: {
          teams: [],
          storages: []
        },
        infoWindow: null,
        openData: [],
        materList: [],
        loading: true,
        total: 0,
        addCur: false,
        loadingFull:null,
        table: [{
            label: '序号',
            type: 'index',
            fixed: 'left',
            width: 80
          },
          // {
          //   label: "关联仓库",
          //   width: 120,
          //   prop: 'guanliancangku',
          //   align: 'center',
          // },
          // {
          //   label: "仓库名称",
          //   width: 220,
          //   prop: 'cangkumingcheng',
          //   align: 'left',
          // },
          {
            label: "物资代码",
            width: 120,
            prop: 'wuzidaima',
            align: 'left'
          },
          {
            label: "现物资名称",
            width: 120,
            prop: 'xianwuzimingcheng',
            align: 'center'
          },
          {
            label: "原物资名称",
            width: 120,
            prop: 'yuanwuzimingcheng',
            align: 'left'
          },
          {
            label: "规格型号",
            width: 120,
            prop: 'guigexinghao',
            align: 'center'
          },
          {
            label: "数量",
            width: 80,
            prop: 'shuliang',
            align: 'center'
          },
          {
            label: "单位",
            width: 80,
            prop: 'danwei',
            align: 'center'
          },
          {
            label: "价值（元）",
            width: 80,
            prop: 'jiazhiyuan',
            align: 'center'
          },
          {
            label: "生产日期",
            width: 120,
            prop: 'shengchanriqi',
            align: 'center'
          },
          {
            label: "入库日期",
            width: 120,
            prop: 'rukuriqi',
            align: 'center'
          },
          {
            label: "储备年限",
            width: 80,
            prop: 'chubeinianxian',
            align: 'center'
          },
          {
            label: "状态",
            width: 80,
            prop: 'zhuangtai',
            align: 'center'
          },
          {
            label: "资金来源",
            width: 120,
            prop: 'zijinlaiyuan',
            align: 'center'
          },
          {
            label: "储备方式",
            width: 120,
            prop: 'chubeifangshi',
            align: 'center'
          },
          {
            label: "储备地点",
            width: 180,
            prop: 'chubeididian',
            align: 'left'
          },
          {
            label: "备注",
            width: 180,
            prop: 'beizhu',
            align: 'left'
          },
          {
            label: "储备层级",
            width: 120,
            prop: 'chubeicengji',
            align: 'left'
          },
          {
            label: "是否展示",
            width: 120,
            prop: 'shifouzhanshi',
            align: 'left'
          }
        ]
      }
    },
    created() {
      this.initHeight()
      this.$nextTick(function() {
        this.mapInit()
      })
    },
    methods: {
      initHeight() {
        let winHeight = document.body.clientHeight
        this.mapHeight = winHeight - 50 - 20
      },
      mapInit() {
        this.loadingFull = this.$loading({
          lock: true,
          text: '',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        this.map = new AMap.Map("map", {
          center: this.center,
          mapStyle: "amap://styles/bfb1bb3feb0db7082367abca96b8d214", // 设置地图的显示样式
          zoom: this.zoom
        });


        this.infoWindow = new AMap.InfoWindow({
          isCustom: true,
          autoMove: true,
          avoid: [20, 20, 20, 20],
          content: this.$refs.infoWindow,
          closeWhenClickMap: true,
          offset: new AMap.Pixel(-10, -10)
        })
        this.getTeams()
        this.getStorages()
        // this.setMapMarker()
      },
      changeMask(type) {
        if (type == 1) {
          this.addCur = false
          this.setMapMarker("teams", this.makerObj.teams)
        } else if (type == 2) {
          this.addCur = true
          this.setMapMarker("storages", this.makerObj.storages)
        }
      },
      async getTeams() {
        await index({
          page: 1,
          page_size: 9999,
          table_name: 'teams'
        }).then(res => {
          let markers = []
          if (res.data.length < 1) {
            return
          }
          res.data.map(item => {
            this.makerObj.teams.push({
              type: 'teams',
              name: item.mingcheng,
              ...item
            })
          })
          this.setMapMarker("teams", this.makerObj.teams)
        })
      },
      async getStorages() {
        await index({
          page: 1,
          page_size: 9999,
          table_name: 'flood_storages'
        }).then(res => {
          let markers = []
          if (res.data.length < 1) {
            return
          }
          res.data.map(item => {
            this.makerObj.storages.push({
              type: 'storages',
              name: item.cangkumingcheng,
              ...item
            })
          })
          this.loadingFull.close();
        })
      },
      async getMater(id) {

        const res = await index({
          page: 1,
          page_size: 9999,
          table_name: "flood_materials",
          filter: [{
            "key": "guanliancangku",
            "op": "eq",
            "value": id
          }],
        })
        this.materList = res.data
        this.total = res.total
        this.loading = false
      },
      // 增加点位
      setMapMarker(type, arr) {
        var that = this
        console.log(type, arr)
        this.markerList.forEach(marker => marker.setMap(null));
        this.markerList = []
        arr.forEach((item, index) => {
          // 遍历生成多个标记
          if (!item.jingdu || !item.weidu) {
            return
          }

          let marker = new AMap.Text({
            map: this.map,
            text: item.name,
            zIndex: 9999999,
            offset: new AMap.Pixel(-13, -30),
            position: [parseFloat(item.jingdu), parseFloat(item.weidu)],
            clickable: true,
            extData: item.id,
            style: {
              'border': item.type === 'teams' ? '1px solid red' : '1px solid blue',
              'padding': '0px 5px'
            }
          })
          marker.on('click', (e) => {
            this.openData = []
            this.loading = true
            this.total = 0
            this.materList = []
            if (e.target.w.extData === item.id) {
              this.openData.push(item)
              if (item.type == 'storages') {
                this.getMater(item.id)
              }
            }
            this.infoWindow.open(this.map, e.target.getPosition())
          })
          // if(item.type == 'storages'){
          //    this.makerObj.storages.push(marker)
          // }else{
          //   this.makerObj.teams.push(marker)
          // }
          this.markerList.push(marker)
        });
        console.log("this.makerObj", this.makerObj)
        // this.map.add(this.makerObj['teams'])
      },
      closeWin() {

        this.infoWindow.close()
      },
    },
  }
</script>

<style>
  .tabs {
    position: absolute;
    z-index: 99;
    top: 20px;
    right: 20px;
    display: flex;
    align-items: center;
  }

  .tabs>div {
    padding: 10px 20px;
    font-size: 16px;
    background-color: #fff;
    color: #333;
  }

  .tabs>div:first-child {
    border-radius: 20px 0 0 20px;

  }

  .tabs>div:last-child {
    border-radius: 0 20px 20px 0;

  }

  .tabs>div.tabcur {
    background: #0077CC;
    color: #fff
  }

  #infoWindow {
    position: relative;
  }

  #infoWindow .iconClose {
    background: #000;
    border: none;
    padding: 0;
    width: 20px;
    height: 20px;
    border-radius: 20px;
    color: #fff;
    text-align: center;
    position: absolute;
    right: -10px;
    top: -10px;
  }

  #infoWindow>div {
    background: #fff;
    border: 1px solid red;
    padding: 10px;
  }

  #infoWindow div.teams {
    width: 180px;
  }

  #infoWindow div.storages {
    width: 650px;
  }

  #infoWindow div.storages>div:first-child {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 10px;
  }

  #infoWindow div.storages>div:first-child div {
    width: 50%
  }

  /deep/ #infoWindow .el-icon-close {
    position: absolute;
    top: 5px;
    right: 5px;
    cursor: pointer;
  }
</style>
