import React, { useState, useRef, useEffect, useImperativeHandle } from "react";
import { connect } from "react-redux";
import { Form, Row, Col } from "@douyinfe/semi-ui";
import "./cameraModal.less";
function ipcCamera ({
    aRef,
    CameraKind,
    CameraAbility,
    venderList,
    cameraData,
    ashTrue,
    ashFalse
}) {
    const { TextArea } = Form;
    const form = useRef();
    const [cloud, setcloud] = useState(""); //云台支持
    const [voice, setvoice] = useState(""); //语音支持
    const [memoryList, setMemoryList] = useState([
        {
            id: 1,
            value: "8g",
        },
        {
            id: 2,
            value: "16g",
        },
        {
            id: 3,
            value: "32g",
        },
        {
            id: 4,
            value: "64g",
        },
        {
            id: 5,
            value: "128g",
        },
        {
            id: 6,
            value: "256g",
        },
        {
            id: 7,
            value: ">256g",
        },
    ]); //内存卡列表

    useEffect(() => {
        setcloud(cameraData.cloudControl || "");
        setvoice(cameraData.voice || "");
    }, []);
    function handleLocation () {
        //高德经纬度
        window.open("https://lbs.amap.com/tools/picker", "_blank");
    }
    function positionForm (val) {
        //安装位置校验
        let zz = /^(-?\d+)(\.\d+)?$/;
        if (!val) {
            return "请输入或拾取高德经纬度坐标";
        } else if (val.split(",").length != 2) {
            return "请输入格式为116.354169,39.835452的经纬度坐标";
        } else if (!zz.test(val.split(",")[0])) {
            return "只能填写数字";
        } else if (!zz.test(val.split(",")[1])) {
            return "只能填写数字";
        } else {
            return "";
        }
    }
    useImperativeHandle(aRef, () => ({
        //传给父组件方法
        //子组件暴露给父组件的方法
        ipcCameraForm: form.current.validate,
        resetIpcCamera: form.current.reset,
        toempty: empty,
    }));
    function empty () {
        setcloud(null);
        setvoice(null);
    }
    return (
        <>
            <Form
                labelPosition="left"
                labelAlign="left"
                labelWidth="115px"
                onValueChange={(values) => {
                    let setting = ["abilityId", "cloudControl", "highDefinition", "kindId", "name", "position", "rtmp", "serialNo"]
                    let b = {}
                    setting.map((item) => {
                        if (values.hasOwnProperty(item)) {
                            return b.true = values.hasOwnProperty(item)
                        } else {
                            return b.false = values.hasOwnProperty(item)
                        }
                    })
                    Object.keys(b).length == 1 ? ashTrue() : ashFalse()

                }}
                initValues={{
                    name: cameraData ? cameraData.name : "",
                    venderId: cameraData ? cameraData.venderId : "",
                    memoryCard: cameraData ? cameraData.memoryCard : "",
                    position: cameraData.longitude
                        ? `${cameraData.longitude},${cameraData.latitude}`
                        : "",
                    kindId: cameraData ? cameraData.kindId : "",
                    abilityId: cameraData
                        ? cameraData.cameraAbilities
                            ? cameraData.cameraAbilities.map((item) => item.id)
                            : ""
                        : "",
                    cloudControl: cameraData ? cameraData.cloudControl : "",
                    voice: cameraData ? cameraData.voice : "",
                    serialNo: cameraData ? cameraData.serialNo : "",
                    rtmp: cameraData ? cameraData.rtmp : "",
                }}
                getFormApi={(formApi) => (form.current = formApi)}
            >
                <Row>
                    <Col span={12}>
                        <Form.Input
                            field="name"
                            label="设备名称:"
                            maxLength="36"
                            placeholder="请输入设备名称、常用项目或位置定义"
                            style={{ width: 307 }}
                            rules={[{ required: true, message: "请输入设备名称" }]}
                        />
                        <Form.Select
                            field="venderId"
                            label="设备厂家:"
                            placeholder="请选择设备厂家"
                            style={{ width: 307 }}
                        >
                            {venderList.map((item, index) => (
                                <Form.Select.Option key={index} value={item.id}>
                                    {item.name}
                                </Form.Select.Option>
                            ))}
                        </Form.Select>
                        <Form.Select
                            label="内存:"
                            field="memoryCard"
                            placeholder="未安装"
                            style={{ width: 307 }}
                        >
                            {memoryList.map((item, index) => (
                                <Form.Select.Option key={index} value={item.value}>
                                    {item.value}
                                </Form.Select.Option>
                            ))}
                        </Form.Select>
                        <div style={{ display: "flex" }}>
                            <Form.Input
                                field="position"
                                label="安装位置:"
                                maxLength="39"
                                placeholder="请输入或拾取高德经纬度坐标"
                                style={{ width: 270 }}
                                validate={positionForm}
                                rules={[
                                    { required: true, message: "请输入或拾取高德经纬度坐标" },
                                ]}
                            />
                            <div
                                style={{
                                    width: 32,
                                    height: 32,
                                    background: "#1859C1",
                                    marginLeft: 4,
                                    display: "flex",
                                    justifyContent: "center",
                                    alignItems: "center",
                                    cursor: "pointer",
                                    marginTop: 12,
                                    borderRadius: 3 + "px",
                                }}
                                onClick={handleLocation}
                            >
                                <img
                                    src="../../../assets/images/background/location.png"
                                    width={16}
                                    height={20}
                                />
                            </div>
                        </div>

                        <Form.Select
                            label="设备类型:"
                            field="kindId"
                            placeholder="请选择摄像头类型"
                            style={{ width: 180 }}
                            rules={[{ required: true, message: "请选择摄像头类型" }]}
                        >
                            {CameraKind.map((item, index) => (
                                <Form.Select.Option key={index} value={item.id}>
                                    {item.kind}
                                </Form.Select.Option>
                            ))}
                        </Form.Select>

                        <Form.Select
                            label="设备能力:"
                            multiple
                            maxTagCount={1}
                            field="abilityId"
                            placeholder="请选择能力"
                            style={{ width: 180 }}
                            rules={[{ required: true, message: "请选择能力" }]}
                        >
                            {CameraAbility.map((item, index) => (
                                <Form.Select.Option key={index} value={item.id}>
                                    {item.ability}
                                </Form.Select.Option>
                            ))}
                        </Form.Select>
                    </Col>
                    <Col span={12}>
                        <Form.RadioGroup
                            label="云台支持:"
                            field="cloudControl"
                            type="pureCard"
                            direction="horizontal"
                            style={{ padding: 0, paddingTop: 1, paddingBottom: 1 }}
                            rules={[{ required: true, message: "请选择云台支持" }]}
                            onChange={(checked) => {
                                console.log(checked.target.value);
                                if (checked.target.value == true) {
                                    setcloud(true);
                                } else {
                                    setcloud(false);
                                }
                            }}
                        >
                            <Form.Radio
                                value={true}
                                style={{
                                    width: 58,
                                    height: 30,
                                    padding: 0,
                                    margin: 0,
                                    background: "#F9F9F9",
                                }}
                            >
                                <div
                                    className="cloud"
                                    style={{
                                        width: 58,
                                        height: 30,
                                        textAlign: "center",
                                        lineHeight: "30px",
                                    }}
                                >
                                    支持
                                </div>
                                {cloud == true ? (
                                    <div
                                        style={{ position: "absolute", top: "-2px", right: "-1px" }}
                                    >
                                        <img
                                            src="/assets/images/background/formchoose.png"
                                            alt="1"
                                        />
                                    </div>
                                ) : (
                                    ""
                                )}
                            </Form.Radio>
                            <Form.Radio
                                value={false}
                                style={{
                                    width: 58,
                                    height: 30,
                                    padding: 0,
                                    margin: 0,
                                    marginLeft: 18,
                                    background: "#F9F9F9",
                                }}
                            >
                                <div
                                    className="cloud"
                                    style={{
                                        width: 58,
                                        height: 30,
                                        textAlign: "center",
                                        lineHeight: "30px",
                                    }}
                                >
                                    不支持
                                </div>
                                {cloud == false && cloud !== "" ? (
                                    <div
                                        style={{ position: "absolute", top: "-2px", right: "-1px" }}
                                    >
                                        <img
                                            src="/assets/images/background/formchoose.png"
                                            alt="1"
                                        />
                                    </div>
                                ) : (
                                    ""
                                )}
                            </Form.Radio>
                        </Form.RadioGroup>
                        <Form.RadioGroup
                            label="语音支持:"
                            field="voice"
                            type="pureCard"
                            direction="horizontal"
                            style={{ padding: 0 }}
                            onChange={(checked) => {
                                if (checked.target.value == true) {
                                    setvoice(true);
                                } else {
                                    setvoice(false);
                                }
                            }}
                        >
                            <Form.Radio
                                value={true}
                                style={{
                                    width: 58,
                                    height: 30,
                                    padding: 0,
                                    margin: 0,
                                    background: "#F9F9F9",
                                }}
                            >
                                <div
                                    className="voice"
                                    style={{
                                        width: 58,
                                        height: 30,
                                        textAlign: "center",
                                        lineHeight: "30px",
                                    }}
                                >
                                    支持
                                </div>
                                {voice == true ? (
                                    <div
                                        style={{ position: "absolute", top: "-2px", right: "-1px" }}
                                    >
                                        <img
                                            src="/assets/images/background/formchoose.png"
                                            alt="1"
                                        />
                                    </div>
                                ) : (
                                    ""
                                )}
                            </Form.Radio>
                            <Form.Radio
                                value={false}
                                style={{
                                    width: 58,
                                    height: 30,
                                    padding: 0,
                                    margin: 0,
                                    marginLeft: 18,
                                    background: "#F9F9F9",
                                }}
                            >
                                <div
                                    className="voice"
                                    style={{
                                        width: 58,
                                        height: 30,
                                        textAlign: "center",
                                        lineHeight: "30px",
                                    }}
                                >
                                    不支持
                                </div>
                                {voice == false && voice !== "" ? (
                                    <div
                                        style={{ position: "absolute", top: "-2px", right: "-1px" }}
                                    >
                                        <img
                                            src="/assets/images/background/formchoose.png"
                                            alt="1"
                                        />
                                    </div>
                                ) : (
                                    ""
                                )}
                            </Form.Radio>
                        </Form.RadioGroup>
                        <div>
                            <Form.Input
                                field="serialNo"
                                label="设备编号接入:"
                                maxLength="39"
                                placeholder="请输入设备编号"
                                style={{ width: 307 }}
                                rules={[{ required: true, message: "请输入设备编号" }]}
                            />
                        </div>
                        <TextArea
                            style={{ width: 320, height: 90 }}
                            field="rtmp"
                            label="RTMP地址接入:"
                            placeholder="请输入RTMP地址接入"
                            rules={[{ required: true, message: "请输入RTMP地址" }]}
                        />
                    </Col>
                    {/* <Col span={18}>
              
            </Col> */}
                </Row>
            </Form>
        </>
    );
}
function mapStateToProps (state) {
    const { auth, global, members } = state;
    return {
        loading: members.isRequesting,
        user: auth.user,
        actions: global.actions,
        members: members.data,
    };
}

export default connect(mapStateToProps)(ipcCamera);