<template>
  <el-dialog
    width="1118px"
    :modal="true"
    :modal-append-to-body="false"
    :destroy-on-close="true"
    :visible="showDialog"
    @close="handleClose"
  >
    <div class="eventWrap">
      <el-row :gutter="32">
        <el-col :span="24" style="padding-left: 40px">
          <title-box text="事件详情" />
        </el-col>
        <el-col
          :span="13"
          style="padding-left: 40px"
          v-loading="loading"
          element-loading-text="加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 21, 64, 0"
        >
          <div class="leftEvent">
            <div class="eventDetails">
              <img
                :width="18"
                :height="18"
                src="@/assets/images/manyidu/tc-title-icon.png"
              />事项详情
            </div>
            <div class="eventItem">
              <span>所属组织：</span>
              <span>{{ item.gridName }}</span>
            </div>
            <div class="eventItem">
              <span>上报渠道：</span>
              <span>{{ item.sourceTypeName }}</span>
            </div>
            <div class="eventItem">
              <span>事件类型：</span>
              <span>{{ item.categoryName }}</span>
            </div>
            <div class="eventItem">
              <span>接受时间：</span>
              <span>{{ item.happenTime }}</span>
            </div>
<!--            <div class="eventItem">
              <span>工单号：</span>
              <span>{{ item.workOrderNum }}</span>
            </div>-->
            <div class="eventItem">
              <div>问题描述：</div>
              <div style="margin-top: 20px">{{ item.eventContent }}</div>
            </div>
<!--            <div class="eventItem">
              <div>图片：</div>
              <div style="margin-top: 20px; display: flex">
                <img
                  style="width: 100px; height: 100px; margin-right: 5px"
                  v-for="src in item.imageList"
                  :key="src"
                  :src="src"
                  alt="/"
                  @click="openImg(src)"
                />
              </div>
            </div>-->
            <div class="eventItem">
              <span>联系人：</span>
              <span>{{ item.name }}</span>
            </div>
            <div class="eventItem">
              <span>联系电话：</span>
              <span>{{ item.mobile }}</span>
            </div>
            <div class="eventItem">
              <span>详细地址：</span>
              <span>{{ item.address }}</span>
            </div>
            <div class="eventItem">
              <span>办结时限：</span>
              <span>{{ item.latestOperatedTime }}</span>
            </div>
            <div class="eventItem">
              <span>满意度评价：</span>
              <span>{{ item.satisfactionName }}</span>
            </div>
          </div>
        </el-col>
        <el-col
          :span="11"
          v-loading="loading1"
          element-loading-text="加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 21, 64, 0.3)"
        >
          <div class="rightEvent m-info">
            <div class="eventDetails">
              <img
                :width="18"
                :height="18"
                src="@/assets/images/manyidu/tc-title-icon.png"
              />办理进展
            </div>
            <!-- <el-timeline class="timeline" :reverse="true">
                <el-timeline-item v-for="(item, index) in activities" :key="index" :class="index == activities.length - 1 ? 'sucess' : ''">
                  <div class="status-box">
                    <div class="status1" v-if="index == activities.length - 1">回复</div>
                    <div class="status2" v-else>完成并回复</div>
                    <div class="timestamp">{{ item.timeLimit ? $moment(item.timeLimit).format("YYYY-MM-DD hh:mm:ss") : "" }}</div>
                  </div>
                  <div class="content">
                    <div class="field">回复人：</div>
                    <div class="value">{{ item.departmentName }}</div>
                  </div>
                  <div class="content">
                    <div class="field">回复内容：</div>
                    <div class="value">{{ item.publicReply }}</div>
                  </div>
                </el-timeline-item>
              </el-timeline> -->
            <div v-if="activities.length > 0">
              <!-- <el-card :class="{ 'box-card': source === 'visiual' }" style="min-height: calc(88vh - 50px); overflow: auto"> -->
              <div class="m-process">
                <div class="list">
                  <div
                    class="item"
                    :class="[index === 0 ? 'z-on' : '']"
                    :key="item.processId"
                    v-for="(item, index) in activities"
                  >
                    <div class="item-row">
                      <template v-if="item.agencyId">
                        <div class="name">指派</div>
                      </template>
                      <template v-if="!item.timeLimit">
                        <div class="name">完成并回复</div>
                      </template>
                      <template v-if="!item.agencyId && item.timeLimit">
                        <div class="name">{{ item.processName }}</div>
                      </template>
                      <div class="date">
                        {{
                          item.processTime ? getTrueTime(item.processTime) : ""
                        }}
                      </div>
                    </div>
                    <div v-if="item.type === 'event'">
                      <template v-if="item.agencyId">
                        <div class="detail">
                          <div class="detail-field">指派人：</div>
                          <div class="detail-value">
                            {{ item.departmentName }}
                          </div>
                        </div>
                        <div class="detail">
                          <div class="detail-field">指派部门：</div>
                          <div class="detail-value">
                            {{ item.agencyName }}
                          </div>
                        </div>
                        <div class="detail">
                          <div class="detail-field">转办意见：</div>
                          <div class="detail-value">
                            {{ item.publicReply }}
                          </div>
                        </div>
                        <div class="detail">
                          <div class="detail-field">办结时限：</div>
                          <div class="detail-value">
                            {{ formTimeLimit(item.timeLimit) }}
                          </div>
                        </div>
                      </template>
                      <template v-else>
                        <div class="detail">
                          <div class="detail-field">回复人：</div>
                          <div class="detail-value">
                            {{ item.departmentName }}
                          </div>
                        </div>
                        <div class="detail">
                          <div class="detail-field">回复内容：</div>
                          <div class="detail-value">
                            {{ item.publicReply }}
                          </div>
                        </div>
                        <div class="detail" v-if="item.timeLimit">
                          <div class="detail-field">办结时限：</div>
                          <div class="detail-value">
                            {{ getTrueTime(item.timeLimit) }}
                          </div>
                        </div>
                      </template>
                    </div>
                  </div>
                </div>
              </div>
              <!-- </el-card> -->
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </el-dialog>
</template>

<script>
import titleBox from "./Title";
export default {
  name: "ReportAnEvent",
  components: {
    titleBox,
  },
  props: {
    id: {
      type: String,
      default: "",
    },
    showDialog: {
      type: Boolean,
      default: false,
    },
  },

  data() {
    return {
      item: {},
      loading: false,
      loading1: false,
      activities: [],
    };
  },

  computed: {},
  watch: {
    showDialog: {
      handler(val) {
        if (val) {
          this.getDetailsData(this.id);
          this.getProcessData(this.id);
        }
      },
      immediate: true,
    },
  },
  mounted() {},

  methods: {
    handleClose() {
      this.$emit("close", false);
      this.item = {};
    },

    openImg(src) {
      window.open(src);
    },

    getTrueTime(time) {
      return this.$moment(time * 1000).format("YYYY-MM-DD hh:mm");
    },

    getDetailsData(id) {
      this.loading = true;
      this.$http
        .post("/governance/icEvent/detail", { icEventId: id })
        .then((res) => {
          const { code, data, msg } = res.data;
          if (code === 0) {
            this.item = data;
            this.loading = false;
          } else {
            this.loading = false;
            this.$message.error(msg);
          }
        });
    },

    getProcessData(id) {
      this.$http
        .post("/governance/icEvent/process", { icEventId: id })
        .then((res) => {
          const { code, data, msg } = res.data;
          if (code === 0) {
            this.activities = data;
            this.loading1 = false;
          } else {
            this.loading1 = false;
            this.$message.error(msg);
          }
        });
    },
  },
};
</script>

<style lang="scss" src="@/assets/scss/dataBoard/popup-info.scss" scoped></style>

<style lang="scss" scoped>
@import "@/assets/scss/modules/shequzhili/event-info.scss";

/deep/ .el-dialog {
  background: url(~@/assets/images/manyidu/dialog-bg.png);
  background-size: 100% 100%;
  width: 1118px;
  height: 822px;
}
/deep/ .el-dialog__body {
  padding: 0 20px 30px;
}
/deep/ .el-dialog__header {
  border: 0 !important;
}
/deep/ .el-dialog__headerbtn {
  top: 24px;
  right: 32px;
  .el-dialog__close {
    color: #ffffff;
    font-weight: 600;
  }
}
@mixin fontStyle {
  color: #fff !important;
  font-size: 14px !important;
}
.eventWrap {
  width: 1094px;
  height: 798px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 24px;
  .eventDetails {
    font-size: 18px;
    margin: 48px 24px 48px 0;
    color: #ffffff;
    img {
      margin-top: -4px;
      margin-right: 8px;
    }
  }
  .m-info {
    padding: 0px !important;
    .m-process {
      margin: 0 !important;
      .name {
        @include fontStyle;
      }
      .date {
        @include fontStyle;
      }
      .detail {
        @include fontStyle;
        .detail-field {
          flex: none !important;
        }
      }
    }
  }
  .leftEvent {
    color: #fff;
    .eventItem {
      font-size: 14px;
      margin-bottom: 24px;
      span:first-child {
      }
      span:last-child {
      }
    }
  }
  .rightEvent {
    color: #fff;
  }
}
</style>
