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,
}) {
  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) => console.log(values)}
        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 }}
              />
            </div>
            <TextArea
              style={{ width: 320, height: 90 }}
              field="rtmp"
              label="RTMP地址接入:"
              placeholder="请输入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);
