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

<script>
import TableViewer from '@/components/TableViewer'
import preset from '@/components/TableViewer/preset'
import goodsApi from '@/api/goods'
import AddDialog from './components/AddDialog'
import EditDialog from './components/EditDialog'
import DetailDialog from './components/DetailDialog'
import ConsumerSelect from '@/views/components/ConsumerSelect'

export default {
  components: {
    TableViewer
  },
  data() {
    return {
      userName: this.$store.getters.name,
      table: {
        filters: [
          {
            key: 'name',
            placeholder: '请输入关键字'
          },
          {
            type: 'custom',
            key: 'consumerName',
            component: ConsumerSelect,
            placeholder: '请选择客户'
          },
          {
            type: 'button',
            title: '查询',
            filterWithChange: true
          }
        ],
        actions: preset.actions(['add']),
        headers: [
          {
            label: '合同名称',
            key: 'name',
            minWidth: 130
          },
          {
            label: '规格型号',
            key: 'info',
            minWidth: 160
          },
          {
            label: '产品单价(元)',
            key: 'price',
            minWidth: 140
          },
          {
            label: '客户名称',
            key: 'consumers',
            minWidth: 160,
            formatter: (row, column, cellValue, index) => {
              return cellValue ? cellValue.join('， ') : '--'
            }
          }
        ],
        rowActions: (row) => {
          if (row.consumers && row.consumers.length > 0) {
            return [
              {
                key: 'detail',
                type: 'primary',
                title: '查看详情'
              }
            ]
          } else {
            return [
              {
                key: 'edit',
                type: 'primary',
                title: '编辑'
              },
              {
                key: 'remove',
                type: 'danger',
                title: '删除',
                confirm: '删除后将无法恢复，确定删除？'
              },
              {
                key: 'detail',
                type: 'primary',
                title: '查看详情'
              }
            ]
          }
        },
        rowActionsWidth: 300,
        fetchDataMethod: this.fetchData
      }
    }
  },
  created() {
    this.$store.dispatch('user/getInfo')
  },
  methods: {
    async fetchData(filter, pagination) {
      console.log('fetchData', JSON.stringify(filter), JSON.stringify(pagination))
      const response = await goodsApi.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
      }
      return data
    },
    handleAction(action, row) {
      this[action]?.(row)
      console.log('action', action, JSON.stringify(row))
    },
    add() {
      AddDialog.show(this.$refs.tableViewer.refresh)
    },
    edit(row) {
      EditDialog.show({ ...row }, this.$refs.tableViewer.refresh)
    },
    detail(row) {
      DetailDialog.show(row)
    },
    remove(row) {
      this.$refs.tableViewer.loading()
      goodsApi.remove({
        apiUser: localStorage.getItem('apiUser'),
        checkSum: localStorage.getItem('checkSum')
      }, row.id).then(() => this.$message.success('删除成功')).finally(this.$refs.tableViewer.refreshAfterDelete)
    }
  }
}
</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>