<script lang="ts" setup>
  import { ref, onMounted } from 'vue';
  import {
    Tabs,
    TabPane,
    Form,
    FormItem,
    Input,
    Button,
    Select,
    SelectOption,
    Row,
    Col,
    DatePicker,
    Tooltip,
    Badge,
  } from 'ant-design-vue';
  import { useData } from '/@/hooks/data/useData';
  import { useRouter } from 'vue-router';

  import { MainPage } from '/@/components/MainPage';
  import { complainListApi, complainNumsApi } from '/@/api/complaints';
  import { ComplaintsData, ComplaintsParams } from '/@/api/complaints/modal/complaintsModal';
  import moment from 'moment';

  const router = useRouter();

  onMounted(() => {
    searchForm.value.state = props.activeKey;
    initNums();
  });

  const props = defineProps<{
    activeKey: number;
  }>();
  const tabList = ref<any>([
    { name: '待处理投诉', type: 1, num: 0 },
    { name: '处理中投诉', type: 2, num: 0 },
    { name: '已处理投诉', type: 3, num: 0 },
  ]);

  const requestList = {
    list: complainListApi, // 列表接口
  };

  const searchForm = ref<ComplaintsParams>({
    state: 1,
  });

  const {
    onSearch, // 查询按钮方法
    onRset, // 重置按钮方法
    onPageChange, //  页码改变的回调
    onSizeChange, // 切换每页条数时的回调
    onSelectChange, // 多选表格选项发生改变的回调
    tableLoading, // 表格懒加载
    pager, // 分页的数据
    tableData, //  表格数据
    selectedRowKeys, // 表格多选之后的数据
    initDataList,
  } = useData<ComplaintsData, ComplaintsParams>(requestList, searchForm);

  const initNums = async () => {
    try {
      const res = await complainNumsApi();
      res.forEach((el: any) => {
        const index = tabList.value.map((e) => e.type).indexOf(el.type);
        tabList.value[index].num = el.num;
      });
    } catch (e) {
      console.log(e);
    }
  };

  const columns = [
    { title: '投诉编号', dataIndex: 'no', key: 'no', visible: true },
    { title: '平台', dataIndex: 'platform', key: 'platform', visible: true },
    { title: '投诉老师姓名', dataIndex: 'userName', key: 'userName', visible: true },
    { title: '投诉老师手机号', dataIndex: 'userMobile', key: 'userMobile', visible: true },
    { title: '投诉老师邮箱', dataIndex: 'userEmail', key: 'userEmail', visible: true },
    { title: '订单号', dataIndex: 'orderNo', key: 'orderNo', visible: true },
    {
      title: '投诉时间',
      dataIndex: 'tsTime',
      key: 'tsTime',
      visible: true,
    },
    { title: '投诉供应商', dataIndex: 'supplier', key: 'supplier', visible: true },
    {
      title: '投诉原因',
      key: 'tsReason',
      width: '240px',
      visible: true,
    },
    {
      title: '操作',
      fixed: 'right',
      key: 'action',
      width: '150px',
      visible: true,
    },
  ];

  const handleTabs = () => {
    initDataList();
    initNums();
  };

  const detailBtn = (row) => {
    router.push({ path: '/order/detail', query: { id: row.id } });
  };

  const makeBtn = (row) => {
    router.push({ path: '/complaints/detail', query: { id: row.id } });
  };
</script>

<template>
  <MainPage
    :columns="columns"
    name="待处理投诉"
    :tableData="tableData"
    @refresh="onSearch"
    :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
    :scroll="{ x: 'max-content' }"
    :loading="tableLoading"
    rowKey="id"
    :pagination="{
      current: pager.page,
      pageSize: pager.pageSize,
      total: pager.total,
      showSizeChanger: true,
      showLessItems: true,
      showQuickJumper: true,
      onChange: onPageChange,
      onShowSizeChange: onSizeChange,
      showTotal: (total, range) => `总计 ${total} 条`,
    }"
  >
    <template #searchForm>
      <Tabs v-model:activeKey="searchForm.state" @change="handleTabs">
        <TabPane v-for="tab in tabList" :key="tab.type">
          <template #tab>
            <div style="display: flex; align-items: center">
              {{ tab.name }}
              <Badge :count="tab.num" />
            </div>
          </template>
        </TabPane>
      </Tabs>
      <Form :model="searchForm" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
        <Row :gutter="20">
          <Col :xxl="4" :xl="6" :lg="8" :sm="12" :xs="24">
            <FormItem label="平台" name="platform">
              <Select
                v-model:value="searchForm.platform"
                allow-clear
                placeholder="请选择"
                style="width: 100%"
              >
                <SelectOption value="1">平台1</SelectOption>
                <SelectOption value="2">平台2</SelectOption>
              </Select>
            </FormItem>
          </Col>
          <Col :xxl="4" :xl="6" :lg="8" :sm="12" :xs="24">
            <FormItem label="投诉老师" name="userName">
              <Input
                v-model:value="searchForm.userName"
                allow-clear
                placeholder="请输入投诉老师姓名"
              />
            </FormItem>
          </Col>
          <Col :xxl="4" :xl="6" :lg="8" :sm="12" :xs="24">
            <FormItem label="手机号" name="userMobile">
              <Input
                v-model:value="searchForm.userMobile"
                allow-clear
                placeholder="请输入投诉老师手机号"
              />
            </FormItem>
          </Col>
          <Col :xxl="4" :xl="6" :lg="8" :sm="12" :xs="24">
            <FormItem label="邮箱" name="userEmail">
              <Input
                v-model:value="searchForm.userEmail"
                allow-clear
                placeholder="请输入投诉老师邮箱"
              />
            </FormItem>
          </Col>
          <Col :xxl="4" :xl="6" :lg="8" :sm="12" :xs="24">
            <FormItem label="订单号" name="orderNo">
              <Input v-model:value="searchForm.orderNo" allow-clear placeholder="请输入订单号" />
            </FormItem>
          </Col>
          <Col :xxl="4" :xl="6" :lg="8" :sm="12" :xs="24">
            <FormItem label="投诉时间" name="tsTime">
              <DatePicker
                v-model:value="searchForm.tsTime"
                allow-clear
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
              />
            </FormItem>
          </Col>
          <Col :xxl="4" :xl="6" :lg="8" :sm="12" :xs="24">
            <FormItem label="供应商" name="supplier">
              <Input v-model:value="searchForm.supplier" allow-clear placeholder="请输入供应商" />
            </FormItem>
          </Col>
          <Col :xxl="4" :xl="6" :lg="8" :sm="12" :xs="24">
            <FormItem label="投诉编号" name="no">
              <Input v-model:value="searchForm.no" allow-clear placeholder="请输入投诉编号" />
            </FormItem>
          </Col>
          <Col :span="24">
            <Button type="primary" style="margin: 0 5px" @click="onSearch">查询</Button>
            <Button style="margin: 0 5px" @click="onRset">重置</Button>
            <Button style="margin: 0 5px">导出</Button>
          </Col>
        </Row>
      </Form>
    </template>
    <template #bodyCell="{ column, record }">
      <template v-if="column.key === 'tsTime'">
        {{ moment(record.tsTime).format('YYYY-MM-DD HH:mm:ss') }}
      </template>
      <template v-if="column.key === 'tsReason'">
        <Tooltip>
          <template #title>{{ record?.tsReason }}</template>
          <div class="two-overflow">{{ record?.tsReason }}</div>
        </Tooltip>
      </template>
      <template v-if="column.key === 'action'">
        <Button type="link" @click="detailBtn(record)">查看订单详情</Button>
        <Button type="link" @click="makeBtn(record)">处理违规</Button>
      </template>
    </template>
  </MainPage>
</template>

<style lang="less" scoped>
  .complaints-page {
    //margin: 20px;

    .search-form {
      //border: 1px solid @border-color-base;
      padding-bottom: 10px;

      :deep(.ant-card-body) {
        padding: 0;
      }

      .search-header {
        background: #f7f8fc;
        padding: 5px 10px;
        display: flex;
        margin-bottom: 10px;

        .title {
          font-size: 18px;
          //font-weight: 600;
          font-family: 黑体;
          flex: 1;
        }
      }
    }
  }
</style>
