<template>
  <Page name="risk-appeal">
    <template #content>
      <u-form :model="form" ref="uForm" labelWidth="100">
        <view class="card">
          <u-form-item label="申诉说明" required> </u-form-item>
          <u-textarea v-model="form.desc" border="none" placeholder="申诉说明" />
        </view>
        <view class="card">
          <u-form-item label="申诉举证" required> </u-form-item>
          <z-upload v-model="form.attachment" :limit="20"></z-upload>
        </view>
      </u-form>
    </template>
    <template #footer>
      <u-button type="primary" @tap="submit" :loading="loading">申诉</u-button>
    </template>
  </Page>
</template>

<script>
import ZUpload from '../../components/zee/z-upload.vue';
import dayjs from 'dayjs';

export default {
  name: 'risk-appeal',
  components: { ZUpload },
  data() {
    return {
      loading: false,
      form: {
        desc: '',
        attachment: '',
      },
      id: '',
    };
  },
  onLoad(options) {
    this.id = options.id;
  },
  methods: {
    submit() {
      if (!this.form.desc) {
        uni.showToast({ title: '备注不能为空', icon: 'none' });
        return;
      }
      if (!this.form.attachment) {
        uni.showToast({ title: '申诉举证附件不能为空', icon: 'none' });
        return;
      }
      if (this.loading) return;
      this.loading = true;
      uni.$u.api.freightOrder
        .riskAppeal({ ...this.form, idList: [this.id] })
        .then(res => {
          if (res.success) {
            this.getOpenerEventChannel().emit('refreshData');
            setTimeout(() => uni.navigateBack(), 500);
          }
        })
        .catch(e => {
          this.loading = false;
        });
    },
  },
};
</script>

<style lang="scss">
.page-risk-appeal {
  &__content {
    padding-top: 0 !important;
  }
  &__footer {
    background: $color-white;
  }
  .card {
    color: #999999;
    margin: $padding-md;
    padding: $padding-md;
    background-color: $color-white;
    border-radius: $radius-md;
    box-shadow: $shadow-normal;
    //.u-form-item {
    //  padding-left: $padding-md !important;
    //  padding-right: $padding-sm !important;
    //}
  }
}
</style>
