<template>
  <div class="order-list">
    <BasicTable @register="registerTable">
      <template #toolbar>
        <div style="width: 100%; padding: 2px" class="flex-row-center-space">
          <RadioGroup button-style="solid" v-model:value="radioVal" @change="handleRadioChange">
            <RadioButton v-for="item in activityStatusList" :key="item.value" :value="item.value">{{
              item.label
            }}</RadioButton>
          </RadioGroup>
          <div class="flex-row">
            <Button :type="'primary'" @click="handleAdd">导入</Button>
            <Button :type="'primary'" style="margin-left: 16px;" @click="handleAdd">新增</Button>
          </div>
        </div>
      </template>
      <template #userinfo="{ text, record }">
        <div class="flex-row">
          <Image style="width: 40px;height: 40px;" src="https://dating-agency-test.oss-accelerate.aliyuncs.com/B96BAC02B145C2D.png" />
          <div class="flex-col" style="margin-left: 8px;">
            <div class="flex-row">
              <span style="font-size: 14px;color: #333;">用户昵称</span>
              <span style="font-size: 13px;color: #666;margin: 0 12px;">(ID：23762736)</span>
            </div>
            <div class="flex-row">
              <span style="font-size: 13px;color: #666;">30岁</span>
              <span style="font-size: 13px;color: #666;margin-left: 12px;">大专</span>
              <span style="font-size: 13px;color: #666;margin-left: 12px;">离异</span>
              <span style="font-size: 13px;color: #666;margin-left: 12px;">销售</span>
            </div>
          </div>
        </div>
      </template>
      <template #action="{ record }">
        <TableAction
          :actions="[
            {
              label: '详情',
              onClick: toDetail.bind(null, record),
            },
          ]"
        />
      </template>
    </BasicTable>
    <ClueModal @register="registerModal" @success="handleSuccess" />
  </div>
</template>

<script lang="ts">
  import { Radio } from 'ant-design-vue'

  export default {
    name: 'ClueList',
    components: { RadioGroup: Radio.Group, RadioButton: Radio.Button },
  }
</script>
<script setup lang="ts">
  import moment from 'moment/moment'
  import { computed, ref } from 'vue'
  import { Card, Image, Button } from 'ant-design-vue'
  import { useRouter } from 'vue-router'
  import { tableColumns, tableFormSchema } from './data'
  import { useModal } from '/@/components/Modal'
  import { BasicTable, useTable, TableAction } from '/@/components/Table'
  import ClueModal from './modal.vue'
  import { getCluePage } from '/@/api/clue'

  const radioVal = ref<any>('')

  const activityStatusList = [
    { label: '未开始', value: 1, color: 'orange' },
    { label: '报名中', value: 2, color: 'blue' },
    { label: '全部', value: '' },
  ]

  const [registerTable, { reload, setPagination }] = useTable({
    bordered: true,
    useSearchForm: true,
    columns: tableColumns,
    showIndexColumn: true,
    showTableSetting: false,
    api: getCluePage,
    formConfig: {
      labelWidth: 120,
      schemas: tableFormSchema,
    },
    // beforeFetch: (arg) => {
    //   const { orderTime } = arg
    //   if (orderTime) {
    //     arg.orderTimeFrom = moment(orderTime[0]).format('YYYY-MM-DD 00:00:00')
    //     arg.orderTimeTo = moment(orderTime[1]).format('YYYY-MM-DD 23:59:59')
    //     delete arg.orderTime
    //   }
    // },
    actionColumn: {
      width: 160,
      title: '操作',
      fixed: 'right',
      dataIndex: 'action',
      slots: { customRender: 'action' },
    },
  })

  function handleRadioChange() {
    setPagination({ current: 1 })
    reload()
  }

  const [registerModal, { openModal, closeModal }] = useModal()
  function handleAdd() {
    openModal(true, {
      ifUpdate: false,
    })
  }
// 操作成功
  function handleSuccess() {
    closeModal()
    reload()
  }
  
  const router = useRouter()
  function toDetail(record: any) {
    const { miId } = record
    router.push({
      query: { miId },
      path: '/clue/customer',
    })
  }
</script>
<style scoped lang="less">
</style>
