<template>
  <span style="padding: 10px">
    <el-table :data="tableData">

      <el-table-column label="序号" prop="index"/>

      <el-table-column label="表名" prop="tableName"/>

      <el-table-column label="表备注" prop="tableComment"/>

      <el-table-column label="操作">
        <template v-slot="scope">
          <el-button icon="el-icon-setting" size="small" type="text" @click="handleClick(scope.row)">
            生成代码
          </el-button>
        </template>
      </el-table-column>

    </el-table>

    <el-dialog :visible.sync="dialogTableVisible" title="输出配置">
      <a-from v-model="formData" :definition="formDefinition"/>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" type="primary" @click="genCode()">开始生成</el-button>
      </div>
    </el-dialog>

  </span>
</template>

<script>
import axios from 'axios'
import aFrom from '@/components/form/index.vue'

export default {
  name: 'tableGenerator',
  components: {aFrom},
  data () {
    return {
      tableData: [],
      dialogTableVisible: false,
      formData: {
        outputFiles: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
        createMethods: [2, 3, 4, 5, 6],
        override: false
      },
      formDefinition: [
        {
          prop: 'author',
          label: '代码作者'
        },
        {
          type: 'checkbox',
          prop: 'outputFiles',
          label: '生成文件',
          option: [
            {
              key: 1,
              label: 'controller'
            },
            {
              key: 2,
              label: 'service'
            },
            {
              key: 3,
              label: 'serviceImpl'
            },
            {
              key: 4,
              label: 'mapper'
            },
            {
              key: 5,
              label: 'xml'
            },
            {
              key: 6,
              label: 'entity'
            },
            {
              key: 7,
              label: 'selectDto'
            },
            {
              key: 8,
              label: 'selectVo'
            },
            {
              key: 9,
              label: 'addOrUpdateDto'
            },
            {
              key: 10,
              label: 'index.js'
            },
            {
              key: 11,
              label: 'index.vue'
            },
            {
              key: 12,
              label: 'addOrUpdate.vue'
            }
          ]
        },
        {
          type: 'checkbox',
          prop: 'createMethods',
          label: '生成方法',
          option: [
            {
              key: 1,
              label: '列表'
            },
            {
              key: 2,
              label: '分页'
            },
            {
              key: 3,
              label: '明细'
            },
            {
              key: 4,
              label: '新增'
            },
            {
              key: 5,
              label: '修改'
            },
            {
              key: 6,
              label: '删除'
            }
          ]
        },
        {
          type: 'radio',
          prop: 'override',
          label: '是否覆盖原文件',
          option: [
            {
              key: true,
              label: '覆盖'
            },
            {
              key: false,
              label: '不覆盖'
            }
          ]
        }
      ]
    }
  },
  created () {
    axios.get('/api/tableList').then((resp) => {
      const list = resp.data.data
      list.forEach((item, index) => { item.index = index + 1 })
      this.tableData = resp.data.data
    })
  },
  methods: {
    handleClick (data) {
      this.formData.tableName = data.tableName
      this.dialogTableVisible = true
    },
    genCode () {
      axios.post('/api/genCode', this.formData).then(() => {
        this.$message({message: '代码生成成功', type: 'success'})
      })
    }
  }
}
</script>
