<template>
  <div>
    <el-card class="!border-none" v-loading="pager.loading" shadow="never">
      <el-form class="mb-[-16px]" inline>
        <el-form-item label="订单编号" prop="company_id">
          <el-input
            class="w-[280px]"
            v-model="queryParams.order_sn"
            clearable
            placeholder="请输入订单编号"
          />
        </el-form-item>
        <el-form-item label="商家名称" prop="company_id">
          <el-input
            class="w-[280px]"
            v-model="queryParams.shop_name"
            clearable
            placeholder="请输入商家名称"
          />
        </el-form-item>
        <el-form-item label="商家电话" prop="company_id">
          <el-input
            class="w-[280px]"
            v-model="queryParams.shop_phone"
            clearable
            placeholder="请输入商家电话"
          />
        </el-form-item>
        <el-form-item label="商家地址" prop="company_id">
          <el-input
            class="w-[280px]"
            v-model="queryParams.shop_address"
            clearable
            placeholder="请输入商家地址"
          />
        </el-form-item>
        <el-form-item label="收件人" prop="company_id">
          <el-input
            class="w-[280px]"
            v-model="queryParams.receiver_name"
            clearable
            placeholder="请输入收件人"
          />
        </el-form-item>

        <el-form-item label="收件人电话" prop="company_id">
          <el-input
            class="w-[280px]"
            v-model="queryParams.receiver_phone"
            clearable
            placeholder="请输入收件人电话"
          />
        </el-form-item>
        <el-form-item label="配送人员" prop="company_id">
          <el-input
            class="w-[280px]"
            v-model="queryParams.courier_name"
            clearable
            placeholder="请输入配送人员姓名"
          />
        </el-form-item>
        <el-form-item label="所属公司" prop="company_id">
          <el-input
            class="w-[280px]"
            v-model="queryParams.courier_company"
            clearable
            placeholder="请输入所属公司地址"
          />
        </el-form-item>
        <el-form-item label="村/镇/小队" prop="company_id">
          <el-input
            class="w-[280px]"
            v-model="queryParams.receiver_address"
            clearable
            placeholder="请输入村/镇/小队"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="resetPage">查询</el-button>
          <el-button @click="resetParams">重置</el-button>
        </el-form-item>
      </el-form>
      <div class="mt-4">
        <el-table
          :data="pager.lists"
          :default-sort="{ prop: 'create_time', order: 'descending' }"
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            label="订单编号"
            :width="250"
            prop="order_sn"
            show-overflow-tooltip
          />
          <el-table-column
            label="商户名称"
            prop="shop_name"
            show-overflow-tooltip
          />
          <el-table-column
            label="收货人"
            prop="receiver_name"
            show-overflow-tooltip
          />
          <el-table-column
            label="收货人号码"
            prop="receiver_phone"
            show-overflow-tooltip
          />
          <el-table-column
            label="收货地址"
            prop="receiver_address"
            show-overflow-tooltip
          />
          <el-table-column
            label="商品数量"
            prop="product_count"
            align="center"
            show-overflow-tooltip
          />

          <el-table-column
            label="下单时间"
            sortable
            prop="create_time"
            show-overflow-tooltip
          />

          <el-table-column
            label="订单状态"
            :filters="[
              { text: '待取货', value: '0' },
              { text: '配送中', value: '1' },
              { text: '已配送', value: '2' },
              { text: '已取消', value: '3' },
            ]"
            :filter-method="filterHandler"
            prop="status_name"
            show-overflow-tooltip
          >
          </el-table-column>

          <el-table-column
            label="配送人员"
            prop="courier_name"
            show-overflow-tooltip
          />
          <el-table-column
            label="配送人员所属公司"
            prop="courier_company"
            show-overflow-tooltip
          />
          <el-table-column
            label="操作"
            align="center"
            width="auto"
            fixed="right"
          >
            <template #default="{ row }">
              <el-button
                type="primary"
                v-perms="['logistics.logistics/detail']"
                link
                @click="handleView(row)"
                >查看</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="flex mt-4 justify-end">
        <pagination v-model="pager" @change="getLists" />
      </div>
    </el-card>
    <edit-popup
      v-if="showEdit"
      ref="editRef"
      @success="getLists"
      @close="showEdit = false"
    />
  </div>
</template>

<script lang="ts" setup name="flowTypeLists">
import { usePaging } from "@/hooks/usePaging";
import { useDictData } from "@/hooks/useDictOptions";
import { orderList } from "@/api/logistics";
import EditPopup from "./edit.vue";
// let obj = [
//   {
//     cunid: 1,
//     zhgn: [
//       {
//         zhengid: 1,
//         dui: [1, 2, 3],
//       },

//       {
//         zhengid: 2,
//         dui: [1, 2, 3],
//       },
//     ],
//   },
//   {
//     cunid: 3,
//     zhgn: [
//       {
//         zhengid: 1,
//         dui: [1, 2, 3],
//       },

//       {
//         zhengid: 2,
//         dui: [1, 2, 3],
//       },
//     ],
//   },
// ];
interface User {
  date: string;
  name: string;
  address: string;
  tag: string;
}
const editRef = shallowRef<InstanceType<typeof EditPopup>>();
// 是否显示编辑框
const showEdit = ref(false);
// 查询条件
// 'order_sn' =>订单编号,'shop_name'=> 商家名称,'shop_phone' => 商家电话,'shop_address' => 商家地址,'user_name' => 收件人名称,'user_address' => 收件人地址,'user_phone' =>收件人电话
const queryParams = reactive({
  order_sn: "",
  shop_name: "",
  shop_phone: "",
  shop_address: "",
  receiver_name: "",
  receiver_address: "",
  receiver_phone: "",
  courier_name: "",
  courier_company: "",
});

// 选中数据
const selectData = ref<any[]>([]);

// 表格选择后回调事件
const handleSelectionChange = (val: any[]) => {
  selectData.value = val.map(({ id }) => id);
};
const filterHandler = (value: string, row: any, column: any) => {
  return row.status == value;
};
// 获取字典数据
const { dictData } = useDictData("");
// 分页相关
const { pager, getLists, resetParams, resetPage } = usePaging({
  fetchFun: orderList,
  params: queryParams,
});
const handleView = async (data: any) => {
  showEdit.value = true;
  await nextTick();
  editRef.value?.open(data.id);
};
getLists();
</script>
