<template>
  <div class="after-sale-submit-con">
    <div class="refund-scroll">
      <div class="empty-top" />
      <refund-goods :list="detail.orders" :type="type" />
      <div class="common info-con">
        <div class="title">{{ refundLabel }}信息</div>
        <!-- <div class="info-item flex-default">
          <span class="label">货物状态</span>
          <div class="val placeholder" @click="showReceive = true"
            >请选择</div
          >
          <m-icon icon="icon-more-light" :size="10" />
        </div> -->
        <div class="info-item flex-default" @click="showReason = true">
          <span class="label">{{ refundLabel }}原因</span>
          <div class="val" v-if="refundReason.label">
            {{ refundReason.label }}
          </div>
          <div class="val placeholder" v-else>请选择</div>
          <m-icon icon="icon-more-light" :size="10" />
        </div>
        <!-- <div class="info-item flex-default">
          <span class="label">退款金额</span>
          <div class="price">￥169.69</div>
        </div> -->
      </div>
      <div class="common desc-con">
        <div class="title">补充描述</div>
        <div class="content">
          <textarea
            class="reason-input"
            placeholder="请描述申请售后服务的具体原因"
            :maxlength="500"
            v-model="form.returnReason"
          />
          <m-upload type="image" :maxNum="5" v-model="fileMap" />
        </div>
      </div>
      <div class="empty-bottom" />
    </div>
    <div class="submit-con">
      <van-button block type="primary" round @click="handleSubmit">提 交</van-button>
    </div>

    <!-- <refund-info-popup
      v-model="showReceive"
      title="货物状态"
      :list="receiveList"
    /> -->
    <refund-info-popup
      v-model="showReason"
      title="退款原因"
      :list="reasonList"
      @select="handleReasonSelect"
    />
  </div>
</template>

<script>
import RefundGoods from "./components/refund-goods";
import RefundInfoPopup from "./components/refund-info-popup.vue";
import { mapMutations } from "vuex"
import {
  OrderType,
  OrderTypeObj,
  RefundType,
  RefundTypeObj,
  RefundReasonType,
  RefundReasonTypeLabel,
} from "@/enums";
export default {
  components: {
    RefundGoods,
    RefundInfoPopup,
  },
  computed: {
    refundLabel() {
      return RefundTypeObj[this.type].label;
    },
    reasonList() {
      let arr = [];
      for (let key in RefundReasonType) {
        let val = RefundReasonType[key];
        let label = RefundReasonTypeLabel[val];
        arr.push({ val, label });
      }
      return arr;
    },
  },
  data() {
    return {
      RefundType,
      RefundTypeObj,
      type: OrderType.ORDER,
      oid: "",
      detail: {},
      showReceive: false,
      showReason: false,
      receiveList: [
        { label: "未收到货", val: 1 },
        { label: "已收到货", val: 2 },
      ],
      refundReason: {
        val: "",
        label: "",
      },
      fileMap: {},
      form: {
        orderId: "",
        orderDeliveryId: "",
        returnImg: [],
        returnReason: "",
        returnType: "",
      },
    };
  },
  methods: {
    ...mapMutations(['setTitle']),

    requestOrder(oid) {
      this.$api({
        apiName: OrderTypeObj[this.type].detailApi,
        postData: oid,
        success: (res) => {
          this.detail = res;
          if (this.type == OrderType.DELIVERY) {
            let { thumb, name, propList } = res;
            this.detail.orders = [{ thumb, name, propList }];
          }
        },
      });
    },
    handleReasonSelect(index, item) {
      this.refundReason = { ...item };
    },
    checkForm() {
      if (!this.refundReason.val && this.refundReason.val !== 0) {
        this.$toast("请选择退款原因！");
        return false;
      }
      if (!this.form.returnReason) {
        this.$toast("请填写描述！");
        return false;
      }
      this.form.orderId = this.oid;
      this.form.orderDeliveryId = this.oid;
      this.form.returnType = this.refundReason.val;
      if (this.fileMap.image && this.fileMap.image.length != 0) {
        this.form.returnImg = this.fileMap.image.map((f) => f.url);
      }

      return true;
    },
    handleSubmit() {
      let apiName = RefundTypeObj[this.type].api;
      this.$showLoading();
      if (this.checkForm()) {
        this.$api({
          apiName,
          postData: this.form,
          success: () => {
            this.$toast("申请成功~");
            setTimeout(() => {
              this.goBack()
            }, 500);
          },
          complete: () => {
            this.$hideLoading();
          },
        });
      }
    },
  },
  mounted() {
    this.type = this.$route.query.type;
    this.oid = this.$route.query.oid;
    this.requestOrder(this.oid);
    this.setTitle(`申请${this.refundLabel}`)
  },
};
</script>

<style lang="less" scoped>
.after-sale-submit-con {
  height: 100%;
  background: #f5f7fb;
  > .refund-scroll {
    height: 100%;
  }

  > .refund-scroll {
    overflow-y: auto;
    > .empty-top {
      height: 5px;
    }
    > .empty-bottom {
      height: 60px;
    }
    > .common {
      background: #ffffff;
      margin-bottom: 10px;
      border-radius: 10px;
      padding: 16px 18px;
      color: #140603;
      > .title {
        font-size: 16px;
        line-height: 18px;
        font-weight: bold;
        margin-bottom: 16px;
      }
    }
    > .info-con {
      .info-item {
        align-items: center;
        margin-bottom: 10px;
      }
      .info-item > .label {
        font-size: 14px;
        &::after {
          content: "*";
          color: rgba(221, 46, 65, 1);
          vertical-align: middle;
        }
      }
      .info-item > .val {
        flex: 1;
        text-align: right;
        margin-right: 5px;
        font-size: 14px;
      }
      .info-item > .placeholder {
        color: #aeaeae;
      }
      .info-item > .price {
        flex: 1;
        text-align: right;
        font-size: 16px;
        font-weight: bold;
        color: #FA9F37;
      }
    }
    > .desc-con {
      > .content {
        padding: 15px 10px;
        background: #fafafa;
        border-radius: 10px;
      }
      .content .reason-input {
        width: 100%;
        height: 75px;
        font-size: 12px;
        margin-bottom: 5px;
        resize: none;
      }
    }
  }

  > .submit-con {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 8px 16px;
    background: #ffffff;
    button{
      height: 36px;
    }
  }
}
</style>

