<template>
  <view>
    <uni-list :border="false" class="address">
      <uni-list-item
        title="退款原因"
        class="required"
        clickable
        :right-text="reasonName"
        :show-arrow="true"
        @click="showAction"
      />
      <uni-list-item title="退款金额" class="required">
        <view slot="footer" class="form-input">
          <view class="money">¥{{ refund.amount }}</view>
          <view class="tips">不可修改，最多{{ refund.amount }}</view>
        </view>
      </uni-list-item>
      <uni-list-item title="退款说明" class="required">
        <view slot="footer" class="form-input">
          <textarea
            v-model="refund.mark"
            :auto-height="true"
            :maxlength="200"
            placeholder-class="placeholder"
            placeholder="请输入退款说明(最多200字)"
          />
        </view>
      </uni-list-item>
      <uni-list-item title="联系电话" class="required">
        <view slot="footer" class="form-input">
          <input
            v-model="refund.phone"
            class="uni-input"
            type="number"
            placeholder-class="placeholder"
            placeholder="请填写联系电话"
          />
        </view>
      </uni-list-item>
      <uni-list-item>
        <view slot="body">
          <view class="upload-desc">
            <text>上传凭证</text>
          </view>
          <view>
            <ImageUploader @change="imageChange" />
          </view>
        </view>
      </uni-list-item>
    </uni-list>

    <ActionSheet ref="popup" action-text="确定" title="请选择原因">
      <template>
        <view>
          <radio-group @change="radioChange">
            <label
              v-for="(item, index) in reasons"
              :key="item.id"
              class="uni-list-cell uni-list-cell-pd"
            >
              <view class="radio-cell">
                <radio color="#ec1500" :value="item.id" :checked="index === current" />
                <text>{{ item.name }}</text>
              </view>
            </label>
          </radio-group>
        </view>
      </template>
    </ActionSheet>

    <view class="row">
      <button class="primary-btn" type="default" @click="confirm">
        提交申请
      </button>
    </view>
  </view>
</template>

<script>
import { uniList, uniListItem } from "@dcloudio/uni-ui";
import ActionSheet from "../../components/actionSheet";
import ImageUploader from "../../components/imageUploader/index";
import { submit } from "../../api/aftersale.api";
export default {
  components: {
    uniList,
    uniListItem,
    ActionSheet,
    ImageUploader
  },
  data() {
    return {
      reasonName: "请选择",
      refund: {
        orderNo: "",
        reason: "",
        amount: "1000.00",
        mark: "",
        phone: "",
        proofs: []
      },
      reasons: [
        { name: "未按承诺时间发货", id: 1 },
        { name: "多拍/错拍/不想要", id: 4 },
        { name: "其他原因", id: 5 }
      ]
    };
  },
  onLoad(option) {
    this.refund.orderNo = option.orderNo || "";
  },
  methods: {
    showAction() {
      this.$refs.popup.open();
    },
    radioChange(e) {
      this.refund.reason = +e.detail.value;
      this.reasonName = this.reasons.filter(item => item.id === +e.detail.value)[0].name;
    },
    imageChange(data) {
      this.refund.proofs = data.map(item => item.url);
    },
    confirm() {
      const data = this.refund;

      if (!data.orderNo) {
        this.$api.msg("缺少订单号");
        return;
      }

      if (!data.reason) {
        this.$api.msg("请选择退款原因");
        return;
      }
      if (!/(^1[3|4|5|7|8][0-9]{9}$)/.test(data.phone)) {
        this.$api.msg("请输入正确的联系电话");
        return;
      }
      if (!data.mark) {
        this.$api.msg("请输入退款说明");
        return;
      }

      const param = Object.assign({}, this.refund);

      submit(param)
        .then(() => {
          this.$api.msg(`申请成功`);
          setTimeout(() => {
            uni.navigateBack();
          }, 400);
        })
        .catch(e => {
          console.error(e);
        });
    }
  }
};
</script>
<style lang="scss" scoped>
::v-deep .uni-list-item__content-title {
  font-size: 30rpx;
  color: $text-color-n3;
}
.primary-btn {
  margin-top: 60px;
  @include primary-bg;
  color: white;
  font-size: $uni-font-size-base;
  font-weight: bold;
  border-radius: $uni-border-radius-xl;
  flex: 1;
}
.form-input {
  flex: 3;
}
textarea {
  width: 100%;
}
::v-deep .uni-list-item__container {
  align-items: center;
}
.required ::v-deep .uni-list-item__content-title::before {
  content: "*";
  color: red;
}
.radio-cell {
  padding: 40rpx 30rpx;

  text {
    font-size: 30rpx;
    margin-left: 20rpx;
  }
}
.money {
  color: #ec1500;
  font-size: 30rpx;
}
.tips {
  font-size: 24rpx;
  color: #999;
}
.upload-desc {
  font-size: 30rpx;
  color: #666;
  margin-bottom: 24rpx;
}
</style>
