import React, { useState, useEffect, useRef } from 'react'
import SiteModal from '@/components/Modal/SiteModa';
import { Form, Input, notification, Select, Checkbox, message, Button } from 'antd'
import BaseForm from '@/components/BaseForm/index';
import { Switch } from 'react-router';
import { iteratee } from 'lodash';
import styles from './EditModal.less';
import v from 'voca';
import VisibleRoleModal from './RolseSelect/VisibleRoleModal'
import VisibleIISAgentConfig from './IISAgentConfig/VisibleIISAgentConfig'
import { GetMessageTemplate } from '@/services/platform/messagemanage'
import moment from 'moment'
import { UpdateMessageConfig, InsertMessageConfig, AddIISAgentConfig } from '@/services/platform/messagemanage'

const { Item } = Form;

const EditModal = props => {


    const [form] = Form.useForm();
    const [loading, setLoading] = useState(false);
    const [isStart, setIsStart] = useState(false);
    const [IISConfig, setIISConfig] = useState(null)

    const { template, confirmModal } = props
    const [currentTrench, setCurrentTrench] = useState({
        isMessageShow: false,
        isAPPShow: false,
        isWEBShow: false,
        isWXShow: false
    })
    const plainOptions = ['平台弹框', '短信推送', '公众号推送'];
    const [APP_ITEMS, setAPP_ITEMS] = useState([])
    const [WEB_ITEMS, setWEB_ITEMS] = useState([])
    const [WX_ITEMS, setWX_ITEMS] = useState([])
    const [MES_ITEMS, setMES_ITEMS] = useState([])


    useEffect(() => {
        GetMessageTemplate().then(
            res => {
                if (res.code === 0) {
                    let arr1 = []
                    let arr2 = []
                    let arr3 = []
                    let arr4 = []
                    res.data.map((item, index) => {
                        if (item.Type === "公众号") {
                            arr1.push(item)
                        }
                        if (item.Type === "短信") {
                            arr2.push(item)
                        }
                        if (item.Type === "APP") {
                            arr3.push(item)
                        }
                        if (item.Type === "WEB") {
                            arr4.push(item)
                        }
                    })
                    setAPP_ITEMS(arr3)
                    setMES_ITEMS(arr2)
                    setWX_ITEMS(arr1)
                    setWEB_ITEMS(arr4)
                }
            }
        )
    }, [])
    useEffect(() => {

        if (template.ThemeName) {
            console.log(template);
            form.setFieldsValue({
                name: template.MsgType,
                isStart: template.IsStarted === "0" ? "关闭" : "开启",
                to_person: template.PushGroup,
                push_plan: template.MsgType,
                push_mode: template.PushMode === null ? '' : template.PushMode.split(","),

                app_template: template.AppTemplateID,
                app_path: template.AppFunctionPath,
                wx_template: parseInt(template.PublicTemplateID),
                h5_path: template.PublicPath,
                miniprogram_path: template.MiniAppRoute,
                web_template: template.WebTemplateID,
                web_path: template.WebFunctionPath,
                message_template: template.MsgTemplateID,
            })
            setCurrentTrench({
                isAPPShow: template.PushMode && template.PushMode.split(",").indexOf("平台弹框") > -1 ? true : false,
                isWXShow: template.PushMode && template.PushMode.split(",").indexOf("公众号推送") > -1 ? true : false,
                isWEBShow: template.PushMode &&template.PushMode.split(",").indexOf("平台弹框") > -1 ? true : false,
                isMessageShow: template.PushMode &&template.PushMode.split(",").indexOf("短信推送") > -1 ? true : false,
            })
        }

    }, [props])
    const onNameChange = (e) => {
        form.setFieldsValue({
            push_plan: e.target.value
        })
    }

    const onSubmit = () => {
        console.log(form.getFieldValue())
        let fv = form.getFieldValue()
        if (template.ThemeName) {
            console.log('fv.wx_template',fv.wx_template);
            console.log('fv.push_mode.toString()',fv.push_mode.toString());
            let a = {
                ID: template.ID,
                ThemeName: template.ThemeName,
                MsgType: fv.name,
                PublicTemplateID: fv.wx_template.toString(),
                PublicConfig: template.PublicConfig,
                PublicPath: fv.h5_path,
                MsgTemplateName: template.MsgTemplateName,
                MsgTemplateCode: template.MsgTemplateCode,
                MsgConfig: template.MsgConfig,
                MiniAppRoute: fv.miniprogram_path,
                AppFunctionPath: fv.app_path,
                AppConfig: template.AppConfig,
                WebFunctionPath: fv.web_path,
                WebConfig: template.WebConfig,
                IsDelete: template.IsDelete,
                InputTime: moment().format("YYYY-MM-DD HH:mm:ss"),
                Pusher: template.Pusher,
                PushMode: fv.push_mode.toString(),
                PushPath: template.PushPath,
                IsStarted: fv.isStart,
                MsgTemplateID: fv.message_template,
                AppTemplateID: fv.app_template,
                WebTemplateID: fv.web_template,
                PushGroup: fv.to_person.toString()
            }
            console.log(a)
            UpdateMessageConfig(a).then(
                res => {
                    if (res.code === 0) {
                        if (IISConfig) {
                            AddIISAgentConfig(IISConfig).then(
                                res => {
                                    if (res.code === 0) {
                                        message.success("保存成功")
                                        confirmModal()
                                    }
                                }
                            )
                        } else {
                            message.success("保存成功")
                            confirmModal()
                        }



                    }
                }
            )

        } else {
            console.log('fv.push_mode.toString()',fv.push_mode.toString());
            let b = {
                ThemeName: "定时推送",
                MsgType: fv.name,
                PublicTemplateID: fv.wx_template,
                PublicConfig: template.PublicConfig,
                PublicPath: fv.h5_path,
                MsgTemplateName: template.MsgTemplateName,
                MsgTemplateCode: template.MsgTemplateCode,
                MsgConfig: template.MsgConfig,
                MiniAppRoute: fv.miniprogram_path,
                AppFunctionPath: fv.app_path,
                AppConfig: template.AppConfig,
                WebFunctionPath: fv.web_path,
                WebConfig: template.WebConfig,
                IsDelete: template.IsDelete,
                InputTime: moment().format("YYYY-MM-DD HH:mm:ss"),
                Pusher: template.Pusher,
                PushMode: fv.push_mode.toString(),
                PushPath: template.PushPath,
                IsStarted: fv.isStart,
                MsgTemplateID: fv.message_template,
                AppTemplateID: fv.app_template,
                WebTemplateID: fv.web_template,
                PushGroup: fv.to_person.toString()
            }
            InsertMessageConfig(b).then(
                res => {
                    if (res.code === 0) {
                        if (IISConfig) {
                            AddIISAgentConfig(IISConfig).then(
                                res => {
                                    if (res.code === 0) {
                                        message.success("保存成功")
                                        confirmModal()
                                    }
                                }
                            )
                        } else {
                            message.success("保存成功")
                            confirmModal()
                        }
                    }
                }
            )
        }

    }
    const operateProject = () => {

    }
    const onTypeChange = (value) => {
        setCurrentTrench({
            isAPPShow: value.indexOf("平台弹框") > -1 ? true : false,
            isWXShow: value.indexOf("公众号推送") > -1 ? true : false,
            isWEBShow: value.indexOf("平台弹框") > -1 ? true : false,
            isMessageShow: value.indexOf("短信推送") > -1 ? true : false,
        })
    }
    const onIISAgentSubmit = (value) => {
        console.log(value, "IIS配置")
        setIISConfig(value)

    }

    const onPushSubmit = (value) => {
        console.log(value, "onPushSubmit")
    }

    return (
        <SiteModal
            {...props}
            title={template.ThemeName ? "编辑推送方案" : "新增推送方案"}
            bodyStyle={{ width: '100%', minHeight: '100px' }}
            style={{ top: 200, borderRadius: '20px' }}
            width="1200px"
            destroyOnClose
            cancelText="取消"
            okText="确认"
            onOk={() => onSubmit()}
            confirmLoading={loading}
        >
            <div className={styles.editModal_container}>
                <Form form={form} labelCol={{ span: 4 }}>
                    <Item
                        label="方案名称"
                        name="name"
                        rules={[
                            {
                                required: true,
                                message: '请输入方案名称',
                            },
                        ]}
                    >
                        <Input placeholder="请输入方案名称" disabled={template.ThemeName ? true : false} onChange={onNameChange} />
                    </Item>
                    <Item
                        label="是否开启"
                        name="isStart"

                    >
                        <Select >
                            <Option value="1">开启</Option>
                            <Option value="0">关闭</Option>
                        </Select>
                    </Item>
                    <Item
                        label="推送人"
                        name="to_person"

                    >
                        <VisibleRoleModal
                            onSubmit={onPushSubmit}
                            title={"推送人员"}

                        />
                    </Item>
                    <Item
                        label="定时计划"
                        name="push_plan"
                    >
                        <VisibleIISAgentConfig agentConfig={template.item && template.item.AgentConfig} onIISAgentSubmit={onIISAgentSubmit} />
                    </Item>
                    <Item
                        label="推送方式"
                        name="push_mode"
                    >
                        <Checkbox.Group
                            options={plainOptions}
                            onChange={onTypeChange}

                        />
                    </Item>
                    <div className={styles.push_trench}>
                        {
                            currentTrench.isAPPShow && (
                                <div className={styles.trench_card}>
                                    <div className={styles.card_title}>
                                        <div className={styles.lable}>APP</div>
                                    </div>
                                    <div className={styles.card_body}>
                                        <Item
                                            label="模板"
                                            name="app_template"
                                        >
                                            <Select >
                                                {
                                                    APP_ITEMS.map((item, idx) => {
                                                        return (
                                                            <Option value={item.Id} key={idx}>{item.LikeName}</Option>
                                                        )
                                                    })
                                                }
                                            </Select>
                                        </Item>
                                        <Item
                                            label="功能路径"
                                            name="app_path"
                                        >
                                            <Input placeholder="请输入功能路径" />
                                        </Item>
                                    </div>
                                </div>
                            )
                        }
                        {
                            currentTrench.isWXShow && (
                                <div className={styles.trench_card}>
                                    <div className={styles.card_title}>
                                        <div className={styles.lable}>微信</div>
                                    </div>
                                    <div className={styles.card_body}>
                                        <Item
                                            label="模板"
                                            name="wx_template"
                                        >
                                            <Select >
                                                {
                                                    WX_ITEMS.map((item, idx) => {
                                                        return (
                                                            <Option value={item.Id} key={idx}>{item.LikeName}</Option>
                                                        )
                                                    })
                                                }
                                            </Select>
                                        </Item>
                                        <Item
                                            label="H5路由"
                                            name="h5_path"
                                        >
                                            <Input placeholder="请输入功能路径" />
                                        </Item>
                                        <Item
                                            label="小程序路由"
                                            name="miniprogram_path"
                                        >
                                            <Input placeholder="请输入功能路径" />
                                        </Item>
                                    </div>
                                </div>
                            )
                        }
                        {
                            currentTrench.isWEBShow && (
                                <div className={styles.trench_card}>
                                    <div className={styles.card_title}>
                                        <div className={styles.lable}>WEB</div>
                                    </div>
                                    <div className={styles.card_body}>
                                        <Item
                                            label="模板"
                                            name="web_template"
                                        >
                                            <Select >
                                                {
                                                    WEB_ITEMS.map((item, idx) => {
                                                        return (
                                                            <Option value={item.Id} key={idx}>{item.LikeName}</Option>
                                                        )
                                                    })
                                                }
                                            </Select>
                                        </Item>
                                        <Item
                                            label="功能路径"
                                            name="web_path"
                                        >
                                            <Input placeholder="请输入功能路径" />
                                        </Item>
                                    </div>
                                </div>
                            )
                        }

                        {
                            currentTrench.isMessageShow && (
                                <div className={styles.trench_card}>
                                    <div className={styles.card_title}>
                                        <div className={styles.lable}>短信</div>
                                    </div>
                                    <div className={styles.card_body}>
                                        <Item
                                            label="模板"
                                            name="message_template"
                                        >
                                            <Select >
                                                {
                                                    MES_ITEMS.map((item, idx) => {
                                                        return (
                                                            <Option value={item.Id} key={idx}>{item.LikeName}</Option>
                                                        )
                                                    })
                                                }
                                            </Select>
                                        </Item>
                                    </div>
                                </div>
                            )
                        }
                    </div>
                </Form>
            </div>

        </SiteModal>
    )
}
export default EditModal;