<template>
  <view>
    <Appbar :show="showAppbar" title="基地产量">
      <template #right>
        <view v-auth="['endpoint.crops_output.create']" class="text-white mr-20px" @click="handleCreate">新增</view>
      </template>
    </Appbar>
    <u-sticky>
      <view class="bg-white">
        <SearchForm
          :schemas="searchFormSchema"
          @submit="handleSubmit"
        ></SearchForm>
      </view>
    </u-sticky>
    <mescroll-body
      @init="mescrollInit"
      @up="upCallback"
      :up="upOption"
      :down="downOption"
    >
      <view>
        <u-swipe-action
          v-for="(item, i) in dataList"
          :show="item.show"
          :index="i"
          :key="item.id"
          class="my-20rpx mx-30rpx rounded-md overflow-hidden"
          :options="options"
          @click="handleClick"
          @content-click="handleContentClick"
        >
          <view>
            <view class="bg-white p-20rpx">
              <view>街镇名称：{{ item.base_name }} </view>
              <view>农作物名称：{{ item.crop_name }}</view>
              <view class="my-12rpx">
                <u-line></u-line>
              </view>

              <view class="grid grid-cols-3">
                <view class="text-center">产量</view>
                <view class="text-center">产值</view>
                <view class="text-center">耕种面积</view>
              </view>
              <view class="grid grid-cols-3">
                <view class="text-center">{{ item.yield }}</view>
                <view class="text-center">{{ item.output }}</view>
                <view class="text-center">{{ item.cultivated }}</view>
              </view>
            </view>
          </view>
        </u-swipe-action>
      </view>
    </mescroll-body>

    <!-- 详情 -->
    <BaseTablePopup
      v-model="baseShow"
      :colums="baseTableColums"
      :data="currentData"
      @onEdit="handleEdit"
      @onDel="handleDel"
      :eidtAuth="['endpoint.crops_output.edit']"
      :delAuth="['endpoint.crops_output.destroy']"
    ></BaseTablePopup>
    <!-- 编辑 -->
    <cuPopup v-model="formShow" :title="currentData ? '编辑产量' : '新增产量'">
      <BasicsEdit
        :type="1"
        @cancel="formShow = false"
        @confirm="handleEditConfirm"
        :data="currentData"
      ></BasicsEdit>
    </cuPopup>
  </view>
</template>
<script>
import Appbar from '@/components/Appbar'
import SearchForm from '@/components/search-form'
import { http } from '@/api/index.js'
import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js'
import cuPopup from '@/components/cu-popup/index.vue'
import BaseTablePopup from '@/components/base-table/popup.vue'
import BasicsEdit from './components/basics-edit.vue'
import checkPermission from '@/utils/permission.js'
const baseTableColums = [
  {
    title: '街镇名称',
    dataIndex: 'base_name',
  },
  {
    title: '农作物名称',
    dataIndex: 'crop_name',
  },
  {
    title: '年份',
    dataIndex: 'time_year',
    format: (text) => {
      return text + '年'
    },
  },
  {
    title: '季度',
    dataIndex: 'quarter',
    format: (e) => {
      const map = {
        1: '第一季度',
        2: '第二季度',
        3: '第三季度',
        4: '第四季度',
      }
      return map[e]
    },
  },
  {
    title: '产量',
    dataIndex: 'yield',
  },
  {
    title: '产值',
    dataIndex: 'output',
  },
  {
    title: '耕种面积',
    dataIndex: 'cultivated',
  },
]
export default {
  mixins: [MescrollMixin],
  components: {
    SearchForm,
    Appbar,
    cuPopup,
    BaseTablePopup,
    BasicsEdit,
  },
  data() {
    return {
      baseTableColums,
      currentData: null,
      filterParmas: {},
      downOption: {
        use: false,
      },
      upOption: {
        auto: false,
        page: {
          size: 20,
        },
      },
      dataList: [],
      formShow: false,
      baseShow: false,
      searchFormSchema: [
        {
          field: 'quarter',
          label: '季度',
          component: 'Select',
          componentProps: {
            options: [
              { label: '第一季度', value: '1' },
              { label: '第二季度', value: '2' },
              { label: '第三季度', value: '3' },
              { label: '第四季度', value: '4' },
            ],
          },
        },
        {
          field: 'type',
          label: '农作物',
          component: 'ApiSelect',
          componentProps: ({ formActionType }) => {
            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: 1,
              },
            }
          },
        },
      ],
    }
  },
  computed: {
    options() {
      return [
        {
          text: '编辑',
          opt: 'edit',
          permission: ['endpoint.crops_output.edit'],
          style: {
            backgroundColor: '#007aff',
          },
        },
        {
          text: '删除',
          opt: 'delete',
          permission: ['endpoint.crops_output.destroy'],
          style: {
            backgroundColor: '#dd524d',
          },
        },
      ].filter((e) => checkPermission(e.permission))
    },
  },
  methods: {
    handleSubmit(e) {
      this.filterParmas = e
      this.mescroll.resetUpScroll()
    },
    upCallback({ num, size }) {
      this.getData({
        ...this.filterParmas,
        page: num,
        per_page: size,
        type: 1,
      })
    },
    async getData(e) {
      try {
        const { data } = await http.get(`/api/crop-yields`, {
          params: e,
        })
        if (e.page == 1) this.dataList = []
        const { data: list, meta } = data
        this.dataList = this.dataList.concat(
          list.map((e) => Object.assign({ show: false }, e))
        )
        this.mescroll.endByPage(list.length, meta.total)
      } catch (error) {
        this.mescroll.endErr()
      }
    },
    handleClick(index1, index) {
      const { opt } = this.options[index]
      const item = this.dataList[index1]
      this.currentData = item
      if (opt == 'edit') {
        this.handleEdit(item)
      } else if (opt == 'delete') {
        this.handleDel(item)
      }
    },
    handleContentClick(e) {
      this.currentData = this.dataList[e]
      this.baseShow = true
    },
    handleEdit(item) {
      this.currentData = item
      this.formShow = true
      this.baseShow = false
    },
    async handleDel(item) {
      uni.showModal({
        title: '提示',
        content: '是否确定删除？',
        success: async (res) => {
          if (res.confirm) {
            try {
              await this.$http.delete(`/api/crop-yields/${item.id}`)
              this.mescroll.resetUpScroll()
              this.baseShow = false
            } catch ({ data }) {
              this.$u.toast(data.message)
            }
          }
        },
      })
    },
    async handleCreate() {
      this.currentData = null
      this.formShow = true
      this.baseShow = false
    },
    handleEditConfirm() {
      this.mescroll.resetUpScroll()
      this.formShow = false
    },
  },
}
</script>
