<template>
  <div>
    <header_local />
    <div class="main">
      <el-row class="head">
        <el-col :span="12">
          <el-icon size="18" @click="router.go(-1)" style="cursor: pointer">
            <ArrowLeft />
          </el-icon>
          图片审核
        </el-col>
      </el-row>
      <br />
      <el-row class="body">
        <el-col
          ref="left"
          :span="16"
          style="border-right: 2px solid #e4e4e4; padding: 0 26px"
        >
          <div v-text="detail.title" style="margin-bottom: 1em"></div>
          <el-image
            :style="
              'width: ' +
              image_data.width +
              'px; height: ' +
              image_data.height +
              'px; margin-bottom: 3em'
            "
            :src="detail.url"
            fit="contain"
          />
          <el-button
            :type="status[detail.reviewResult.label]"
            style="margin: 0 auto; display: block"
            v-text="detail.reviewResult.labelDesc"
          ></el-button>
          <div style="text-align: center; height: 3em; line-height: 3em">
            该图片共有{{ detail_data.total }}处违规
          </div>
        </el-col>
        <el-col :span="8" style="padding: 0 17px">
          <div style="height: 3em; line-height: 3em">审核结果</div>
          <el-tabs
            v-if="
              detail &&
              detail.reviewResult &&
              detail.reviewResult.results &&
              detail.reviewResult.results.length
            "
            v-model="activeName"
          >
            <el-tab-pane
              :label="item.typeDesc"
              :name="item.type"
              v-for="item in detail.reviewResult.results"
              :key="item.type"
            >
              <el-card
                style="margin-bottom: 1em;"
                v-for="(p, index) in item.items"
                :key="index"
              >
                <div>
                    <span>{{ `${index + 1}、 ` }}</span>
                    <span style="color: #F56C6C;">【{{ p.labelDesc }}】</span>
                    <span>{{ `${p.subTypeDesc}` }}</span>
                </div>
              </el-card>
            </el-tab-pane>
          </el-tabs>
          <el-empty description="暂无违规信息" v-else />
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup>
import header_local from '../components/header.vue';
// import { storeImg, historyImg } from '@/api/processing';
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter();
// import config from '../../../config/index';
const status = {
  REJECT: 'danger',
  REVIEW: 'warning',
  NORMAL: 'success'
};
const left = ref(null);
const image_data = ref({
  height: 0,
  width: 0
});
const detail = JSON.parse(
  sessionStorage.getItem('Processing_detail') || '{reviewResult: {}}'
);

const activeName = ref(
  detail &&
    detail.reviewResult &&
    detail.reviewResult.results &&
    detail.reviewResult.results.length
    ? detail.reviewResult.results[0].type
    : ''
);

const detail_data = ref({
  total: 0
});
detail?.reviewResult?.results?.map(v => {
  detail_data.value.total += v.items ? v.items.length : 0;
});

onMounted(() => {
  const target = detail.reviewResult.thumbnailMeta;
  let r_width = left.value.$el.offsetWidth - 52;
  let h = (target.heightInPixel / target.widthInPixel) * r_width;
  if (h > window.screen.height) {
    h = window.screen.height - 352;
  }
  image_data.value = {
    height: h,
    width: r_width
  };
});

// const Authorization = localStorage.getItem('token') || '';
</script>

<style scoped>
.main {
  padding: 1em;
  font-size: 14px;
  font-family: PingFangSC, PingFang SC;
  height: calc(100% - 42px);
}

.main .head {
  background: #f9fafc;
  height: 42px;
  line-height: 42px;
  padding: 0 22px;
}

.main .body {
  height: calc(100% - 42px - 1em);
}

</style>
