<template>
  <el-dialog
    title="详情"
    :visible.sync="open"
    width="1200px"
    append-to-body
    destroy-on-close
    :close-on-click-modal="false"
  >
    <el-row>
      <el-col :span="15">
        <el-form label-width="100px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="工程名称" prop="title">
                <span>{{ detailInfo.title }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="申报单位" prop="company">
                <span>{{ detailInfo.company }}</span>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="联系人" prop="username">
                <span>{{ detailInfo.username }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="联系电话" prop="phone">
                <span>{{ detailInfo.phone }}</span>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="24">
              <el-form-item label="详细地址" prop="address">
                <span>{{ detailInfo.address }}</span>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="开工日期" prop="startTime">
                <span>{{ detailInfo.startTime }}</span>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="竣工日期" prop="endTime">
                <span>{{ detailInfo.endTime }}</span>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-form-item label="备注" prop="remark">
              <span v-if="detailInfo.remark">{{ detailInfo.remark }}</span>
              <span v-else>-</span>
            </el-form-item>
          </el-row>
          <div class="allImg flex">
            <div>
              <div class="picture-label">安全告知书图片</div>
              <MyImage
                v-if="detailInfo.noticeUrl"
                :src="detailInfo.noticeUrl.split(',')[0]"
                :preview-src-list="detailInfo.noticeUrl.split(',')"
              />
              <div class="error" v-else>暂无图片</div>

              <!-- {{ detailInfo.noticeUrl }} -->
            </div>
            <div>
              <div class="picture-label">管道安全保护协议图片</div>
              <MyImage
                v-if="detailInfo.protectUrl"
                :src="detailInfo.protectUrl.split(',')[0]"
                :preview-src-list="detailInfo.protectUrl.split(',')"
              />

              <div class="error" v-else>暂无图片</div>
            </div>
            <div>
              <div class="picture-label">监护协议图片</div>

              <MyImage
                v-if="detailInfo.custodyUrl"
                :src="detailInfo.custodyUrl.split(',')[0]"
                :preview-src-list="detailInfo.custodyUrl.split(',')"
              />
              <div class="error" v-else>暂无图片</div>
            </div>

            <div>
              <div class="picture-label">管道现场安全技术交底图片</div>

              <MyImage
                v-if="detailInfo.discloseUrl"
                :src="detailInfo.discloseUrl.split(',')[0]"
                :preview-src-list="detailInfo.discloseUrl.split(',')"
              />
              <div class="error" v-else>暂无图片</div>
            </div>

            <div>
              <div class="picture-label">施工验收图片</div>
              <MyImage
                v-if="detailInfo.checkUrl"
                :src="detailInfo.checkUrl.split(',')[0]"
                :preview-src-list="detailInfo.checkUrl.split(',')"
              />
              <div class="error" v-else>暂无图片</div>
            </div>
          </div>
        </el-form>
      </el-col>

      <el-col :span="9">
        <div
          id="third_map"
          style="width: 100%; height: 650px; border: 1px solid"
        ></div>
      </el-col>
    </el-row>
  </el-dialog>
</template>

<script>
import { getBuild } from "@/api/thirdbuild/build";
import { EditorMap } from "@/utils/mapClass/map";
import { mapGetters } from "vuex";
import MyImage from "@/components/MyImage/index.vue";
export default {
  name: "build-detail",
  components: {
    MyImage,
  },
  data() {
    return {
      open: false,
      detailInfo: {},
    };
  },
  methods: {
    openDetail(id) {
      getBuild(id).then((response) => {
        this.detailInfo = response.data;

        this.open = true;
        this.initMap();
      });
    },
    initMap() {
      this.$nextTick(() => {
        const path = eval(this.systemSetting.map_center);
        let map = new EditorMap(
          "third_map",
          {
            center: path,
            //mapStyle: "amap://styles/f71d3a3d73e14f5b2bf5508bf1411758",
            zoom: 14.5,
          },
          this
        );
        if (this.detailInfo.longitude) {
          map.control = 1;
          map.addDevice({
            longitude: this.detailInfo.longitude,
            latitude: this.detailInfo.latitude,
            deviceName: this.detailInfo.title,
          });
          map.map.setCenter([
            this.detailInfo.longitude,
            this.detailInfo.latitude,
          ]);
        }
      });
    },
  },
  computed: {
    ...mapGetters(["systemSetting"]),
  },
};
</script>

<style scoped lang="scss">
.picture-label {
  font-size: 14px;
  color: rgb(96, 98, 102);
  font-weight: 700;
  margin: 8px 0px 8px 0px;
}
.picture {
  width: 130px;
  height: 130px;
  margin: 2px;
}
.allImg {
  flex-wrap: wrap;
  padding-left:30px;
  > div {
    margin-right: 10px;
    width: 200px;
  }
}
.img-wrapper {
  position: relative;
  .num {
    left: 2px;
    top: 2px;
    width: 130px;
    height: 130px;
    text-align: center;
    line-height: 130px;
    pointer-events: none;
    color: #fff;
    z-index: 99999999;
    position: absolute;
    font-size: 40px;
    font-weight: 800;
  }
}
.error {
  width: 130px;
  height: 130px;
  text-align: center;
  line-height: 139px;
  background: #F5F7FA;
}
</style>
