<template>
  <Page name="risk-abnormal" flank>
    <template #content>
      <List ref="list" v-model="list" :api="searchAPI">
        <template v-for="(item, index) in list">
          <view class="risk-card" :key="index">
            <view class="risk-card__heard">
              <view>异常类型：<render-dict dict="ONLINE_FREIGHT_RISK_EXCEPTION_TYPE" :value="item.exceptionType"></render-dict></view>
              <view :style="{ color: statusColorMap[item.status] }"><render-dict dict="ONLINE_FREIGHT_RISK_EXCEPTION_STATUS" :value="item.status"></render-dict></view>
            </view>
            <view class="risk-card__body">
              <view class="item">
                <view class="item_field">异常描述</view>
                <view class="item_content">{{ item.exceptionDesc || '' }}</view>
              </view>
              <view class="item">
                <view class="item_field">异常时间</view>
                <view class="item_content" style="color: #999">{{ item.riskTime || '' }}</view>
              </view>
              <template v-if="!['WAIT_HANDLE'].includes(item.status)">
                <view v-if="item.complaintDesc" class="item item-top-border">
                  <view class="item_field">申诉说明</view>
                  <view class="item_content">{{ item.complaintDesc || '' }}</view>
                </view>
                <view v-if="item.complaintTime" class="item">
                  <view class="item_field">申诉时间</view>
                  <view class="item_content" style="color: #999">{{ item.complaintTime || '' }}</view>
                </view>
                <view v-if="item.complaintAttachment" class="item">
                  <view class="item_field">申诉举证</view>
                  <view class="item_content">
                    <text v-if="item.complaintAttachment" class="color-primary" @click="previewImage(item.complaintAttachment)">查看图片</text>
                  </view>
                </view>
              </template>
              <view v-if="item.auditTime || item.auditDesc" class="err-item">
                <view v-if="item.auditDesc" class="item">
                  <view class="item_field">审核说明</view>
                  <view class="item_content">{{ item.auditDesc || '' }}</view>
                </view>
                <view v-if="item.auditTime" class="item">
                  <view class="item_field">审核时间</view>
                  <view class="item_content">{{ item.auditTime || '' }}</view>
                </view>
              </view>
            </view>
            <view v-if="['WAIT_HANDLE', 'FAIL'].includes(item.status)" class="risk-card__foot">
              <u-button @click="toRisk(item.id)" type="primary">去申诉</u-button>
            </view>
          </view>
        </template>
      </List>
    </template>
  </Page>
</template>

<script>
export default {
  name: 'risk-abnormal',
  data() {
    return {
      statusColorMap: {
        WAIT_HANDLE: '#ed6a0c',
        HANDLING: '#1989fa',
        SUCCESS: '#07c160',
        FAIL: '#FDD108',
      },
      code: '',
      list: [],
    };
  },
  onLoad(options) {
    this.code = options.code;
  },
  methods: {
    // 预览图片
    previewImage(value) {
      uni.previewImage({ urls: value.replace(/^(\s|\,)+|(\s|\,)+$/g, '').split(',') });
    },
    searchAPI(params) {
      return uni.$u.api.freightOrder.getFreightRisk({ orderCodes: this.code, ...params });
    },
    toRisk(id) {
      uni.navigateTo({
        url: '/pages/order/risk-appeal?id=' + id,
        events: {
          refreshData: () => {
            this.onSearch();
          },
        },
      });
    },
  },
};
</script>

<style lang="scss">
.page-risk-abnormal {
  &__content {
    .risk-card {
      background: $color-white;
      border-radius: $radius-md;
      box-shadow: $shadow-normal;
      font-size: $font-md;
      margin-bottom: $padding-md;
      &__heard {
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid $color-border;
        padding: $padding-sm;
      }
      &__body {
        padding: 0 $padding-sm 1upx;
        .item {
          display: flex;
          font-size: 26upx;
          color: #999999;
          align-content: baseline;
          margin: $padding-sm 0;
          &_field {
            font-weight: 400;
            font-size: 28upx;
            color: #999999;
            width: 170upx;
            text-align: left;
          }
          &_content {
            flex: 1;
            font-weight: 400;
            font-size: 28upx;
            color: #2b2a27;
            text-align: left;
            font-style: normal;
            display: flex;
            justify-content: space-between;
            overflow-wrap: anywhere;
          }
        }
        .err-item {
          background: $color-border;
          padding: 1upx $padding-sm;
          margin-bottom: $padding-sm;
        }
        .item-top-border {
          border-top: 1px dashed $color-border;
          padding-top: $padding-sm;
        }
      }
      &__foot {
        padding: 0 $padding-sm $padding-sm;
      }
    }
  }
}
</style>
