<template>
  <el-container class="aftersale-detail">
    <el-main>
      <div class="warm-tip sa-m-b-16">
        温馨提示
        <br />1、如果同意申请，请发送正确的退货地址给买家
        <br />2、如果拒绝申请，请发送给买家拒绝理由
      </div>
      <el-row class="aftersale-content sa-m-b-16" :gutter="10">
        <el-col class="sa-col-8 left" :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
          <div class="status-text sa-m-b-4">
            {{ detail.data.aftersale_status_text }}
          </div>
          <div class="tip sa-m-b-16">
            {{ detail.data.aftersale_status_desc }}
          </div>
          <div class="tools-content">
            <template v-if="detail.data.aftersale_status == 0 || detail.data.aftersale_status == 1">
              <el-button
                v-auth="'shop.admin.order.aftersale.refund'"
                type="primary"
                @click="refund(detail.data)"
                >售后退款</el-button
              >
              <el-button
                v-auth="'shop.admin.order.aftersale.refuse'"
                @click="refuse(detail.data.id)"
                >拒绝售后</el-button
              >
              <el-button
                v-auth="'shop.admin.order.aftersale.completed'"
                class="is-link"
                type="primary"
                @click="completed(detail.data.id)"
                >售后完成</el-button
              >
            </template>
          </div>
        </el-col>
        <el-col class="sa-col-16 right" :xs="24" :sm="24" :md="16" :lg="16" :xl="16">
          <status-steps :detailData="detail.data" />
        </el-col>
      </el-row>

      <div class="refund-content sa-m-b-26">
        <div class="title sa-m-b-16">售后详情</div>
        <el-row :gutter="10">
          <el-col class="sa-col-12" :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
            <div class="subtitle sa-m-b-12">交易信息</div>
            <div class="sa-flex sa-m-b-8">
              <div class="label">用户信息：</div>
              <div class="content">
                <sa-user-profile
                  :user="detail.data.user"
                  :id="detail.data.user_id"
                  :isAvatar="false"
                />
              </div>
            </div>
            <div class="sa-flex sa-m-b-8">
              <div class="label">订单编号：</div>
              <div class="content">
                <template v-if="detail.data.order">
                  {{ detail.data.order.order_sn }}
                  <el-button
                    class="is-link sa-m-l-4"
                    type="primary"
                    size="small"
                    @click="useClip(detail.data.order.order_sn)"
                    >复制</el-button
                  >
                </template>
                <template v-else>{{ detail.data.order_id }}</template>
              </div>
            </div>
            <div class="sa-flex sa-m-b-8">
              <div class="label">物流状态：</div>
              <div class="content">{{ detail.data.dispatch_status_text }}</div>
            </div>
            <div class="sa-flex sa-m-b-8">
              <div class="label">订单实付：</div>
              <div class="content">¥{{ detail.data?.order?.pay_fee }}</div>
            </div>
            <div class="sa-flex sa-m-b-8">
              <div class="label">订单运费：</div>
              <div class="content"> ¥{{ detail.data?.order?.dispatch_amount }} </div>
            </div>
            <div class="sa-flex sa-m-b-8">
              <div class="label">订单优惠：</div>
              <div class="content"> ¥{{ detail.data?.order?.total_discount_fee }} </div>
            </div>
            <div class="sa-flex sa-m-b-8">
              <div class="label">商品运费：</div>
              <div class="content">¥{{ detail.data.dispatch_fee }}</div>
            </div>
            <div class="sa-flex sa-m-b-8">
              <div class="label">商品优惠：</div>
              <div class="content">¥{{ detail.data.discount_fee }}</div>
            </div>
            <div class="sa-flex sa-m-b-8">
              <div class="label">建议退款：</div>
              <div class="content">¥{{ detail.data.suggest_refund_fee }}</div>
            </div>
          </el-col>
          <el-col class="sa-col-12" :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
            <div class="subtitle sa-m-b-12">售后信息</div>
            <div class="sa-flex sa-m-b-8">
              <div class="label">售后单号：</div>
              <div class="content">
                {{ detail.data.aftersale_sn }}
                <el-button
                  class="is-link sa-m-l-4"
                  type="primary"
                  size="small"
                  @click="useClip(detail.data.aftersale_sn)"
                  >复制</el-button
                >
              </div>
            </div>
            <div class="sa-flex sa-m-b-8">
              <div class="label">申请时间：</div>
              <div class="content">{{ detail.data.create_time }}</div>
            </div>
            <div class="sa-flex sa-m-b-8">
              <div class="label">联系电话：</div>
              <div class="content">{{ detail.data.mobile || '-' }}</div>
            </div>
            <div class="sa-flex sa-m-b-8">
              <div class="label">售后类型：</div>
              <div class="content sa-color--danger">
                {{ detail.data.type_text }}
              </div>
            </div>
            <div class="sa-flex sa-m-b-8">
              <div class="label">实际退款：</div>
              <div class="content sa-color--danger"> ¥{{ detail.data.refund_fee }} </div>
            </div>
            <div class="sa-flex sa-m-b-8">
              <div class="label">申请原因：</div>
              <div class="content"> {{ detail.data.reason }} </div>
            </div>
            <div class="sa-flex sa-m-b-8">
              <div class="label">相关描述：</div>
              <div class="content" v-html="detail.data.content"></div>
            </div>
          </el-col>
          <el-col class="sa-col-12 right" :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
            <div class="subtitle sa-m-b-12">商品信息</div>
            <goods-item
              :goods="{
                image: detail.data.goods_image,
                title: detail.data.goods_title,
                price: detail.data.goods_price,
                num: detail.data.goods_num,
                sku_text: detail.data.goods_sku_text,
              }"
              mode="aftersale-detail"
            ></goods-item>
          </el-col>
        </el-row>
      </div>
      <div class="log-content">
        <div class="title sa-flex sa-row-between">
          <div class="label">协商记录</div>
          <el-button
            v-auth="'shop.admin.order.aftersale.addlog'"
            class="is-link"
            type="primary"
            @click="addLog(detail.data.id)"
            >点击回复</el-button
          >
        </div>
        <div
          class="log-item sa-flex sa-col-top sa-m-l-12"
          v-for="(log, index) in detail.data.logs"
          :key="log"
        >
          <sa-image v-if="log.oper" :url="log.oper.avatar" size="48" radius="24"></sa-image>
          <div class="sa-m-l-12">
            <div class="name sa-m-b-4">{{ log.oper.name }}</div>
            <div class="create-time sa-m-b-8">{{ log.create_time }}</div>
            <div class="log-type-text sa-m-b-8">{{ log.log_type_text }}</div>
            <div
              v-if="index < detail.data.logs.length - 1"
              class="content sa-m-b-8"
              v-html="log.content"
            ></div>
            <div class="sa-flex">
              <template v-for="img in log.images" :key="img">
                <sa-preview class="sa-m-r-8" :url="img" size="48"></sa-preview>
              </template>
            </div>
          </div>
        </div>
      </div>
    </el-main>
  </el-container>
</template>
<script setup>
  import { onMounted, reactive, ref } from 'vue';
  import { api } from '../order.service';
  import { useModal } from '@/sheep/hooks';
  import useClip from '@/sheep/utils/clipboard.js';
  import GoodsItem from '@/app/shop/components/goods-item.vue';
  import AftersaleRefuse from './refuse.vue';
  import AftersaleRefund from './refund.vue';
  import AftersaleAddLog from './addLog.vue';
  import StatusSteps from './components/status-steps.vue';

  const props = defineProps(['modal']);

  const detail = reactive({
    data: {},
  });

  async function getDetail() {
    const { code, data } = await api.aftersale.detail(props.modal.params.id);
    code == '200' && (detail.data = data);
  }

  function refuse(id) {
    useModal(
      AftersaleRefuse,
      {
        title: '拒绝售后',
        id,
      },
      {
        confirm: () => {
          getDetail();
        },
      },
    );
  }
  function refund(data) {
    useModal(
      AftersaleRefund,
      {
        title: '售后退款',
        data,
      },
      {
        confirm: () => {
          getDetail();
        },
      },
    );
  }
  async function completed(id) {
    await api.aftersale.completed(id);
    getDetail();
  }

  function addLog(id) {
    useModal(
      AftersaleAddLog,
      {
        title: '回复买家',
        id,
      },
      {
        confirm: () => {
          getDetail();
        },
      },
    );
  }
  onMounted(() => {
    getDetail();
  });
</script>
<style lang="scss" scoped>
  .aftersale-detail {
    .warm-tip {
      line-height: 16px;
      font-size: 12px;
      color: var(--sa-subfont);
    }
    .aftersale-content {
      padding: var(--sa-padding);
      background: var(--sa-background-hex-hover);
      border-radius: 8px;
      .left {
        .status-text {
          line-height: 24px;
          font-size: 18px;
          font-weight: 600;
          color: var(--sa-title);
        }
        .tip {
          line-height: 16px;
          font-size: 12px;
          color: var(--sa-subfont);
        }
        .tools-content {
          line-height: 32px;
        }
      }
    }
    .refund-content {
      padding: var(--sa-padding) var(--sa-padding) 0;
      background: var(--sa-background-hex-hover);
      border-radius: 8px;
      .el-col {
        margin-bottom: var(--sa-padding);
      }
      .title {
        line-height: 20px;
        font-size: 16px;
        font-weight: 600;
        color: var(--sa-title);
      }
      .subtitle {
        line-height: 18px;
        font-size: 14px;
        font-weight: 500;
        color: var(--sa-title);
      }
      .label {
        line-height: 16px;
        font-size: 12px;
        color: var(--sa-subfont);
      }
      .content {
        line-height: 16px;
        font-size: 12px;
        color: var(--sa-subtitle);
        display: flex;
        align-items: center;
      }
    }
    .log-content {
      padding: 0 var(--sa-padding);
      .title {
        height: 16px;
        line-height: 16px;
        font-size: 16px;
        color: var(--sa-subtitle);
        overflow: hidden;
      }
      .log-item {
        padding: 16px 0;
        border-bottom: 1px solid var(--sa-space);
        .name,
        .create-time {
          line-height: 16px;
          font-size: 12px;
          color: var(--sa-subfont);
        }
        .name {
          font-weight: 500;
        }
        .create-time {
          font-weight: 400;
        }
        .log-type-text {
          line-height: 16px;
          font-size: 12px;
          font-weight: 500;
          color: var(--sa-subtitle);
        }
        .content {
          line-height: 16px;
          font-size: 12px;
          color: var(--sa-subtitle);
        }
      }
    }
    .copy {
      cursor: pointer;
      color: var(--el-color-primary);
    }
    :deep() {
      .el-steps {
        flex: 1;
        max-width: 400px;
        .el-step__line {
          background-color: var(--sa-place);
          top: 15px;
        }
        .el-step__head {
          &.is-finish {
            .el-step__icon {
              background: var(--el-color-primary);
              color: var(--sa-background-assist);
              border: 1px solid var(--el-color-primary);
            }
          }
          .el-step__icon {
            background: var(--sa-place);
            color: var(--sa-background-assist);
            border: 1px solid var(--sa-table-header-bg);
            width: 32px;
            height: 32px;
          }
        }
        .el-step__title {
          color: var(--sa-subfont);
          font-weight: 400;
          &.is-finish {
            color: var(--sa-subtitle);
          }
        }
        .el-step__description {
          color: var(--sa-subfont);
        }
      }
    }
  }
</style>
