import { Button, Card, message, Steps, Empty, Form, Input, Select, InputNumber } from 'antd';
import { GridContent, PageContainer, RouteContext } from '@ant-design/pro-layout';
import React, { Fragment, useRef, useState, useEffect } from 'react';
import ProTable from '@ant-design/pro-table';
import {
  GetDeviceInfoPage,
  GetDicList,
  GetDeviceType,
  GetStoreDeviceTree,
  getQueryVariable,
  UpdateDeviceInfo,
} from './service';
import { gettree } from '../../sys/org/service';
const { Option, OptGroup } = Select;

const manages = (props) => {
  console.log(1);
  console.log(props);
  const actionRef = useRef();
  const [storeType, setStoreType] = useState();
  const [storeTypeArray, setStoreTypeArray] = useState([]);
  const [OrgList, setOrgList] = useState([]);
  const [OrgListArray, setOrgListArray] = useState([]);
  const [dicDataAny, setDicDataAny] = useState([]);
  const [dicData, setDicData] = useState([]);
  //初始化数据
  useEffect(() => {
    const initStoreType = () => {
      GetDeviceType().then((data) => {
        let list = {};
        let list2 = [];
        data.data.forEach((item) => {
          list2.push({
            text: item.name,
            id: item.id,
          });
          list[item.id] = { text: item.name };
        });
        setStoreTypeArray(list2);
        setStoreType(list);
      });
    };
    function initOrgList() {
      gettree().then((r) => {
        setOrgList(r.data);
        let list = {};
        formateData(r.data);
        function formateData(datas) {
          for (var i in datas) {
            list[datas[i]['value']] = { text: datas[i]['title'] };
            if (datas[i].children) {
              formateData(datas[i].children);
            }
          }
        }
        setOrgListArray(list);
      });
    }
    initOrgList();
    initStoreType();
    function intDicData() {
      GetDicList('DeviceClientType').then((r) => {
        var arr = r.data;
        let data = {};
        if (r.succeeded) {
          var list = [];
          arr.forEach((item) => {
            data[item.code] = { text: item.code };
            list.push({
              code: item.code,
              value: item.code,
            });
          });
          setDicDataAny(data);
          setDicData(list);
        }
      });
    }
    intDicData();
  }, []);
  //设置
  const [tabStatus, seTabStatus] = useState({
    operationKey: 'basis',
    tabActiveKey: 'basis',
  });

  const onTabChange = (key) => {
    seTabStatus({ ...tabStatus, operationKey: key });
  };

  const operationTabList = [
    {
      key: 'basis',
      tab: '店铺管理',
    },
  ];
  const columns = [
    {
      title: '主键',
      dataIndex: 'id',
      hideInSearch: true,
      hideInTable: true,
      tip: '规则名称是唯一的 key',
    },
    {
      title: '设备名称',
      dataIndex: 'deviceName',
      valueType: 'textarea',
    },
    {
      title: '设备类型',
      dataIndex: 'deviceTypeKey',
      valueEnum: dicDataAny,
    },
    {
      title: '归属门店',
      dataIndex: 'orgId',
      search: false,
      valueEnum: OrgListArray,
    },
    {
      title: '设备地址',
      dataIndex: 'deviceAddr',
      search: false,
      valueType: 'textarea',
    },
    {
      title: '设备分类',
      dataIndex: 'deviceTypeId',
      valueEnum: storeType,
    },

    {
      title: '坐标',
      dataIndex: 'deviceLoc',
      valueType: 'textarea',
      search: false,
    },
    {
      title: '状态',
      dataIndex: 'status',
      valueEnum: {
        0: { text: '正常', status: 'Processing' },
        1: { text: '停用', status: 'Success' },
      },
    },
    {
      title: '操作',
      dataIndex: 'option',
      valueType: 'option',
      render: (_, record) => [
        <a
          key="primary"
          type="primary"
          onClick={() => {
            record.status = record.status == 0 ? 1 : 0;
            UpdateDeviceInfo(record).then((r) => {
              if (r.data) {
                actionRef.current.reload();
              } else {
                message.error('更新失败');
              }
            });
          }}
        >
          {record.status == 1 ? '启用' : '禁用'}
        </a>,
      ],
    },
  ];
  const contentList = {
    basis: (
      <Card
        title="店铺管理"
        style={{
          marginBottom: 24,
        }}
        bordered={false}
      >
        <ProTable
          actionRef={actionRef}
          rowKey="id"
          search={false}
          request={async (params) => {
            var data = [];
            var newdata = [];
            var total = 0;
            await GetDeviceInfoPage(params).then((r) => {
              const id = getQueryVariable(window.location.search, 'values');
              data = r.data.data;

              for (let i = 0; i < data.length; i++) {
                if (data[i].orgId == id) {
                  newdata.push(data[i]);
                }
              }
              total = newdata.length;
            });
            return {
              data: newdata,
              success: true,
              total: total,
            };
          }}
          columns={columns}
        />
      </Card>
    ),
  };
  function getQueryVariable(searchIn, variable) {
    if (!searchIn || !variable) {
      return null;
    }
    const query = searchIn.substring(1);
    const vars = query.split('&');
    for (let i = 0; i < vars.length; i++) {
      const pair = vars[i].split('=');
      if (pair[0] === variable) {
        return pair[1];
      }
    }
    return null;
  }
  return (
    <PageContainer title={'店铺管理'} onTabChange={onTabChange} tabList={operationTabList}>
      {contentList[tabStatus.operationKey]}
    </PageContainer>
  );
};

export default manages;
