<template>
  <div>
    <el-dialog width="1000px" top="5vh" title="订单详情" :modal-append-to-body="false" :close-on-click-modal="false"
      :visible.sync="visible">
      <el-form v-loading="loading" :model="dataForm" ref="dataForm">
        <el-steps :active="currStep" align-center>
          <el-step v-for="(item, index) in stepList" :title="item.label" :key="index"
            :description="item.time"></el-step>
        </el-steps>
        <div class="title">
          {{ dataForm.rightsType == 5 ? "退款商品" : "退货商品" }}
        </div>
        <el-table :data="dataForm.rightsChildOrders" border style="width: 100%">
          <el-table-column prop="date" label="商品图片" width="180" align="center">
            <template slot-scope="scope">
              <el-image style="width: 100px; height: auto" :src="scope.row.productCover"
                :preview-src-list="[scope.row.productCover]">
              </el-image>
            </template>
          </el-table-column>
          <el-table-column prop="productTitle" label="商品名称" width="180" align="center">
          </el-table-column>
          <el-table-column prop="skuSetName" label="属性" width="180" align="center">
          </el-table-column>
          <el-table-column prop="refundNum" label="数量" width="80" align="center">
          </el-table-column>
          <el-table-column prop="refundMoney" label="退款小计" align="center">
          </el-table-column>
          <el-table-column prop="num" label="收货数量" align="center" width="200" v-if="currType == 'receive'">
            <template slot-scope="scope">
              <el-form-item label="" :prop="'rightsChildOrders.' + scope.$index + '.num'" :rules="[
                {
                  required: true,
                  message: '请输入收货数量',
                  trigger: 'blur',
                },
              ]">
                <el-input-number style="width:100px;" :step="1" :precision="0" :min="1" v-model="scope.row.num"
                  controls-position="right" />
              </el-form-item>
            </template>
          </el-table-column>
        </el-table>
        <div class="count">
          运费：<label>￥{{ dataForm.shopOrderVo && dataForm.shopOrderVo.shippingFee || 0 }}</label> ， 退款合计：<label>￥{{
            dataForm.refundMoney }}</label>
        </div>
        <div>
          <div class="title">维权单信息</div>
          <el-row class="ht40 border">
            <el-col :span="4" class="br-left">
              <span>维权单号</span>
            </el-col>
            <el-col :span="18" class="br-right">
              <span>{{ dataForm.rightsCode }}</span>
            </el-col>
          </el-row>
          <el-row class="ht40 border">
            <el-col :span="4" class="br-left">
              <span>申请状态</span>
            </el-col>
            <el-col :span="18" class="br-right">
              <span>
                <el-tag effect="plain" type="warning" v-if="dataForm.rightsRefundStatus == 0">待退款</el-tag>
                <el-tag effect="plain" type="success" v-if="dataForm.rightsRefundStatus == 1">退款成功</el-tag>
                <el-tag effect="plain" type="danger" v-if="dataForm.rightsRefundStatus == 2">退款失败</el-tag>
              </span>
            </el-col>
          </el-row>
          <el-row class="ht40 border">
            <el-col :span="4" class="br-left">
              <span>订单编号</span>
            </el-col>
            <el-col :span="18" class="br-right">
              <span>{{ dataForm.orderNo }}</span>
            </el-col>
          </el-row>
          <!-- 				<el-row class="ht40 border">
					<el-col :span="4" class="br-left">
						<span>订单金额</span>
					</el-col>
					<el-col :span="18" class="br-right">
						<span>¥200.00</span>
					</el-col>
				</el-row> -->
          <el-row class="ht40 border">
            <el-col :span="4" class="br-left">
              <span>退款金额</span>
            </el-col>
            <el-col :span="18" class="br-right">
              <span>¥{{ dataForm.refundMoney }}</span>
            </el-col>
          </el-row>
          <el-row class="ht40 border">
            <el-col :span="4" class="br-left">
              <span>退款积分</span>
            </el-col>
            <el-col :span="18" class="br-right">
              <span>{{ dataForm.refundPoint }}</span>
            </el-col>
          </el-row>
          <el-row class="ht40 border">
            <el-col :span="4" class="br-left">
              <span>申请时间</span>
            </el-col>
            <el-col :span="18" class="br-right">
              <span>{{ dataForm.createTime }}</span>
            </el-col>
          </el-row>
          <!-- 				<el-row class="ht40 border">
					<el-col :span="4" class="br-left">
						<span>用户账号</span>
					</el-col>
					<el-col :span="18" class="br-right">
						<span>{{dataForm.mobile}}</span>
					</el-col>
				</el-row> -->
          <!-- 				<el-row class="ht40 border">
					<el-col :span="4" class="br-left">
						<span>联系人</span>
					</el-col>
					<el-col :span="18" class="br-right">
						<span>大梨</span>
					</el-col>
				</el-row> -->
          <el-row class="ht40 border">
            <el-col :span="4" class="br-left">
              <span>下单人电话</span>
            </el-col>
            <el-col :span="18" class="br-right">
              <span>{{ dataForm.mobile }}</span>
            </el-col>
          </el-row>
          <el-row class="ht40 border" v-if="dataForm.orderType == 1">
            <el-col :span="4" class="br-left">
              <span>收货人姓名</span>
            </el-col>
            <el-col :span="18" class="br-right">
              <span>{{ dataForm.receiver }}</span>
            </el-col>
          </el-row>
          <el-row class="ht40 border" v-if="dataForm.orderType == 2">
            <el-col :span="4" class="br-left">
              <span>服务人姓名</span>
            </el-col>
            <el-col :span="18" class="br-right">
              <span>{{ dataForm.receiver }}</span>
            </el-col>
          </el-row>
          <el-row class="ht40 border">
            <el-col :span="4" class="br-left">
              <span>收货人电话</span>
            </el-col>
            <el-col :span="18" class="br-right">
              <span>{{ dataForm.receiverMobile }}</span>
            </el-col>
          </el-row>
          <el-row class="ht40 border">
            <el-col :span="4" class="br-left">
              <span>售后原因</span>
            </el-col>
            <el-col :span="18" class="br-right">
              <span>{{ dataForm.reason }}</span>
            </el-col>
          </el-row>
          <el-row class="ht40 border">
            <el-col :span="4" class="br-left">
              <span>问题描述</span>
            </el-col>
            <el-col :span="18" class="br-right">
              <span>{{ dataForm.caption }}</span>
            </el-col>
          </el-row>
          <el-row class="border row-img" v-if="dataForm.voucherImages && dataForm.voucherImages.length > 0">
            <el-col :span="4" class="br-left">
              <span>凭证照片</span>
            </el-col>
            <el-col :span="18" class="br-right">
              <div>
                <el-image style="width: 100px; height: auto" v-for="(item, i) in dataForm.voucherImages" :key="i"
                  :src="item" :preview-src-list="dataForm.voucherImages">
                </el-image>
              </div>
            </el-col>
          </el-row>
          <el-row class="ht40 border" v-if="dataForm.rightsRefundStatus != 0">
            <el-col :span="4" class="br-left">
              <span>处理备注</span>
            </el-col>
            <el-col :span="18" class="br-right">
              <span>{{
                dataForm.rightsRefundStatus == 1
                  ? "已同意退款"
                  : dataForm.rightsRefundStatus == 2
                    ? "退款失败"
                    : ""
              }}</span>
            </el-col>
          </el-row>
        </div>
      </el-form>
      <span slot="footer" class="dialog-footer" v-if="currType != 'view'">
        <template v-if="currType != 'receive'">
          <el-button type="primary" @click="operate('agree')">{{
            dataForm.rightsType == 5 ? "同意退款" : "同意退货"
          }}</el-button>
          <el-button @click="dataSubmit()">{{
            dataForm.rightsType == 5 ? "拒绝退款" : "退拒绝货"
          }}</el-button>
        </template>
        <el-button type="primary" @click="handleReceive('receive')" v-else>收货</el-button>
      </span>
    </el-dialog>

    <!-- 拒绝退货 -->
    <el-dialog :title="dataForm.rightsType == 5 ? '拒绝退款' : '退拒绝货'" :modal-append-to-body="true"
      :close-on-click-modal="false" :visible.sync="visibleApply" width="30%">
      <el-form :model="dataForm" label-width="80px">
        <el-form-item label="拒绝理由">
          <el-select placeholder="请选择理由" v-model="reason_txt">
            <el-option v-for="item in reason" :key="item.name" :label="item.name" :value="item.name"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="其他" v-if="reason_txt == '其他'">
          <el-input type="textarea" v-model="reason_other_txt" :rows="{ min: 3 }" maxlength="50"
            placeholder="请输入理由"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="visibleApply = false">取消</el-button>
        <el-button type="primary" @click="operate('refuse')">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  shopOrderAfterSaleInfo,
  shopOrderAfterSaleAgree,
  shopOrderAfterSaleReject,
  shopOrderAfterSaleReceive,
} from "@/api/order.js";
export default {
  data() {
    return {
      reason: [
        {
          id: 1,
          name: "商品不支持退货/退款",
        },
        {
          id: 2,
          name: "退款金额不对",
        },
        {
          id: 3,
          name: "其他",
        },
      ],
      reason_txt: "",
      reason_other_txt: "",
      visible: false,
      visibleApply: false,
      refundNum: "",
      timeList: [],
      param: {
        rightsId: "",
        reason: "",
      },
      dataForm: {},
      loading: false,
      currType: "",
      currId: "",
      stepList: [],
      currStep: 0,
    };
  },
  computed: {
    roleType: {
      get() {
        return this.$store.state.user.roleType;
      },
    },
  },
  methods: {
    dataSubmit() {
      this.visible = false;
      this.visibleApply = true;
    },
    init(id, type) {
      this.dataForm = {};
      this.currId = id || null;
      this.currType = type;
      this.visible = true;
      this.searchDetail();
    },
    searchDetail() {
      this.loading = true;
      shopOrderAfterSaleInfo(this.currId)
        .then((res) => {
          if (res.data && res.code == 200) {
            this.dataForm = res.data;
            this.timeList = res.data.rightsOrderOperateRecords;
            this.param.rightsId = this.currId;
            this.dataForm.rightsChildOrders.map((item) => {
              item.num = "";
            });
            this.dataForm = JSON.parse(JSON.stringify(this.dataForm))
            this.dealStep();
          }
        }).finally(() => {
          this.loading = false;
        })
    },
    dealStep() {
      let time1 = "",
        time2 = "",
        time3 = "",
        time4 = "",
        time = "";
      this.timeList.forEach((element) => {
        if (element.rightsOperateStatus == 0) {
          time = element.createTime;
        } else if (element.rightsOperateStatus == 1) {
          time1 = element.createTime;
        } else if (element.rightsOperateStatus == 2) {
          time2 = element.createTime;
        } else if (element.rightsOperateStatus == 3) {
          time3 = element.createTime;
        } else if (element.rightsOperateStatus == 4) {
          time4 = element.createTime;
        }
      });
      this.stepList = [
        {
          label: this.dataForm.rightsType == 10 ? "退货申请" : "退款申请",
          time: time,
        },
        {
          label: "商家同意",
          time: time1,
        },
      ];
      if (this.dataForm.rightsType == 10) {
        // 退货
        this.stepList.push(
          {
            label: "买家发货",
            time: time2,
          },
          {
            label: "商家收货",
            time: time3,
          }
        );
      }
      this.stepList.push({
        label: "打款",
        time: time4,
      });
      this.currStep = this.dataForm.rightsOperateStatus + 1;
      if (this.dataForm.rightsOperateStatus > 5) {
        this.currStep = null;
      }
      if (this.dataForm.rightsOperateStatus > 7) {
        this.currStep = 5;
      }
    },

    // 同意/拒绝
    operate(type) {
      this.visible = false;
      let msg = "";
      let Api = "";
      if (type == "agree") {
        Api = shopOrderAfterSaleAgree;
        msg =
          "是否同意" +
          (this.dataForm.rightsType == 10 ? "退货申请？" : "退款申请？");
      } else {
        Api = shopOrderAfterSaleReject;
        msg =
          "是否拒绝" +
          (this.dataForm.rightsType == 10 ? "退货申请？" : "退款申请？");
        if (!this.reason_txt) {
          this.$message.warning("请选择理由后提交!");
          return;
        }
        this.param.reason = this.reason_txt;
        if (this.param.reason == "其他") {
          if (this.reason_other_txt) {
            this.param.reason = this.reason_other_txt;
          } else {
            this.$message.warning("请填写理由后提交!");
            return;
          }
        }
      }
      this.$confirm(msg, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          Api(this.param).then((res) => {
            if (res.code == 200) {
              this.$message.success("操作成功！");
              this.visible = false;
              this.$emit("result");
            }
          })
        })
        .catch(() => {
        }).finally(() => {
          this.visibleApply = false;
        })
    },
    handleReceive() {
      this.$refs.dataForm.validate((valid) => {
        if (valid) {
          // 收货
          this.$confirm("确定收货?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
              // let obj=JSON.parse(JSON.stringify(this.dataForm))
              shopOrderAfterSaleReceive({
                rightsId: this.currId,
                rightsInStockList: this.dataForm.rightsChildOrders.map(
                  (item) => {
                    return {
                      num: item.num,
                      rightsChildOrderId: item.id,
                    };
                  }
                ),
              }).then((res) => {
                console.log('shopOrderAfterSaleReceive  = ', res);
                if (res.code == 200) {
                  this.$message.success("收货成功！");
                  this.visible = false;
                  this.$emit("result");
                }
              })
            })
            .catch(() => { });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.ht40 {
  height: 40px;
  line-height: 38px;
}

.border {
  border: 1px solid #cccccc;
  margin-bottom: -1px;
}

.br-left {
  border-right: 1px solid #cccccc;
  text-align: center;
}

.br-right {
  padding-left: 10px;
}

.count {
  padding: 10px 20px;
  text-align: right;
  border: 1px solid #ebeef5;
  border-top: unset;

  label {
    font-weight: bold;
    color: #f04844;
  }
}

.mr10 {
  margin-right: 10px;
}

.row-img {
  height: 100px;
  line-height: 100px;
}

.title {
  margin: 15px auto;
  padding-left: 15px;
  line-height: 14px;
  border-left: 4px solid #17b3a3;
  color: #333333;
}

::v-deep .el-dialog__body {
  max-height: 800px;
  overflow-y: scroll;
}
</style>
