import { Button, Form, Input, Select, Space } from "antd";
import { useContext, useState } from "react";
import SeamlessScroll from "zy-react-library/components/SeamlessScroll";
import Title from "~/pages/Container/Map/components/Content/port/Title";
import { Context } from "~/pages/Container/Map/js/context";
import "./index.less";

const { Option } = Select;

const XiaoFang = () => {
  const { currentPort, area, currentBranchOffice } = useContext(Context);
  const [form] = Form.useForm();
  const [deviceTypeList, setDeviceTypeList] = useState([
    { name: "地下消防栓栓体", bianma: "dxxfsst" },
    { name: "红色灭火器", bianma: "b9561bbc6243bfac6ebe0397a62f55" },
    { name: "灭火毯", bianma: "mgt" },
    { name: "并盖", bianma: "jg001" },
    { name: "消防枪头", bianma: "xfqt001" },
    { name: "强化水灭火器", bianma: "qhsmhq001" },
    { name: "灭火器托架", bianma: "mhqtj001" },
    { name: "消防箱", bianma: "xfx001" },
    { name: "干粉灭火器", bianma: "xfsb001" },
    { name: "二氧化碳灭火器", bianma: "ryhrmhq01" },
    { name: "消防栓", bianma: "243bfac6ebe0397a62f55" },
    { name: "水基型灭火器", bianma: "sjxmhq01" },
    { name: "消防水带", bianma: "xfsd01" },
    { name: "水枪", bianma: "shuiq" },
    { name: "消防栓箱体", bianma: "xfxxt" },
    { name: "灭火器箱", bianma: "mhqx01" },
    { name: "消防桶", bianma: "xft01" },
    { name: "消防锹", bianma: "xgq01" },
    { name: "消防斧", bianma: "xff01" },
    { name: "消防钩", bianma: "xfg01" },
    { name: "水枪、水带接口", bianma: "sdsddj" },
    { name: "消防二分水器", bianma: "scrfsq" },
    { name: "消防栓扳手", bianma: "xfsbs" },
    { name: "强光照明灯", bianma: "qgzmd" },
    { name: "铁铤", bianma: "tx" },
    { name: "消防头盔", bianma: "xftk" },
    { name: "消防员灭火防护服", bianma: "xfymhf" },
    { name: "消防手套", bianma: "xfst" },
    { name: "消防安全腰带、消防腰带、斧套", bianma: "xfanyd" },
    { name: "消防员灭火防护靴", bianma: "xfymhhx" },
    { name: "消防轻型安全绳", bianma: "xfqxaqs" },
    { name: "消防过滤式综合防毒面具", bianma: "xfglszhfdmj" },
    { name: "多功能水枪", bianma: "dgnsq" },
    { name: "消防呼吸面罩", bianma: "xfhxmz" },
    { name: "微型消防站柜子", bianma: "wxxfzgz" },
    { name: "七氟丙烷灭火器", bianma: "qfbwmhq" },
    { name: "水泵接合器", bianma: "38" },
    { name: "消防器材箱", bianma: "xfsx" },
    { name: "消防砂", bianma: "xfs" },
    { name: "泡沫枪", bianma: "poameqiang" },
    { name: "移动消防水炮", bianma: "yidongxiaofangshuipao" },
    { name: "移动泡沫炮", bianma: "yidongpaomenpao" },
  ]);
  const [block2List, setBlock2List] = useState([
    { FIRE_DEVICE_TYPE_NAME: "干粉灭火器", FIRE_POINT_NAME: "浴池男更衣室楼梯", COUNT: 3 },
    { FIRE_DEVICE_TYPE_NAME: "灭火器箱", FIRE_POINT_NAME: "综合楼一楼东", COUNT: 2 },
    { FIRE_DEVICE_TYPE_NAME: "灭火器箱", FIRE_POINT_NAME: "三中队二层警容镜旁", COUNT: 1 },
    { FIRE_DEVICE_TYPE_NAME: "灭火器箱", FIRE_POINT_NAME: "一中队二层西", COUNT: 1 },
    { FIRE_DEVICE_TYPE_NAME: "灭火器箱", FIRE_POINT_NAME: "二中队二层楼道东", COUNT: 1 },
    { FIRE_DEVICE_TYPE_NAME: "灭火器箱", FIRE_POINT_NAME: "一中队二层东", COUNT: 1 },
    { FIRE_DEVICE_TYPE_NAME: "灭火器箱", FIRE_POINT_NAME: "三中队二层更衣室门前", COUNT: 1 },
    { FIRE_DEVICE_TYPE_NAME: "灭火器箱", FIRE_POINT_NAME: "三中队车库器材室门前", COUNT: 1 },
    { FIRE_DEVICE_TYPE_NAME: "灭火器箱", FIRE_POINT_NAME: "三中队一层车库楼梯口东侧", COUNT: 1 },
    { FIRE_DEVICE_TYPE_NAME: "灭火器箱", FIRE_POINT_NAME: "三中队一层车库楼梯口东侧", COUNT: 1 },
    { FIRE_DEVICE_TYPE_NAME: "灭火器箱", FIRE_POINT_NAME: "三中队燃料间", COUNT: 1 },
    { FIRE_DEVICE_TYPE_NAME: "灭火器箱", FIRE_POINT_NAME: "二中队二层楼道西", COUNT: 1 },
    { FIRE_DEVICE_TYPE_NAME: "灭火器箱", FIRE_POINT_NAME: "二中队老楼车库", COUNT: 1 },
    { FIRE_DEVICE_TYPE_NAME: "灭火器箱", FIRE_POINT_NAME: "三中队三层楼道", COUNT: 1 },
    { FIRE_DEVICE_TYPE_NAME: "灭火器箱", FIRE_POINT_NAME: "一中队车棚东南角", COUNT: 1 },
    { FIRE_DEVICE_TYPE_NAME: "灭火器箱", FIRE_POINT_NAME: "一中队厨房门南侧", COUNT: 1 },
    { FIRE_DEVICE_TYPE_NAME: "灭火器箱", FIRE_POINT_NAME: "一中队一层东", COUNT: 1 },
    { FIRE_DEVICE_TYPE_NAME: "灭火器箱", FIRE_POINT_NAME: "二中队一层车库东", COUNT: 1 },
    { FIRE_DEVICE_TYPE_NAME: "灭火器箱", FIRE_POINT_NAME: "一中队一层西", COUNT: 1 },
    { FIRE_DEVICE_TYPE_NAME: "灭火器箱", FIRE_POINT_NAME: "二中队三层楼道西", COUNT: 1 },
  ]);

  const handleReset = () => {
    form.resetFields();
    form.submit();
  };

  const handleQuery = (values) => {
    console.log(values);
  };

  return (
    <div className="port_xiaofang">
      <div className="block1">
        <Title title="消防设备查询" />
        <div className="content">
          <Form form={form} labelCol={{ span: 8 }} onFinish={handleQuery}>
            <Form.Item label="消防设备类型" name="FIRE_DEVICE_TYPE_ID">
              <Select placeholder="请选择消防设备类型" classNames={{ root: "xiaofang-select" }}>
                {deviceTypeList.map(item => (
                  <Option key={item.bianma} value={item.bianma}>
                    {item.name}
                  </Option>
                ))}
              </Select>
            </Form.Item>
            <Form.Item label="关键字" name="KEYWORDS">
              <Input placeholder="请输入消防点位关键字" classNames={{ input: "xiaofang-input" }} />
            </Form.Item>
            <Form.Item label=" " colon={false}>
              <div className="button">
                <Space>
                  <Button onClick={handleReset}>重置</Button>
                  <Button type="primary" onClick={form.submit}>查询</Button>
                </Space>
              </div>
            </Form.Item>
          </Form>
        </div>
      </div>

      <div className="block2">
        <Title title="消防设备列表" />
        <div className="content">
          <div className="table">
            <div className="tr">
              <div className="td">消防点位</div>
              <div className="td">设备类型</div>
              <div className="td">数量</div>
            </div>
            <div className="scroll">
              <SeamlessScroll list={block2List} step={0.5}>
                {block2List.map((item, index) => (
                  <div key={index} className="tr">
                    <div className="td">
                      {item.FIRE_POINT_NAME}
                    </div>
                    <div className="td">
                      {item.FIRE_DEVICE_TYPE_NAME}
                    </div>
                    <div className="td">
                      {item.COUNT}
                    </div>
                  </div>
                ))}
              </SeamlessScroll>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default XiaoFang;
