<script lang="ts" setup>
  import { onMounted, ref } from 'vue';
  import {
    Tabs,
    TabPane,
    Form,
    FormItem,
    Input,
    Button,
    Select,
    SelectOption,
    Row,
    Col,
    Table,
    Badge,
  } from 'ant-design-vue';
  import { useData } from '/@/hooks/data/useData';
  import { useRouter } from 'vue-router';
  import { MainPage } from '/@/components/MainPage';
  import { arbitrateListApi, arbitrateNumsApi } from '/@/api/arbitration';
  import { ArbitrationData, ArbitrationParams } from '/@/api/arbitration/model/arbitrationModel';

  const router = useRouter();

  const tabList = ref([
    { name: '待处理仲裁', type: 1, num: 0 },
    { name: '已处理仲裁', type: 3, num: 0 },
  ]);

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

  const props = defineProps<{
    state: 1 | 2;
  }>();

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

  const initNums = async () => {
    try {
      const res = await arbitrateNumsApi();
      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 searchForm = ref<ArbitrationParams>({
    state: 1,
  });

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

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

  const columns = [
    { title: '订单号', dataIndex: 'orderNo', key: 'orderNo', visible: true },
    { title: '平台', dataIndex: 'platform', key: 'platform', visible: true },
    {
      title: '商品分类',
      dataIndex: 'goodsType',
      key: 'goodsType',
      visible: true,
    },
    { title: '供货商', dataIndex: 'supplier', key: 'supplier', visible: true },
    {
      title: '商品名称',
      dataIndex: 'goods',
      key: 'goods',
      visible: true,
    },
    {
      title: '课题组/课题卡信息',
      dataIndex: 'topicGroup',
      key: 'topicGroup',
      visible: true,
    },
    { title: '订单状态', dataIndex: 'orderState', key: 'orderState', visible: true },
    {
      title: '订单提交信息',
      dataIndex: 'orderSendReq',
      key: 'orderSendReq',
      visible: true,
    },
    {
      title: '验货/签收信息',
      key: 'expPerson',
      visible: true,
    },
    {
      title: '单据信息',
      key: 'sendTrackingNo',
      visible: true,
    },
    {
      title: '操作',
      fixed: 'right',
      key: 'action',
      width: '150px',
      visible: true,
    },
  ];

  const innerColumns = [
    { title: '品名', dataIndex: 'chineseName', key: 'chineseName' },
    { title: '品牌', dataIndex: 'brand', key: 'brand' },
    { title: '货号', dataIndex: 'goodsNo', key: 'goodsNo' },
    { title: '包装规格', dataIndex: 'spec', key: 'spec' },
    { title: '价格信息', dataIndex: 'sku', key: 'sku' },
    { title: '管控类别', dataIndex: 'aaaaa', key: 'aaaaa' },
  ];

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

  const makeBtn = (row) => {
    router.push({ path: '/arbitration/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="key_">
              <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="key_">
              <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="key_">
              <Input
                v-model:value="searchForm.sendTrackingNo"
                allow-clear
                placeholder="请输入配送单号"
              />
            </FormItem>
          </Col>
          <Col :xxl="4" :xl="6" :lg="8" :sm="12" :xs="24">
            <FormItem label="商品名称" name="key_">
              <Input
                v-model:value="searchForm.goodsName"
                allow-clear
                placeholder="请输入商品名称"
              />
            </FormItem>
          </Col>
          <Col :xxl="4" :xl="6" :lg="8" :sm="12" :xs="24">
            <FormItem label="供货商" name="key_">
              <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="key_">
              <Input v-model:value="searchForm.topicGroup" allow-clear placeholder="请输入课题组" />
            </FormItem>
          </Col>
          <Col :xxl="4" :xl="6" :lg="8" :sm="12" :xs="24">
            <FormItem label="课题卡号" name="key_">
              <Input
                v-model:value="searchForm.topicCardNo"
                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 #expandedRowRender="{ record }">
      <Table :columns="innerColumns" :data-source="record.goods" row-key="id" :pagination="false" />
    </template>
    <template #bodyCell="{ column, record }">
      <template v-if="column.key === 'goodsType'">
        <div v-if="record.goods && record.goods.length">
          {{ record.goods[0].type }}—— {{ record.goods[0].secondLevelCategory }}——
          {{ record.goods[0].thirdLevelCategory }}
        </div>
      </template>
      <template v-if="column.key === 'goods'">
        <div v-if="record.goods && record.goods.length">
          <div>品名：{{ record.goods[0].chineseName }}</div>
          <div>品牌：{{ record.goods[0].brand }}</div>
          <div>货号：{{ record.goods[0].goodsNo }}</div>
          <div>包装规格：{{ record.goods[0].spec }}</div>
          <div>价格信息：{{ record.goods[0].sku }}</div>
          <div>管控类别：{{ record.goods[0].aaaaa }}</div>
        </div>
      </template>
      <template v-if="column.key === 'topicGroup'">
        <div>
          <div>课题组：{{ record.topicGroup }}</div>
          <div>课题负责人：{{ record.topicDelegate }}</div>
          <div>联系方式：{{ record.topicMt }}</div>
          <div>课题卡号：{{ record.topicCardNo }}</div>
        </div>
      </template>
      <template v-if="column.key === 'orderSendReq'">
        <div>
          <div>请购人信息：{{ record.orderSendReq }}</div>
          <div>课题负责人：{{ record.topicDelegate }}</div>
          <div>
            提交人信息：{{ record.orderSendRes }}
            <!--          &nbsp;&nbsp;&nbsp;&nbsp;-->
            <!--          {{ record.orderSendReq }}-->
          </div>
          <div>订单提交时间：{{ record.orderSendTime }}</div>
        </div>
      </template>
      <template v-if="column.key === 'expPerson'">
        <div>
          <div>验货人：{{ record.expPerson }}</div>
          <div>验货时间：{{ record.expTime }}</div>
          <div>签收人：{{ record.signPerson }}</div>
          <div>签收时间：{{ record.signTime }}</div>
          <div>收货地址：{{ record.recieveAddress }}</div>
        </div>
      </template>
      <template v-if="column.key === 'sendTrackingNo'">
        <div>
          <div>配送单号：{{ record.sendTrackingNo }}</div>
          <div>老师结算单号：{{ record.teacherSettleNo }}</div>
          <div>供货商结算单号：{{ record.supplierSettleNo }}</div>
        </div>
      </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>
