<template>
  <div class="app-container after-sale-detail">
    <el-card>
      <!-- 仅退款 -->
      <div v-if="asOrderType == 1" class="as-step-info">
        <el-steps :active="step" align-center>
          <el-step title="买家提出售后申请"></el-step>
          <el-step :title="onlyStep2"></el-step>
          <el-step :title="onlyStep3"></el-step>
        </el-steps>
      </div>
      <!-- 退货退款 -->
      <div v-if="asOrderType == 2" class="as-step-info">
        <el-steps :active="step" align-center>
          <el-step title="买家提出售后申请"></el-step>
          <el-step :title="refundStep2"></el-step>
          <el-step :title="refundStep3"></el-step>
          <el-step :title="refundStep4" v-if="has45 === 4"></el-step>
          <el-step :title="refundStep5" v-if="has45 > 4"></el-step>
        </el-steps>
      </div>
    </el-card>

    <el-card class="as-order-details">
      <!-- 倒计时 提示 -->
      <p class="count-down-con" v-if="!(asOrderDetail.status == 5 || asOrderDetail.status == -1)"><i class="spec-icon-w el-icon-warning"></i>剩余处理时间： <span class="cd-time-span">{{ cdHour }} 小时 {{ cdMinute }} 分</span> 请在72小时内处理，逾期不处理，系统将自动退款到买家账户</p>
      <!-- 售后信息 -->
      <div>
        <div class="card-header-title">
          <span class="blue-block blue-block-goods-title"></span>售后信息
        </div>
        <div>
          <el-row class="row-title">
            <el-col :span="3" class="text-r">售后类型</el-col>
            <el-col :span="9" class="text-l">{{ refundTypeFormatter(asOrderDetail.refund_type) }}</el-col>
          </el-row>
          <el-row class="row-title">
            <el-col :span="3" class="text-r">申请金额</el-col>
            <el-col :span="9" class="text-l">{{ asOrderDetail.apply_price }}</el-col>
          </el-row>
          <el-row class="row-title">
            <el-col :span="3" class="text-r">申请原因</el-col>
            <el-col :span="9" class="text-l">{{ reasonFormatter(asOrderDetail.reason) }}</el-col>
          </el-row>
          <el-row class="row-title">
            <el-col :span="3" class="text-r">申请说明</el-col>
            <el-col :span="9" class="text-l">{{ asOrderDetail.content }}</el-col>
          </el-row>
          <el-row class="row-title-pic">
            <el-col :span="3" class="text-r">申请图片</el-col>
            <el-col :span="9" class="text-l">
              <div v-if="asSrcList.length > 0">
                <el-image
                  style="width: 70px; height: 70px;border:1px solid #eee;margin-right:10px;"
                  v-for="(itemSrc,index) in asSrcList"
                  :src="itemSrc"
                  :preview-src-list="asSrcList">
                </el-image>
              </div>
              <p v-else style="color:#999">暂无图片</p>
            </el-col>
          </el-row>
        </div>
      </div>
      <!-- 订单信息 -->
      <div>
        <div class="card-header-title">
          <span class="blue-block blue-block-goods-title"></span>订单信息
        </div>
        <div>
          <el-row class="row-title">
            <el-col :span="3" class="text-r">订单状态</el-col>
            <el-col :span="6" class="text-l">{{ GDSFormatter(goodsOrderDetail.goods_status) }}</el-col>
            <el-col :span="3" class="text-r">商品名称</el-col>
            <el-col :span="6" class="text-l">{{ goodsOrderDetail.title }}</el-col>
          </el-row>
          <el-row class="row-title">
            <el-col :span="3" class="text-r">订单编号</el-col>
            <el-col :span="6" class="text-l">{{ goodsOrderDetail.goods_order_sn }}</el-col>
            <el-col :span="3" class="text-r">商品规格</el-col>
            <el-col :span="6" class="text-l">{{ goodsOrderDetail.goods_option_title }}</el-col>
          </el-row>
          <el-row class="row-title">
            <el-col :span="3" class="text-r">商品金额</el-col>
            <el-col :span="6" class="text-l">{{ goodsOrderDetail.goods_price }}</el-col>
            <el-col :span="3" class="text-r">商品数量</el-col>
            <el-col :span="6" class="text-l">{{ goodsOrderDetail.total }}</el-col>
          </el-row>
        </div>
      </div>
      <!-- 历史售后申请 -->
      <div>
        <div class="card-header-title">
          <span class="blue-block blue-block-goods-title"></span>历史售后申请
        </div>
        <el-table :data="asApplyList">
          <el-table-column label="申请时间" align="center" prop="created_time">
            <template slot-scope="scope">
              {{formatter(scope.row.created_time)}}
            </template>
          </el-table-column>

          <el-table-column label="退换货类型" align="center" width="180" prop="refund_type">
            <template slot-scope="scope">
              {{ refundTypeFormatter(scope.row.refund_type) }}
            </template>
          </el-table-column>

          <el-table-column label="申请金额" align="center" prop="apply_price">
            <template slot-scope="scope">
              {{scope.row.apply_price/100 }}
            </template>
          </el-table-column>
          <el-table-column label="申请原因" align="center" prop="reason">
            <template slot-scope="scope">
              {{ reasonFormatter(scope.row.reason) }}
            </template>
          </el-table-column>
          <el-table-column label="申请说明" align="center" prop="content"></el-table-column>
          <el-table-column label="处理结果" align="center">
            <template slot-scope="scope">
              {{ ASResult(scope.row) }}
            </template>
          </el-table-column>
          <el-table-column label="申请图片" align="center">
            <template slot-scope="scope">
              <div v-if="(scope.row.imgs_arr && scope.row.imgs_arr.length > 0)">
                <el-image
                  style="width: 70px; height: 70px;border:1px solid #eee;margin-right:10px;"
                  v-for="(itemSrc,index) in scope.row.imgs_arr"
                  :src="itemSrc"
                  :preview-src-list="scope.row.imgs_arr">
                </el-image>
              </div>
              <p v-else style="color:#666">暂无图片</p>
            </template>
          </el-table-column>

        </el-table>
      </div>

      <!-- 售后 操作按钮 -->
      <div class="as-handle-btn" v-if="onlyOrRefundBtnType == 1">
        <el-button class="as-btn" type="primary" @click="agreeHandle(1)" :disabled="isFinishedButtonDisabled">同意退款</el-button>
        <el-button class="as-btn" type="primary" @click="refuseHandle(2)" :disabled="isFinishedButtonDisabled">拒绝退款</el-button>
      </div>
      <div class="as-handle-btn" v-if="onlyOrRefundBtnType == 2">
        <el-button class="as-btn" type="primary" @click="agreeHandle(3)" :disabled="isFinishedButtonDisabled">同意退货退款</el-button>
        <el-button class="as-btn" type="primary" @click="refuseHandle(4)" :disabled="isFinishedButtonDisabled">拒绝退货退款</el-button>
      </div>
      <div class="as-handle-btn" v-if="onlyOrRefundBtnType == 3">
        <el-button class="as-btn" type="primary" @click="refuseHandle(4)" :disabled="isFinishedButtonDisabled">拒收包裹</el-button>
        <el-button class="as-btn" type="primary" @click="agreeHandle(1)" :disabled="isFinishedButtonDisabled">确定退款</el-button>
      </div>
    </el-card>

    <!-- 售后所有操作 对话框 -->
    <el-dialog
      :title="dialogASTypeTitle"
      :visible.sync="isASTypeDialog"
      width="50%"
      center>
      <div v-if="onlyIsAgree == 1" class="only-refund-agree">
        <p>同意退款，该订单将关闭，请您仔细核实商品发货状态以及退款金额，若因此导致的损失将由您自己承担！</p>
        <p>确定同意同款吗？</p>
        <p>确定同意退款后，将关闭该订单</p>
      </div>

      <div v-if="onlyIsAgree == 2" class="only-refund-refuse">
        <p>拒绝原因：</p>
        <p style="width:80%">
          <el-input type="textarea" v-model="onlyRefuseReason" :rows="4"></el-input>
        </p>
      </div>

      <div v-if="onlyIsAgree == 3" class="refund-agree">
        <div class="refund-agree-1">
          <p>同意退货退款，买家回填退货商品的物流单号，收到货后，请您仔细核实商品，核实无误后，点击【确定退款】按钮进行退款！若因此导致的损失将由您自己承担！</p>
          <p>确定同意退货退款吗？</p>
          <p>确定同意退货退款后，等待买家退回商品</p>
        </div>
        <div class="refund-agree-2">
          <p>选择发送退换货地址：</p>
          <p style="width:80%">
            <el-select v-model="order_refund_address" placeholder="退货地址" style="width: 80%;">
              <el-option v-for="(item,index) in asAddressOptions" :key="item.id" :label="item.info"
                         :value="item.id"></el-option>
            </el-select>
          </p>
        </div>
      </div>

      <div v-if="onlyIsAgree == 4" class="onlyIsAgree-4">
        <div class="onlyIsAgree-4-1">
          <p>拒绝原因：</p>
          <p style="width:80%">
            <el-input type="textarea" v-model="refuseReason" :rows="4"></el-input>
          </p>
        </div>

        <p>请详细说明您拒绝的原因，拒绝后售后不会结束，买家可再次申请</p>
      </div>

      <span slot="footer" class="dialog-footer">
         <el-button type="primary" @click="submitAfterSale(onlyIsAgree)" size="small">确 定</el-button>
        <el-button @click="cancelAfterSale(onlyIsAgree)" size="small">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import { getASOrderDetail, agreeRefundData, refuseRefundData,getASAdressData } from '@/api/module/retreat'
  import { dateFormat } from '@/utils'  //getASOrderDetail
  export default {
    name: "Edit",
    data() {
      return {
        // Refund only   仅退款
        // Return refund 退货退款
        timer: null,
        asGoodId: 0, // 当前 售后订单的 id
        asOrderType: 1, // 售后类型 1-仅退款； 2-退货退款
        // 仅退款 流程，每个步骤文字提示
        step: 1, // 激活 当前步骤
        onlyStep2: '卖家处理中',
        onlyStep3: '售后结束',
        // 退货退款 流程 每个步骤文字提示
        has45: 3, // 此值，控制步骤数量，是 3 步，4 步，还是 5 步
        refundStep2: '卖家处理中',
        refundStep3: '售后完成',
        refundStep4: '',
        refundStep5: '',
        cdHour: 0,
        cdMinute: 0,
        // 售后订单 信息
        asOrderDetail: {
          status: 0, // 退款状态
          refund_type: 1, // 退换货类型
          apply_price: 0, // 申请金额
          reason: 0,   // 申请原因
          content: '',   // 申请说明
          images: '',  // 申请图片
        },
        // 商品订单信息
        goodsOrderDetail: {
          goods_status: 0, // 订单状态
          goods_order_sn: '', // 订单编号
          goods_price: '', // 商品金额/售后金额
          title: '',// 商品名称
          goods_option_title: '', // 商品规格
          total: '', // 商品数量
        },
        // 售后申请 图片 list
        asSrcList: [],
        asApplyList: [],
        // 0-全部隐藏-默认状态; 1-显示 仅退款 按钮；2-显示 退货退款中（同意/拒绝 退货退款）按钮; 3-显示 退货退款中 （拒收包裹 / 确定退款） 按钮
        onlyOrRefundBtnType: 0,
        // 1-仅退款 同意退款; 2-仅退款 拒绝退款; 3-退货退款 同意退款退款; 4-; 5-
        onlyIsAgree: 0,
        dialogASTypeTitle: '',
        isASTypeDialog: false,
        onlyRefuseReason: '',
        refuseReason: '',
        sellerId: 0,
        asAddressOptions: [],
        order_refund_address:'',
        isFinishedButtonDisabled: false
      } // return end
    },
    watch: {
      $route(to,from) {
        if(this.$route.query.refund_sn) {
          this.asGoodId = this.$route.query.refund_sn;
          this.getDetail();
        }
      }
    },
    created() {
      this.sellerId = this.$store.state.user.sellerid;
      /** 获取 当前售后 订单的id */
      this.asGoodId = this.$route.query.refund_sn;
      /** 查询 售后订单详情 */
      this.getDetail();
      /** 获取 退货退款的发送 地址 */
      this.getASAdress();
    },
    mounted() {

    },
    methods: {
      /** Only 代表 仅退款
       *  售后步骤和对应文案提示,
       *  在售后订单详情 查询时，需要同步调用
       * */
      returnOnlyStatus(status,close_status) {
        // 步骤和步骤文字提示的初始化
        this.step = 1;
        this.onlyStep2 = '卖家处理中'
        this.onlyStep3 = '售后完成'
        // 卖家超时未处理，和卖家主动同意退款
        if(status === 5){
          this.step = 3
          this.onlyStep2 = '卖家同意退款'
          this.onlyStep3 = '退款完成，售后完成'
        }else if(status === -1) { // 1、卖家拒绝退款；2、买家取消售后
          if(close_status === 1) {
            this.step = 3
            this.onlyStep2 = '卖家拒绝退款'
            this.onlyStep3 = '卖家拒绝，售后关闭'
          } else if(close_status === 6) {
            this.step = 3
            this.onlyStep2 = '买家取消售后申请'
            this.onlyStep3 = '买家取消，售后关闭'
          }
        }
      },
      /** Refund 代表 退货退款
       *  售后步骤和对应文案提示,
       *  在售后订单详情 查询时，需要同步调用
       * */
      returnRefundStatus(status,close_status) {
        // 步骤和步骤文字提示的初始化
        this.has45 = 3;  // 当前售后流程有 3/4/5 步
        this.step = 1;    // 当前激活是第 几 步
        this.refundStep2 = '卖家处理中' // 第2步 对应提示
        this.refundStep3 = '售后完成'  // 第3步 对应提示
        this.refundStep4 = ''  // 第4步 对应提示
        this.refundStep5 = ''  // 第5步 对应提示

        if( status === 2 ) {
          this.has45 = 5;
          this.refundStep2 = '卖家同意退货退款'
          this.refundStep3 = '买家回填物流单号'
          this.refundStep4 = '卖家收货，确定退款'
          this.refundStep5 = '退款完成，售后完成'
          this.step = 2
        }else if (status === 3) {
          this.has45 = 5;
          this.refundStep2 = '卖家同意退货退款'
          this.refundStep3 = '买家回填物流单号'
          this.refundStep4 = '卖家收货，确定退款'
          this.refundStep5 = '退款完成，售后完成'
          this.step = 3
        }else if ( status === 4 ) {
          this.has45 = 5;
          this.refundStep2 = '卖家同意退货退款'
          this.refundStep3 = '买家回填物流单号'
          this.refundStep4 = '卖家收货，确定退款'
          this.refundStep5 = '退款完成，售后完成'
          this.step = 4
        }else if ( status === 5 ) {
          this.has45 = 5;
          this.refundStep2 = '卖家同意退货退款'
          this.refundStep3 = '买家回填物流单号'
          this.refundStep4 = '卖家收货，确定退款'
          this.refundStep5 = '退款完成，售后完成'
          this.step = 5
        }else if ( status === -1 ) {
          if( close_status === 1 ) {
            this.has45 = 3;
            this.refundStep2 = '卖家拒绝退货退款'
            this.refundStep3 = '卖家拒绝，售后关闭'
            this.refundStep4 = ''
            this.refundStep5 = ''
            this.step = 3
          }else if (close_status === 2) {
            this.has45 = 5;
            this.refundStep2 = '卖家同意退货退款'
            this.refundStep3 = '买家回填物流单号'
            this.refundStep4 = '卖家拒绝，包裹退回'
            this.refundStep5 = '卖家拒绝，售后关闭'
            this.step = 5
          }else if(close_status === 3) {
            this.has45 = 4
            this.refundStep2 = '卖家同意退货退款'
            this.refundStep3 = '买家超时未退货'
            this.refundStep4 = '买家未退货，售后关闭'
            this.refundStep5 = ''
            this.step = 4
          }else if (close_status === 6) {
            this.has45 = 3
            this.refundStep2 = '买家取消售后申请'
            this.refundStep3 = '买家取消，售后关闭'
            this.refundStep4 = ''
            this.refundStep5 = ''
            this.step = 3
          }
        }
        // return step
      },
      /** 查询订单详情*/
      getDetail() {
        getASOrderDetail({order_refund_sn: this.asGoodId}).then(res=> {
          if( res.code === 1 && res.data ) {
            // 售后订单详情
            if( res.data.order_refund ) {
              this.asOrderDetail = res.data.order_refund;
              // 先确定 售后类型
              this.asOrderType = this.asOrderDetail.refund_type
              this.cdHour = this.asOrderDetail.dead_line_hour
              this.cdMinute = this.asOrderDetail.dead_line_minute

              this.timer = setInterval(() => {
                if (this.cdHour <= 0) {
                  this.cdHour = 0
                }

                if (this.cdMinute <= 0) {
                  this.cdMinute = 0
                }

                if (this.cdMinute && this.cdHour) {
                  this.cdMinute--
                  if (this.cdMinute <= 0) {
                    this.cdMinute = 59
                    this.cdHour--
                  }
                }
              }, 60000)

              // 根据售后订单信息，判断 订单状态，显示对应按钮操作
              this.asHandleBtnType(this.asOrderDetail)
              // 金额处理
              this.asOrderDetail.apply_price = this.asOrderDetail.apply_price / 100
              this.asOrderDetail.price = this.asOrderDetail.price / 100
              // 售后图片 处理
              this.asSrcList = []
              if(this.asOrderDetail.imgs_arr && this.asOrderDetail.imgs_arr.length > 0) {
                this.asSrcList = this.asOrderDetail.imgs_arr
              }

              // 更新 售后订单 流程和状态
              // 仅退款
              if(this.asOrderDetail.refund_type == 1) {
                this.returnOnlyStatus(this.asOrderDetail.status,this.asOrderDetail.close_reason);
                this.$forceUpdate()
              }
              // 退货退款
              if(this.asOrderDetail.refund_type == 2) {
                this.returnRefundStatus(this.asOrderDetail.status,this.asOrderDetail.close_reason);
                this.$forceUpdate()
              }
            }
            // 订单 详情
            if(res.data.order_goods) {
              this.goodsOrderDetail = res.data.order_goods;
              // 商品金额 单位
              this.goodsOrderDetail.goods_price = res.data.order_goods.goods_price / 100
            }
            // 售后历史
            if(res.data.order_refund_history) {
              this.asApplyList = res.data.order_refund_history
            }
          }
        });
      },
      /** 仅退款
       * 操作按钮 类型
       * onlyOrRefundBtnType：// 1-显示 仅退款 按钮； 2-显示 退货退款中（同意/拒绝 退货退款）按钮； 3-显示 退货退款中 （拒收包裹 / 确定退款） 按钮
       * isFinishedButtonDisabled: true-售后结束-不能点击；false-可以点击
       * 每次 订单详情更新，被调用
       * */
      asHandleBtnType(row) {
        // row.refund_type 1-仅退款 ； 2-退货退款
        // row.status 退款状态-1关闭1待审核2待退货3待收货4待打款5已完成
        // row.close_reason 售后关闭原因： 1卖家拒绝退款、退货退款 2卖家拒收拒绝退款 3买家超时未退货自动关闭   6买家取消
        if( row ) {
          if(row.refund_type == 1) {
            this.onlyOrRefundBtnType = 1
          }else if(row.refund_type == 2) {
            this.onlyOrRefundBtnType = (row.status == 1) ? 2 : 3
          }else {
            this.onlyOrRefundBtnType = 0;
          }
          //
          if(row.status == 5 || row.status == -1) {
            this.isFinishedButtonDisabled = true
          }else {
            this.isFinishedButtonDisabled = false
          }
        }
      },
      /** 同意 */
      agreeHandle(type) {
        if(type == 1) {
          this.onlyIsAgree = type // 仅退款 同意退款
          this.dialogASTypeTitle = "提示";
          this.isASTypeDialog = true;
        }

        if(type ==3) {
          this.onlyIsAgree = type // 退货退款 同意退货退款
          this.dialogASTypeTitle = "提示";
          this.isASTypeDialog = true;
        }
      },
      /** 拒绝 */
      refuseHandle(type) {
        if( type== 2 ) {
          this.onlyIsAgree = type // 仅退款的 拒绝退款
          this.dialogASTypeTitle = "拒绝原因";
          this.onlyRefuseReason = '';
          this.isASTypeDialog = true;
        }
        if( type == 4 ) {
          this.onlyIsAgree = type // 4 拒绝退货退款
          this.dialogASTypeTitle = "拒绝原因";
          this.refuseReason = '';
          this.isASTypeDialog = true;
        }
      },
      /** 提交 退款 处理信息
       *
       * */
      submitAfterSale(type) {
        let params = {
          order_refund_sn: this.asGoodId
        };

        // type为1，则为，仅退款的 同意退款 操作
        if(this.onlyIsAgree == 1) {

          // 1、为了更好提示，2、预防后期接口解耦
          agreeRefundData(params).then(res=> {
            let msg = ''
            if(res.code == 1) {
              this.$message({type:'success',message:'操作成功'});
            }else {
              msg = res.message ? res.message : '操作失败'
              this.$message({type:'error',message:msg});
            }
            this.isASTypeDialog = false;
            // 更新订单
            this.getDetail();
          });
        }

        // type为2，则为，仅退款的 拒绝退款 操作
        if(this.onlyIsAgree == 2) {
          if(this.onlyRefuseReason == '') {
            this.$message({type:'warning',message: '请输入拒绝退款的原因'});
            return
          }
          params['reason'] = this.onlyRefuseReason;

          refuseRefundData(params).then(res=> {
            let msg = ''
            if(res.code == 1) {
              this.$message({type:'success',message:'操作成功'});
            }else {
              msg = res.message ? res.message : '操作失败'
              this.$message({type:'error',message:msg});
            }
            this.isASTypeDialog = false;
            // 更新订单
            this.getDetail();
          });
        } // type 2 end

        // type 为3，则为，退货退款的 同意退货退款,发送地址
        if(this.onlyIsAgree == 3) {
          if( this.order_refund_address == '' ) {
            this.$message({type:'warning',message: '请选择地址信息'});
            return
          }
          params['order_refund_address'] = this.order_refund_address;

          agreeRefundData(params).then(res=> {
            let msg = ''
            if(res.code == 1) {
              this.$message({type:'success',message:'操作成功'});
            }else {
              msg = res.message ? res.message : '操作失败'
              this.$message({type:'error',message:msg});
            }
            this.isASTypeDialog = false;
            // 更新订单
            this.getDetail();
          });
        } // type 3 end

        // type 为4，则为 退货退款的 拒绝
        if(this.onlyIsAgree == 4) {
          if(this.refuseReason == '') {
            this.$message({type:'warning',message: '请输入拒绝的原因'});
            return
          }

          params['reason'] = this.refuseReason;
          refuseRefundData(params).then(res=> {
            let msg = ''
            if(res.code == 1) {
              this.$message({type:'success',message:'操作成功'});
            }else {
              msg = res.message ? res.message : '操作失败'
              this.$message({type:'error',message:msg});
            }
            this.isASTypeDialog = false;
            // 更新订单
            this.getDetail();
          });
        } // type 4 end

        //

      },
      /**  */

      /** 取消  售后对话框 */
      cancelAfterSale(type) {
        //console.log("拒绝类型",type);
        this.isASTypeDialog = false;
      },
      /** 售后 退货退款 地址 */
      getASAdress() {
        let params = {
          page:1,
          limit:100,
          seller_id: this.sellerId
        }

        getASAdressData(params).then(res=> {
          if(res.code == 1) {
            this.asAddressOptions = res.data.list;
          }else {
            let msg = res.message ? res.message : '获取售后地址失败'
            this.$message({type:'error',message: msg});
          }
        });
      },
      /** 订单发货状态  goodsDeliveryStatus Formatter*/
      GDSFormatter(status) {
        let statusText = ''
        if(status == 0) {
          statusText = '未发货';
        }else if(status == 1) {
          statusText = '已发货';
        }else if(status == 2) {
          statusText = '已收货';
        }else if(status == 3) {
          statusText = '配货中';
        }else if(status == 4) {
          statusText = '拒收';
        }
        return statusText
      },
      /** 售后结果  */
      ASResult(row) {
        let result = ''

        if (row.status == 5) {
          result = '退款完成，售后完成'
        } else if (row.status == -1) {
          if ( row.close_reason == 1 || row.close_reason == 2) {
            result = '卖家拒绝，售后关闭'
          }else if ( row.close_reason == 3 ) {
            result = '买家未退货，售后关闭'
          }else if (row.close_reason == 6) {
            result = '买家取消，售后关闭'
          }
        }

        return result
      },
      /** 售后 申请原因 */
      reasonFormatter(type) {
        let reasonText = ''
        if ( type == 1 ) {
          reasonText = '其他'
        } else if( type == 2 ) {
          reasonText = '漏发'
        }else if( type == 3 ) {
          reasonText = '协商一致'
        }else if( type == 4 ) {
          reasonText = '质量不符'
        }
        return reasonText
      },
      /** 售后类型 */
      refundTypeFormatter(type) {
        let typeText = ''
        if (type == 1) {
          typeText = '仅退款'
        } else if(type == 2) {
          typeText = '退货退款'
        }
        return typeText
      },
      /** 时间戳转化 格式化 */
      formatter(time) {
        return dateFormat(time * 1000, 'Y-m-d H:i:s')
      },
    },
    destroyed() {
      // clearInterval(this.timer)
    }
  }
</script>

<style scoped>
  .after-sale-detail {
    overflow: auto;
  }
  .as-detail-title {
    text-align: center;
    margin: 10px 0 20px;
    padding: 0 0 20px;
    font-size: 18px;
    border-bottom: 1px solid #eee;
  }

  .as-order-details {
    margin-top: 20px;
  }

  .card-header-title {
    line-height: 24px;
    font-size: 18px;
    color: #000;
    font-weight: bold;
    margin: 20px 0;
  }

  .blue-block {
    display: inline-block;
    width: 5px;
    height: 24px;
    background: #3A84FF;
    margin: 0 9px 0 0;
    border-radius: 2px;
    vertical-align: bottom;
  }

  /* 售后信息 表格 样式 */
  /deep/.el-col {
    /*border: 1px solid #eee;*/
    /*padding: 0 10px;*/
    /*height: 38px;*/
    /*display: flex;*/
    /*align-items: center;*/
  }

  .row-title,.row-title-pic {
    font-size: 14px;
    color: #333;
  }

  .row-title .text-r,.row-title .text-l {
    border: 1px solid #eee;
    padding: 0 10px;
    height: 38px;
    display: flex;
    align-items: center;
  }

  .row-title-pic .text-r,.row-title-pic .text-l{
    border: 1px solid #eee;
    padding: 0 10px;
    height: 98px;
    display: flex;
    align-items: center;
  }

  .text-r {
    justify-content: flex-end;
    background: #F7F8FA;
  }

  .text-l {
    text-align: left;
  }

  .count-down-con {
    padding: 10px 20px;
    margin: 0;
    color: #333;
    font-size: 14px;
    font-weight: 400;
    background: #FFF5ED;
    border: 1px solid #F1914E;
  }

  .spec-icon-w {
    color: #E6A23C;
    padding: 0 5px;
  }

  .cd-time-span {
    margin: 0 10px;
  }

  .as-handle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .only-refund-agree {
    margin: 0 50px;
  }
  .only-refund-agree > p{
    text-align: center;
    line-height: 30px;
  }

  .only-refund-refuse {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
  }

  .refund-agree .refund-agree-1 > p {
    text-align: center;
    line-height: 30px;
  }

  .refund-agree > .refund-agree-2{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
  }

  .onlyIsAgree-4 > .onlyIsAgree-4-1 {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
  }

  .onlyIsAgree-4 > p {
    text-align: center;
    line-height: 30px;
  }

  .as-btn {
    margin: 40px 20px 20px;
  }

  .no-bd-t {
    border-top: 0!important;
  }
  .no-bd-r {
    border-right: 0!important;
  }
  .no-bd-b {
    border-bottom: 0!important;
  }
  .no-bd-l {
    border-left: 0!important;
  }
</style>
