<template>
  <el-container class="aftersale-view panel-block">
    <el-header class="sa-header">
      <el-tabs
        class="sa-tabs"
        v-model="filterParams.data['aftersale_list.aftersale_status']"
        @tab-change="onChangeAftersaleStatus"
      >
        <el-tab-pane
          v-for="s in type.data.aftersale_status"
          :key="s"
          :label="s.name"
          :name="s.type"
        ></el-tab-pane>
      </el-tabs>
      <div class="sa-title sa-flex sa-row-between">
        <div class="label sa-flex">
          <span class="left">售后管理</span>
          <search-condition
            :conditionLabel="filterParams.conditionLabel"
            @deleteFilter="deleteFilter"
          ></search-condition>
        </div>
        <div>
          <el-button class="sa-button-refresh" icon="RefreshRight" @click="getData()"></el-button>
          <el-button class="sa-button-refresh" icon="Search" @click="openFilter"></el-button>
        </div>
      </div>
    </el-header>
    <el-main class="sa-p-0" v-loading="loading">
      <div class="sa-table-wrap">
        <el-table
          height="100%"
          class="sa-table"
          :data="table.data"
          default-expand-all
          :span-method="arraySpanMethod"
        >
          <template #empty>
            <sa-empty />
          </template>
          <el-table-column type="expand">
            <template #default="props">
              <el-table class="sa-table expand-table" :data="props.row.aftersales" stripe>
                <el-table-column width="48"></el-table-column>
                <el-table-column min-width="280">
                  <template #default="scope">
                    <div class="aftersale_sn">
                      售后单号：{{ scope.row.aftersale_sn }}
                      <sa-svg
                        class="copy sa-m-l-4 cursor-pointer"
                        name="sa-copy"
                        @click="useClip(scope.row.aftersale_sn)"
                      ></sa-svg>
                    </div>
                    <div class="create-time"> 申请时间：{{ scope.row.create_time }} </div>
                  </template>
                </el-table-column>
                <el-table-column min-width="300">
                  <template #default="scope">
                    <goods-item
                      :goods="{
                        image: scope.row.goods_image,
                        id: scope.row.goods_id,
                        title: scope.row.goods_title,
                        price: scope.row.goods_price,
                        num: scope.row.goods_num,
                        sku_text: scope.row.goods_sku_text,
                      }"
                      :isGoods="true"
                      mode="aftersale"
                    ></goods-item>
                  </template>
                </el-table-column>
                <el-table-column min-width="130">
                  <template #default>{{ props.row.pay_fee }}</template>
                </el-table-column>
                <el-table-column prop="refund_fee" min-width="100"></el-table-column>
                <el-table-column min-width="80">
                  <template #default="scope">
                    <div :class="scope.row.aftersale_status == '-1' ? 'status--1' : ''">
                      {{ scope.row.aftersale_status_text }}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="type_text" min-width="80"></el-table-column>
                <el-table-column min-width="80">
                  <template #default="scope">
                    <el-button
                      v-auth="'shop.admin.order.aftersale.detail'"
                      class="is-link"
                      type="primary"
                      @click="detailRow(scope.row.id)"
                      >详情</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
            </template>
          </el-table-column>
          <el-table-column label="售后信息" min-width="280">
            <template #default="scope">
              <div class="order-sn sa-flex">
                订单号：{{ scope.row.order_sn }}
                <el-button
                  class="is-link sa-m-l-4"
                  type="primary"
                  size="small"
                  @click="openOrderDetail(scope.row.id)"
                  >详情</el-button
                >
              </div>
            </template>
          </el-table-column>
          <el-table-column label="商品信息" min-width="300">
            <template #default="scope">
              <div class="create-time"> 下单时间：{{ scope.row.create_time }} </div>
            </template>
          </el-table-column>
          <el-table-column label="订单实付金额" min-width="130">
            <template #default="scope">
              <sa-user-profile :user="scope.row.user" :id="scope.row.user_id" :isAvatar="false" />
            </template>
          </el-table-column>
          <el-table-column label="已退款金额" min-width="100"></el-table-column>
          <el-table-column label="处理状态" min-width="80"></el-table-column>
          <el-table-column label="售后类型" min-width="80"></el-table-column>
          <el-table-column label="操作" min-width="80"></el-table-column>
        </el-table>
      </div>
    </el-main>
    <sa-view-bar>
      <template #right>
        <sa-pagination :pageData="pageData" @updateFn="getData" />
      </template>
    </sa-view-bar>
  </el-container>
</template>
<script>
  export default {
    name: 'shop.admin.order',
  };
</script>
<script setup>
  import { onMounted, reactive, ref } from 'vue';
  import { api } from '../order.service';
  import { useModal, usePagination } from '@/sheep/hooks';
  import { useSearch } from '@/sheep/components/sa-table/sa-search/useSearch';
  import { composeFilter } from '@/sheep/utils';
  import useClip from '@/sheep/utils/clipboard.js';
  import GoodsItem from '@/app/shop/components/goods-item.vue';
  import OrderDetail from '../order/detail.vue';
  import AftersaleDetail from './detail.vue';
  import { cloneDeep } from 'lodash';

  // getType
  const type = reactive({
    data: {},
  });
  async function getType() {
    const { data } = await api.aftersale.getType();
    type.data = data;
    for (var key in data) {
      if (filterParams.tools['aftersale_list.' + key].type == 'tselect') {
        filterParams.tools['aftersale_list.' + key].options.data = data[key];
      }
    }
  }

  const filterParams = reactive({
    tools: {
      'aftersale_list.aftersale_status': { label: '订单状态', value: 'all' },
      'aftersale_list.goods_title': {
        type: 'tinput',
        label: '商品名称',
        field: 'aftersale_list.goods_title',
        value: '',
      },
      user: {
        type: 'tinputprepend',
        placeholder: '请输入查询内容',
        field: 'user',
        label: '售后用户',
        user: {
          field: 'user.nickname',
          value: '',
        },
        options: [
          {
            label: '用户昵称',
            value: 'user.nickname',
          },
          {
            label: '手机号',
            value: 'user.mobile',
          },
        ],
      },
      keyword: {
        type: 'tinputprepend',
        placeholder: '请输入查询内容',
        label: '售后信息',
        field: 'keyword',
        keyword: {
          field: 'aftersale_list.aftersale_sn',
          value: '',
        },
        options: [
          {
            label: '售后单号',
            value: 'aftersale_list.aftersale_sn',
          },
          {
            label: '售后手机号',
            value: 'aftersale_list.mobile',
          },
          {
            label: '订单编号',
            value: 'order_sn',
          },
        ],
      },
      'aftersale_list.type': {
        type: 'tselect',
        label: '售后类型',
        field: 'aftersale_list.type',
        value: '',
        options: {
          data: [],
          props: {
            label: 'name',
            value: 'type',
          },
        },
      },
      'aftersale_list.dispatch_status': {
        type: 'tselect',
        label: '发货状态',
        field: 'aftersale_list.dispatch_status',
        value: '',
        options: {
          data: [],
          props: {
            label: 'name',
            value: 'type',
          },
        },
      },
      'aftersale_list.refund_status': {
        type: 'tselect',
        label: '退款状态',
        field: 'aftersale_list.refund_status',
        value: '',
        options: {
          data: [],
          props: {
            label: 'name',
            value: 'type',
          },
        },
      },
    },
    data: {
      'aftersale_list.aftersale_status': 'all',
      'aftersale_list.goods_title': '',
      keyword: { field: 'aftersale_list.aftersale_sn', value: '' },
      user: { field: 'user.nickname', value: '' },
      'aftersale_list.type': '',
      'aftersale_list.dispatch_status': '',
      'aftersale_list.refund_status': '',
    },
    conditionLabel: {},
  });
  const { openFilter, deleteFilter } = useSearch({ filterParams, getData });

  const loading = ref(true);

  // 表格
  const table = reactive({
    data: [],
    order: '',
    sort: '',
  });

  const { pageData } = usePagination();

  // 获取数据
  async function getData(page) {
    loading.value = true;
    if (page) pageData.page = page;
    let tempSearch = cloneDeep(filterParams.data);
    let search = composeFilter(tempSearch, {
      'aftersale_list.goods_title': 'like',
      'aftersale_list.aftersale_sn': 'like',
      'aftersale_list.mobile': 'like',
      'user.nickname': 'like',
      'user.mobile': 'like',
      order_sn: 'like',
    });
    search = {
      search: JSON.stringify({
        'aftersale_list._': '',
        ...JSON.parse(search.search),
      }),
    };
    const { code, data } = await api.aftersale.list({
      page: pageData.page,
      size: pageData.size,
      ...search,
    });
    if (code == 200) {
      table.data = data.data;
      pageData.page = data.current_page;
      pageData.size = data.per_page;
      pageData.total = data.total;
    }
    loading.value = false;
  }

  function onChangeAftersaleStatus() {
    table.data = [];
    getData(1);
  }

  function openOrderDetail(id) {
    useModal(
      OrderDetail,
      {
        title: '订单详情',
        type: 'detail',
        id,
      },
      {
        confirm: () => {
          getData();
        },
      },
    );
  }

  function detailRow(id) {
    useModal(
      AftersaleDetail,
      {
        title: '售后详情',
        type: 'detail',
        id,
      },
      {
        confirm: () => {
          getData();
        },
        close: () => {
          getData();
        },
      },
    );
  }

  const arraySpanMethod = ({ row, column, rowIndex, columnIndex }) => {
    if (columnIndex == 0) {
      return [0, 0];
    } else if (columnIndex == 1) {
      return [1, 2];
    }
  };

  onMounted(() => {
    getType();
    getData();
  });
</script>
<style lang="scss" scoped>
  .aftersale-view {
    .sa-table-wrap {
      margin-left: -48px;
      overflow: hidden;
      height: 100%;
      :deep() {
        .sa-table:not(.expand-table) {
          .el-table__header-wrapper {
            margin-bottom: 4px;
          }
          tbody {
            .el-table__cell {
              background: var(--sa-background-hex-hover);
              padding: 6px 0;
            }
          }
          .el-table__expanded-cell {
            padding: 0 !important;
            .el-table__inner-wrapper {
              &::before {
                background-color: transparent;
              }
            }
          }
        }
        .expand-table {
          .el-table__header-wrapper {
            display: none;
          }
          .el-table__cell {
            background: var(--sa-background-assist) !important;
          }
        }
      }

      .order-sn {
        padding-left: 48px;
        font-size: 12px;
        color: var(--sa-subtitle);
      }
      .create-time {
        font-size: 12px;
        color: var(--sa-font);
      }
      .expand-table {
        .aftersale_sn {
          font-size: 12px;
          color: var(--sa-subtitle);
          .copy {
            width: 12px !important;
            height: 12px !important;
            color: var(--el-color-primary);
          }
        }
        .create-time {
          font-size: 12px;
          color: var(--sa-subfont);
        }
        .status--1 {
          color: #ff4d4f;
        }
      }
    }
  }
</style>
