<template>
  <div>
    <BasicForm @register="registerForm" />
    <List
      :grid="{ gutter: 16, xs: 1, sm: 2, md: 2, lg: 3, xl: 4, xxl: 5, column: 1 }"
      :data-source="list"
    >
      <template #renderItem="{ item }">
        <List-item>
          <LiveBroadcastItem :item="item" />
        </List-item>
      </template>
    </List>
    <div class="text-right">
      <a-pagination
        size="small"
        v-model:current="pageCurrent"
        v-model:page-size="pageSize"
        :total="pageTotal"
        show-less-items
        showSizeChanger
        :show-total="(total) => `共 ${total} 条数据`"
        @change="getData"
      />
    </div>
  </div>
</template>

<script lang="ts">
  import { defineComponent, toRefs, reactive, onMounted, ref } from 'vue'
  import { BasicForm, FormSchema, useForm } from '/@/components/Form/index'
  import { List, Pagination } from 'ant-design-vue'
  import { ColEx } from '/@/components/Form/src/types'
  import LiveBroadcastItem from './LiveBroadcastItem.vue'
  import { formatDataByObject } from '/@/utils/index'
  import {
    getGriculturalDeviceBasic,
    getaGriculturalDevicePoint,
    getDevices,
  } from '/@/api/sys/user'
  const colProps: Partial<ColEx> = {
    xs: 24,
    sm: 12,
    md: 8,
    lg: 6,
    xl: 6,
    xxl: 4,
  }
  const schemas: FormSchema[] = [
    {
      field: 'base',
      component: 'ApiSelect',
      label: '',
      colProps,
      componentProps: ({ formModel, formActionType }) => {
        return {
          placeholder: '基地',
          allowClear: true,
          api: getGriculturalDeviceBasic,
          params: {
            device_type: 1,
          },
          labelField: 'name',
          valueField: 'id',
          // onOptionsChange: (options) => {
          //   const { setFieldsValue } = formActionType
          //   setFieldsValue({
          //     base: options[0].value,
          //   })
          // },
          onChange: (e: any) => {
            formModel.point = undefined
            if (!e) return
            const { updateSchema } = formActionType
            updateSchema({
              field: 'point',
              componentProps: {
                api: async (e) => {
                  const resData = await getaGriculturalDevicePoint(e)
                  return formatDataByObject(resData)
                },
                params: {
                  device_type: 4,
                  agricultural_basic: e,
                },
                labelField: 'label',
                valueField: 'value',
              },
            })
          },
        }
      },
    },
    {
      field: 'point',
      component: 'ApiSelect',
      label: '',
      colProps,
      componentProps: {
        allowClear: true,
        placeholder: '检测点',
      },
    },
  ]

  export default defineComponent({
    components: {
      BasicForm,
      List,
      ListItem: List.Item,
      LiveBroadcastItem,
      [Pagination.name]: Pagination,
    },

    setup() {
      const paginationParams = reactive({
        pageCurrent: 1,
        pageTotal: 5000,
        pageSize: 10,
      })

      const list = ref([])

      const [registerForm, { setFieldsValue, validate }] = useForm({
        schemas,
        autoFocusFirstItem: true,
        labelWidth: 0,
        rowProps: { gutter: [16, 0] },
        showActionButtonGroup: false,
        submitOnChange: true,
        autoSubmitOnEnter: true,

        submitFunc: getData,
      })

      async function getData() {
        const params = await validate()
        const { meta, data } = await getDevices({
          ...params,
          status: 1,
          type: 1,
          per_page: paginationParams.pageSize,
          page: paginationParams.pageCurrent,
        })
        paginationParams.pageTotal = meta.total
        list.value = data
      }

      onMounted(() => {
        getData()
      })

      return {
        list,
        getData,
        registerForm,
        ...toRefs(paginationParams),
      }
    },
  })
</script>

<style scoped></style>
