<template>
  <view>
    <u-sticky :h5NavHeight="h5NavHeightP">
      <view class="bg-white">
        <SearchForm
          :schemas="searchFormSchema"
          @submit="handleSubmit"
        ></SearchForm>
      </view>
    </u-sticky>
    <mescroll-body
      @init="mescrollInit"
      @up="upCallback"
      :up="upOption"
      :down="downOption"
    >
      <view
        class="mx-20rpx my-20rpx bg-white shadow shadow-lg"
        v-for="(item, i) in dataList"
        :key="i"
      >
        <view class="h-500rpx">
          <u-image class="!h-full" :src="item.url"></u-image>
        </view>
        <view class="p-16rpx">时间: {{ item.time }}</view>
      </view>
    </mescroll-body>
  </view>
</template>
<script>
import SearchForm from '@/components/search-form'
import { http } from '@/api/index.js'
import { formatDataByObject } from '@/utils/index.js'
import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js'
export default {
  mixins: [MescrollMixin],
  components: {
    SearchForm,
  },
  data() {
    return {
      filterParmas: {},
      dataList: [],
      downOption: {
        use: false,
      },
      upOption: {
        auto: false,
        page: {
          size: 20,
        },
      },
      searchFormSchema: [
        {
          field: 'base',
          label: '基地',
          component: 'ApiSelect',
          componentProps: ({ formActionType }) => {
            return {
              api: async (e) => {
                const { data } = await http.get(
                  '/api/agricultural-device-basic',
                  {
                    params: e,
                  }
                )
                return data.data
              },
              onOptionsChange: (options) => {
                const { setFieldsValue } = formActionType
                if (options.length) {
                  setFieldsValue({
                    base: options[0].value,
                  })
                }
              },
              labelField: 'name',
              valueField: 'id',
              params: {
                device_type: 6,
              },
            }
          },
        },
        {
          field: 'device_id',
          component: 'ApiSelect',
          label: '监控点',
          componentProps: ({ formModel, formActionType }) => {
            return {
              placeholder: '监控点',
              api: async (e) => {
                if (e.agricultural_basic == null) return []
                const { data } = await http.get(
                  `/api/agricultural-device-point/${e.agricultural_basic}`,
                  {
                    params: e,
                  }
                )
                return formatDataByObject(data.data)
              },
              onOptionsChange: (options) => {
                const { setFieldsValue } = formActionType

                if (options.length)
                  setFieldsValue({
                    device_id: options[0].value,
                  })
              },
              params: {
                device_type: 6,
                agricultural_basic: formModel.base,
              },
              labelField: 'label',
              valueField: 'value',
            }
          },
        },
        {
          field: '[start_time, end_time]',
          label: '日期',
          component: 'Calendar',
          defaultValue: [
            this.$u.timeFormat(
              new Date().getTime() - 1000 * 60 * 60 * 24 * 7,
              'yyyy-mm-dd'
            ),
            this.$u.timeFormat(new Date().getTime(), 'yyyy-mm-dd'),
          ],
          componentProps: {
            mode: 'range',
            placeholder: ['开始时间', '结束时间'],
          },
        },
      ],
    }
  },
  methods: {
    upCallback({ num, size }) {
      this.getData({
        ...this.filterParmas,
        page: num,
        per_page: size,
      })
    },
    handleSubmit(e) {
      this.filterParmas = e
      this.mescroll.resetUpScroll()
    },
    async getData(e) {
      if (!e.device_id) return
      try {
        const { data } = await http.get(
          `/api/devices/${e.device_id}/worm-photos`,
          {
            params: e,
          }
        )
        if (e.page == 1) this.dataList = []
        const { data: list, meta } = data
        this.dataList = this.dataList.concat(list)
        this.mescroll.endByPage(list.length, meta.total)
      } catch (error) {
        this.mescroll.endErr()
      }
    },
  },
}
</script>
