<template>
  <el-dialog :title="title" :visible.sync="open" width="1000px" append-to-body destroy-on-close :close-on-click-modal="false">
    <el-row>
      <el-col :span="14">
        <el-form label-width="110px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="管道名称">
                <span>{{ detailInfo.pipeName }}</span>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="管道长度(m)">
                <span>{{ detailInfo.pipeLength }}</span>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="管径(mm)">
                <span>{{ detailInfo.pipeDiameter }}</span>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="管道壁厚(mm)">
                <span>{{ detailInfo.pipeThickness }}</span>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="压力(Mpa)">
                <span>{{ detailInfo.pipePressure }}</span>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="材质">
                <span>{{ $parent.materialFormatte(this.detailInfo) }}</span>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="具体地址">
                <span>{{ detailInfo.pipeAddr }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="敷设方式">
                <span>{{ $parent.layTypeFormatte(this.detailInfo) }}</span>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="埋深(m)">
                <span>{{ detailInfo.buriedDepth }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="架空高度(m)">
                <span>{{ detailInfo.overhead }}</span>
              </el-form-item>
            </el-col>
          </el-row>

        </el-form>
      </el-col>

      <!--地图 -->
      <el-col :span="10">
        <div id="detailMap" style="width: 100%;height: 300px;border: 1px solid"></div>
      </el-col>
    </el-row>

  </el-dialog>

</template>

<script>
  import { getInfo } from "@/api/baseinfo/pipeInfo";
  import { EditorMap } from "@/utils/mapClass/map";
  import { mapGetters } from "vuex";
  import { listPoint } from "@/api/baseinfo/pipePoint";
  export default {
    name: "detail-info",
    data(){
      return{
        open: false,
        detailInfo: {},
        title: "",
        gaoMap: null
      }
    },

    methods: {
      getDetailInfo(pipeId){
        getInfo(pipeId).then(response => {
          this.detailInfo = response.data;
          this.title = "管道信息详情";
          this.open = true;
          this.initMap();
        });
      },
      initMap(){
        this.$nextTick(() => {
            const path = eval(this.systemSetting.map_center);
            this.gaoMap = new EditorMap(
                "detailMap",
                {
                  center: path,
                  //mapStyle: "amap://styles/f71d3a3d73e14f5b2bf5508bf1411758",
                  zoom: 12.5,
                },
                this
             );
            if(this.detailInfo.coordinates){
              this.addPipe();
              this.getPipePoint();
            }
        });
      },
      //添加管道
      addPipe(){
        let path = JSON.parse(this.detailInfo.coordinates);
        let pipe = new AMap.Polyline({
          path: eval(path),
          strokeWeight: 4,
          strokeColor: "#1890FF",
        });
        this.gaoMap.map.add(pipe);
        this.gaoMap.map.setCenter(path[0]);
      },
      //管线打卡点
      getPipePoint(){
        listPoint({pipeId:this.detailInfo.pipeId,pageNum: 1,pageSize: 9999999,}).then(res =>{
          if(res.code == 200 && res.rows){
            res.rows.forEach(item =>{
              this.gaoMap.control = 1;
              this.gaoMap.addDevice({longitude:eval(item.longitude),latitude:eval(item.latitude),deviceName:item.title});
            })
          }
        })
      }
    },
    computed: {
      ...mapGetters(["systemSetting"]),
    },
  }
</script>

<style scoped>

</style>
