<template>
  <div class="detail-diaog">
    <el-steps :active="childData.status" align-center>
      <el-step title="问题确认">
        <div slot="description">
          <span class="step-title" v-if="childData.creatUserName">{{childData.creatUserName}}</span>
          <br />
          <span class="step-title" v-if="childData.createTime">{{childData.createTime}}</span>
        </div>
      </el-step>
      <el-step title="问题指派">
        <div slot="description">
          <span class="step-title" v-if="childData.assignUserName">{{childData.assignUserName}}</span>
          <br />
          <span class="step-title" v-if="childData.assignTime">{{childData.assignTime}}</span>
        </div>
      </el-step>
      <el-step title="问题处理">
        <div slot="description">
          <span class="step-title" v-if="childData.handlerUserName">{{childData.handlerUserName}}</span>
          <br />
          <span class="step-title" v-if="childData.handlerTime">{{childData.handlerTime}}</span>
        </div>
      </el-step>
      <el-step title="问题完成">
        <div slot="description">
          <span class="step-title" v-if="childData.handlerUserName">{{childData.handlerUserName}}</span>
          <br />
          <span class="step-title" v-if="childData.handlerTime">{{childData.handlerTime}}</span>
        </div>
      </el-step>
    </el-steps>
    <div style="margin-top:30px" class="dialog-item">
      <div>问题编号：</div>
      <div>{{childData.questionNo}}</div>
    </div>
    <div class="dialog-item">
      <div>问题类型：</div>
      <div>{{childData.questionType}}</div>
    </div>
    <div class="dialog-item">
      <div>区属：</div>
      <div>{{childData.driverAreaName}}</div>
    </div>
    <div class="dialog-item">
      <div>河湖名称：</div>
      <div>{{childData.driverName}}</div>
    </div>
    <div class="dialog-item">
      <div>拍摄时间：</div>
      <div>{{childData.inspectTime}}</div>
    </div>
    <div class="dialog-item">
      <div>问题位置：</div>
      <div>{{childData.location}}</div>
    </div>
    <div id="reportMap" style="margin-left:152px;width: 300px;height: 220px;margin-top: 10px"></div>
    <div class="dialog-item">
      <div>问题图片：</div>
      <div>
        <viewer v-if="childData.fileSrc">
          <img
            style="width:300px;height:200px"
            v-lazy="childData.fileSrc"
            :data-source="childData.originalImg"
          />
        </viewer>
      </div>
    </div>
    <div v-if="childData.handlerImage" class="dialog-item">
      <div>处理后图片：</div>
      <div>
        <viewer v-if="childData.handlerImage">
          <img style="width:300px;height:200px" v-lazy="childData.handlerImage" />
        </viewer>
      </div>
    </div>
  </div>
</template>

<script>
import api from "@/api/question/list";
import AMap from "AMap";

export default {
  name: "detail-diaog",
  data() {
    return {
      drawerWidth: document.body.clientWidth - 190 + "px",
      direction: "rtl",
      childData: {},
      map: {}
    };
  },
  props: {
    visible: {
      type: Boolean,
      default() {
        return false;
      }
    },
    id: {
      type: Number,
      default() {
        return 0;
      }
    }
  },
  components: {},
  created() {},
  mounted() {
    this.getDetail();
  },
  methods: {
    initMap() {
      let me = this;
      this.map = new AMap.Map("reportMap", {
        zooms: [10, 18]
      });
      this.map.setCity("南京市");
      this.map.on("complete", function() {
        if (me.childData.latitude && me.childData.longitude) {
          let point = new AMap.LngLat(
            me.childData.longitude,
            me.childData.latitude
          );
          let icon = new AMap.Icon({
            // 图标尺寸
            size: new AMap.Size(25, 25),
            // 图标的取图地址
            image: require("../../assets/img/marker-img.png"),
            // 图标所用图片大小
            imageSize: new AMap.Size(25, 25)
          });
          let marker = new AMap.Marker({
            position: point,
            icon: icon,
            offset: new AMap.Pixel(-12, -12)
          });
          marker.setDraggable(true);
          marker.setMap(me.map);
          me.map.setZoomAndCenter(10, point);
        }
      });
    },
    getDetail() {
      api
        .getDetail(this.id)
        .then(res => {
          if (res.data.status == 3) {
            res.data.status == 4;
          }
          this.childData = res.data;
          this.initMap();
        })
        .catch(err => {
          this.childData = {};
        });
    }
  }
};
</script>

<style lang="less">
.detail-diaog {
  .step-title {
    font-size: 14px;
    color: #333333;
  }
  .dialog-item {
    margin-top: 15px;
    display: flex;
    line-height: 20px;
    align-items: center;
    > div:first-child {
      width: 150px;
      text-align: right;
    }
    > div:last-child {
      flex: 1;
    }
  }
}
</style>
