<template>
  <el-card class="order-container">
    <template #header>
      <div class="header flex items-center flex-wrap">
        <div class="flex justify-end flex-1">
          <el-select
            v-model="complaintFilter.status"
            @change="
              complaintFilter.page = 1;
              getComplaintList();
            "
          >
            <el-option label="全部" :value="-1"></el-option>
            <el-option
              v-for="(item, index) in complaintStatusToText"
              :key="index"
              :label="item"
              :value="index"
            ></el-option>
          </el-select>
          <el-button
            class="ml-2"
            type="primary"
            plain
            @click="
              complaintFilter.page = 1;
              getComplaintList();
            "
            >搜索</el-button
          >
        </div>
      </div>
    </template>
    <el-table :data="complaintList">
      <el-table-column label="订单编号" prop="orderNo"></el-table-column>
      <el-table-column label="投诉时间" prop="createAt"></el-table-column>
      <el-table-column label="投诉处理状态">
        <template #default="{ row }">
          <span
            :class="
              [
                'text-orange-500',
                'text-blue-500',
                'text-red-500',
                'text-green-500'
              ][row.status]
            "
            >{{ complaintStatusToText[row.status] }}</span
          >
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="{ row }">
          <el-button
            type="primary"
            link
            @click="
              router.push({
                path: '/myShop/order/detail',
                query: { id: row.orderNo }
              })
            "
            >查看</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      class="mt-4 justify-end"
      background
      layout="total, prev, pager, next"
      :total="complaintTotal"
      :page-size="complaintFilter.pageSize"
      @current-change="
        p => {
          complaintFilter.page = p;
          getComplaintList();
        }
      "
    />
  </el-card>
</template>

<script setup>
import { onMounted, reactive, ref } from "vue";
import { ElMessage } from "element-plus";
import { HomeFilled, Delete } from "@element-plus/icons-vue";
import { request } from "@/utils";
import { useRouter } from "vue-router";
const router = useRouter();
const state = reactive({
  loading: false,
  tableData: [], // 数据列表
  multipleSelection: [], // 选中项
  total: 0, // 总条数
  currentPage: 1, // 当前页
  pageSize: 10, // 分页大小
  orderNo: "", // 订单号
  orderStatus: -1, // 订单状态
  tradeType: -1, // 交易方式
  shopList: [],
  shopId: -1,
  payType: -1,
  // 订单状态筛选项默认值
  options: [
    {
      value: -1,
      label: "全部"
    },
    {
      value: 0,
      label: "待支付"
    },
    {
      value: 1,
      label: "已支付"
    },
    // {
    //   value: 2,
    //   label: "配货完成"
    // },
    {
      value: 3,
      label: "已发货"
    },
    {
      value: 4,
      label: "交易成功"
    },
    {
      value: 5,
      label: "用户关闭"
    },
    {
      value: 6,
      label: "超时关闭"
    },
    {
      value: 7,
      label: "商家关闭"
    }
  ]
});
const tradeTypeList = [
  {
    k: "线下",
    v: 0
  },
  {
    k: "线上",
    v: 1
  }
];
const payTypeList = {
  1: {
    k: "支付宝支付",
    v: 1
  },
  2: {
    k: "微信支付",
    v: 2
  },
  9: {
    k: "其他",
    v: 9
  }
};
const orderStatus = {
  0: "待支付",
  1: "已支付",
  3: "出库成功",
  4: "交易成功",
  5: "用户关闭",
  6: "超时关闭",
  7: "商家关闭"
};
// 初始化获取订单列表
onMounted(() => {
  getOrderList();
  // getShopList();
});

const farmatOrderMap = status => {
  return orderStatus[status] || "未知状态";
};

const getShopList = () => {
  request
    .get("/articleService/serviceProvider/shop/paginate", {
      params: {
        page: 1,
        pageSize: 9999,
        type: -1,
        status: -1
      }
    })
    .then(resp => {
      state.shopList = resp.data.list;
    });
};

// 获取列表方法
const getOrderList = () => {
  state.loading = true;
  request
    .get("/mallService/mechanism/staff/orders", {
      params: {
        page: state.currentPage,
        pageSize: state.pageSize,
        orderNo: state.orderNo,
        orderStatus: state.orderStatus,
        tradeType: state.tradeType,
        shopId: state.shopId,
        payType: state.payType
      }
    })
    .then(res => {
      state.tableData = res.data.list;
      state.total = res.data.total;
    });
};
// 触发过滤项方法
const handleOption = () => {
  state.currentPage = 1;
  getOrderList();
};
// checkbox 选择项
const handleSelectionChange = val => {
  state.multipleSelection = val;
};
// 翻页方法
const changePage = val => {
  state.currentPage = val;
  getOrderList();
};
// 完成订单
const handleCompleteOrder = ids => {
  request
    .put("/mallService/mechanism/orders/complete", {
      ids
    })
    .then(resp => {
      ElMessage.success(resp.message);
      getOrderList();
    });
};
// 配货方法
const handleConfig = id => {
  let params;
  // 当个配置
  if (id) {
    params = [id];
  } else {
    if (!state.multipleSelection.length) {
      console.log("state.multipleSelection", state.multipleSelection.length);
      ElMessage.error("请选择项");
      return;
    }
    // 多选配置
    params = state.multipleSelection.map(i => i.orderId);
  }
  request
    .put("/mallService/mechanism/orders/checkDone", {
      ids: params
    })
    .then(() => {
      ElMessage.success("配货成功");
      getOrderList();
    });
};
// 出库方法
const handleSend = id => {
  let params;
  if (id) {
    params = [id];
  } else {
    if (!state.multipleSelection.length) {
      ElMessage.error("请选择项");
      return;
    }
    params = state.multipleSelection.map(i => i.orderId);
  }
  request
    .put("/mallService/mechanism/orders/checkOut", {
      ids: params
    })
    .then(() => {
      ElMessage.success("出库成功");
      getOrderList();
    });
};
// 关闭订单方法
const handleClose = id => {
  let params;
  if (id) {
    params = [id];
  } else {
    if (!state.multipleSelection.length) {
      ElMessage.error("请选择项");
      return;
    }
    params = state.multipleSelection.map(i => i.orderId);
  }
  request
    .put("/mallService/mechanism/orders/close", {
      ids: params
    })
    .then(() => {
      ElMessage.success("关闭成功");
      getOrderList();
    });
};
const complaintStatusToText = {
  0: "待商家处理",
  1: "商家已处理",
  2: "待平台处理",
  3: "平台已处理"
};
const complaintVisible = ref(false);
const complaintList = ref([]);
const complaintWaitTotal = ref(0);
const complaintTotal = ref(0);
const complaintFilter = ref({
  page: 1,
  pageSize: 15,
  status: -1,
  isShop: 1
});
const getComplaintWaitTotal = async () => {
  const { data } = await request.get(
    `/mallService/mechanism/complaint/paginate`,
    {
      params: {
        page: 1,
        status: 2,
        pageSize: 0,
        isShop: 1
      }
    }
  );
  complaintWaitTotal.value = data.total;
};
const getComplaintList = async () => {
  const { data } = await request.get(
    `/mallService/mechanism/complaint/paginate`,
    {
      params: complaintFilter.value
    }
  );
  complaintList.value = data.list;
  complaintTotal.value = data.total;
};
getComplaintWaitTotal();
getComplaintList();
</script>
