<script setup lang="ts">
import { reactive, toRefs } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import { useUserStore } from '@/store/modules/user'
import { useGlobSetting } from '/@/hooks/setting'
import * as NongchangAPI from '@/api/model/nongchang'
import { areaTree } from '@/utils/areaData'
import { useDictStore } from '@/store/modules/dict'
import { useFarmStore } from '@/store/modules/farm'

const dictStore = useDictStore()
const userStore = useUserStore()
const globSetting = useGlobSetting()
const farmStore = useFarmStore()
onLoad((pageOptions) => {
    // 页面加载时的初始化操作
    const farmInfo = farmStore.getFarm
    if (farmInfo) {
        pageData.form.farmId = farmInfo.id
    }
    pageData.form.farmId = pageOptions.farmId
})

onShow(() => {
    // 数据字典赋值
    initDict()
    pageData.form.userId = userStore.getUserInfo.id
})

const pageData = reactive({
    loading: false,
    show: {
        growCrops: false,
    },
    options: {
        address: [],
        mainProducts: [],
        growCrops: [],
    },
    form: {
        id: '',
        userId: '',
        farmId: '',
        baseName: '',
        scale: '',
        managerName: '',
        contactPhone: '',
        growCrops: '',
        growCropsText: '',
    },
    rules: [
        {
            name: 'baseName',
            rule: ['required'],
            msg: ['请输入基地名称'],
        },
        {
            name: 'scale',
            rule: ['required'],
            msg: ['请输入面积'],
        },
        {
            name: 'managerName',
            rule: ['required'],
            msg: ['请输入负责人'],
        },
        {
            name: 'contactPhone',
            rule: ['required'],
            msg: ['请输入联系电话'],
        },
        {
            name: 'growCrops',
            rule: ['required'],
            msg: ['请选择种植作物'],
        },
    ],
})

function initDict() {
    pageData.options.address = areaTree
    pageData.options.growCrops = dictStore.getDictList.crops_type.map((item) => {
        return {
            value: item.value,
            text: item.text,
        }
    })
}
function handleChangeGrowCrops(e) {
    pageData.form.growCrops = e.value
    pageData.form.growCropsText = e.text
    pageData.show.growCrops = false
}
const toastRef = ref()

const formRef = ref()
function submit() {
    formRef.value.validator(pageData.form, pageData.rules, true).then((res) => {
        if (res.isPassed) {
            pageData.loading = true
            // 根据是否有ID决定调用编辑还是新增接口
            const apiCall = pageData.form.id ? NongchangAPI.editFarmbase : NongchangAPI.addFarmbase
            apiCall(pageData.form)
                .then(() => {
                    toastRef.value.show({
                        type: 'success',
                        text: '添加基地成功',
                    })
                    setTimeout(() => {
                        uni.navigateBack()
                    }, 800)
                    // uni.switchTab({
                    //     url: '/pages/mine/index',
                    // })
                })
                .finally(() => {
                    pageData.loading = false
                })
        }
    })
}
</script>

<template>
    <view class="page">
        <view class="page-container">
            <fui-form ref="formRef">
                <!-- 第一组表单 -->
                <view class="form-card">
                    <fui-input
                        required
                        label="基地名称"
                        labelSize="28"
                        size="28"
                        :labelWeight="400"
                        labelWidth="auto"
                        placeholder="请输入基地名称"
                        v-model="pageData.form.baseName"
                    />
                    <fui-input
                        required
                        number
                        label="面积"
                        labelSize="28"
                        size="28"
                        :labelWeight="400"
                        labelWidth="auto"
                        placeholder="请输入基地面积"
                        v-model="pageData.form.scale"
                    >
                        <view class="fontsize_28">亩</view>
                    </fui-input>

                    <fui-input
                        required
                        labelSize="28"
                        size="28"
                        :labelWeight="400"
                        labelWidth="auto"
                        label="负责人"
                        placeholder="请输入联系人名称"
                        v-model="pageData.form.managerName"
                    />
                    <fui-input
                        required
                        type="number"
                        labelSize="28"
                        size="28"
                        :labelWeight="400"
                        labelWidth="auto"
                        label="负责人电话"
                        placeholder="请输入负责人电话"
                        v-model="pageData.form.contactPhone"
                    />
                    <fui-form-item
                        required
                        asterisk
                        label="种植作物"
                        labelSize="28"
                        :labelWeight="400"
                        labelWidth="auto"
                    >
                        <view class="time-input" @click="pageData.show.growCrops = true">
                            <text class="select-text" :class="{ placeholder: !pageData.form.growCropsText }">
                                {{ pageData.form.growCropsText || '请选择种植作物' }}
                            </text>
                        </view>
                    </fui-form-item>
                </view>

                <view class="submit-btn-box">
                    <fui-button text="添加农场" bold radius="96rpx" @click="submit" />
                </view>
            </fui-form>
        </view>

        <fui-picker
            :show="pageData.show.growCrops"
            :layer="1"
            :linkage="true"
            :options="pageData.options.growCrops"
            @change="handleChangeGrowCrops"
            @cancel="pageData.show.growCrops = false"
        />

        <fui-toast ref="toastRef" />
        <fui-loading isFixed v-if="pageData.loading" backgroundColor="rgba(0, 0, 0, 0.4)" />
    </view>
</template>

<style lang="scss" scoped>
.page {
    background: #e8f5e9;
    min-height: 100vh;
}

.page-container {
    padding: 28rpx;
}

.form-card {
    background-color: #ffffff;
    border-radius: 20rpx;
    margin-bottom: 20rpx;
    padding: 0;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.upload-title {
    padding: 28rpx;
    font-size: 28rpx;
    color: #333333;
    font-weight: 400;
}

.upload-content {
    padding: 0 32rpx 32rpx;
}

.submit-btn-box {
    padding: 32rpx 0;
}

:deep(.fui-button) {
    border-color: #ff9800 !important;
    background: #ff9800 !important;
}

:deep(.fui-input__wrap),
:deep(.fui-textarea__wrap) {
    padding: 28rpx 32rpx;
    // border-bottom: 1px solid #e5e5e5;
}

:deep(.fui-input__label),
:deep(.fui-textarea__label) {
    font-size: 28rpx;
    color: #333333;
    min-width: 160rpx;
    font-weight: 400;
}

:deep(.fui-input__self),
:deep(.fui-textarea__self) {
    font-size: 28rpx;
    color: #333333;
}

:deep(.fui-input__placeholder),
:deep(.fui-textarea__placeholder) {
    color: #d0d0d0;
    font-size: 28rpx;
}

.form-card :deep(.fui-input__wrap:last-child),
.form-card :deep(.fui-textarea__wrap:last-child) {
    border-bottom: none;
}

::v-deep .uni-input-placeholder {
    font-size: 28rpx !important;
    color: #999999 !important;
}
:deep(.uni-textarea-placeholder) {
    font-size: 28rpx !important;
    color: #999999 !important;
}
:deep(.fui-button) {
    width: 690rpx;
    border-color: #5db66f !important;
    background: #5db66f !important;
}

// 移除fui-form的默认样式
:deep(.fui-form) {
    background: transparent;
}

:deep(.fui-form__item) {
    background: transparent;
    border: none;
    margin-bottom: 0;
    padding: 0;
}
:deep(.fui-input__border-bottom) {
    right: 32rpx !important;
}
.form-item-block {
    padding: 24rpx 12rpx;
    // border-bottom: 1px solid #e5e5e5;

    &:last-child {
        border-bottom: none;
    }
}

.form-item-label {
    font-size: 28rpx;
    color: #333333;
    font-weight: 400;
    margin-bottom: 20rpx;

    &.required::before {
        content: '*';
        color: #ff4d4f;
        margin-right: 8rpx;
    }
}

.block-textarea {
    width: 100%;
    padding: 0rpx 12rpx !important;
}

.block-upload {
    width: 100%;
    padding: 0 20rpx;
    :deep(.uni-file-picker__container) {
        background-color: #fff !important;
        border: unset !important;
        border-radius: 16rpx;
        min-height: 200rpx;
        display: flex;
        justify-content: left !important;
    }
}
.select-text {
    font-size: 28rpx;
    color: #333333;
    padding: 0 20rpx;
    &.placeholder {
        color: #999999;
    }
}

.fui-input-wrapper {
    cursor: pointer;
}
</style>
