import React from 'react'

import { Select, SelectOption, Form, FormItem, Popover, Button, RangeDatePicker } from 'react-icecream'

export default function Demo() {
  const innerContent = (
    <Select placeholder="请选择" defaultValue="fusion">
      <SelectOption value="kodo">对象存储 Kodo</SelectOption>
      <SelectOption value="fusion">CDN</SelectOption>
      <SelectOption value="dora">智能多媒体服务 Dora</SelectOption>
    </Select>
  )

  const outerContent = (
    <Form footer={null} labelWidth="60px" layout="horizontal">
      <FormItem label="产品" labelVerticalAlign="text">
        <div style={{ display: 'inline-flex', alignItems: 'center', gap: '4px' }}>
          <span>CDN</span>
          <Popover
            trigger="click"
            placement="right"
            content={innerContent}
            buttons
          >
            <Button type="link">修改</Button>
          </Popover>
        </div>
      </FormItem>
      <FormItem label="计费日期">
        <RangeDatePicker />
      </FormItem>
    </Form>
  )

  return (
    <Popover
      trigger="click"
      placement="right"
      title="确定修改？"
      content={outerContent}
      buttons
      icon
    >
      <Button>点击我</Button>
    </Popover>
  )
}