<template>
    <div class='user-manage'>
        <!-- <el-skeleton :rows='10' v-if='!isLoaded' :throttle='500' /> -->
        <div class='main-container'>
            <div class='top-screen' ref='topScreenRef'>
                <qu-search-area :model="screenForm" @search="restSearch" @reset="clearScreen(screenFormRef)">
                    <el-form-item label="所属站点" prop="districtId">
                        <div class="screen-item">
                            <district-screen v-model:districtId="screenForm.districtId" ref="districtScreenRef"
                                @districtChange="districtChange"></district-screen>
                        </div>
                    </el-form-item>
                </qu-search-area>
            </div>
            <div class='main-table' style="padding-bottom:20px">
                <qu-table :tableData='tableData' v-model:tableHeader='tableHeader' :height='tableHeight'
                    :showPage="false" :pageProps='pageProps' :rowButtons='rowButtons' @rowButtonClick='rowButtonClick'
                    @pageChange='pageChange' @sortChange='sortChange' v-loading='tableLoading'
                    :tableButtons='tableButtons' @buttonClick='buttonClick'></qu-table>
            </div>
            <div v-if="showEditForm">
                <el-dialog :title="currentRow.data.id ? '编辑' : '新建'" v-model="showEditForm" width="30%">
                    <el-form :model="currentRow.data" ref="form" :rules="rules" label-width="80px" :inline="false"
                        size="small">
                        <el-form-item label="站点名称" prop="districtId">
                            <district-screen v-model:districtId="currentRow.data.districtId"
                                :disabled="currentRow.data.id ? true : false" ref="addFormDistrictScreenRef"
                                @districtChange="addFormDistrictChange">
                            </district-screen>
                        </el-form-item>
                        <el-form-item label="时薪类型" prop="type">
                            <el-select v-model="currentRow.data.type" value-key="" placeholder="" clearable filterable>
                                <el-option v-for="item in wageTypes" :key="item.id" :label="item.name" :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="积分" prop="point">
                            <el-input-number v-model="currentRow.data.point" size="small" label="" :min="0" :step="0.01"
                                :controls="false" step-strictly :precision="2" @input.native="pointChange"
                                @blur="pointBlur(false)" @focus="pointBlur(true)">
                            </el-input-number>

                        </el-form-item>
                        <el-form-item label="时薪(元)" prop="amount">
                            <el-input-number v-model="currentRow.data.amount" size="small" disabled :controls="false">
                            </el-input-number>

                        </el-form-item>
                        <el-form-item label="备注">
                            <el-input type="textarea" :rows="4" v-model="currentRow.data.memo"
                                placeholder="这里是备注信息。。。。。.." :maxlength="500" :show-word-limit="true"
                                :autosize="{ minRows: 2, maxRows: 4 }">
                            </el-input>

                        </el-form-item>
                    </el-form>

                    <template #footer>
                        <span>
                            <el-button @click="showEditForm = false">取消</el-button>
                            <el-button type="primary" @click="submit" :disabled="fetchamounting">确认</el-button>
                        </span>
                    </template>
                </el-dialog>

            </div>
        </div>
    </div>
</template>
<script setup>
import { ref, reactive, onMounted, nextTick, watch } from 'vue';
import templateHooks from '@/Hooks/templateHooks';
import { HEConfigService } from '@/ApiService/configService'
import { dropdownService } from '@/ApiService/dropdownService';
import { computed } from '@vue/reactivity';

const isLoaded = ref(false);
const tableLoading = ref(false);
const topScreenRef = ref()
const tableHeight = ref(500)
const districtScreenRef = ref();
const showEditForm = ref(false)
const wageTypes = ref([])
const form = ref()
const rules = ref({
    districtId: [
        { required: true, message: '请选择站点名称', trigger: 'change' }
    ],
    type: [
        { required: true, message: '请选择时薪类型', trigger: 'change' }
    ],
    point: [
        { required: true, message: '请输入积分', trigger: 'change' }
    ],
})
const addFormDistrictScreenRef = ref()
const fetchamounting = ref(false)
// 数据定义 end
const buttonClick = (button) => {
    for (let i in currentRow.data) {
        currentRow.data[i] = null;
    }
    currentButton.data = button;
    buttonsClickFun.data[button.enName]();
};
const rowButtonClick = ({ row, $column }) => {
    for (let i in row) {
        currentRow.data[i] = row[i];
    }
    currentButton.data = $column;
    buttonsClickFun.data[$column.enName]();
};
const fetchData = () => {
    const { districtId } = screenForm
    const { sidx, sord } = pageProps
    HEConfigService.wagePageList({ districtId, sidx, sord }).then(res => {
        if (res.code == 0) {
            tableData.value = res.data.rows
        } else {
            $message.error(res.err)
        }
    })
};
const fetchSite = () => {
    districtScreenRef.value.fetchDistricts().then((res) => {
        if (res && res.length != 0) {
            screenForm.districtId = res[0].id;
        } else {
            screenForm.districtId = null;
        }
        restSearch();
    });
};
const districtChange = (e) => {
    screenForm.districtId = e
    fetchData()
}
const time = ref(true)
const pointChange = e => {
    console.log(e);

}
const pointBlur = (bolean) => {
    console.log('pointBlur');
    if (bolean) {
        fetchamounting.value = bolean
    } else {
        fetchWage().then(() => {
            setTimeout(() => {
                fetchamounting.value = bolean
            }, 500);

        })
    }


}
const submit = () => {
    let name = ''
    wageTypes.value.map(item => {
        if (item.id == currentRow.data.type) {
            name = item.name
        }
    })
    form.value.validate(val => {
        if (val) {
            // fetchWage().then(() => {
            HEConfigService.addOrUpdateWage({ ...currentRow.data, name }).then(res => {
                if (res.code == 0) {
                    $message.success('保存成功')
                    showEditForm.value = false
                    fetchData()
                } else {
                    $message.error(res.err)
                }
            })
            // })

        } else {
            return false
        }
    })
}
const addFormDistrictChange = (e) => {
    currentRow.data.districtId = e
    if (currentRow.data.point) {
        fetchWage()
    }
}
const fetchWageType = () => {
    dropdownService.getWageType().then(res => {
        if (res.code == 0) {
            wageTypes.value = res.data
        }
    })
}
const fetchWage = () => {
    return new Promise(resolve => {
        const { point, districtId } = currentRow.data
        console.log('fetchWage');
        HEConfigService.getAmount({ point, districtId, }).then(res => {
            if (res.code == 0) {
                currentRow.data.amount = res.data
                resolve(true)
            } else {
                $message.error(res.err)
            }
        })
    })

}
const { $route, $router, $store, $message, screenForm, screenFormRef, selectItems, tableData, tableHeader, currentRow, currentButton, tableButtons, rowButtons, pageProps, buttonsClickFun, pageChange, sortChange, restSearch, clearScreen, } = templateHooks(fetchData);

// 函数定义 end
onMounted(() => {
    fetchSite();
    buttonsClickFun.data = {
        add: () => {
            showEditForm.value = true
            fetchWageType()
            nextTick(() => {
                console.log(addFormDistrictScreenRef);
                addFormDistrictScreenRef.value.fetchDistricts().then(res => {
                    currentRow.data.districtId = res[0].id;
                })

            })
        },
        export: () => {

        },
        edit: () => {
            showEditForm.value = true
            fetchWageType()
            nextTick(() => {
                console.log(addFormDistrictScreenRef);
                addFormDistrictScreenRef.value.fetchDistricts()

            })
        },
        delete: () => { },
    };
});
// watch(() => currentRow.data.point, val => {
//     console.log(val);
//     if (currentRow.data.districtId) {
//         fetchWage()
//     }
// }
// )
// 生命周期 end
</script>
<script>
export default {
    name: 'ConfigureWorkCredits',
};
</script>