<template>
  <el-dialog
    :visible.sync="dialogVisible"
    title="整改详情"
    width="1200px"
    top="0"
    append-to-body
  >
    <div id="scroll-dialog">
      <div class="step-area" v-if="correctDetail.check_result == 2">
        <el-steps :active="correctDetail.step" align-center>
          <el-step
            v-for="(step, index) in correctDetail.progress"
            :key="index"
            :title="step.title"
            :description="`${step.person} / ${step.time}`"
          >
            <template #icon>
              <i
                :class="[
                  'iconfont',
                  step.type == 'check'
                    ? 'icon-report-fill-01'
                    : step.type == 'rectify'
                    ? 'icon-report-fill-02'
                    : 'icon-report-fill-03',
                ]"
              ></i>
            </template>
          </el-step>
        </el-steps>
      </div>
      <div
        class="dialog-title"
        :style="{ marginTop: correctDetail.check_result == 1 ? '0px' : '12px' }"
      >
        生成检查单
      </div>
      <div class="dialog-form">
        <div class="dialog-item">
          检查人员：{{ correctDetail.check_person_name }}
        </div>
        <div class="dialog-item">检查时间：{{ correctDetail.check_date }}</div>
        <div class="dialog-item">
          巡查类型：{{ correctDetail.check_type_text }}
        </div>
        <div class="dialog-item">
          检查部位：{{ correctDetail.check_part_name }}
        </div>
        <div class="dialog-item">
          检查事项：{{ correctDetail.check_item_name }}
        </div>
        <div class="dialog-item">
          检查结果：
          <span
            :style="{
              color: correctDetail.check_result == 1 ? '#24F0B8' : '#FF5A56',
            }"
            >{{ correctDetail.check_result_text }}</span
          >
        </div>
        <div class="dialog-item">
          负责人：{{ correctDetail.duty_person_name }}
        </div>
        <div class="dialog-item">
          隐患类型：{{ correctDetail.problem_type_text }}
        </div>
        <template v-if="correctDetail.check_result == 2">
          <div class="dialog-item inline">
            问题描述：{{ correctDetail.check_describe }}
          </div>
          <div class="dialog-item inline">
            隐患图片：
            <el-image
              class="imgs"
              v-for="(img, index) in correctDetail.check_images_list"
              :key="index"
              :src="img.url"
              :preview-src-list="
                computedUrlList(correctDetail.check_images_list)
              "
            />
          </div>
          <div class="dialog-item">
            问题等级：<span style="color: #ff5a56">{{
              correctDetail.level_text
            }}</span>
          </div>
          <div class="dialog-item">
            整改期限：{{ correctDetail.rectify_date }}
          </div>
          <div class="dialog-item">
            整改人员：{{ correctDetail.rectify_person_name }}
          </div>
          <div class="dialog-item">
            短信通知：{{ correctDetail.is_message_text }}
          </div>
          <div class="dialog-item">
            整改要求：{{ correctDetail.rectify_require }}
          </div>
          <div class="dialog-item">
            补充描述：{{ correctDetail.other_describe }}
          </div>
        </template>
      </div>
      <template v-if="correctDetail.check_result == 2">
        <div
          v-for="(correct, index) in correctDetail.rectify_list"
          :key="index"
        >
          <div class="dialog-title">整改上传</div>
          <div class="dialog-form">
            <div class="dialog-item">
              整改人员：{{ correct.rectify_person_name }}
            </div>
            <div class="dialog-item">整改时间：{{ correct.create_time }}</div>
            <div class="dialog-item inline">
              整改描述：{{ correct.rectify_describe }}
            </div>
            <div class="dialog-item inline">
              整改图片:
              <el-image
                class="imgs"
                v-for="(img, index) in correct.rectify_images_list"
                :key="index"
                :src="img.url"
                :preview-src-list="computedUrlList(correct.rectify_images_list)"
              />
            </div>
          </div>
          <template v-if="correct.examine_status != 1">
            <div class="dialog-form border">
              <div class="dialog-item">
                检查员复查：{{ correct.check_person_name }}
                /
                <span
                  :style="{
                    color:
                      correct.check_examine_status == 2 ? '#24F0B8' : '#FF5A56',
                  }"
                  >{{ correct.check_examine_status_text }}</span
                >
              </div>
              <div class="dialog-item">
                复查时间：{{ correct.check_examine_time }}
              </div>
              <div class="dialog-item inline">
                审核备注：{{ correct.check_examine_remark }}
              </div>
            </div>
            <div
              class="dialog-form border"
              v-if="correct.check_examine_status != 3"
            >
              <div class="dialog-item">
                负责人复查：{{ correct.duty_person_name }}
                /
                <span
                  :style="{
                    color:
                      correct.duty_examine_status == 2 ? '#24F0B8' : '#FF5A56',
                  }"
                  >{{ correct.duty_examine_status_text }}</span
                >
              </div>
              <div class="dialog-item">
                复查时间：{{ correct.duty_examine_time }}
              </div>
              <div class="dialog-item inline">
                审核备注：{{ duty_examine_remark }}
              </div>
            </div>
          </template>
        </div>
      </template>
    </div>
  </el-dialog>
</template>
<script>
export default {
  name: "CorrectDialog",
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    data: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      correctDetail: {
        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.correctDetail = this.data;
        console.log(this.correctDetail);
      }
    },
  },
};
</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;
}

::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>