<template>
  <el-container
    style="outline: 1px solid #e7eaec;margin:1px;height: calc(100% - 2px)"
  >
    <el-aside width="400px" class="fullheight" style="padding: 20px 0">
      <el-form data-vv-scope="codeGenForm" :model="codeModel" size="mini">
        <ht-form-item label="生成模式" label-width="150px">
          <ht-select
            v-model="codeModel.type"
            style="width: 220px; margin-top: 4px;"
            :options="[
              {key: 'table', value: '物理表'},
              {key: 'form', value: '表单'},
              {key: 'dataTemplate', value: '表单列表'},
              {key: 'querySqldef', value: '数据列表'}
            ]"
            :validate="'required'"
            @change="typeChange"
          />
        </ht-form-item>
        <ht-form-item
          v-if="codeModel.type == 'table'"
          label="数据源"
          label-width="150px"
        >
          <ht-select
            v-model="codeModel.dataSourceAlias"
            :options="dataSourcesInBean"
            :props="{key: 'alias', value: 'name'}"
            @change="dataSourceAliasChange"
            :validate="'required'"
            style="width: 220px; margin-top: 4px;"
          />
        </ht-form-item>
        <ht-form-item
          v-if="codeModel.type == 'table'"
          label="选择表"
          label-width="150px"
        >
          <ht-select
            v-model="tableNameSingle"
            :options="tableList"
            :filterable="true"
            :validate="{required: true}"
            @visible-change="getByDsObjectName"
            :props="{key: 'name', value: 'comment'}"
            style="width: 220px; margin-top: 4px;"
          />
        </ht-form-item>
        <ht-form-item
          v-if="codeModel.type == 'form'"
          label="选择表单"
          label-width="150px"
        >
          <ht-input
            type="text"
            readonly="readonly"
            style="width: 215px"
            :validate="{required: true}"
            placeholder="请选择表单"
            v-model="codeModel.formName"
          >
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="selectForm"
            ></el-button>
          </ht-input>
        </ht-form-item>
        <ht-form-item
          v-if="codeModel.type == 'dataTemplate'"
          label="表单列表"
          label-width="150px"
        >
          <ht-input
            type="text"
            readonly="readonly"
            style="width: 215px"
            :validate="{required: true}"
            placeholder="选择表单列表"
            v-model="codeModel.formName"
          >
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="selectDataTemplate"
            ></el-button>
          </ht-input>
        </ht-form-item>
        <ht-form-item
          v-if="codeModel.type == 'querySqldef'"
          label="数据列表"
          label-width="150px"
        >
          <ht-input
            type="text"
            readonly="readonly"
            style="width: 215px"
            :validate="{required: true}"
            placeholder="数据列表"
            v-model="codeModel.formName"
          >
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="selectCustomView"
            ></el-button>
          </ht-input>
        </ht-form-item>
        <ht-form-item label="所在系统名" label-width="150px">
          <ht-input
            v-model="codeModel.system"
            :validate="{required: true}"
            :maxlength="50"
            :showWordLimit="true"
          />
        </ht-form-item>
        <ht-form-item label="包路径" label-width="150px">
          <ht-input
            v-model="codeModel.basePackage"
            :validate="{required: true}"
            :maxlength="50"
            :showWordLimit="true"
          />
        </ht-form-item>
        <ht-form-item label="作者名" label-width="150px">
          <ht-input
            v-model="codeModel.authorName"
            :validate="{required: true}"
            :maxlength="50"
            :showWordLimit="true"
          />
        </ht-form-item>
        <ht-form-item label="模块名称" label-width="150px">
          <ht-input
            v-model="codeModel.moduleName"
            :maxlength="50"
            :showWordLimit="true"
          />
        </ht-form-item>
        <ht-form-item label="公司名称" label-width="150px">
          <ht-input v-model="codeModel.companyName" />
        </ht-form-item>
        <ht-form-item label="作者邮箱" label-width="150px">
          <ht-input
            v-model="codeModel.authorEmail"
            :maxlength="50"
            :showWordLimit="true"
          />
        </ht-form-item>
        <ht-form-item label="代码结构" label-width="150px">
          <ht-select
              :validate="{required: true}"
              v-model="codeModel.genType"
              :options="[{ key: 'default', value: '默认' },{ key: 'fast', value: '快速开发' }]"
              style="width: 220px; margin-top: 4px;"
              />
        </ht-form-item>
        <ht-form-item label="groupId" label-width="150px" v-if="codeModel.genType !=='default'">
          <ht-input v-model="codeModel.groupId" :validate="{required: true}" placeholder="maven groupId" />
        </ht-form-item>
        <ht-form-item label="artifactId" label-width="150px" v-if="codeModel.genType !=='default'">
          <ht-input v-model="codeModel.artifactId" :validate="{required: true}" placeholder="maven artifactId" />
        </ht-form-item>
        <ht-form-item label="serverPort" label-width="150px" v-if="codeModel.genType !=='default'">
          <ht-input v-model="codeModel.backendServerPort" :validate="{required: true}" placeholder="后端服务启动端口" />
        </ht-form-item>
        <div style="text-align:center;margin-top:50px;">
          <ht-submit-button
            :url="saveUrl"
            :model="codeModel"
            scope-name="codeGenForm"
            @before-save-data="beforeSaveData"
            @after-response-value="afterSaveData"
            >开始生成</ht-submit-button
          >
        </div>
      </el-form>
    </el-aside>
    <el-container class="fullheight">
      <el-aside width="300px" style="outline: 1px solid #e7eaec;">
        <ht-tree
          :data="codeFolderData"
          :props="defaultProps"
          node-key="id"
          :default-expanded-keys="[5, 7, 22]"
        />
      </el-aside>
      <el-main class="fullheight">
        <el-card class="box-card">
          <div slot="header" class="header">
            <span>代码生成使用说明</span>
          </div>
          <ol class="guide-ol">
            <li>
              配置好相应的参数，点击
              <code>开始生成</code>按钮后代码会在服务端生成并打包为
              <code>ZIP文件</code>下载到你本地，这个
              <code>ZIP文件</code>解压后的结构如中间的
              <code>代码目录</code>所示；
            </li>
            <li>
              生成的代码目录中，将
              <code>src</code
              >目录拷贝到对应的Java项目中，并重新编译启动Java系统；
            </li>
            <li>
              将
              <code>web</code>目录中的
              <code>src</code>拷贝到相应的前端项目中，并在该前端项目的路由配置
              <code>route.js</code>中注册该页面；
            </li>
            <li>
              注册好路由的页面通过
              <code>菜单管理</code>添加为系统的菜单页面。
            </li>
          </ol>
          <div style="text-align:center;margin-top:20px">
            <el-tag type="warning"
              >想了解更多代码开发的相关内容，请查看《系统开发手册》</el-tag
            >
          </div>
        </el-card>
      </el-main>
    </el-container>
    <!-- 表单对话框 -->
    <EipFormDialog
      ref="eipFormDialog"
      :single="true"
      @onConfirm="dialogFormConfirm"
      formType="pc"
      appendToBody
    />
    <!-- 表单列表对话框 -->
    <eip-data-template-dialog
      ref="eipDataTemplateDialog"
      @onConfirm="dataTemplateDialogConfirm"
      :single="true"
      append-to-body
    />
    <!-- 自定义视图对话框-->
    <eip-custom-view-dialog
      ref="eipCustomViewDialog"
      @onConfirm="customViewConfirm"
      :single="true"
      append-to-body
    />
  </el-container>
</template>
<script>
import req from '@/request.js'
import {mapState} from 'vuex'
import EipFormDialog from '@/components/dialog/EipFormDialog.vue'
import EipCustomViewDialog from '@/components/dialog/EipCustomViewDialog.vue'
import EipDataTemplateDialog from '@/components/dialog/EipDataTemplateDialog.vue'
import codeFolderData from '@/api/mock/code-folder-data.js'
import {Message} from 'element-ui'
export default {
  components: {EipFormDialog, EipDataTemplateDialog, EipCustomViewDialog},
  data() {
    return {
      codeModel: {
        type: 'table',
        dataSourceAlias: 'LOCAL',
        system: 'form',
        basePackage: 'com.hotent.test',
        companyName: '广州宏天软件股份有限公司',
        genType: 'default',
        groupId: '',
        artifactId: ''
      },
      tableNameSingle:'',
      dataSourcesInBean: [],
      tableList: null,
      defaultProps: {
        children: 'children',
        label: 'name'
      }
    }
  },
  computed: {
    ...mapState({
      currentUser: state => state.login.currentUser
    }),
    saveUrl: function() {
      return `${window.context.form}/form/generator/v1/start`
    },
    codeFolderData: function() {
      return codeFolderData.getData()
    }
  },
  methods: {
    typeChange() {
      this.$set(this.codeModel, 'formkey', '')
      this.$set(this.codeModel, 'formName', '')
    },
    dataSourceAliasChange() {
      // 切换数据源时清空当前表集合
      this.$set(this, 'tableList', null)
    },
    selectForm() {
      this.$refs.eipFormDialog.showDialog()
    },
    selectDataTemplate() {
      this.$refs.eipDataTemplateDialog.showDialog()
    },
    selectCustomView() {
      this.$refs.eipCustomViewDialog.showDialog()
    },
    dialogFormConfirm(data) {
      if (data && data.length > 0) {
        this.$nextTick(() => {
          this.$set(this.codeModel, 'formkey', data[0].formKey)
          this.$set(this.codeModel, 'formName', data[0].name)
        })
      }
    },
    dataTemplateDialogConfirm(data) {
      if (data && data.length > 0) {
        this.$nextTick(() => {
          this.$set(this.codeModel, 'formkey', data[0].alias)
          this.$set(this.codeModel, 'formName', data[0].name)
        })
      }
    },
    customViewConfirm(data) {
      if (data && data.length > 0) {
        this.$nextTick(() => {
          this.$set(this.codeModel, 'formkey', data[0].alias)
          this.$set(this.codeModel, 'formName', data[0].name)
          this.$set(this.codeModel, 'sqlAlias', data[0].sqlAlias)
        })
      }
    },
    getByDsObjectName() {
      if (this.tableList != null) {
        return
      }
      if (!this.codeModel.dataSourceAlias) {
        Message.warning('请选择数据源')
        return
      }
      const params = {
        dsalias: this.codeModel.dataSourceAlias,
        isTable: '1'
      }
      let url = window.context.form + '/form/customQuery/v1/getByDsObjectName'
      req.post(url, params).then(data => {
        this.tableList = []
        if (!data || data.data.length == 0) {
          Message.warning('该数据源中未查询到表')
          return
        }
        for (let i = 0; i < data.data.length; i++) {
          data.data[i].comment =
            data.data[i].name + '(' + data.data[i].comment + ')'
          this.tableList.push(data.data[i])
        }
      })
    },
    beforeSaveData() {
      if (this.tableNameSingle) {
        this.$set(this.codeModel, 'tableName', [this.tableNameSingle])
      }
    },
    afterSaveData(data) {
      if (data) {
        const url = `${
          window.context.form
        }/form/generator/v1/download?codeFolder=${data}`
        req.download(url)
      } else {
        this.$message.error('未返回生成的代码目录，无法下载生成的代码')
      }
    }
  },
  mounted() {
    //获取数据源池
    req
      .get(window.context.portal + '/sys/sysDataSource/v1/getDataSources')
      .then(data => {
        this.dataSourcesInBean = data.data
      })
    if (this.currentUser) {
      this.$set(this.codeModel, 'authorName', this.currentUser.username)
    }
  }
}
</script>
<style lang="scss" scoped>
.header > span {
  font-size: 16px;
  font-weight: bold;
  color: #666;
}
</style>