<script setup lang="tsx">
import { reactive, ref, unref } from 'vue'
// import { getOrderList, assignSalesman, getOrderDetail } from '@/api/order'
import { getOrderList, getOrderDetail } from '@/api/order'
import { useTable } from '@/hooks/web/useTable'
import { Table, TableColumn } from '@/components/Table'
import { ContentWrap } from '@/components/ContentWrap'
import { FormSchema } from '@/components/Form'
import { Search } from '@/components/Search'
import { searchTime } from '@/utils/searchTime'
import { searchOrder } from '@/api/order/types'
import { ElTabs, ElTabPane, ElButton, ElDivider, ElDrawer } from 'element-plus'
import Detail from './components/Detail.vue'
import Draft from './components/Draft.vue'
import addItem from './components/addItem.vue'
const { tableRegister, tableState, tableMethods } = useTable({
  fetchDataApi: async () => {
    const res = await getOrderList({
      ...searchParams.value,
      page: unref(currentPage) || 1,
      limit: unref(pageSize) || 10,
      step: unref(activeName) || 0
    })
    return {
      list: res.data.list || [],
      total: res.data.count || 0
    }
  }
})
const { dataList, loading, total, currentPage, pageSize } = tableState
const { getList } = tableMethods
const dialogVisible = ref(false)
const dialogTitle = ref('')

const tableColumns = reactive<TableColumn[]>([
  {
    field: 'id',
    label: 'ID',
    align: 'center',
    width: 70
  },
  {
    field: 'real_name',
    label: '用户',
    minWidth: 100,
    slots: {
      default: (data: any) => {
        const row = data.row
        return (
          <>
            <div>昵称: {row.real_name}</div>
            <div>UID: {row.uid} </div>
            <div>手机号: {row.phone}</div>
          </>
        )
      }
    }
  },
  {
    field: 'salesperson',
    label: '业务员',
    minWidth: 100,
    slots: {
      default: (data: any) => {
        const row = data.row
        if (row.salesperson && row.salesperson.id) {
          return (
            <>
              <div> {row.salesperson.name}</div>
            </>
          )
        } else {
          return <></>
        }
      }
    }
  },
  {
    field: 'designer',
    label: '设计师',
    minWidth: 100,
    slots: {
      default: (data: any) => {
        const row = data.row
        if (row.designer && row.designer.id) {
          return (
            <>
              <div> {row.designer.name}</div>
            </>
          )
        } else {
          return <></>
        }
      }
    }
  },

  {
    field: 'worker',
    label: '安装工',
    minWidth: 100,
    slots: {
      default: (data: any) => {
        const row = data.row
        if (row.worker && row.worker.id) {
          return (
            <>
              <div> {row.worker.name}</div>
            </>
          )
        } else {
          return <></>
        }
      }
    }
  },
  {
    field: 'address',
    label: '地址',
    minWidth: 100
  },
  {
    field: 'price',
    label: '金额',
    minWidth: 100
  },
  {
    field: 'area',
    label: '预估面积',
    minWidth: 100
  },
  {
    field: 'add_time',
    label: '时间',
    minWidth: 160
  },
  {
    field: 'mark',
    label: '备注',
    minWidth: 140
  },
  {
    field: 'action',
    label: '操作',
    width: 200,
    headerAlign: 'center',
    align: 'center',
    slots: {
      default: (data: any) => {
        const row = data.row
        if (row.add_item.length > 0 && row.add_item[0].status == 0) {
          return (
            <>
              <ElButton type="primary" link size="small" onClick={() => action('edit', row)}>
                详情
              </ElButton>
              <ElDivider direction="vertical" />
              <ElButton type="primary" link size="small" onClick={() => action('auth', row)}>
                审核增项
              </ElButton>
            </>
          )
        } else {
          return (
            <>
              <ElButton type="primary" link size="small" onClick={() => action('edit', row)}>
                详情
              </ElButton>
            </>
          )
        }
      }
    }
  }
])

const searchSchema = reactive<FormSchema[]>([
  {
    field: 'uid',
    label: 'UID',
    component: 'Input',
    componentProps: {
      type: 'number',
      placeholder: '请输入用户UID'
    }
  },
  {
    field: 'real_name',
    label: '用户昵称',
    component: 'Input',
    componentProps: {
      placeholder: '请输入用户昵称'
    }
  },
  {
    field: 'salesperson_id',
    label: '业务员',
    component: 'Input',
    componentProps: {
      type: 'number',
      placeholder: '请选择业务员'
    }
  },
  {
    field: 'order_id',
    label: '订单号',
    component: 'Input',
    componentProps: {
      placeholder: '请输入订单号'
    }
  },
  searchTime
])
const searchParams = ref<searchOrder>({
  uid: '',
  real_name: '',
  time: '',
  store_id: '',
  salesperson_id: '',
  step: '',
  order_id: ''
})
const setSearchParams = (data: any) => {
  searchParams.value = data
  const search = searchParams.value
  if (data.time) {
    search.time = data.time.join('-')
  } else {
    search.time = ''
  }
  getList()
}
const activeName = ref(0)
const tabsConfig = reactive([
  {
    title: '待付款',
    total: 0,
    step: 0
  },
  {
    title: '设计师订单',
    total: 0,
    step: 1
  },
  {
    title: '商品订单',
    total: 0,
    step: 2
  },
  {
    title: '安装订单',
    total: 0,
    step: 3
  },
  {
    title: '待评价',
    total: 0,
    step: 4
  },
  {
    title: '已完成',
    total: 0,
    step: 5
  }
])
const activeNames = ref(0)
const currentRow = ref()
const isEdit = ref(false)
const isAuth = ref(false)
const tabsConfigs = reactive([
  {
    title: '基本信息',
    total: 0,
    step: 0
  },
  {
    title: '设计稿',
    total: 0,
    step: 1
  },
  {
    title: '增项',
    total: 0,
    step: 2
  }
])
const checkedSalesperson = (e) => {
  console.log(e, 'x', e.value)
  currentRow.value.salesperson_id = e.value.id
  currentRow.value.salesperson = e.value
  getList()
}
const checkedDesigner = (e) => {
  console.log(e, 'x', e.value)
  currentRow.value.designer_id = e.value.id
  currentRow.value.designer = e.value
  getList()
}
const passAddItem = () => {
  isAuth.value = false
  // currentRow.value.add_item[0].status = 1
  getList()
}
const action = async (type: string, row?: any) => {
  // actionType.value = type
  // if (type == 'add') {
  //   dialogTitle.value = t('exampleDemo.add')
  //   currentRow.value = undefined
  // }

  //   console.log(currentRow, 'currentRow')
  // }
  const res = await getOrderDetail(row.id)
  if (type == 'edit') {
    isEdit.value = true
    dialogTitle.value = '详情'
    currentRow.value = res.data
    dialogVisible.value = true
  } else if (type == 'auth') {
    isAuth.value = true
    activeNames.value = 2
    dialogTitle.value = '详情'
    currentRow.value = res.data
    dialogVisible.value = true
  }
}
// const goAssignSalesman = async (id:number, data: any) => {
// 	await assignSalesman(id,data)
// }
</script>

<template>
  <ContentWrap>
    <ElTabs v-model="activeName" @tab-click="getList">
      <ElTabPane
        v-for="(item, index) in tabsConfig"
        :key="index"
        :label="`${item.title}${item.total > 0 ? `(${item.total})` : ''}`"
        :name="index"
      />
    </ElTabs>
    <div class="max-w-1000px">
      <Search isCol :schema="searchSchema" @reset="setSearchParams" @search="setSearchParams" />
    </div>
    <div class="mb-10px"> </div>
    <Table
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :columns="tableColumns"
      default-expand-all
      node-key="id"
      stripe
      :data="dataList"
      :loading="loading"
      @register="tableRegister"
      :pagination="{
        total
      }"
    />
  </ContentWrap>

  <ElDrawer v-model="dialogVisible" direction="rtl" size="50%">
    <!-- // :title="dialogTitle" -->
    <template #header="{ titleId, titleClass }">
      <h4 :id="titleId" :class="titleClass">{{ dialogTitle }}</h4>
      <!-- <el-button type="danger" @click="close">
	        <el-icon class="el-icon--left"><CircleCloseFilled /></el-icon>
	        Close
	      </el-button> -->
    </template>
    <ElTabs v-model="activeNames">
      <ElTabPane
        v-for="(item, index) in tabsConfigs"
        :key="index"
        :label="`${item.title}${item.total > 0 ? `(${item.total})` : ''}`"
        :name="index"
      />
    </ElTabs>
    <Detail
      v-if="activeNames === 0"
      :current-row="currentRow"
      :isEdit="isEdit"
      @checkedSalesperson="checkedSalesperson"
      @checkedDesigner="checkedDesigner"
    />
    <Draft v-if="activeNames === 1" :current-row="currentRow" />
    <addItem
      v-if="activeNames === 2"
      :current-row="currentRow"
      :isAuth="isAuth"
      @passAddItem="passAddItem"
    />
  </ElDrawer>
</template>
