<template>
  <view class="p-20rpx h-full overflow-hidden flex flex-col">
    <view class="flex-1 relative">
      <view class="absolute top-0 left-0 w-full h-full">
        <scroll-view scroll-y="true" class="h-full">
          <u-form ref="uForm" :model="form" class="cu-form" label-width="200">
            <u-form-item label="ID" v-if="form.id">
              <u-input disabled v-model="form.id"></u-input>
            </u-form-item>

            <u-form-item label="农作物">
              <ApiSelect
                v-model="form.crop_id"
                v-bind="cropSelectOption"
              ></ApiSelect>
            </u-form-item>
            <u-form-item label="区域">
              <ApiSelect
                v-model="form.base_id"
                v-bind="baseSelectOption"
              ></ApiSelect>
            </u-form-item>
            <u-form-item label="年份">
              <Picker v-model="form.time_year"></Picker>
            </u-form-item>
            <u-form-item label="季度">
              <Select v-model="form.quarter" v-bind="quarterOption"></Select>
            </u-form-item>
            <u-form-item label="产量">
              <u-input v-model="form.yield"></u-input>
            </u-form-item>
            <u-form-item label="产值">
              <u-input v-model="form.output"></u-input>
            </u-form-item>
            <u-form-item label="耕种面积">
              <u-input v-model="form.cultivated"></u-input>
            </u-form-item>
          </u-form>
        </scroll-view>
      </view>
    </view>
    <view class="grid grid-cols-2 gap-x-20rpx">
      <u-button class="mt-20rpx" round @click="handleCancel"> 取消 </u-button>
      <u-button class="mt-20rpx" type="primary" round @click="handleSubmit">
        保存
      </u-button>
    </view>
  </view>
</template>
<script>
import { http } from '@/api/index.js'
import ApiSelect from '@/components/search-form/components/ApiSelect1.vue'
import ApiCheckbox from '@/components/search-form/components/ApiCheckbox.vue'
import Select from '@/components/search-form/components/Select1.vue'
import Picker from '@/components/search-form/components/Picker.vue'

const quarterOption = {
  options: [
    { label: '第一季度', value: '1' },
    { label: '第二季度', value: '2' },
    { label: '第三季度', value: '3' },
    { label: '第四季度', value: '4' },
  ],
}

export default {
  props: {
    data: {
      type: Object,
      default: () => {},
    },
    type:{
      type: Number,
      default: 1,
    }
  },
  components: {
    ApiSelect,
    ApiCheckbox,
    Select,
    Picker,
  },
  computed: {
    isEdit() {
      return !!this.data
    },
    cropSelectOption() {
      return {
        api: async (e) => {
          const { data } = await http.get('/api/crops', {
            params: e,
          })
          return data.data
        },
        labelField: 'name',
        valueField: 'id',
        params: {
          type: 'all',
          // crop_type: this.type,
        },
      }
    },
    baseSelectOption() {
      return {
        api: async (e) => {
          const { data } = await http.get('/api/agricultural-basic', {
            params: e,
          })
          return data.data
        },
        labelField: 'name',
        valueField: 'id',
        params: {
          // type: this.type,
          page: 1,
          per_page: 99999,
        },
      }
    },
  },
  data() {
    return {
      quarterOption,
      form: {
        id: '',
        crop_id: '',
        base_id: '',
        time_year: '',
        quarter: '',
        yield: '',
        output: '',
        cultivated: '',
      },
    }
  },
  methods: {
    handleCancel() {
      this.$emit('cancel')
    },
    async handleSubmit() {
      const params = { ...this.form, type: 2 }

      if (this.isEdit) {
        await this.onUpdate(params)
      } else {
        await this.onCreate(params)
      }
      this.$emit('confirm')
    },

    async onUpdate(params) {
      try {
        await this.$http.put(`/api/crop-yields/${params.id}`, params)
        this.$u.toast('操作成功')
      } catch ({ data }) {
        data && this.$u.toast(data?.message)
      }
    },

    async onCreate(params) {
      try {
        await this.$http.post('/api/crop-yields', params)
        this.$u.toast('操作成功')
      } catch ({ data }) {
        data && this.$u.toast(data?.message)
      }
    },

    async setDefaultForm(e) {
      if (!e.id) return
      try {
        const { data } = await this.$http.get(`/api/crop-yields/${e.id}`)
        const { data: resData } = data
        Object.keys(resData).forEach((key) => {
          const value = resData[key]
          if (this.form[key] !== undefined) this.form[key] = value
        })
      } catch (error) {}
    },
  },
  watch: {
    data: {
      handler(val) {
        if (val) {
          this.setDefaultForm(val)
        }
      },
      immediate: true,
      deep: true,
    },
  },
}
</script>
