<template>
  <!-- 售后申请退款 -->
  <div>
    <div class="header wrapper_1200">
      <span class="home">
        <nuxt-link to="/">首页 ></nuxt-link>订单详情 >
      </span>申请退款
    </div>
    <div class="refund wrapper_1200">
      <table class="table">
        <thead>
          <tr>
            <td>
              <table border="0" class="tableHead">
                <tr>
                  <td class="td checkboxs" v-if="orderData.cartInfo.length>1">
                    <el-checkbox v-model="isAllSelect" @change="checkboxAllChange">全选</el-checkbox>
                  </td>
                  <td class="td pictrue">商品信息</td>
                  <td class="td">商品价格</td>
                  <td class="td">已购件数</td>
                  <td class="td" style="text-align: center">退款件数</td>
                </tr>
              </table>
            </td>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>
              <el-checkbox-group v-model="checkedlist" @change="checkboxChange">
                <table border="0" class="tableHead">
                  <tr v-for="(item, index) in orderData.cartInfo" :key="index">
                    <td class="td checkboxs" v-if="orderData.cartInfo.length>1">
                      <el-checkbox :label="item.id">{{item.valNull}}</el-checkbox>
                    </td>
                    <td class="td pictrue">
                      <table border="0">
                        <tr>
                          <td class="acea-row row-center-wrapper">
                            <img
                              :src="item.productInfo.attrInfo?item.productInfo.attrInfo.image:item.productInfo.image"
                            />
                            <div>
                              <div class="name">
                                {{ item.productInfo.store_name
                                }}
                                <template
                                  v-if="item.productInfo.attrInfo"
                                >{{ item.productInfo.attrInfo.suk }}</template>
                              </div>
                            </div>
                          </td>
                        </tr>
                      </table>
                    </td>
                    <td
                      class="td"
                    >{{ item.productInfo.attrInfo?item.productInfo.attrInfo.price:item.productInfo.price}}</td>
                    <td class="td">{{ item.cart_num }}</td>
                    <td class="td">
                      <div class="cartNum acea-row row-center-wrapper">
                        <div
                          class="iconfont icon-shangpinshuliang-jian on"
                          v-if="item.changeRefund===1 || item.changeRefund===0"
                        ></div>
                        <div
                          class="iconfont icon-shangpinshuliang-jian"
                          v-else
                          @click="subCart(item)"
                        ></div>
                        <div class="numCon">{{item.changeRefund}}</div>
                        <div
                          class="iconfont icon-shangpinshuliang-jia on"
                          v-if="item.changeRefund===item.refundable"
                        ></div>
                        <div
                          class="iconfont icon-shangpinshuliang-jia"
                          v-else
                          @click="addCart(item)"
                        ></div>
                      </div>
                    </td>
                  </tr>
                </table>
              </el-checkbox-group>
            </td>
          </tr>
        </tbody>
      </table>
      <client-only>
        <el-form ref="form" :model="form" label-width="80px">
          <div class="cont">
            <el-form-item label="退款原因">
              <el-select v-model="form.region" placeholder="请选择退款原因">
                <el-option
                  :label="item"
                  :value="item"
                  v-for="(item, index) in refundArray"
                  :key="index"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              label="退款类型"
              v-if="
                orderData._status &&
                orderData._status._type !== 1
              "
            >
              <el-radio-group v-model="refund_type">
                <el-radio
                  :label="item.value"
                  v-for="(item, index) in returnGoodsData"
                  :key="index"
                >{{item.label}}</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="备注说明">
              <el-input
                type="textarea"
                placeholder="填写备注信息，100字以内"
                :autosize="{ minRows: 4 }"
                maxlength="100"
                v-model="form.desc"
              ></el-input>
            </el-form-item>
            <el-form-item label="上传凭证">
              <div class="img-box-wrapper">
                <el-upload
                  list-type="picture-card"
                  :action="upLoadUrl"
                  :headers="myHeaders"
                  :limit="3"
                  :on-remove="handleRemove"
                  :on-success="handleSuccess"
                  :on-exceed="handleExceed"
                  :before-upload="beforeUpload"
                >
                  <i class="el-icon-plus"></i>
                </el-upload>
              </div>
              <p style="color: #999;">最多上传3张图片</p>
            </el-form-item>
          </div>
          <div class="buttonSub acea-row row-between-wrapper">
            <div>共退货{{refundNum}}件商品</div>
            <el-button type="primary" @click="onSubmit">申请退款</el-button>
          </div>
        </el-form>
      </client-only>
    </div>
    <!-- 弹窗 -->
    <client-only>
      <el-dialog :modal="true" :visible.sync="isDialog" width="370px" :show-close="false">
        <div class="refund-box">
          <img src="~assets/images/refund.png" alt />
          <p class="title">退款申请提交成功</p>
          <span>我们会继续为您提供更优质的商品及服务</span>
          <el-button type="primary" @click="subBtn">确认</el-button>
        </div>
      </el-dialog>
    </client-only>
  </div>
</template>

<script>
import setting from "~/setting";
export default {
  auth: "guest",
  data() {
    return {
      form: {
        region: "",
        desc: ""
      },
      upLoadUrl: setting.apiBaseURL + "/upload/image",
      pics: [],
      refundArray: [],
      orderData: {},
      myHeaders: {},
      isDialog: false,
      refund_type: "1",
      returnGoodsData: [
        {
          label: "退款",
          value: "1"
        },
        {
          label: "退货退款",
          value: "2"
        }
      ],
      orderId: "",
      oid: 0,
      isAllSelect: false,
      checkedlist: [],
      checkOptions: [],
      refundNum: 0
    };
  },
  async asyncData({ app, query }) {
    let [data, refund, ids, numCon] = await Promise.all([
      app.$axios.post(`/pc/order/refund/cart_info`, {
        id: query.id,
        cart_ids: query.cartIds
      }),
      app.$axios.get(`/order/refund/reason`),
      [],
      0
    ]);
    data.data.cartInfo.forEach((item, index) => {
      let num = parseInt(item.cart_num) - parseInt(item.refund_num);
      item.changeRefund = num;
      item.refundable = num;
      item.valNull = "";
      ids.push(item.id);
      if (data.data.cartInfo.length === 1) {
        numCon = num;
      }
      if (item.is_gift) {
        data.data.cartInfo.splice(index, 1);
      }
    });
    return {
      orderData: data.data,
      refundArray: refund.data,
      orderId: query.orderId,
      oid: query.id,
      checkOptions: ids,
      refundNum: numCon
    };
  },
  fetch({ store }) {
    store.commit("isHeader", true);
    store.commit("isFooter", true);
  },
  head() {
    return {
      title: "申请退款-" + this.$store.state.titleCon
    };
  },
  created() {
    let local = this.$cookies.get("auth.strategy");
    this.myHeaders = {
      Authorization: this.$cookies.get(`auth._token.${local}`)
    };
  },
  methods: {
    checkboxAllChange(val) {
      this.checkedlist = val ? this.checkOptions : [];
      if (val) {
        let num = 0;
        this.orderData.cartInfo.forEach(item => {
          num = num + item.changeRefund;
        });
        this.refundNum = num;
      } else {
        this.refundNum = 0;
      }
    },
    checkboxChange(value) {
      let cartInfo = this.orderData.cartInfo,
        num = 0;
      let checkedCount = value.length;
      this.isAllSelect = checkedCount === cartInfo.length;
      cartInfo.forEach(i => {
        value.forEach(j => {
          if (i.id == j) {
            num = num + i.changeRefund;
          }
        });
      });
      this.refundNum = num;
    },
    inArray: function(search, array) {
      for (let i in array) {
        if (array[i] == search) {
          return true;
        }
      }
      return false;
    },
    subCart(item) {
      item.changeRefund = item.changeRefund - 1;
      if (item.changeRefund <= 1) {
        item.changeRefund = 1;
      }
      if (
        this.inArray(item.id, this.checkedlist) ||
        this.orderData.cartInfo.length === 1
      ) {
        this.refundNum = this.refundNum - 1;
      }
    },
    addCart(item) {
      item.changeRefund = item.changeRefund + 1;
      if (item.changeRefund >= item.refundable) {
        item.changeRefund = item.refundable;
      }
      if (
        this.inArray(item.id, this.checkedlist) ||
        this.orderData.cartInfo.length === 1
      ) {
        this.refundNum = this.refundNum + 1;
      }
    },
    handleClose() {
      this.isDialog = false;
    },
    subBtn() {
      this.isDialog = false;
      return this.$router.replace({
        path: "/user/orderList",
        query: { types: 1 }
      });
    },
    onSubmit() {
      let that = this;
      if (that.form.region === "") {
        return this.$message.error("请选择退款原因");
      }
      let cartIds = [],
        cartInfo = this.orderData.cartInfo;
      if (cartInfo.length === 1) {
        cartIds = [
          {
            cart_id: cartInfo[0].id,
            cart_num: cartInfo[0].changeRefund
          }
        ];
      } else if (cartInfo.length > 1) {
        console.log("uuu", cartInfo.length);
        if (!that.checkedlist.length)
          return this.$message.error("请选择要退款的商品");
        cartInfo.forEach(i => {
          that.checkedlist.forEach(j => {
            if (i.id == j) {
              cartIds.push({
                cart_id: i.id,
                cart_num: i.changeRefund
              });
            }
          });
        });
      }
      that.$axios
        .post(`/order/refund/apply/${this.oid}`, {
          text: that.form.region || "",
          refund_reason_wap_explain: that.form.desc,
          refund_reason_wap_img: that.pics.join(","),
          uni: that.orderData.orderId,
          refund_type: that.refund_type,
          cart_ids: cartIds
        })
        .then(res => {
          this.isDialog = true;
        })
        .catch(err => {
          return this.$message.error(err);
        });
    },
    handleExceed() {
      this.$message.warning("最多上传3张图片");
    },
    handleSuccess(response) {
      if (response.status === 200) {
        this.pics.push(response.data.url);
      } else if (response.status === 400) {
        this.$message.error(response.msg);
      }
    },
    beforeUpload(file) {
      const isImage = file.type === "image/jpeg" || file.type === "image/png";
      if (!isImage) {
        this.$message.error("上传图片只能是 JPG、PNG 格式!");
      }
      return isImage;
    },
    handleRemove(file, fileList) {
      this.pics = [];
      fileList.forEach(item => {
        this.pics.push(item.response.data.url);
      });
    }
  }
};
</script>

<style lang="scss" scoped>
/deep/.el-checkbox__inner {
  border-radius: 50%;
}
/deep/.el-checkbox__input.is-focus .el-checkbox__inner {
  border-color: #dcdfe6;
}
/deep/.el-checkbox__input.is-checked .el-checkbox__inner {
  border-color: #e93323;
}
.buttonSub {
  margin-top: 20px;
}
.header {
  height: 60px;
  line-height: 60px;
  color: #999999;
  .home {
    color: #282828;
  }
}
.cartNum {
  .iconfont {
    width: 40px;
    height: 36px;
    line-height: 36px;
    border: 1px solid #d3d3d3;
    text-align: center;
    color: #707070;
    background-color: #fff;
    &.on {
      color: #d3d3d3;
    }
  }
  .numCon {
    width: 54px;
    height: 36px;
    border: 0;
    border-top: 1px solid #d3d3d3;
    border-bottom: 1px solid #d3d3d3;
    font-size: 15px;
    color: #5a5a5a;
    text-align: center;
    line-height: 36px;
    outline: none;
  }
}
.refund {
  padding: 40px 20px 46px;
  background: #ffffff;

  .el-icon-plus {
    margin-top: 20px;
  }

  .table {
    width: 100%;
    border: 1px solid #efefef;
    border-collapse: collapse;

    thead {
      background: #efefef;
      .tableHead {
        width: 100%;
      }
      .td {
        width: 183px;
        height: 40px;
        font-size: 14px;
        text-align: left;
        color: #282828;
        &.checkboxs {
          padding-left: 21px;
          width: 115px;
        }
        &.pictrue {
          width: auto;
          text-align: left;
          padding-left: 35px;
        }
      }
    }

    tbody {
      .tableHead {
        width: 100%;
      }
      .td {
        width: 183px;
        font-size: 14px;
        text-align: left;
        color: #282828;
        padding: 20px 0;

        &.checkboxs {
          width: 115px;
          padding-left: 21px;
        }

        &.pictrue {
          width: auto;
          text-align: left;
          padding-left: 35px;

          span {
            margin-left: 10px;
            font-size: 12px;
            color: #b1b1b1;
          }
        }
      }
    }

    img {
      float: left;
      width: 70px;
      height: 70px;
      border: 1px solid #eee;
      border-radius: 5px;

      + div {
        margin-left: 20px;
      }
    }

    .name {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      margin-bottom: 13px;
      overflow: hidden;
      width: 345px;
    }
  }

  .el-form {
    margin-top: 20px;

    .cont {
      padding-right: 25px;
      padding-left: 25px;
      border: 1px solid #efefef;

      .el-form-item {
        padding-top: 25px;
        padding-bottom: 25px;

        ~ .el-form-item {
          border-top: 1px solid #efefef;
        }
      }
    }

    > .el-form-item {
      margin-top: 25px;
      margin-bottom: 0;
      text-align: right;
    }

    .el-textarea {
      width: 820px;
    }

    /deep/.el-textarea__inner {
      border: none;
      background: #f7f7f7;
    }

    /deep/.el-upload--picture-card {
      width: 70px;
      height: 70px;
      border-style: solid;
      line-height: 68px;
    }

    /deep/.el-upload-list--picture-card .el-upload-list__item {
      width: 70px;
      height: 70px;
    }
  }
}
.refund-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  .title {
    color: #e93323;
    font-size: 20px;
    margin-top: 20px;
  }
  span {
    margin: 10px 0 40px;
    color: #939393;
    font-size: 14px;
  }
  button {
    width: 150px;
  }
}
.img-box-wrapper {
  display: flex;
  flex-wrap: wrap;
  .img-item {
    position: relative;
    width: 70px;
    height: 70px;
    margin-right: 20px;
    margin-bottom: 12px;
    border: 1px solid #c0ccda;
    border-radius: 6px;
    img {
      width: 100%;
      height: 100%;
      border-radius: 6px;
    }
    .icon {
      position: absolute;
      right: -10px;
      top: -8px;
      font-size: 20px;
      cursor: pointer;
      color: #e93323;
    }
  }
}
</style>
