<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" class="cu-form" label-width="200">
            <u-form-item
              v-for="(item, i) in template"
              :key="i"
              :label="item.name"
            >
              <template v-if="!item.isMore">
                <view class="flex items-center">
                  <u-input
                    border
                    v-model="item.value"
                    :suffix="item.unit"
                    placeholder="请输入"
                  />
                  <view class="w-120rpx opacity-50 ml-10rpx">{{
                    item.unit
                  }}</view>
                </view>
              </template>
              <template v-else>
                <view class="w-full">
                  <view
                    class="w-full flex my-10rpx"
                    v-for="(arr, j) in item.value"
                    :key="j"
                  >
                    <view class="w-140rpx mr-20rpx">
                      <u-input
                        type="number"
                        :clearable="false"
                        border
                        v-model="arr.year"
                        placeholder="请输入"
                      />
                    </view>
                    <view class="flex-1 flex items-center">
                      <u-input
                        type="number"
                        :clearable="false"
                        border
                        v-model="arr.value"
                        placeholder="请输入"
                      />
                      <!-- <view class="opacity-50 ml-10rpx">{{ item.unit }}</view> -->
                    </view>
                    <view
                      @click="addDomain(item)"
                      v-if="j == 0"
                      class="px-10rpx"
                    >
                      <u-icon name="plus" size="34"></u-icon>
                    </view>
                    <view
                      @click="removeDomain(item, j)"
                      class="px-10rpx"
                      v-else
                    >
                      <u-icon name="minus" size="34"></u-icon>
                    </view>
                  </view>
                </view>
              </template>
            </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 { concat, cloneDeep } from 'lodash-es'
export default {
  props: {
    data: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      template: [],
    }
  },
  methods: {
    handleCancel() {
      this.$emit('cancel')
    },
    async handleSubmit() {
      const params = {}
      this.template.forEach((e) => {
        if (e.isMore) {
          const temp = {}
          e.value.forEach((el) => {
            if (el.year) temp[el.year] = el.value
          })
          params[e.slug] = temp
        } else {
          params[e.slug] = e.value
        }
      })

      await this.citydataEdit(params)
      this.$emit('confirm')
    },
    async citydataEdit(params) {
      try {
        await this.$http.put('/api/citydata-statistics-edit', params)
      } catch (error) {
        this.$u.toast(error.message)
      }
    },
    isObject(val) {
      return Object.prototype.toString.call(val) === '[object Object]'
    },
    isArray(val) {
      return Object.prototype.toString.call(val) === '[object Array]'
    },

    addDomain(item) {
      item.value.push({
        value: '',
        year: '',
      })
    },
    removeDomain(item, index) {
      item.value.splice(index, 1)
    },
  },
  watch: {
    data: {
      handler(val) {
        const arr = cloneDeep(val)
        const template = arr.reduce((pre, cur) => {
          const obj = {
            name: cur.name,
            slug: cur.slug,
            unit: cur.unit,
          }
          if (this.isObject(cur.value) || this.isArray(cur.value)) {
            // cur.value[2023] = ''
            const temp = []
            // if(Object.keys(cur.value).length === 1))
            if (Object.keys(cur.value).length === 0) {
              temp.push({
                value: '',
                year: null,
              })
            }

            for (const key in cur.value) {
              temp.push({
                value: cur.value[key],
                // year: dayjs(key + '', 'YYYY'),
                year: key,
              })
            }
            return concat(pre, {
              ...obj,
              isMore: true,
              value: temp,
            })
          }
          return concat(pre, {
            ...obj,
            isMore: false,
            value: cur.value,
          })
        }, [])
        this.template = template
      },
      immediate: true,
      deep: true,
    },
  },
}
</script>
<style lang="scss"></style>
