/**
 * title: "单选选项卡（支持纵横布局）"
 * description: "通过设置Radio.Group的style属性，实现横向和纵向布局；灵活使用Radio，实现选项卡。"
 */
import React, { useState } from 'react';
import { Radio } from '@alicloud/console-components';
import styled from 'styled-components';

const List = [
  {
    label: '输入文字',

    value: 'A',
  },
  {
    label: '输入文字',
    value: 'B',
  },
  {
    label: '输入文字',
    value: 'C',
    disabled: true,
  },
  {
    label: '输入文字',
    value: 'D',
  },
];

const StyledDiv = styled.div`
  border-radius: 4px;
  border: 1px solid #e5e5e5;
  padding: 16px;
  width: 254px;
  box-sizing: content-box;
  height:60px;
  &:hover {
    background-color: #f7f9fa;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16);
  }
`;

const girdStyle = {
  display: 'grid',
  gridTemplateColumns: '1fr 1fr',
  grigTemplateRows: '1fr 1fr',
  gridColumnGap: '8px',
  gridRowGap: '8px',
  width: '512px',
};

export default () => {
  const [checkedList, setCheckedList] = useState<string | number>('');

  return (
    <div>
      <Radio.Group
        value={checkedList}
        onChange={(value) => setCheckedList(`${value}`)}
        style={girdStyle}
      >
        {List.map((item) => (
          <StyledDiv
            style={
              checkedList === item.value ? { backgroundColor: '#eff3f8' } : {}
            }
          >
            <Radio value={item.value} disabled={item.disabled}>
              {item.label}
              <p
                style={{
                  margin: '0 0 0 24px',
                  color: '#808080',
                }}
              >
                按指定IP/实例ID申请，每月限使用20次，如需提升配额需
                <a style={{ color: '#0064c8' }}>提交工单申请</a>
              </p>
            </Radio>
          </StyledDiv>
        ))}
      </Radio.Group>
    </div>
  );
};