<template>
  <div class="complaint-form bg-grey">
    <div class="form-content">
      <div class="form-item">
        <div class="form-input flex-default">
          <div class="label">投诉订单</div>
          <div class="form-model" style="width: 100%">
            <input
              class="uni-input"
              v-model="complaint.orderId"
              placeholder="请输入订单编号"
            />
          </div>
        </div>
        <!-- <div style="border-bottom: 1px solid #f1f1f1"></div>
        <div class="form-input flex-default">
          <div class="label">订单类型</div>
          <div class="form-model select-form flex-default" @click="checkType">
            <div class="value" :class="{ placeholder: !type }">
              {{ type ? OrderTypeObj[type].label : "请选择订单类型" }}
            </div>
            <div class="m-icon" />
          </div>
        </div> -->
      </div>
      <div class="form-item">
        <div class="form-input form-textarea">
          <div class="label">投诉描述</div>
          <div class="form-model">
            <textarea
              v-model="complaint.description"
              placeholder="请输入投诉描述"
            />
          </div>
        </div>
      </div>
      <div class="form-item">
        <div class="form-input form-file">
          <div class="label">附件</div>
          <m-upload type="image" :maxNum="5" v-model="fileMap" />
        </div>
      </div>
    </div>
    <div class="mycomplaint-footer" @click="handleComplaint">
      <van-button type="primary" block round>发起投诉</van-button>
    </div>

    <van-popup v-model="showPopup" position="bottom" round>
      <div class="type-popup-con">
        <div class="popup-title">
          订单类型
          <m-icon
            icon="icon-close-square"
            className="close"
            @click="showPopup = false"
            :size="18"
          />
        </div>
        <div class="type-radio">
          <div
            v-for="(item, index) of items"
            :key="`type-item-${index}`"
            class="type-radio-item flex-between"
            @click="radioChange(index, item)"
          >
            <span class="name">{{ item.name }}</span>
            <m-icon
              :icon="
                complaint.orderType == item.value
                  ? 'icon-radio-check'
                  : 'icon-radio'
              "
              :size="16"
            />
          </div>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { OrderTypeObj } from "@/enums";
export default {
  data() {
    return {
      type: null,
      items: [
        { name: "商品订单", value: "1" },
        { name: "提货订单", value: "2" },
      ],
      fileMap: {},
      complaint: {
        orderId: "",
        orderType: 1,
        description: "",
        attachments: [],
      },
      OrderTypeObj,
      showPopup: false,
    };
  },
  methods: {
    checkType() {
      this.showPopup = true;
    },
    radioChange(index, item) {
      this.showPopup = false;
      this.type = item.value;
      this.complaint.orderType = item.value;
    },
    checkForm() {
      if (!this.complaint.orderId) {
        this.$toast("请输入订单编号！");
        return false;
      }
      if (!this.complaint.orderType) {
        this.$toast("请选择订单类型！");
        return false;
      }
      if (!this.complaint.description) {
        this.$toast("请输入订单描述！");
        return false;
      }
      if (this.fileMap.image && this.fileMap.image.length != 0) {
        this.complaint.attachments = this.fileMap.image.map((f) => f.url);
      }
      if (!this.complaint.attachments.length) {
        this.$toast("请上传附件凭证！");
        return false;
      }

      return true;
    },
    handleComplaint() {
      if (!this.checkForm()) {
        return;
      }
      this.$api({
        apiName: "addComplaint",
        postData: this.complaint,
        success: () => {
          this.$hideLoading();
          setTimeout(() => {
            this.goBack();
          }, 500);
        },
      });
    },
  },
};
</script>
<style lang="less">
.complaint-form {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .form-content {
    .form-item {
      background-color: #ffffff;
      margin-bottom: 10px;
      padding: 0 16px;
      .form-input {
        height: 53px;
        align-items: center;
        color: #140603;
        .label {
          width: 87px;
          flex-shrink: 0;
          font-size: 14px;
          line-height: 14px;
        }
        .form-model {
          flex-shrink: 1;
          input {
            width: 100%;
            line-height: 14px;
            font-size: 14px;
            padding: 0;
            height: 53px;

            &::-webkit-input-placeholder {
              color: #aeaeae;
            }
          }
          &.select-form {
            justify-content: space-between;
            align-items: center;
            width: 100%;
            height: 53px;
            .m-icon {
              width: 11px;
              height: 11px;
              background-image: url(~@/assets/img/back.png);
              transform: rotate(180deg);
              background-size: 100%;
            }
            .value {
              line-height: 14px;
              font-size: 14px;
              &.placeholder {
                color: #aeaeae;
              }
            }
          }
        }
        &.form-textarea {
          padding: 20px 0;
          min-height: 117px;
          height: auto;
          .form-model {
            margin-top: 12px;
            textarea {
              width: 100% !important;
              font-size: 14px;
              line-height: 19px;
              height: 50px;
              resize: none;

              &::-webkit-input-placeholder {
                color: #aeaeae;
              }
            }
          }
        }
        &.form-file {
          padding: 20px 0;
          min-height: 140px;
          height: auto;
          .file_list {
            overflow: hidden;
            margin-top: 12px;
            .file-item {
              width: 75px;
              height: 75px;
              background-color: #f8f8f8;
              border-radius: 10px;
              margin: 0 12px 12px 0;
              float: left;
              .img_box {
                width: 100%;
                height: 100%;
              }
              &:nth-child(4n) {
                margin-right: 0;
              }
              &:last-child {
                align-items: center;
                justify-content: center;
                .add {
                  position: relative;
                  width: 23px;
                  height: 23px;
                  &::before,
                  &::after {
                    content: "";
                    position: absolute;
                    width: 100%;
                    top: 50%;
                    left: 0%;
                    background-color: #999999;
                    height: 2px;
                    margin-top: -1px;
                    border-radius: 1px;
                  }
                  &::after {
                    // margin-top: -1rpx;
                    transform: rotate(90deg);
                  }
                }
              }
            }
          }
        }
      }
    }
  }
  .mycomplaint-footer {
    background-color: #ffffff;
    flex-shrink: 0;
    z-index: 1;
    padding: 8px 16px;
    button {
      height: 36px;
      font-size: 16px;
    }
  }

  .type-popup-con {
    height: 340px;
    width: 100%;
    border-radius: 10px 10px 0 0;
    background-color: #ffffff;
    padding: 16px;
    .popup-title {
      text-align: center;
      font-size: 16px;
      font-weight: bold;
      line-height: 22px;
      position: relative;
      .m-icon {
        width: 15px !important;
        position: absolute;
        right: 0;
      }
    }
    .type-radio {
      margin-top: 30px;
      .type-radio-item {
        margin-bottom: 30px;
        .name {
          font-size: 14px;
          line-height: 20px;
          color: #140603;
          // height: 20px;
        }
      }
    }
  }
}
</style>
