import { defineComponent, onMounted, PropType, ref, Teleport, toRef, toRefs } from 'vue'
import { Row, Col, Tabs, Space, Button } from 'ant-design-vue'
import { LeftOutlined } from '@ant-design/icons-vue'
import './index.less'

const RealView = defineComponent({
  props: {
    open: {
      type: Boolean,
      default: false
    },
    tabKey: {
      type: String,
      default: ''
    },
    tabsList: {
      type: Array as PropType<{key: string, tab: string}[]>,
      default: () => []
    },
    footer: {
      type: Boolean,
      default: false
    }
  },
  emits: ['cancel', 'tabChang', 'ok'],
  setup (props, ctx) {
    const { open, tabKey, tabsList, footer } = toRefs(props)

    const cancel = () => ctx.emit('cancel')

    const ok = () => ctx.emit('ok')

    const onTabChange = (key) => ctx.emit('tabChang', key)

    const TabsRender =
      <div class="tabs" key={tabKey.value}>
        <Tabs activeKey={tabKey.value} tabBarStyle={{ backgroundColor: 'fff', height: '45px' }} onChange={(key) => onTabChange(key)} >
          { tabsList.value.map(item => <Tabs.TabPane key={item.key} tab={item.tab}> </Tabs.TabPane>) }
        </Tabs>
      </div>

    return () => (
      <>
      {
        open.value
          ? <Teleport to='#content' >
              <div class='real-view' id='real-view'>
              <Row class='header' >
                <div class="back-button" onClick={() => cancel()} >
                  <LeftOutlined style={{ fontSize: '18px', color: '#ccc' }} />
                  <span style={{ fontSize: '18px' }} >返回</span>
                </div>
              </Row>
              <div class="tabs" >
                  <Tabs activeKey={tabKey.value} tabBarStyle={{ backgroundColor: 'fff', height: '45px' }} onChange={(key) => onTabChange(key)} >
                    { tabsList.value.map(item => <Tabs.TabPane key={item.key} tab={item.tab}> </Tabs.TabPane>) }
                  </Tabs>
               </div>
              <div class='real-view-content' >
                {ctx.slots.default?.()}
              </div>

              {/* footer */}
              {
                footer.value
                  ? <Row class='footer' >
                  <Space>
                    <Button onClick={() => cancel()}>取消</Button>
                    <Button type='primary' onClick={() => ok()}>确定</Button>
                  </Space>
                </Row>
                  : null
              }

            </div>
          </Teleport>

          : null
      }
      </>
    )
  }
})

export { RealView }