<template>
  <div class="wrapper">
    <div class="bg-ff">
      <p class="title">填报信息</p>
      <div class="info">
        <div class="label">申请人</div>
        <div class="value">{{info.partyName}}</div>
      </div>
      <div class="info">
        <div class="label">申请时间</div>
        <div class="value" v-if="info.createTime">{{info.createTime.substring(0, 16)}}</div>
      </div>
      <div class="info">
        <div class="label">积分类型</div>
        <div class="value">{{info.integralRuleName}}</div>
      </div>
      <div class="info">
        <div class="label">申请描述</div>
        <div class="value">{{info.description}}</div>
      </div>
      <div class="info border-none" v-if="info.files.length">
        <div class="label">图片资料</div>
      </div>
      <div class="img-list" v-if="info.files.length">
        <img v-for="(item,index) in info.files" :key="index" :src="item.url" alt="" @click="preview(index)">
      </div>
    </div>
    <div class="bg-ff">
      <p class="title">审核详情</p>
      <div class="info">
        <div class="label">审核结果</div>
        <div class="value" :class="`status`+info.auditStatus">{{ $dict.getLabel('integralDeclareStatus', info.auditStatus) }}</div>
      </div>
      <div v-if="info.auditStatus == 1">
        <div class="info">
          <div class="label">加分项</div>
          <div class="value">{{info.auditType}}</div>
        </div>
        <div class="info">
          <div class="label">积分调整</div>
          <div class="value">+{{info.auditIntegral}}分</div>
        </div>
      </div>
      <div class="info" v-if="info.auditStatus == 2">
        <div class="label">驳回理由</div>
        <div class="value">{{info.auditOpinion}}</div>
      </div>
      <div v-if="info.auditStatus != 0">
        <div class="info">
          <div class="label">审核人</div>
          <div class="value">{{info.auditUserName}}</div>
        </div>
        <div class="info">
          <div class="label">审核时间</div>
          <div class="value">{{info.auditTime.substring(0, 16)}}</div>
        </div>
      </div>
      
    </div>
  </div>
</template>
<script>
import {mapState} from 'vuex';

export default {
  name: "detail",
  appName: "积分审核详情",
  computed: {
    ...mapState(['user']),
  },
  data() {
    return {
      id: '',
      info: {}
    };
  },
  onLoad(options) {
    this.id = options.id
    this.$dict.load("integralDeclareStatus").then(() => {
      this.getDetail()
    })
  },
  methods: {
    getDetail() {
      this.$instance.post(`/app/apppartyintegraldeclare/queryDetailById?id=${this.id}`).then(res => {
        if (res.code == 0) {
          this.info = res.data
        }
      })
    },
    preview(index) {
      this.$previewImage(this.info.files, index, "url");
    },
  }
};
</script>
<style lang="scss" scope>
@import "~dvcp-wui/common";
.bg-ff{
  background-color: #fff;
  padding-left: 32px;
  margin-bottom: 24px;
  .title{
    font-size: 38px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #333;
    line-height: 52px;
    padding: 32px 0;
  }
  .info{
    width: 100%;
    display: flex;
    padding: 34px 32px 34px 0;
    box-sizing: border-box;
    justify-content: space-between;
    border-bottom: 1px solid #ddd;
    font-size: 32px;
    font-family: PingFangSC-Regular, PingFang SC;
    line-height: 44px;
    .label{
      width: calc(100% - 480px);
      color: #999;
    }
    .value{
      width: 480px;
      color: #333;
      text-align: right;
      word-break: break-all;
    }
    .status0{
      color: #FF883C;
    }
    .status1{
      color: #42D784;
    }
    .status2{
      color: #f46;
    }
  }
  .border-none{
    border-bottom: 0px;
  }
  .img-list{
    padding-bottom: 44px;
    img{
      width: 226px;
      height: 226px;
      margin: 0 4px 4px 0;
    }
  }
}
</style>
