<template>
  <div class="app-container">
    <TableViewer
      ref="tableViewer"
      v-bind="table"
      @action="handleAction"
    />

    <AddDialog
      ref="addDialog"
      @success="onSuccess"
    />

    <EditDialog
      ref="editDialog"
      @success="onSuccess"
    />
  </div>
</template>

<script>
import TableViewer from '@/components/TableViewer'
import preset from '@/components/TableViewer/preset'
import orderApi from '@/api/order'
import DetailDialog from './components/DetailDialog'
import OrderStatus from '@/views/components/OrderStatus'
import GoodsSelect from '@/views/components/GoodsSelect'
import AddDialog from './components/dialog/AddDialog'
import EditDialog from './components/dialog/EditDialog'

export default {
  components: {
    TableViewer,
    AddDialog,
    EditDialog
  },
  data() {
    return {
      table: {
        filters: [
          {
            type: 'custom',
            key: 'commodityId',
            component: GoodsSelect,
            placeholder: '请选择商品',
            props: {
              canAdd: false,
              type: 'all',
              config: {
                key: 'id',
                label: 'name',
                value: 'id'
              }
            }
          },
          {
            key: 'orderNumber',
            placeholder: '请输入订单编号'
          },
          {
            type: 'button',
            title: '查询',
            filterWithChange: true
          }
        ],
        actions: [],
        headers: [
          {
            label: '订单编号',
            key: 'order_number',
            minWidth: 140
          },
          {
            label: '合同编号',
            key: 'contract_no',
            minWidth: 140
          },
          {
            label: '商品总数',
            key: 'total_number',
            minWidth: 80
          },
          {
            label: '合计(元)',
            key: 'total_money',
            minWidth: 80
          },
          {
            label: '客户名称',
            key: 'consumer_name',
            minWidth: 140
          },
          {
            label: '订单状态',
            key: 'status',
            type: 'tag',
            component: OrderStatus,
            props: {
              status: status
            }
          }
        ],
        rowActions: (row) => {
          return this.getAction(row).filter(item => item.hasPermission !== false)
        },
        rowActionsWidth: 330,
        fetchDataMethod: this.fetchData
      }
    }
  },
  computed: {
    orderStatusDict() {
      return this.$store.getters.orderStatusDict
    },
    userType() {
      return this.$store.getters.userType
    }
  },
  created() {
    if (this.userType === 2) {
      this.table.actions = preset.actions(['add'])
    } else {
      this.table.actions = []
    }
  },
  methods: {
    getAction(row) {
      return [
        {
          key: 'updateStatus',
          type: 'primary',
          title: this.editActionText(row.status),
          // 客户可进行订单确认操作，运营可进行发货、收货、开票、收票、收款、收款确认
          hasPermission: (this.userType === 5 && row.status === 'CREATE') || (this.userType === 2 && (row.status !== 'FINISH' && row.status !== 'CREATE'))
        },
        {
          key: 'edit',
          type: 'primary',
          title: '编辑',
          // 运营在待确认、待发货状态下可修改订单，修改后订单状态变为待确认
          hasPermission: this.userType === 2 && (row.status === 'CREATE' || row.status === 'DELIVER_GOODS')
        },
        {
          key: 'remove',
          type: 'danger',
          title: '删除',
          confirm: '删除后将无法恢复，确定删除？',
          hasPermission: this.userType === 2
        },
        {
          key: 'detail',
          type: 'primary',
          title: '查看详情'
        }
      ]
    },
    editActionText(status) {
      return this.orderStatusDict[status].tableButtonTest || '编辑'
    },
    async fetchData(filter, pagination) {
      console.log('fetchData', JSON.stringify(filter), JSON.stringify(pagination))
      const response = await orderApi.find({
        ...pagination,
        p: {
          ...filter
        },
        apiUser: localStorage.getItem('apiUser'),
        checkSum: localStorage.getItem('checkSum')
      })
      const data = {
        content: response.data.list,
        numberOfElements: response.data.list.length,
        totalElements: response.data.totalRow
      }
      console.log('查询订单列表', data)
      return data
    },
    handleAction(action, row) {
      this[action]?.(row)
      console.log('action', action, JSON.stringify(row))
    },
    add() {
      console.log('添加订单')
      this.$refs?.addDialog?.open()
    },
    updateStatus(row) {
      console.log('修改订单状态', row)
      this.$refs?.editDialog?.open(row)
    },
    edit(row) {
      console.log('修改订单')
      this.$refs?.editDialog?.open({
        ...row,
        action: 'edit'
      })
    },
    detail(row) {
      DetailDialog.show(row)
    },
    remove(row) {
      this.$refs.tableViewer.loading()
      orderApi.remove({
        apiUser: localStorage.getItem('apiUser'),
        checkSum: localStorage.getItem('checkSum')
      }, row.id).then(() => this.$message.success('删除成功')).finally(this.$refs.tableViewer.refreshAfterDelete)
    },
    onSuccess() {
      this.$refs.tableViewer.refresh()
    }
  }
}
</script>

<style scoped lang="scss">
.app-container {
  width: 100%;
  height: 100%;
  padding: 0;

  .top-div {
    display: flex;
    float: right;

    .name {
      font-size: 16px;
      font-weight: bold;
    }
  }

  .logout {
    margin-left: 30px;
  }
}

</style>