import { QUESTION_STATUS, QUESTION_TYPE, ORDER_STATUS } from '@/utils/dictionary.js'
import TableTags from '@/components/DataTable/tools/Tags.vue'
import TableImage from '@/components/DataTable/tools/Image.vue'
import TableAction from '@/components/DataTable/tools/Action.vue'
import { changeQuestionStatus } from '@/api/task/index.js'
import { h, ref, reactive } from 'vue'

/* 注册table */
const tableRef = ref()
const searchParams = ref()

function handleSearch(params, reload = true) {
  searchParams.value = { ...params }
  tableRef.value.reFetch({ searchParams }, reload)
}

/* 问题忽略 */
function handleRowIgnore(ids, type = '') {
  const params = {
    id: ids,
    type: type,
    status: 2
  }
  changeQuestionStatus(params)
    .then(res => {
      if (res.code === 0) {
        data.selectRowKeys = []
        handleSearch(searchParams.value, false)
      }
    })
}

/* 问题确认 */
function handleRowConfirm(ids, type = '') {
  const params = {
    id: ids,
    type: type,
    status: 1
  }
  changeQuestionStatus(params)
    .then(res => {
      if (res.code === 0) {
        data.selectRowKeys = []
        handleSearch(searchParams.value, false)
      }
    })
}

/* 位置 */
function handlePositionDrawer(row) {
  data.rowData = row
  data.positionDrawer = true
}

function handleImgPreview(row) {
  data.rowData = row
  data.confirmModal = true
}

const data = reactive({
  tableRef,
  searchParams,
  rowData: {},
  selectRowKeys: [],
  confirmModal: false,
  positionDrawer: false,
  handleSearch,
  handleRowIgnore,
  handleRowConfirm,
  columns: [
    {
      type: 'selection',
      disabled(row) {
        return row.wordOrderStatus === 1
      }
    },
    {
      title: '序号',
      key: 'key',
      render: (_, index) => {
        return `${index + 1}`
      },
      align: 'center'
    },
    {
      title: '问题类型',
      key: 'questionName',
      align: 'center',
      render(row) {
        return h(TableTags, {
          data: row.type,
          filters: QUESTION_TYPE.value
        })
      }
    },
    {
      title: '问题图片',
      key: 'fileMarkerUrl',
      align: 'center',
      render(row) {
        return h(TableImage, {
          images: {
            width: 36,
            height: 36,
            src: row.fileMarkerUrl,
            previewDisabled: true,
            onClick: handleImgPreview.bind(null, row)
          }
        })
      }
    },
    {
      title: '经纬度',
      key: 'name',
      align: 'center',
      render(row) {
        return h(TableTags, {
          data: [{ name: row.lng }, { name: row.lat }]
        })
      }
    },
    {
      title: '位置',
      key: 'position',
      align: 'center',
      render(row) {
        return h(TableAction, {
          actions: [
            {
              label: '图片位置',
              type: 'button',
              props: {
                type: 'primary',
                text: true,
                onClick: handlePositionDrawer.bind(null, row)
              },
              auth: 'basic_list'
            }
          ],
          align: 'center'
        })
      }
    },
    {
      title: '备注',
      key: 'note',
      align: 'center'
    },
    {
      title: '状态',
      key: 'status',
      align: 'center',
      render(row) {
        return h(TableTags, {
          data: row.status,
          filters: QUESTION_STATUS
        })
      }
    },
    {
      title: '工单生成状态',
      key: 'status',
      align: 'center',
      render(row) {
        return h(TableTags, {
          data: row.status,
          filters: ORDER_STATUS
        })
      }
    },
    {
      title: '操作',
      align: 'center',
      width: 150,
      fixed: 'right',
      render(row) {
        return h(TableAction, {
          actions: [
            {
              label: '忽略',
              type: 'popconfirm',
              tip: '是否忽略该数据？',
              props: {
                onPositiveClick: handleRowIgnore.bind(null, [row.id], row.type)
              },
              ButtonProps: {
                text: true,
                type: 'primary'
              },
              auth: 'basic_list',
              hidden: row.wordOrderStatus === 1 || row.status === 2
            },
            {
              label: '确认',
              type: 'popconfirm',
              tip: '是否确认该数据？',
              props: {
                onPositiveClick: handleRowConfirm.bind(null, [row.id], row.type)
              },
              ButtonProps: {
                text: true,
                type: 'primary'
              },
              auth: 'basic_list',
              hidden: row.wordOrderStatus === 1 || row.status === 1
            }
          ],
          align: 'center'
        })
      }
    }

  ]
})

export default data
