<template>
    <BasicDrawer v-bind="$attrs" @register="registerDrawer" width="800px" showFooter
:cancelText="t('common.cancelText','取消')"
:okText="t('common.okText','确定')"
                    @ok="handleSubmit" :closeFunc="onClose">
      <template #title>
        <a-space :size="10">
          <div class="text-16px font-medium">{{ title }}</div>
              <a-space-compact size="small" block  v-if="dataForm.id">
                <a-tooltip :title="t('common.prevRecord')">
                  <a-button size="small" :disabled="getPrevDisabled" @click="handlePrev">
                    <i class="icon-ym icon-ym-caret-left text-10px"></i>
                  </a-button>
                </a-tooltip>
                <a-tooltip :title="t('common.nextRecord')">
                  <a-button size="small" :disabled="getNextDisabled" @click="handleNext">
                    <i class="icon-ym icon-ym-caret-right text-10px"></i>
                  </a-button>
                </a-tooltip>
              </a-space-compact>
        </a-space>
      </template>
        <template #insertFooter>
          <div class="float-left mt-5px">
            <yunzhupaasCheckboxSingle v-model:value="submitType" :label="continueText" />
          </div>
        </template>
        <a-row class="p-10px dynamic-form ">
            <!-- 表单 -->
            <a-form :colon="false" size="middle" layout= "horizontal" 
                labelAlign= "right" 
 :labelCol="{ style: { width: '100px' } }"                 :model="dataForm" :rules="dataRule" ref="formRef" >
                <a-row :gutter="15">
                    <!-- 具体表单 -->
    <a-col :span="24" class="ant-col-item"  v-if="hasFormP('lead_name')"
   >
        <a-form-item   
  name="lead_name" >
<template #label>线索名称 
</template> <YunzhupaasInput    v-model:value="dataForm.lead_name"  @change="changeData('lead_name',-1)"  
 placeholder="请输入线索名称"   :maxlength="50"  :allowClear='true'  :style='{"width":"100%"}' :maskConfig = "maskConfig.lead_name" :showCount = "false"     >
</YunzhupaasInput>
        </a-form-item>
    </a-col>
    <a-col :span="24" class="ant-col-item"  v-if="hasFormP('mobile')"
   >
        <a-form-item   
  name="mobile" >
<template #label>手机号 
</template> <YunzhupaasInput    v-model:value="dataForm.mobile"  @change="changeData('mobile',-1)"  
 placeholder="请输入手机号"   :maxlength="11"  :allowClear='true'  :style='{"width":"100%"}' :maskConfig = "maskConfig.mobile" :showCount = "false"     >
</YunzhupaasInput>
        </a-form-item>
    </a-col>
    <a-col :span="24" class="ant-col-item"  v-if="hasFormP('email')"
   >
        <a-form-item   
  name="email" >
<template #label>邮箱 
</template> <YunzhupaasInput    v-model:value="dataForm.email"  @change="changeData('email',-1)"  
 placeholder="请输入邮箱"   :maxlength="50"  :allowClear='true'  :style='{"width":"100%"}' :maskConfig = "maskConfig.email" :showCount = "false"     >
</YunzhupaasInput>
        </a-form-item>
    </a-col>
    <a-col :span="24" class="ant-col-item"  v-if="hasFormP('lead_status')"
   >
        <a-form-item   
  name="lead_status" >
<template #label>状态 
</template> <YunzhupaasSelect    v-model:value="dataForm.lead_status"  @change="changeData('lead_status',-1)"  
 placeholder="请选择状态"   :templateJson="state.interfaceRes.lead_status" :allowClear='true'  :style='{"width":"100%"}' :showSearch='false'          :options="optionsObj.lead_statusOptions"          :fieldNames="optionsObj.lead_statusProps"
    >
</YunzhupaasSelect>
        </a-form-item>
    </a-col>
    <a-col :span="24" class="ant-col-item"  v-if="hasFormP('sales_id')"
   >
        <a-form-item   
  name="sales_id" >
<template #label>销售人员 
</template> <YunzhupaasUsersSelect    v-model:value="dataForm.sales_id"  @change="changeData('sales_id',-1)"  
 placeholder="请选择销售人员"   :allowClear='true'  :style='{"width":"100%"}' selectType="all"     >
</YunzhupaasUsersSelect>
        </a-form-item>
    </a-col>
    <a-col :span="24" class="ant-col-item"  v-if="hasFormP('customer_source')"
   >
        <a-form-item   
  name="customer_source" >
<template #label>来源 
</template> <YunzhupaasSelect    v-model:value="dataForm.customer_source"  @change="changeData('customer_source',-1)"  
 placeholder="请选择来源"   :templateJson="state.interfaceRes.customer_source" :allowClear='true'  :style='{"width":"100%"}' :showSearch='false'          :options="optionsObj.customer_sourceOptions"          :fieldNames="optionsObj.customer_sourceProps"
    >
</YunzhupaasSelect>
        </a-form-item>
    </a-col>
    <a-col :span="24" class="ant-col-item"  v-if="hasFormP('remark')"
   >
        <a-form-item   
  name="remark" >
<template #label>备注 
</template> <YunzhupaasTextarea    v-model:value="dataForm.remark"  @change="changeData('remark',-1)"  
 placeholder="请输入备注"   :maxlength="200"  :allowClear='true'  :style='{"width":"100%"}' :autoSize='{"minRows":4,"maxRows":4}'  :showCount = "false"     >
</YunzhupaasTextarea>
        </a-form-item>
    </a-col>
                    <!-- 表单结束 -->
                </a-row>
            </a-form>
        </a-row>
    </BasicDrawer>
</template>
<script lang="ts" setup>
    import { create, update, getInfo } from './helper/api';
    import { reactive, toRefs, nextTick, ref, unref, computed,toRaw, inject } from 'vue';
    import { BasicDrawer, useDrawer } from '@/components/Drawer';
    import { yunzhupaasRelationForm } from '@/components/yunzhupaas';
    import { useMessage } from '@/hooks/web/useMessage';
    import { useI18n } from '@/hooks/web/useI18n';
    import { useUserStore } from '@/store/modules/user';
    import type { FormInstance } from 'ant-design-vue';
    import { thousandsFormat , getDateTimeUnit, getTimeUnit} from '@/utils/yunzhupaas';
    import { getDictionaryDataSelector } from '@/api/systemData/dictionary';
    import { getDataInterfaceRes } from '@/api/systemData/dataInterface';
    import dayjs from 'dayjs';
    // 表单权限
    import { usePermission } from '@/hooks/web/usePermission';
    import { cloneDeep } from 'lodash-es';
    import { buildUUID } from '@/utils/uuid';
    import { CaretRightOutlined } from '@ant-design/icons-vue';


    interface State {
dataForm:  any; 
tableRows: any; 
dataRule:  any; 
optionsObj: any; 
childIndex: any; 
isEdit: any; 
interfaceRes:  any; 
//可选范围默认值
ableAll: any; 
//掩码配置
maskConfig:any; 
//定位属性
locationScope:any; 
extraOptions: any; 
        title: string;
continueText: string;         allList: any[];
        currIndex: number;
        isContinue: boolean;
        submitType: number;
        showContinueBtn: boolean;
    }

    const emit = defineEmits(['reload']);
    const getLeftTreeActiveInfo: (() => any) | null = inject('getLeftTreeActiveInfo', null);
    const userStore = useUserStore();
    const userInfo = userStore.getUserInfo;
    const { createMessage, createConfirm } = useMessage();
    const { t } = useI18n();
    const [registerDrawer, { openDrawer, setDrawerProps }] = useDrawer();
    const formRef = ref<FormInstance>();
    const state = reactive<State>({
dataForm: {
        lead_name:undefined,
        mobile:undefined,
        email:undefined,
        lead_status:'Unassigned',
        sales_id:undefined,
        customer_source:'',
        remark:undefined,
version: 0,
},

tableRows:{
},

dataRule: {
                lead_name: [
                {
                required: true,
                message: t('sys.validate.textRequiredSuffix','不能为空'),
                trigger: 'blur'
                },
            ],
                mobile: [
                {
                required: true,
                message: t('sys.validate.textRequiredSuffix','不能为空'),
                trigger: 'blur'
                },
                    {
                    pattern: /^1[3456789]\d{9}$/,
                    message:  t('sys.validate.mobilePhone','请输入正确的手机号码'), 
                    trigger: 'blur'
                    },
            ],
                email: [
                    {
                    pattern: /^[a-z0-9]+([._\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/,
                    message:  t('sys.validate.email','请输入正确的邮箱'), 
                    trigger: 'blur'
                    },
            ],
                lead_status: [
                {
                required: true,
                message: t('sys.validate.arrayRequiredPrefix	','请至少选择一个'),
                trigger: 'change'
                },
            ],
                sales_id: [
                {
                required: true,
                message: t('sys.validate.arrayRequiredPrefix	','请至少选择一个'),
                trigger: 'change'
                },
            ],
},

optionsObj:{
                lead_statusOptions:[{"fullName":"待分配","id":"Unassigned"},{"fullName":"跟进中","id":"InProgress"},{"fullName":"已转换","id":"Converted"},{"fullName":"无效","id":"Invalid"}],
            lead_statusProps:{"label":"fullName","value":"id"  },
            customer_sourceOptions:[],
            customer_sourceProps:{"label":"fullName","value":"enCode"  },
},

childIndex: -1, 
isEdit: false, 
interfaceRes:  {"lead_status":[],"mobile":[],"lead_name":[],"customer_source":[],"remark":[],"sales_id":[],"email":[]}, 
//可选范围默认值
ableAll:{
},

//掩码配置
maskConfig:{
            lead_name: {"prefixType":1,"useUnrealMask":false,"maskType":1,"unrealMaskLength":1,"prefixLimit":0,"suffixLimit":0,"filler":"*","prefixSpecifyChar":"","suffixType":1,"ignoreChar":"","suffixSpecifyChar":""} ,
            mobile: {"prefixType":1,"useUnrealMask":false,"maskType":1,"unrealMaskLength":1,"prefixLimit":0,"suffixLimit":0,"filler":"*","prefixSpecifyChar":"","suffixType":1,"ignoreChar":"","suffixSpecifyChar":""} ,
            email: {"prefixType":1,"useUnrealMask":false,"maskType":1,"unrealMaskLength":1,"prefixLimit":0,"suffixLimit":0,"filler":"*","prefixSpecifyChar":"","suffixType":1,"ignoreChar":"","suffixSpecifyChar":""} ,
},

//定位属性
locationScope:{
},

extraOptions:{
},

        title: "",
 continueText: "",         allList: [],
        currIndex: 0,
        isContinue: false,
        submitType: 0,
        showContinueBtn:  true ,
    });
    const { title,  continueText,  showContinueBtn, dataRule, dataForm, optionsObj, ableAll, maskConfig,submitType } = toRefs(state);

    const getPrevDisabled = computed(() => state.currIndex === 0);
    const getNextDisabled = computed(() => state.currIndex === state.allList.length - 1);
    // 表单权限
    const { hasFormP } = usePermission();

    defineExpose({ init });

    function init(data) {
        state.submitType = 0;
        state.isContinue = false;
        state.title = !data.id ? t('common.add2Text','新增') : t('common.editText','编辑');
 state.continueText = !data.id ? t('common.continueAndAddText','确定并新增') : t('common.continueText','确定并继续');         setFormProps({ continueLoading: false });
        state.dataForm.id = data.id;
        openDrawer();
        state.allList = data.allList;
        state.currIndex = state.allList.length && data.id ? state.allList.findIndex((item) => item.id === data.id) : 0;
        nextTick(() => {
            getForm().resetFields();
            setTimeout(initData, 0);
        });
    }
    function initData() {
        changeLoading(true);
        if (state.dataForm.id) {
            getData(state.dataForm.id);
        } else {
            //初始化options
    getcustomer_sourceOptions();

            // 设置默认值
            state.dataForm={
        lead_name:undefined,
        mobile:undefined,
        email:undefined,
        lead_status:'Unassigned',
        sales_id:undefined,
        customer_source:'',
        remark:undefined,
version: 0,
            };
            if (getLeftTreeActiveInfo) state.dataForm = {...state.dataForm, ...(getLeftTreeActiveInfo() || {}) };
            state.childIndex = -1;
            changeLoading(false);
        }
    }
    function getForm() {
        const form = unref(formRef);
        if (!form) {
            throw new Error('form is null!');
        }
        return form;
    }
    function getData(id) {
        getInfo(id).then((res) => {
            state.dataForm = res.data || {};
    getcustomer_sourceOptions();

            state.childIndex = -1;
            changeLoading(false);
        });
    }
    async function handleSubmit(type) {
        try {
            const values = await getForm()?.validate();
            if (!values) return;


             setFormProps({ confirmLoading: true });
            const formMethod = state.dataForm.id ? update : create;
            formMethod(state.dataForm)
                    .then((res) => {
                        createMessage.success(res.msg);
                        setFormProps({ confirmLoading: false });
                        if (state.submitType == 1) {
                            initData();
                            state.isContinue = true;
                        } else {
                            setFormProps({ open: false });
                            emit('reload');
                        }
                    })
                    .catch(() => {
                        setFormProps({ confirmLoading: false });
                    });
        } catch (_) {}
    }
    function handlePrev() {
        state.currIndex--;
        handleGetNewInfo();
    }
    function handleNext() {
        state.currIndex++;
        handleGetNewInfo();
    }
    function handleGetNewInfo() {
        changeLoading(true);
        getForm().resetFields();
        const id = state.allList[state.currIndex].id;
        getData(id);
    }
    function setFormProps(data) {
        setDrawerProps(data);
    }
    function changeLoading(loading) {
        setDrawerProps({ loading });
    }
    async function onClose() {
        if (state.isContinue) emit('reload');
        return true;
    }

        function changeData(model, index) {
    state.isEdit = false
    state.childIndex = index
    for (let key in state.interfaceRes) {
        if (key != model) {
            let faceReList = state.interfaceRes[key]
            for (let i = 0; i < faceReList.length; i++) {
                let relationField = faceReList[i].relationField;
                if(relationField){
                    let modelAll = relationField.split('-');
                    let faceMode = '';
                    let faceMode2 = modelAll.length == 2?modelAll[0].substring(0, modelAll[0].length-4) +modelAll[1]:""
                    for (let i = 0; i < modelAll.length; i++) {
                        faceMode += modelAll[i];
                    }
                    if (faceMode == model || faceMode2 == model ) {
                        let options = 'get' + key + 'Options';
                        eval(options)(true);
                        changeData(key, index)
                    }
                }
            }
        }
    }
}
function changeDataFormData(type, data, model,index,defaultValue) {
    if(!state.isEdit) {
        if (type == 2) {
            for (let i = 0; i < state.dataForm[data].length; i++) {
                if (index == -1) {
                    state.dataForm[data][i][model] = defaultValue
                } else if (index == i) {
                    state.dataForm[data][i][model] = defaultValue
                }
            }
        } else {
            state.dataForm[data] = defaultValue
        }
    }
}
            //数据选项--数据字典初始化方法
    function getcustomer_sourceOptions() {
        getDictionaryDataSelector('797256993944371205').then(res => {
            state.optionsObj.customer_sourceOptions = res.data.list
        })
    }
function getRelationDate(timeRule, timeType, timeTarget, timeValueData, dataValue) {
    let timeDataValue: any = null;
    let timeValue = Number(timeValueData);
    if (timeRule) {
        if (timeType == 1) {
            timeDataValue = timeValue;
        } else if (timeType == 2) {
            timeDataValue = dataValue;
        } else if (timeType == 3) {
            timeDataValue = new Date().getTime();
        } else if (timeType == 4 || timeType == 5) {
            const type = getTimeUnit(timeTarget);
            const method = timeType == 4 ? 'subtract' : 'add';
            timeDataValue = dayjs()[method](timeValue, type).valueOf();
        }
    }
    return timeDataValue;
}
function getRelationTime(timeRule, timeType, timeTarget, timeValue, formatType, dataValue) {
    let format = formatType == 'HH:mm' ? 'HH:mm:00' : formatType;
    let timeDataValue: any = null;
    if (timeRule) {
        if (timeType == 1) {
            timeDataValue = timeValue || '00:00:00';
            if (timeDataValue.split(':').length == 3) {
                timeDataValue = timeDataValue;
            } else {
                timeDataValue = timeDataValue + ':00';
            }
        } else if (timeType == 2) {
            timeDataValue = dataValue;
        } else if (timeType == 3) {
            timeDataValue = dayjs().format(format);
        } else if (timeType == 4 || timeType == 5) {
            const type = getTimeUnit(timeTarget + 3);
            const method = timeType == 4 ? 'subtract' : 'add';
            timeDataValue = dayjs()[method](timeValue, type).format(format);
        }
    }
    return timeDataValue;
}
</script>
