<template>
  <div class="refund-express-con">
    <div class="express-scroll">
      <div class="empty-top" />
      <refund-goods :type="RefundType.GOODS" :list="goodsList" />
      <div class="info-con common">
        <div class="title">退款信息</div>
        <div class="item">
          <div class="label">物流单号</div>
          <input
            class="val"
            placeholder="请填写"
            v-model="form.returnExpressNo"
          />
          <m-icon icon="icon-more-light" :size="10" />
        </div>
        <div class="item" @click="showCo = true">
          <div class="label">物流公司</div>
          <div class="val">
            <div v-if="expressName">{{ expressName }}</div>
            <div v-else class="input-placeholder">请选择</div>
          </div>
          <m-icon icon="icon-more-light" :size="10" />
        </div>
      </div>
      <div class="empty-bottom" />
    </div>
    <div class="footer flex-default">
      <van-button block round type="primary" @click="handleSubmit">提 交</van-button>
    </div>

    <refund-info-popup
      v-model="showCo"
      title="物流公司"
      :list="coList"
      @select="expressSelect"
    />
  </div>
</template>

<script>
import RefundGoods from "./components/refund-goods.vue";
import RefundInfoPopup from "./components/refund-info-popup.vue";
import { RefundType, RefundTypeObj } from "@/enums";
export default {
  components: { RefundGoods, RefundInfoPopup },
  data() {
    return {
      RefundType,
      showCo: false,
      coList: [
        { label: "顺丰", val: "shunfeng" },
        { label: "EMS", val: "ems" },
        { label: "圆通", val: "yuantong" },
        { label: "中通", val: "zhongtong" },
      ],
      goodsList: [],
      form: {
        orderDeliveryId: "",
        returnExpressNo: "",
        simpleName: "",
      },
      expressName: "",
    };
  },
  methods: {
    requestData(oid) {
      this.$showLoading();
      this.$api({
        apiName: RefundTypeObj[RefundType.GOODS].detailApi,
        postData: oid,
        success: (res) => {
          let { thumb, skuProps, name } = res.skuVo;
          let propList = skuProps.map((s) => {
            return {
              name: s.propKey,
              value: s.propVal,
            };
          });
          this.goodsList = [{ thumb, name, propList }];
        },
        complete: () => {
          this.$hideLoading();
        },
      });
    },
    expressSelect(index, item) {
      this.expressName = item.label;
      this.form.simpleName = item.val;
    },
    handleSubmit() {
      if (!this.form.returnExpressNo) {
        return this.$toast("请填写物流单号！");
      } else if (!this.form.simpleName) {
        return this.$toast("请选择物流公司！");
      }
      this.$showLoading();
      this.$api({
        apiName: "addDeliveryRefundExpressNo",
        postData: this.form,
        success: () => {
          this.$toast("提交成功~");
          setTimeout(() => {
            this.goBack()
          }, 300);
        },
        complete: () => {
          this.$hideLoading();
        },
      });
    },
  },
  mounted(option) {
    let { oid } = this.$route.query;
    this.form.orderDeliveryId = oid;
    this.requestData(oid);
  },
};
</script>

<style lang="less">
.refund-express-con {
  height: 100%;
  background: #f5f7fb;
  > .express-scroll {
    height: 100%;
  }
  > .footer {
    position: fixed;
    width: 100%;
    bottom: 0;
    background: #ffffff;
    height: 52px;
    padding: 0 16px;
    align-items: center;
    button{
      height: 36px;
    }
  }
}
.refund-express-con > .express-scroll {
  overflow-y: auto;
  > .empty-top {
    height: 5px;
  }
  > .empty-bottom {
    height: 52px;
  }
  > .common {
    background: #ffffff;
    padding: 16px 18px;
    border-radius: 10px;
  }
  > .info-con {
    > .title {
      font-size: 16px;
      line-height: 18px;
      margin-bottom: 18px;
      color: #140603;
      font-weight: bold;
    }
    .item {
      display: flex;
      align-items: center;
      margin-bottom: 10px;
      &:nth-last-of-type(1) {
        margin-bottom: 0;
      }
    }
    .item .label {
      width: 75px;
      color: #140603;
      font-size: 14px;
      &::after {
        content: "*";
        color: rgba(221, 46, 65, 1);
        vertical-align: middle;
      }
    }
    .item .val {
      flex: 1;
      font-size: 14px;
      text-align: right;
      margin-right: 5px;
      color: #140603;
    }
    .item .input-placeholder {
      color: #aeaeae;
    }
  }
}
</style>
