<template>
  <div class="main" v-if="detail">
    <div class="view-box">
      <template v-for="item in page.fields">
        <div class="p-item" :key="item.name">
          <div class="p-title">{{ item.label }}</div>
          <div class="p-content">
            <template v-if="item.computed">
              <div v-html="item.computed(detail.form[item.name], detail)"></div>
            </template>
            <template v-else>{{ detail.form[item.name] }}</template>
          </div>
        </div>
      </template>
      <div class="p-item">
        <div class="p-title">审核状态</div>
        <div class="p-content">
          {{ statusText }}
        </div>
      </div>
      <div class="p-item" v-if="detail.approve_time1 || detail.approve_time2">
        <div class="p-title">审核时间</div>
        <div class="p-content">
          {{ detail.approve_time1 || detail.approve_time2 }}
        </div>
      </div>
      <div class="p-item" v-if="detail.remark1 || detail.remark2">
        <div class="p-title">备注</div>
        <div class="p-content is-red">
          {{ detail.remark1 || detail.remark2 }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import pages from '@/pages'
import * as api from '@/api/index'

export default {
  metaInfo() {
    return {
      title: this.page.title
    }
  },
  data() {
    return {
      detail: null
    }
  },
  watch: {
    $route: {
      immediate: true,
      deep: true,
      handler(route) {
        if (!route.query.channel) {
          this.$dialog
            .alert({
              message: '请选择事务'
            })
            .then(() => {
              this.$router.replace({
                name: 'index',
                query: this.$route.query
              })
            })
        }
      }
    }
  },
  computed: {
    // 页面配置
    page() {
      const channel = this.$route.query.channel
      return pages[channel] ? pages[channel]['view'] : {}
    },
    channelId() {
      return this.$route.query.channel_id
    },
    viewId() {
      return this.$route.query.view_id
    },
    statusText() {
      const map = {
        '-1': '待审核',
        '0': '未通过',
        '1': '通过',
        '2': '通过',
        '3': '未通过',
        '4': '通过'
      }
      return map[this.detail.status]
    }
  },
  methods: {
    getDetail() {
      const toast = this.$toast.loading({
        message: '加载中...',
        forbidClick: true,
        duration: 0
      })
      api
        .getAffair(this.viewId)
        .then(response => {
          this.detail = response
          toast.clear()
        })
        .catch(toast.clear)
    }
  },
  beforeMount() {
    this.getDetail()
  }
}
</script>

<style lang="scss" scoped>
.view-box {
  margin: 0 30px 30px;
  padding: 20px;
  box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.06);
}
.p-item {
  display: flex;
  justify-content: space-between;
  padding: 20px 0;
  font-size: 15px;
  border-bottom: 1px solid #f5f5f5;
  &:last-child {
    border-bottom: 0;
  }
}
.p-title {
  padding-right: 20px;
  color: #424242;
  white-space: nowrap;
}
.p-content {
  align-items: flex-end;
  color: #a3a3a3;
  text-align: right;
}
</style>
