<template>
  <table-template :soul="this">
    <template #detail="{ record }">
      <a @click="detail(record)">查看详情</a>
    </template>
    <template #free>
      <OrderDetail ref="OrderDetail" :success="reset" />
    </template>
  </table-template>
</template>
<script>
import { TableTemplate, TableScript, SearchType } from '@/components/table'
import { getPage, STATUS } from '@/api/order'
import OrderDetail from './OrderDetail.vue'
import dayjs from 'dayjs'
import { bizCode } from '@/util/util'

const columns = [
  { title: '服务项', width: 130, dataIndex: 'serviceName' },
  {
    title: '服务项',
    hidden: true,
    dataIndex: 'subClassId',
    enum: bizCode.SUB_CLASSES,
    filter: { type: SearchType.ENUM }
  },

  {
    title: '订单状态',
    width: 100,
    dataIndex: 'orderStatusValue'
  },
  {
    title: '订单状态',
    hidden: true,
    dataIndex: 'orderStatus',
    filter: { type: SearchType.ENUM },
    enum: 'BIZ0002'
  },
  {
    title: '订单号',
    width: 200,
    dataIndex: 'orderNo',
    filter: { type: SearchType.STRING }
  },
  {
    title: '用户',
    width: 120,
    dataIndex: 'userName',
    filter: { type: SearchType.STRING }
  },
  {
    title: '联系电话',
    dataIndex: 'phone',
    width: 130,
    filter: { type: SearchType.STRING }
  },
  {
    title: '已支付金额(元)',
    dataIndex: 'totalPrice',
    align: 'center',
    customRender: (value) => value || '-',
    width: 100,
  },
  {
    title: '服务时间',
    dataIndex: 'expectArrivalTime',
    width: 130,
    filter: { type: SearchType.RANGE },
    customRender: (text) => dayjs(text).format('YYYY-MM-DD HH:mm:ss')
  },
  {
    title: '提交时间',
    dataIndex: 'createTime',
    width: 120,
    sorter: true,
    filter: { type: SearchType.RANGE },
    customRender: (text) => dayjs(text).format('YYYY-MM-DD HH:mm:ss')
  },
  {
    title: '详情',
    width: 120,
    align: 'center',
    scopedSlots: { customRender: 'detail' }
  }
]

export default {
  name: 'OrderList',
  mixins: [TableScript],
  components: { TableTemplate, OrderDetail },
  data() {
    return {
      columns,
      useYScroll: true,
      title: '订单管理',
      STATUS,
      codes: [['BIZ0002'], [bizCode.SUB_CLASSES]]
    }
  },
  methods: {
    queryData: getPage,
    detail(record) {
      this.$refs.OrderDetail.show(record.id)
    }
  }
}
</script>