<template>
  <el-dialog
    :visible.sync="dialogVisible"
    title="预警处置详情"
    width="1200px"
    top="0"
    append-to-body
  >
    <div id="scroll-dialog">
      <div class="step-area">
        <el-steps :active="warningDetail.step" align-center>
          <el-step
            v-for="(step, index) in warningDetail.process_list"
            :key="index"
            :description="`${step.person_name}${index == 0 ? '' : ' / '}${
              step.time
            }`"
            :class="[step.status == 3 ? 'warning' : 'success']"
          >
            <template #icon>
              <i
                :class="[
                  'iconfont',
                  step.type == 'log'
                    ? 'icon-report-fill-01'
                    : step.type == 'check'
                    ? 'icon-report-fill-02'
                    : step.type == 'handle'
                    ? 'icon-report-fill-03-2'
                    : 'icon-report-fill-03',
                ]"
              ></i>
            </template>
            <template #title>
              <span> {{ step.title }} </span
              ><span v-if="step.status_text"> / </span
              ><span
                v-if="step.status_text"
                :style="{ color: step.status == 3 ? 'rgb(255, 90, 86)' : '' }"
                >{{ step.status_text }}</span
              >
            </template>
          </el-step>
        </el-steps>
      </div>
      <div class="dialog-title">预警信息</div>
      <div class="dialog-form">
        <div class="dialog-item">设备编号：{{ warningDetail.device_no }}</div>
        <div class="dialog-item">报警时间：{{ warningDetail.log_time }}</div>
        <div class="dialog-item inline">
          报警原因：{{ warningDetail.alarm_content }}
        </div>

        <!-- <div class="dialog-item">
          检查结果：
          <span
            :style="{
              color: warningDetail.check_result == 1 ? '#24F0B8' : '#FF5A56',
            }"
            >{{ warningDetail.check_result_text }}</span
          >
        </div>
        <div class="dialog-item">
          负责人：{{ warningDetail.duty_person_name }}
        </div>
        <div class="dialog-item">
          隐患类型：{{ warningDetail.problem_type_text }}
        </div> -->
        <template v-if="warningDetail.check_result == 2">
          <div class="dialog-item inline">
            问题描述：{{ warningDetail.check_describe }}
          </div>
          <div class="dialog-item inline">
            隐患图片：
            <el-image
              class="imgs"
              v-for="(img, index) in warningDetail.check_images_list"
              :key="index"
              :src="img.url"
              :preview-src-list="
                computedUrlList(warningDetail.check_images_list)
              "
            />
          </div>
          <div class="dialog-item">
            问题等级：<span style="color: #ff5a56">{{
              warningDetail.level_text
            }}</span>
          </div>
          <div class="dialog-item">
            整改期限：{{ warningDetail.rectify_date }}
          </div>
          <div class="dialog-item">
            整改人员：{{ warningDetail.rectify_person_name }}
          </div>
          <div class="dialog-item">
            短信通知：{{ warningDetail.is_message_text }}
          </div>
          <div class="dialog-item">
            整改要求：{{ warningDetail.rectify_require }}
          </div>
          <div class="dialog-item">
            补充描述：{{ warningDetail.other_describe }}
          </div>
        </template>
      </div>
      <template v-if="warningDetail.check_status == 1">
        <div class="no-data">
          <img src="@/assets/nodata.png" alt="" />
          <div>暂无核验与处置信息</div>
        </div>
      </template>
      <template v-else>
        <div class="dialog-title">预警核验</div>
        <div class="dialog-form">
          <div class="dialog-item">
            核验人员：{{ warningDetail.check_account_name }}
          </div>
          <div class="dialog-item">
            核验结果：<span
              :style="{
                color: warningDetail.check_status == 2 ? '#FF5A56' : '#24F0B8',
              }"
              >{{ warningDetail.check_status_text }}</span
            >
          </div>
          <div class="dialog-item inline">
            核验时间：{{ warningDetail.check_time }}
          </div>

          <div class="dialog-item">
            处置人员：{{ warningDetail.handle_account_name }}
          </div>
          <div class="dialog-item">
            核验描述：{{ warningDetail.check_describe }}
          </div>
          <div class="dialog-item inline">
            核验拍照：
            <el-image
              class="imgs"
              v-for="(img, index) in warningDetail.check_images_list"
              :key="index"
              :src="img.url"
              :preview-src-list="
                computedUrlList(warningDetail.check_images_list)
              "
            />
          </div>
        </div>
      </template>
      <div v-if="warningDetail.handle_create_time">
        <div class="dialog-title">预警处置</div>
        <div class="dialog-form">
          <div class="dialog-item">
            处置人员：{{ warningDetail.handle_account_name }}
          </div>
          <div class="dialog-item">
            处置时间：{{ warningDetail.handle_create_time }}
          </div>
          <div class="dialog-item inline">
            处置描述：{{ warningDetail.handle_describe }}
          </div>
          <div class="dialog-item inline">
            处置图片:
            <el-image
              class="imgs"
              v-for="(img, index) in warningDetail.handle_images_list"
              :key="index"
              :src="img.url"
              :preview-src-list="
                computedUrlList(warningDetail.handle_images_list)
              "
            />
          </div>
        </div>
        <template v-for="(check, index) in warningDetail.check_log_list">
          <div class="dialog-form border" :key="index">
            <div class="dialog-item">
              审核情况：{{ check.operate_account_name }}
              /
              <span
                :style="{
                  color: check.status == 2 ? '#24F0B8' : '#FF5A56',
                }"
                >{{ check.status_text }}</span
              >
            </div>
            <div class="dialog-item">复查时间：{{ check.operate_time }}</div>
            <div class="dialog-item inline">
              审核备注：{{ check.operate_describe }}
            </div>
          </div>
        </template>
      </div>
    </div>
  </el-dialog>
</template>
<script>
export default {
  name: "CorrectDialog",
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    data: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      warningDetail: {
        check_images_list: [],
      },
    };
  },
  methods: {
    computedUrlList(data) {
      return data.map((item) => {
        return item.url;
      });
    },
  },
  computed: {
    dialogVisible: {
      get() {
        return this.visible;
      },
      set(val) {
        this.$emit("changeVisible", val);
      },
    },
  },
  watch: {
    dialogVisible(val) {
      if (val) {
        this.warningDetail = this.data;
        console.log(this.warningDetail);
      }
    },
  },
};
</script>
<style lang="less" scoped>
.step-area {
  padding: 24px;
  background: #0e3b72;
}
.dialog-title {
  line-height: 44px;
  background: #0e3b72;
  text-align: center;
  font-size: 16px;
  color: #24f0b8;
  margin-bottom: 2px;
  margin-top: 12px;
}
.dialog-form {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  .dialog-item {
    width: calc(50% - 50px);
    margin-bottom: 2px;
    background: #114483;
    padding: 12px 24px;
    color: #c6def9;
    font-size: 14px;
    &.inline {
      width: 100%;
    }
    &:last-child {
      margin-bottom: 0;
    }
  }
  &.border {
    border-top: 10px solid #0e3b72;
  }
}
.imgs {
  width: 100px;
  height: 100px;
  margin-right: 12px;
  vertical-align: middle;
}
::v-deep .el-step__description {
  line-height: 40px;
  background: rgba(36, 240, 184, 0.05);
  border-radius: 4px;
}
::v-deep .el-step.is-center .el-step__description {
  padding: 0 !important;
  margin: 0 15% !important;
}
::v-deep .el-step__title.is-finish {
  color: #67c23a !important;
}
::v-deep .el-step__description.is-finish {
  color: #67c23a !important;
}
::v-deep .el-step__title.is-process {
  color: #c6def9 !important;
}
::v-deep .el-step__description.is-process {
  color: #c6def9 !important;
}
::v-deep .el-step__icon .el-step__icon-inner {
  display: none !important;
}
::v-deep .el-step__icon.is-text {
  border-color: inherit !important;
}
::v-deep div.el-step__icon-inner {
  color: transparent !important;
}
#scroll-dialog {
  max-height: 800px;
  overflow-y: auto;
}
.no-data {
  padding: 76px 0;
  text-align: center;
  color: #c6def9;
  line-height: 36px;
  background: #114483;
  margin-top: 2px;
}
::v-deep .el-step__icon {
  font-size: 14px;
}
::v-deep .el-step__head {
  height: 16px;
}

::v-deep .el-step__icon.is-text {
  border: none !important;
  i {
    font-size: 24px;
  }
}
::v-deep .el-step__head.is-finish {
  color: #24f0b8;
  border-color: #24f0b8;
}
::v-deep .el-step__head.is-process {
  color: #c6def9;
}
</style>