<template>
  <el-dialog :visible.sync="visible" fullscreen lock-scroll class="JNPF-full-dialog" :show-close="false" :modal="false" z-index="10">
    <div class="JNPF-full-dialog-header">
      <div class="header-title">
        <!--        <p class="header-txt"> · 在线开发</p>-->
        <a plain size="small" icon="el-icon-arrow-left" @click="goTop()"><img src="logo.png" class="header-logo" /></a>
      </div>
      <div class="steps">
        <div class="step"><el-button :type="activeStep === 0 ? 'primary' : 'disabled'" circle>1</el-button>基础设置 <span class="line"></span></div>
        <div class="step"><el-button :type="activeStep === 1 ? 'primary' : ''" circle>2</el-button>表单设计 <span class="line"></span></div>
        <div class="step"><el-button :type="activeStep === 2 ? 'primary' : ''" circle>3</el-button>列表设计 <span class="line"></span></div>
        <div class="step"><el-button :type="activeStep === 4 ? 'primary' : ''" circle>4</el-button>拓展设置</div>
      </div>
      <!--      <el-steps :active="activeStep" simple :class="'steps steps' + (maxStep + 1)" v-if="!loading">-->
      <!--        <el-step title="基础设置" @click.native="stepChick(0)" />-->
      <!--        <el-step title="表单设计" @click.native="stepChick(1)" />-->
      <!--        <el-step title="列表设计" @click.native="stepChick(2)" v-if="maxStep >= 2" />-->
      <!--        <el-step title="流程设计" @click.native="stepChick(3)" v-if="maxStep >= 3 && dataForm.webType === 3" />-->
      <!--        <el-step title="拓展设置" @click.native="stepChick(dataForm.webType === 3 ? 4 : 3)" />-->
      <!--      </el-steps>-->
      <el-button v-if="activeStep >= 2" type="primary" @click="openPrview">数据管理</el-button>
      <div class="options">
        <el-button @click="prve" size="mini" :disabled="activeStep <= 0">《 上一页</el-button>
        <el-button @click="next" size="mini" :disabled="isShowNext || loading" :loading="btnLoading">下一页 》</el-button>
        <el-button @click="closeDialog()" size="mini">取消</el-button>
        <el-button type="primary" size="mini" @click="dataFormSubmit()" :disabled="activeStep < 2" :loading="btnLoading">
          {{ $t('common.confirmButton') }}
        </el-button>
      </div>
    </div>
    <div class="main" v-loading="loading">
      <el-row type="flex" justify="center" align="middle" v-if="!activeStep" class="basic-box">
        <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="10" class="basicForm">
          <el-form :model="dataForm" :rules="dataRule" ref="dataForm" label-width="100px" @submit.native.prevent label-position="right">
            <el-form-item label="功能名称" prop="fullName">
              <el-input v-model="dataForm.fullName" placeholder="功能名称" maxlength="100"> </el-input>
            </el-form-item>
            <!--            <el-form-item label="功能编码" prop="enCode">-->
            <!--              <el-input v-model="dataForm.enCode" placeholder="功能编码" maxlength="50">-->
            <!--              </el-input>-->
            <!--            </el-form-item>-->
            <el-form-item label="功能分类" prop="category">
              <el-cascader v-model="dataForm.category" :options="categoryList" :props="{ emitPath: false, value: 'id', label: 'fullName', checkStrictly: true }" style="width: 100%"></el-cascader>
              <!--              <el-select v-model="dataForm.category" filterable placeholder="选择分类">-->
              <!--                <el-option :key="item.id" :label="item.fullName" :value="item.id" v-for="item in categoryList" />-->
              <!--              </el-select>-->
            </el-form-item>
            <el-form-item label="功能状态" prop="state">
              <el-switch v-model="dataForm.state" :active-value="1" :inactive-value="0" />
            </el-form-item>
            <el-form-item label="功能说明" prop="description">
              <el-input v-model="dataForm.description" placeholder="功能说明" type="textarea" :rows="3" />
            </el-form-item>
            <!--            数据集-->
            <!--            <el-form-item label="数据连接">-->
            <!--              <el-cascader-->
            <!--                v-model="dataForm.dbLinkId" :options="cubeList" :props="{ expandTrigger: 'hover', emitPath: false }"-->
            <!--                filterable @change="onDbChange"  :show-all-levels="false">-->
            <!--              </el-cascader>-->
            <!--            </el-form-item>-->
            <!--            数据源-->
            <el-form-item label="数据源连接" required prop="dbSourceId">
              <el-select v-model="dataForm.dbSourceId" filterable placeholder="请选择数据源" @change="onDbSource" :disabled="dataForm.id !== ''">
                <el-option :key="item.id" :label="item.dsDb + '-' + item.remark" :value="item.id" v-for="item in datasourceList" />
              </el-select>
            </el-form-item>
            <el-form-item v-if="dataForm.dbSourceId" label="物理表连接" required prop="primaryTableName">
              <div class="flex-between flex gap-10">
                <el-select v-model="dataForm.primaryTableName" filterable placeholder="请选择物理表" @change="onTableViewName" :disabled="dataForm.id !== ''">
                  <el-option :key="item.tableViewName" :label="item.tableComments + ' ' + item.tableViewName" :value="item.tableViewName" v-for="item in tableList" />
                </el-select>
                <!--                <el-button v-if="dataForm.primaryTableName" type="primary" size="mini" icon="el-icon-plus" @click="addColumn">-->
                <!--                  添加关联表 {{ columnData?.associationTable ? '(' + columnData?.associationTable.length + ')' : '' }}</el-button-->
                <!--                >-->
                <!--                <el-drawer :visible.sync="isAddColumn" size="100%" title="关联编辑" :withHeader="false" append-to-body>-->
                <!--                  <Dataset v-if="isAddColumn" :dataForm="dataForm" :cube-res="cubeResult" @onSubmit="onSubmit"></Dataset>-->
                <!--                </el-drawer>-->
              </div>
            </el-form-item>
            <el-tag v-if="tableFlag" size="small" type="success">{{ tableFlagComment }}</el-tag>
            <el-form-item label="主键策略">
              <el-radio-group v-model="dataForm.Strategy">
                <el-radio :label="1">数据库自增</el-radio>
                <el-radio :label="2">业务系统自动生成</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-table v-if="false" :data="tables" class="JNPF-common-table" empty-text="点击“新增”可选择 1 条（单表）或 2 条以上（多表）">
              <el-table-column type="index" label="序号" width="50" align="center" />
              <el-table-column prop="typeId" label="类别" width="65">
                <template slot-scope="scope">
                  <el-tag v-if="scope.row.typeId == '1'">主表</el-tag>
                  <el-tag type="warning" v-else @click="changeTable(scope.row)" style="cursor: pointer" title="点击设置成主表">子表</el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="tableName" label="说明" />
              <el-table-column prop="table" label="表名" />
              <el-table-column prop="tableField" label="外键字段">
                <template slot-scope="scope" v-if="scope.row.typeId !== '1'">
                  <el-select v-model="scope.row.tableField" placeholder="请选择">
                    <el-option v-for="item in scope.row.fields" :key="item.field" :label="item.field" :value="item.field"> </el-option>
                  </el-select>
                </template>
              </el-table-column>
              <!-- <el-table-column prop="relationTable" label="关联主表" /> -->
              <el-table-column prop="relationField" label="关联主键">
                <template slot-scope="scope" v-if="scope.row.typeId !== '1'">
                  <el-select v-model="scope.row.relationField" placeholder="请选择">
                    <el-option v-for="item in mainTableFields" :key="item.field" :label="item.field" :value="item.field"> </el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column label="操作" fixed="right" width="50">
                <template slot-scope="scope">
                  <el-button size="mini" type="text" class="JNPF-table-delBtn" @click="delItem(scope.row, scope.$index)">删除 </el-button>
                </template>
              </el-table-column>
            </el-table>
            <div v-if="false" class="table-actions" @click="openTableBox">
              <el-button type="text" icon="el-icon-plus">新增一行</el-button>
            </div>
          </el-form>
        </el-col>
      </el-row>
      <template v-if="activeStep == 1">
        <Generator
          ref="generator"
          :conf="formData"
          :cube-list="cubeList"
          :table-list="tableList"
          :relationList="relationData"
          :logicList="logicData"
          :modelType="dataForm.type"
          :dbLinkId="dataForm.dbLinkId"
          :dbSourceId="dataForm.dbSourceId"
          :allTabelData="allTabelList"
          :columnModelId="columnData.modelId"
        />
      </template>
      <template v-if="activeStep == 2">
        <columnDesign ref="columnDesign" :conf="columnData" />
      </template>
      <template v-if="activeStep == 3">
        <Process v-if="dataForm.webType === 3" ref="process" :conf="flowTemplateJson" />
        <template v-else>
          <div style="padding: 20px 50px; height: 100%">
            <el-tabs v-model="activeName" tab-position="left" type="border-card" stretch style="height: calc(100% - 0px)">
              <el-tab-pane label="按钮权限" style="height: 100%" name="Btns">
                <datasetFilter
                  v-if="activeName === 'Btns'"
                  ref="datasetFilter"
                  :showFalg="activeName"
                  :modelId="columnData.modelId"
                  :fields="columnData.cubeList"
                  :cubeId="columnData.dbLinkId"
                  :btns="btnsOption"
                  :columnBtns="columnBtnsOption"
                  v-model="showDatasetFilter"
                ></datasetFilter>
              </el-tab-pane>
              <!--              <el-tab-pane label="数据权限" style="height: 100%" name="data">-->
              <!--                <datasetFilter-->
              <!--                  v-if="activeName === 'data'"-->
              <!--                  ref="datasetFilter"-->
              <!--                  :showFalg="activeName"-->
              <!--                  :modelId="columnData.modelId"-->
              <!--                  :fields="columnData.cubeList"-->
              <!--                  :cubeId="columnData.dbLinkId"-->
              <!--                  :btns="btnsOption"-->
              <!--                  v-model="showDatasetFilter"-->
              <!--                ></datasetFilter>-->
              <!--              </el-tab-pane>-->
              <!--              <el-tab-pane label="自定义按钮" name="customBtn">-->
              <!--                <custom-button v-if="activeName === 'customBtn'" :columnData="columnData" :dataForm="dataForm" :systemBtn="systemBtns" :actionBtn="actionBtns" :activeName="activeName"></custom-button>-->
              <!--              </el-tab-pane>-->
              <!--              <el-tab-pane label="自定义事件" name="customClick">-->
              <!--                <CustomEvent v-if="activeName === 'customClick'" :modelId="columnData.modelId" :dbSourceId="dataForm.dbSourceId" :cubeId="dataForm.dbLinkId" :activeName="activeName" />-->
              <!--              </el-tab-pane>-->
              <!--              <el-tab-pane label="页签管理" name="tabManage">-->
              <!--                <tabManage-->
              <!--                  :modelId="columnData.modelId"-->
              <!--                  :tables="tables"-->
              <!--                  :primaryTableName="dataForm.primaryTableName"-->
              <!--                  :dbSourceId="dataForm.dbSourceId"-->
              <!--                  :cubeId="dataForm.dbLinkId"-->
              <!--                  :activeName="activeName"-->
              <!--                />-->
              <!--              </el-tab-pane>-->
            </el-tabs>
          </div>
        </template>
      </template>
    </div>
    <TableForm :visible.sync="formVisible" ref="tableForm" @closeForm="colseForm" :dbLinkId="dataForm.dbLinkId" />
  </el-dialog>
</template>

<script>
import Generator from '@/components/Generator/index/Home'
import ColumnDesign from '@/components/ColumnDesign/index'
import Process from '@/components/Process'
import TableForm from '@/views/generator/TableForm'
import mixin from '@/mixins/generator/form'
import CustomButton from '@/views/form/webDesign/CustomButton.vue'
import CustomEvent from '@/views/form/webDesign/CustomEvent.vue'
import tabManage from '@/views/form/webDesign/tabManage.vue'
import Dataset from '@/views/dataset/edit.vue'
export default {
  mixins: [mixin],
  components: { Dataset, CustomButton, CustomEvent, tabManage, Generator, ColumnDesign, Process, TableForm },
  data() {
    return {
      dataRule: {
        fullName: [{ required: true, message: '功能名称不能为空', trigger: 'blur' }],
        enCode: [
          { required: true, message: '功能编码不能为空', trigger: 'blur' },
          { validator: this.formValidate('enCode'), trigger: 'blur' }
        ],
        category: [{ required: true, message: '功能分类不能为空', trigger: 'change' }],
        dbSourceId: [{ required: true, message: '数据源链接不能为空', trigger: 'change' }],
        primaryTableName: [{ required: true, message: '物理表连接不能为空', trigger: 'change' }],
        state: [{ required: true, message: '功能状态不能为空', trigger: 'blur' }]
      },

      // 按钮权限
      activeName: 'Btns',
      showDatasetFilter: true,
      btnsOption: [
        {
          value: 'add',
          icon: 'el-icon-plus',
          label: '新增',
          flowId: ''
        },
        {
          value: 'download',
          icon: 'el-icon-download',
          label: '导出',
          flowId: ''
        },
        {
          value: 'batchUpload',
          icon: 'el-icon-upload2',
          label: '批量导入',
          flowId: ''
        },
        {
          value: 'batchUpdate',
          icon: 'el-icon-edit-outline',
          label: '批量编辑',
          flowId: ''
        },
        {
          value: 'batchRemove',
          icon: 'el-icon-delete',
          label: '批量删除',
          flowId: ''
        },
        {
          value: 'journal',
          icon: 'el-icon-date',
          label: '操作日志',
          flowId: ''
        },
        {
          value: 'recycle',
          icon: 'el-icon-delete',
          label: '回收站',
          flowId: ''
        },
        {
          value: 'uploadRevoke',
          icon: 'el-icon-refresh-left',
          label: '导入撤销',
          flowId: ''
        },
        {
          value: 'comDelete',
          icon: 'el-icon-delete',
          label: '彻底删除',
          flowId: ''
        }
      ],
      columnBtnsOption: [
        { value: 'edit', icon: 'el-icon-edit', label: '编辑', flowId: '' },
        { value: 'remove', icon: 'el-icon-delete', label: '删除', flowId: '' },
        { value: 'detail', icon: 'el-icon-tickets', label: '详情', flowId: '' },
        {
          value: 'rowJournal',
          icon: 'el-icon-date',
          label: '操作记录',
          flowId: ''
        }
      ]
    }
  },
  computed: {
    // 是否显示下一步
    isShowNext() {
      return this.activeStep >= (this.dataForm.webType === 3 ? 4 : 3)
    },
    systemBtns() {
      const systemList = ['新增']
      return this.btnsOption.filter((item) => systemList.includes(item.label))
    },
    actionBtns() {
      const systemList = ['操作记录', '详情']
      return this.columnBtnsOption.filter((item) => !systemList.includes(item.label))
    }
  },
  watch: {
    activeStep(val) {
      if (val === 3) {
        this.$nextTick(() => {
          setTimeout(() => {
            this.$refs.datasetFilter.getData()
          }, 100)
        })
      }
    },
    activeName(val) {
      console.log(val)
      this.$nextTick(() => {
        setTimeout(() => {
          this.$refs.datasetFilter.getData()
        }, 100)
      })
    }
  }
}
</script>
<style scoped lang="scss">
.JNPF-full-dialog .main .basicForm .el-cascader {
  width: 100%;
}
.el-cascader > .el-input {
  display: block;
}

::v-deep .el-tabs__content {
  height: 100% !important;
}

::v-deep .el-tabs--left .el-tabs__nav-wrap.is-left {
  width: 150px !important;
}

.steps {
  display: flex;
  justify-content: space-between;
  .step {
    display: flex;
    align-items: center;
    gap: 5px;
    button {
      width: 28px;
      height: 28px;
      line-height: 4px;
    }
    .line {
      width: 56px;
      border: 1px dotted #d0d0d0;
    }
  }
}
</style>
