import React, {useEffect, useState} from 'react';
import { connect, history } from 'umi';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { dispatchHandle } from '@/utils/publicHandle';
import { DescriptionForm } from '@/components/Customized/Description';
import {Form, Card, Table, Tabs, Divider, Button, Popconfirm} from 'antd'
import {PlusOutlined} from '@ant-design/icons'
import utilsStyles from '@/utils/utils.less';
import classNames from "classnames";
import AddModal from './Modal/AddModal'
import {exchangeURl} from '@/utils/utils'

const Index = (props) => {
  const {
    dispatch,
    match: {params},
    opsGather: {attrPage, gatewayList, robinGroupList, meterInfo}
  } = props

  const {id} = params;
  const name = decodeURIComponent(params.name)

  const [visible, setVisible] = useState()

  const [form] = Form.useForm();

  const getListItems = (payload = {}) => {
    dispatchHandle(dispatch, 'opsGather/device_service_meter_attr_post', {meterId: id, pageSize: 20, ...payload});
  }

  const itemDelete = (id) => {
    dispatchHandle(dispatch, 'opsGather/device_service_meter_attr_id_delete',
      {id}, () => {
        getListItems()
      });
  }
  const gatewayData = gatewayList.map(item => ({
    label: item.code,
    value: item.id
  }))

  const robinData = robinGroupList.map(item => ({
    label: item.name,
    value: item.groupNum
  }))

  const gatewayChange = (id) => {
    dispatchHandle(dispatch, 'opsGather/device_service_round_robin_group_list', {gatewayId: id})
    form.setFieldsValue({roundRobinGroupNum: null})
  }

  const handleSubmit = e => {
    e.preventDefault();
    form.validateFields().then(values => {
      dispatchHandle(dispatch,
        'opsGather/device_service_meter_patch',
        {...values, id: meterInfo.id},
        ()=> {
          dispatchHandle(dispatch, 'opsGather/device_service_meter_id_get', {id})
        })
    }).catch(() => {});

  };

  const saveButton = (
    <Button
      type="primary"
      style={{marginLeft: 50, width: 100}}
      onClick={handleSubmit}
    >保存</Button>
  )
  const infoData = [
    { required: true, label: '网关', name: 'gatewayId', type: 'select', selectData: gatewayData, onChange: gatewayChange},
    { required: true, label: '轮询组', name: 'roundRobinGroupNum', type: 'select', selectData: robinData},
    { type: 'button', button: saveButton},

  ]

  const columns = [
    { title: '属性名称', dataIndex: 'name'},
    { title: '单位', dataIndex: 'unitName' },
    { title: '数据类型', dataIndex: 'dataTypeName' },
    // { title: '比特位', dataIndex: 'bit',
    //   render: (val, record) => record?.bitValueIs && val ? val : '-'
    // },
    { title: '是否是自定义属性', dataIndex: 'meterModelAttrId',
      render: val => !val ? '是' : '否'
    },
    // { title: '是否是计量属性', dataIndex: 'measureIs',
    //   render: val => val ? '是' : '否'
    // },
    // { title: '是否大端模式', dataIndex: 'bigEndianIs',
    //   render: val => val ? '是' : '否'
    // },
    { title: '操作', dataIndex: 'option', disabled: true, key: 'option', fixed: 'right', width: 240,
      render: (text, record) => (
        <>
          <a onClick={() =>
            history.push(`${exchangeURl}/meter/${name}/${id}/attr/info/${record.id}`)}
          >详情</a>
          {/*<a onClick={() =>*/}
          {/*  history.push(`${exchangeURl}/meter/${name}/${id}/attr/edit/${record.id}`)}*/}
          {/*>编辑</a>*/}
          {!record.meterModelAttrId && (
            <>
              <Divider type="vertical" />
              <a onClick={() =>
                history.push(`${exchangeURl}/meter/${name}/${id}/attr/edit/${record.id}`)}
              >编辑</a>
              <Divider type="vertical" />
              <Popconfirm title="确认删除此属性吗?" onConfirm={() => itemDelete(record.id)}>
                <a>删除</a>
              </Popconfirm>
            </>
          )}

        </>
      ),
    },
  ]

  const openAttr = () => {
    setVisible(true)
  }
  const closeAttr = () => {
    setVisible(false)
  }
  const formNewAttr = (meterModelId )  => {
    if (meterInfo?.id)
      dispatchHandle(dispatch,
        'opsGather/device_service_meter_attr_batch_meterId_meterModelId_post',
        {meterId : meterInfo.id, meterModelId},
        () => {
          closeAttr();
          getListItems()
        })
  }
  useEffect(() => {
    dispatchHandle(dispatch, 'opsGather/device_service_meter_id_get', {id}, (res, data) => {
      form.setFieldsValue(res);
      if(res.gatewayId){
        dispatchHandle(dispatch,
          'opsGather/device_service_round_robin_group_list',
          {gatewayId: res.gatewayId})
      }

    });
    dispatchHandle(dispatch, 'opsGather/device_service_gateway_post')
    dispatchHandle(dispatch, 'opsGather/device_service_meter_model_list')
    getListItems()
  }, [])


  return (
    <PageHeaderWrapper title="仪表属性">
      <div className={ classNames(utilsStyles.disFlexCol, utilsStyles.fullContainer) }>
        <Card size="small" style={{flex: 1}}>
          <h1>{name}</h1>
          <Form form={form} style={{marginBottom: 15}} onSubmit={handleSubmit}>
            <DescriptionForm
              columns={3}
              data={infoData}
            />
          </Form>
          <Button
            type='primary'
            style={{ width: 120, marginBottom: 15, marginRight: 15 }}
            onClick={() => history.push(`${exchangeURl}/meter/${name}/${id}/attr/add`)}
          >
            <PlusOutlined />添加属性
          </Button>
          <Button
            type="primary"
            style={{width: 120, marginBottom: 15}}
            onClick={openAttr}
          >批量生成属性</Button>
          <Table
            size="small"
            rowKey={(record) => record.id}
            dataSource={attrPage.list}
            pagination={attrPage.pagination}
            columns={columns}
            onChange={(pagination) => {
              const payload = {pageNumber: pagination?.current, pageSize: pagination?.pageSize };
              getListItems(payload)
            }}
          />
        </Card>
        <AddModal
          visible={visible}
          handleClose={closeAttr}
          onSubmit={formNewAttr}
        />
      </div>
    </PageHeaderWrapper>
  );
};

export default connect(({ opsGather, loading }) => ({
  opsGather,
  loading: loading.models.opsGather,
}))(Index);