<template>
    <el-form :model="form" class="common-form" label-width="auto">
        <el-form-item label="省份：" prop="area">
            <div class="flex w-full">
                <el-select
                    v-model="form.area"
                    multiple
                    placeholder="请选择"
                    filterable
                    style="width: 70%"
                >
                    <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.district"
                        :value="item.id"
                    />
                </el-select>
                <el-button
                    type="success"
                    style="width: 100px; margin-left: 20px"
                    plain
                    @click="onSubmit"
                    v-permission="'recycle:orderSetting:unsupportedArea'"
                    >保存</el-button
                >
            </div>
        </el-form-item>
    </el-form>
</template>

<script setup>
    import { reactive, ref, watch } from 'vue';
    import { ElMessage } from 'element-plus';
    import request from '@/utils/request';

    const props = defineProps({
        settings: {
            type: Object,
            default: () => ({})
        }
    });

    const form = reactive({
        area: []
    });

    const options = ref([]);
    function getProviceList(id = 1) {
        request.get(`/baseinfo/districtInfo/findInfo/${id}`).then((res) => {
            if (res.data.code === 200) {
                options.value = res.data.data;
            }
        });
    }
    getProviceList();

    watch(
        () => props.settings,
        (newVal) => {
            if (newVal) {
                form.area = newVal.unsupportedOrderIds || [];
            }
        },
        { immediate: true, deep: true }
    );

    const onSubmit = () => {
        request
            .post('/recycle/manage/unsupported/refund/update', {
                provinceIds: form.area
            })
            .then((res) => {
                if (res.data.code === 200) {
                    ElMessage.success('保存成功');
                } else {
                    ElMessage.error(res.data.msg);
                }
            });
    };
</script>
