<!-- 批量编辑 -->
<template>
    <el-dialog title="批量编辑" v-model="visible" width="850px"  class="bulk_area">
        <div class="flex bulk_top">
            <div class="desc">可批量编辑的字段</div>
            <el-radio-group v-model="radioVal" @change="checkRadio">
                <el-radio label="1">全选</el-radio>
                <el-radio label="2">反选</el-radio>
            </el-radio-group>
        </div>
        <div class="flex field_list">
            <div v-for="item in fieldList" :key="item.label" :class="item.check?'on':''" @click="checkFidle(item)">{{ item.label }}</div>
        </div>
        <el-form ref="bulkEditFormRef" :model="form" :rules="rules" label-width="100px">
            <div v-for="item in fieldList" :key="item.label">
                <el-form-item label="区域名称：" prop="continent" v-if="item.label=='区域名称'&&item.check==true">
                    <el-cascader :options="region" v-model="regionValue" clearable filterable @change="getRegion" style="width:100%"/>
                </el-form-item>
                <el-form-item label="意向产品：" prop="intendedProductsIds" v-if="item.label=='意向产品'&&item.check==true">
                    <SelectDict v-model="form.intendedProductsIds" placeholder="意向产品" dictCode="intended_products_type"></SelectDict>
                </el-form-item>
                <el-form-item label="客户状态：" prop="customerStatusDictValue" v-if="item.label=='客户状态'&&item.check==true">
                    <SelectDict v-model="form.customerStatusDictValue" placeholder="客户状态" dictCode="customer_status"></SelectDict>
                </el-form-item>
                <el-form-item label="客户来源：" prop="customerSourceDictValue" v-if="item.label=='客户来源'&&item.check==true">
                    <SelectDict v-model="form.customerSourceDictValue" placeholder="客户来源" dictCode="customer_source"></SelectDict>
                </el-form-item>
                <el-form-item label="客户类型：" prop="customerTypeDictValue" v-if="item.label=='客户类型'&&item.check==true">
                    <SelectDict v-model="form.customerTypeDictValue" placeholder="客户类型" dictCode="customer_type"></SelectDict>
                </el-form-item>
                <el-form-item label="客户等级：" prop="customerLevelDictValue" v-if="item.label=='客户等级'&&item.check==true">
                    <SelectDict type='radio' v-model="form.customerLevelDictValue" placeholder="客户等级" dictCode="customer_level"></SelectDict>
                </el-form-item>
                <el-form-item label="信用等级：" prop="customerCreditLevelDictValue" v-if="item.label=='信用等级'&&item.check==true">
                    <SelectDict type='radio' v-model="form.customerCreditLevelDictValue" placeholder="信用等级" dictCode="credit_rating"></SelectDict>
                </el-form-item>
                <el-form-item label="经济性质：" prop="customerEconomicNatureDictValue" v-if="item.label=='经济性质'&&item.check==true">
                    <SelectDict v-model="form.customerEconomicNatureDictValue" placeholder="经济性质" dictCode="economic_nature"></SelectDict>
                </el-form-item>
            </div>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="cancel">取消</el-button>
                <el-button :loading="buttonLoading" type="primary" @click="submitForm">提交</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import {useDictCache} from '@/hooks/web/useDict'
import {region} from '@/utils/region';
import { editCustomerList } from '@/api/customer';
const { queryDictDetailByCodes } = useDictCache(['customer_status', 'customer_type','customer_source','economic_nature','company_scale','customer_level','credit_rating','intended_products_type'])
queryDictDetailByCodes()
    const emits = defineEmits(['refresh'])

    // const edit
    const visible = ref(false)
    const buttonLoading = ref(false)
    const bulkEditFormRef = ref<ElFormInstance>();
    interface CustomerForm extends BaseEntity {
        continent?: string;
        country?: string;
        intendedProductsIds?: string;
        customerLevelDictValue?: string;
        customerSourceDictValue?: string;
        customerStatusDictValue?: string;
        customerTypeDictValue?: string;
        customerCreditLevelDictValue?: string;
        customerEconomicNatureDictValue?: string;
    }
    const initFormData: CustomerForm = reactive({
        continent:"",
        country:"",
        intendedProductsIds:"",
        customerLevelDictValue:'',
        customerSourceDictValue:"",
        customerStatusDictValue:"",
        customerTypeDictValue:'',
        customerCreditLevelDictValue:"",
        customerEconomicNatureDictValue:"",
    })
    const data = reactive<PageData<CustomerForm, any>>({
        form: {...initFormData},
        rules: {
            continent: [
                {required: true, message: "请选择区域名称", trigger: "blur"}
            ],
            intendedProductsIds: [
                {required: true, message: "请选择意向产品", trigger: "blur"}
            ],
            customerStatusDictValue: [
                {required: true, message: "请选择客户状态", trigger: "blur"}
            ],
            customerSourceDictValue: [
                {required: true, message: "请选择客户来源", trigger: "blur"}
            ],
            customerTypeDictValue: [
                {required: true, message: "请选择客户类型", trigger: "blur"}
            ],
            customerLevelDictValue: [
                {required: true, message: "请选择客户等级", trigger: "blur"}
            ],
            customerCreditLevelDictValue: [
                {required: true, message: "请选择信用等级", trigger: "change"}
            ],
            customerEconomicNatureDictValue: [
                {required: true, message: "请选择经济性质", trigger: "change"}
            ],

        }
    });
    const {form, rules} = toRefs(data);

    const fieldList = reactive([
        {label:'区域名称',val:'continent',check:true},
        {label:'意向产品',val:'intendedProductsIds',check:false},
        {label:'客户状态',val:'customerStatusDictValue',check:false},
        {label:'客户来源',val:'customerSourceDictValue',check:false},
        {label:'客户类型',val:'customerTypeDictValue',check:false},
        {label:'客户等级',val:'customerLevelDictValue',check:false},
        {label:'信用等级',val:'customerCreditLevelDictValue',check:false},
        {label:'经济性质',val:'customerEconomicNatureDictValue',check:false},

    ])

    // 选择区域
    const regionValue = ref([])
    const getRegion = (value) => {
        if(value){
            form.value.continent = value[0]
            form.value.country = value[1]
        }

    }
    // 全选/反选
    const radioVal = ref()
    const checkRadio = (val:any) =>{
        fieldList.forEach(item=>{
            if(val == 1){
                item.check = true
            }else{
                item.check = !item.check
                reset()
            }
        })
    }
    // 选择可编辑字段
    const checkFidle = (item:any) =>{
        item.check = !item.check
        radioVal.value = null
        if(item.val=='continent'){
            form.value.continent = ''
            form.value.country = ''
            regionValue.value = []
        }else{
            form.value[item.val] = ''
        }
    }


    const ids = ref()
    const open = (data:any) => {
        visible.value = true
        ids.value = data.ids
        fieldList.forEach(item=>{
            item.check = true
        })
        reset()
    }


    const submitForm = () => {
        let params = {
            idList: ids.value,
            customer:form.value
        }
        bulkEditFormRef.value?.validate(async (valid: boolean) => {
            if (valid) {
                editCustomerList(params).then(res => {
                    if(res.success) {
                        ElMessage.success("批量编辑成功");
                        visible.value = false
                    }
                })
                emits('refresh')
            }
        })

    }

    /** 表单重置 */
    const reset = () => {
        regionValue.value = []
        form.value = {...initFormData};
        bulkEditFormRef.value?.resetFields();
    }

    const cancel = () => {
        visible.value = false
    }

    defineExpose({
        open
    })
</script>

<style lang="scss" scoped>


</style>
