import {
  GenerateStyle,
  GenerateTpl,
  GenerateJs
} from './index'
const babel = require('../babel')
class GenerateComTpl extends GenerateTpl {
  CODE: string = ``
  COMPOSE: Record<
    string | number | symbol,
    any
  > = {}
  TPL: string = `
<Modal
  ref="Modal"
  v-model="value"
  :title="title"
  :size="size">
  <Layout>
    <FormLayout>
      <Form>
        <Row>
          <Col
            :md="8"
            :sm="8"
            :lg="8"
            :key="$index"
            v-for="(item, $index) in formConfig">
            <FormItem
              :label="item.label"
              :prop="item.key">
                <Input
                  v-if="item.type === 'Input'"
                  v-model="item[item.key]" />
                <DatePicker
                  v-else-if="item.type === 'DatePicker'"
                  v-model="item[item.key]"></DatePicker>
                <Select
                  v-else-if="item.type === 'Select'"
                  v-model="item[item.key]">
                  <Option
                    :key="idx"
                    v-for="(opt, idx) in item.optionList"
                    :value="opt.value">{{opt.label}}</Option>
                </Select>
            </FormItem>
          </Col>
        </Row>
      </Form>
    </FormLayout>
  </Layout>
</Modal>
  `
  constructor(name: string, props: any) {
    super()
    //生成组件
    this.CODE = this.composeCode(this.generate(name, props))
  }
  generate(name: string, props: any) {
    return this.TPL
  }
  generateModal () {

  }
  generateLayout () {

  }
  generateForm () {

  }
}
class GenerateComJs extends GenerateJs {
  CODE: string = ''
  TPL: string = `
  /* eslint-disable */
  import Modal from '@/components/modal'
  import FormLayout from '@/components/layout/form-layout/form-layout'
  import Layout from '@/components/modal/layout'
  export default {
    data () {
      return {}
    },
    components: {
      Modal,
      Layout,
      FormLayout
    },
    methods: {
      open (type, title) {
        this.value = true
        this.title = title
        this.$methods('Modal', 'open')
      },
      close () {
        this.$methods('Modal', 'close')
      }
    }
  }`
  constructor(options: VueConfig) {
    super()
    this.CODE = this.composeCode(this.generate(options))
  }
  generate(options: VueConfig) {
    return babel(this.TPL, {
      visitor(t: any, babylon: any) {
        return {
          ReturnStatement(path: any) {
            if (path.node.leadingComments) return
            const newBlockStatement = t.returnStatement(
              babylon.parseExpression(JSON.stringify(options.data))
            )
            path.replaceWith(newBlockStatement)
          }
        }
      },
      lintCode(code: string) {
        return code.replace(/data\(\) \{/, 'data () {').replace(/\"/g, '\'')
      }
    })
  }
}
class GenerateComStyle extends GenerateStyle {
  constructor(name: string) {
    super()
  }
}
module.exports = (props: any = {}) => {
  const name = 'modal'
  const tpl = new GenerateComTpl(name, props)
  const js = new GenerateComJs({
    data: props
  })
  const style = new GenerateComStyle(name)
  return tpl.CODE + js.CODE + style.CODE
}