<template>
  <div>
    <el-form ref="queryForm" class="query-form" :model="sqlQueryParams">
      <el-row :gutter="20">
        <el-col :span="18">
          <div class="code-editor"  v-if="editLoading">
            <sql-code-edit v-model:value="sqlQueryParams.uniSql"  :editor-placeholder="'请输入sql语句进行查询'"
                           :editor-height="300" :tab-size="2" @change="changeSqlCode"/>
          </div>
        </el-col>
        <el-col :span="6">
          <el-form-item label-width="55px" label="名称" prop="uqName">
            <el-input v-model="sqlQueryParams.uqName" placeholder="请输入名称" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
          <el-form-item label-width="55px" label="描述" prop="uqDescribe">
            <el-input v-model="sqlQueryParams.uqDescribe" placeholder="请输入描述" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
          <!--        <el-form-item v-for="column in uniCons" :key="column.ucId"-->
          <!--                      :label="column.ucName">-->
          <!--          <el-input :placeholder="column.ucDescribe" :type="column.ucType" v-model="column.query" clearable-->
          <!--                    @input="changeInput($event)"></el-input>-->
          <!--        </el-form-item>-->
<!--          <el-button type="primary" @click="getSqlQueryInfo" link>搜索</el-button>-->
          <el-button type="primary" @click="handleReset" link>重置</el-button>
          <el-button type="primary" @click="handleAdd" link>新增</el-button>
          <el-button type="primary" @click="previewSqlHandle" link>预览</el-button>
          <el-button type="primary" @click="submitForm" link>保存</el-button>
          <el-button type="primary" @click="handleTopLine" link>上线</el-button>
          <el-button v-if="previewTable.length!==0" type="primary" @click="handleGetParams" link>字段提取</el-button>
        </el-col>
      </el-row>
    </el-form>
    <div class="table">
      <el-table :data="columns" row-key="columnId" :max-height="tableHeight"
                :header-cell-style="{'background':'#f5f7fa'}" >
        <el-table-column label="序号" type="index" min-width="5%"/>
        <el-table-column label="查询名称" min-width="10%">
          <template #default="scope">
            <el-input v-model="scope.row.ucName"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="条件描述" min-width="10%">
          <template #default="scope">
            <el-input v-model="scope.row.ucDescribe"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="key" min-width="10%">
          <template #default="scope">
            <el-input v-model="scope.row.ucKey"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="条件" min-width="10%">
          <template #default="scope">
            <el-select v-model="scope.row.ucCon" @change="ucTypeChang(scope.$index,scope.row)">
              <el-option label="=" value="EQ"/>
              <el-option label="!=" value="NE"/>
              <el-option label=">" value="GT"/>
              <el-option label=">=" value="GTE"/>
              <el-option label="<" value="LT"/>
              <el-option label="<=" value="LTE"/>
              <el-option label="LIKE" value="LIKE"/>
              <el-option label="BETWEEN" value="BETWEEN"/>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="显示类型" min-width="12%">
          <template #default="scope">
            <el-select v-model="scope.row.ucType" @change="ucTypeChang(scope.$index,scope.row)">
              <el-option label="文本框" value="input"/>
              <el-option label="日期控件" value="datetime"/>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="模拟数据" min-width="18%">
          <template #default="scope">
            <el-input v-if="scope.row.type == 1" placeholder="请输入模拟数据" v-model="scope.row.ucMock"></el-input>
            <div v-else-if="scope.row.type == 2">
              <el-row :gutter="15">
                <el-col :span="12">
                  <el-input placeholder="开始值" v-model="scope.row.ucMock.begin"></el-input>
                </el-col>
                <el-col :span="12">
                  <el-input placeholder="结束值" v-model="scope.row.ucMock.end"></el-input>
                </el-col>
              </el-row>
            </div>
            <el-date-picker
                v-else-if="scope.row.type ==3"
                v-model="scope.row.ucMock"
                type="date"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
                placeholder="选择日期时间"
            >
            </el-date-picker>
            <el-date-picker v-else-if="scope.row.type ==4"
                            v-model="scope.row.ucMock"
                            size="small"
                            style="width: 240px"
                            value-format="yyyy-MM-dd"
                            type="daterange"
                            range-separator="-"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
            ></el-date-picker>
          </template>
        </el-table-column>
        <el-table-column label="操作" min-width="10%">
          <template #default="scope">
            <el-button type="primary" size="mini" @click="handleDelete(scope.$index,scope.row)" link>删除</el-button>
            <el-button type="primary" @click="submitForm" link>提交</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div v-if="previewVisible">
      <div class="table">
        <el-table :data="previewTable" v-loading="previewLoading" :max-height="tableHeight"
                  :header-cell-style="{'background':'#f5f7fa'}">
          <el-table-column label="序号" type="index" min-width="6%"/>
          <el-table-column v-for="column in uniColumns" :key="column.prop" :prop="column.prop"
                           :label="column.label" align="center"  min-width="10%"/>
        </el-table>
      </div>
      <paging :current-page="pageInfo.pageNum" :page-size="pageInfo.pageSize" :page-sizes="[10, 20, 30, 40,50]"
              :total="total" @changeSize="handleSizeChange" @goPage="handleCurrentChange"/>
    </div>

    <el-dialog v-model="isTopLineVisited" title="上线" width="700px">
      <el-form :model="form" :rules="formRules" class="query-form" ref="formInstance">
        <el-form-item label="上级菜单">
          <el-tree-select v-model="form.parentId" :data="menuOpt" style="width: 100%;"
                          filterable :check-strictly="true"/>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="handleCancel">取消</el-button>
        <el-button type="primary" @click="handleSubmit(formInstance)">
          确定
        </el-button>
      </template>
    </el-dialog>

    <el-dialog v-model="isFieldVisited" title="字段提取" width="800px">
      <el-button type="primary" @click="handleAddField">新增字段</el-button>
      <el-table :data="uniColumns" row-key="columnId" :max-height="tableHeight"
                :header-cell-style="{'background':'#f5f7fa'}">
        <el-table-column label="字段名称" type="index" width="120px">
          <template #default="scope">
            {{ scope.row.prop }}
          </template>
        </el-table-column>
        <el-table-column label="字段别名" >
          <template #default="scope">
            <el-input v-model="scope.row.label"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="显示类型" >
          <template #default="scope">
            <el-select v-model="scope.row.displayType" placeholder="请选择显示类型" clearable filterable @change="displayTypeChange(scope.$index,scope.row)">
              <el-option
                v-for="item in cacheStore.getDict('display_type')"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="显示参数" >
          <template #default="scope">
            <el-select v-if="scope.row.displayType == 'date'" v-model="scope.row.displayParam" placeholder="请选择显示参数" clearable filterable>
              <el-option
                  v-for="item in cacheStore.getDict('date_format')"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
              />
            </el-select>
            <el-select v-if="scope.row.displayType == 'dict'" v-model="scope.row.displayParam" placeholder="请选择显示参数" clearable filterable>
              <el-option
                  v-for="item in dictOption"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
              />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="操作" >
          <template #default="scope">
            <el-button type="primary" size="mini" @click="handleFieldDelete(scope.$index,scope.row)" link>删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <template #footer>
        <el-button @click="handleFieldCancel">取消</el-button>
        <el-button type="primary" @click="handleFieldSubmit">
          确定
        </el-button>
      </template>
    </el-dialog>
    <el-dialog v-model="isAddFieldVisited" title="新增字段" width="400px">
      <el-form ref="queryForm" :model="addFieldParams" :rules="rules">
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item  label="字段名称" prop="prop">
              <el-input v-model="addFieldParams.prop" placeholder="请输入字段名称" clearable >
              </el-input>
            </el-form-item>
            <el-form-item label="字段别名" prop="label">
              <el-input v-model="addFieldParams.label" placeholder="请输入字段别名" clearable >
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
  </div>
</template>

<script setup>
import SqlCodeEdit from "@/components/codeEdit/SqlCodeEdit.vue";
import {useRouter} from "vue-router";
import {getSqlInfo, previewSql, saveSqlQueryParams, sqlToLine} from "@/api/custom-query/sql-search";
import {getMenuOpt} from '@/api/system/menuman.js'
import {ElMessage} from "element-plus";
import {reactive} from "vue";
import Paging from "@/components/pagination/index.vue";
import {useCacheStore} from "@/stores/cache";
import {getDictOption} from "@/api/system/dict-type";
const cacheStore = useCacheStore()
const previewTable = ref([])
const uniColumns = ref([])
const previewLoading = ref(false)
const queryForm = ref()
const dictOption = ref([])
const menuOpt = ref([])
const previewVisible = ref(false)
const isTopLineVisited = ref(false)
const isAddFieldVisited = ref(false)
const isFieldVisited = ref(false)
const form = ref({
  parentId: ''
})
const total = ref(0)
const pageInfo = reactive({
  pageNum: 1,
  pageSize: 10,
})
const formInstance = ref()
const formRules = ref({
  parentId: [{required: true, message: '请选择上级菜单', trigger: 'blur'}]
})
const router = useRouter();
const queryId = reactive(router.currentRoute.value.params.queryId)
const addFieldParams=reactive({
  prop:'',
  label:''
})
const sqlQueryParams = reactive({
  uniSql: '',
  uqName: null,
  uqDescribe: null,
  // columnList: []
})
const editLoading = ref(true)
const loading = ref(false)
const rules = ref({
  uqName: [{required: true, message: '请输入名称', trigger: 'blur'}],
  uqDescribe: [{required: true, message: '请输入描述', trigger: 'blur'}]
})
const tableHeight = ref(document.documentElement.scrollHeight - 245 + 'px')
const list = ref([])
const columns = ref([])
const uniCons = ref([])
const getDictInfo= async () => {
  getDictOption().then(res => {
    if (res.code === 1000) {
      dictOption.value = res.data
    }
  })
}
const ucTypeChang = (index, row) => {
  if (row.ucType == 'input' && row.ucCon != 'BETWEEN') {
    if (typeof (row.ucMock) != 'string') {
      row.ucMock = ''
    }
    row.type = 1
  } else if (row.ucType == 'input' && row.ucCon == 'BETWEEN') {
    row.type = 2
    row.ucMock = {begin: '', end: ''}
  } else if (row.ucType == 'datetime' && row.ucCon != 'BETWEEN') {
    row.type = 3
    row.ucMock = ''
  } else if (row.ucType == 'datetime' && row.ucCon == 'BETWEEN') {
    row.type = 4
    row.ucMock = []
  }
}
const displayTypeChange=(index, row)=>{
  if(row.displayType=='dict'){

  }else if(row.displayType=='date'){

  }
}
const getSqlQueryInfo = () => {
  getSqlInfo(queryId).then(res => {
    if (res.code === 1000) {
      columns.value = res.data.uniCons
      sqlQueryParams.uniSql=res.data.uniSql
      sqlQueryParams.uqName=res.data.uqName
      sqlQueryParams.uqDescribe=res.data.uqDescribe
    } else {
      ElMessage.error(res.msg)
    }
  })
}
//重置搜索
const handleReset = () => {
  sqlQueryParams.uniSql = ' '
  queryForm.value.resetFields()
}
const handleAdd = () => {
  let row = {
    id: null,
    uqId: queryId,
    ucName: '',
    ucCon: '',
    ucDescribe: '',
    ucKey: '',
    ucMock: '',
    ucType: '',
    type: 1
  }
  columns.value.push(row)
}
const handleAddField=()=>{
  // isAddFieldVisited.value=true
  let row={
    prop:'',
    label:''
  }
  uniColumns.value.push(row)
}
const handleDelete = (index, row) => {
  columns.value.splice(index, 1)
}
const submitForm = () => {
  let data = {
    queryId: queryId,
    uniSql: sqlQueryParams.uniSql,
    uniCons: columns.value,
    uniColumns: uniColumns.value
  }
  editLoading.value = false;
  saveSqlQueryParams(data).then(res => {
    if (res.code === 1000) {
      nextTick(() => {
        editLoading.value = true;
      })
      ElMessage.success(res.msg)
    } else {
      ElMessage.error(res.msg)
    }
  })
}
//实时获取sql语句
const changeSqlCode = (val) => {
  sqlQueryParams.uniSql = val
}

const previewSqlHandle = () => {
  if (sqlQueryParams.uniSql == '') {
    ElMessage({
      message: '请先输入sql语句再进行预览!',
      type: 'warning',
    })
    return;
  }
  previewLoading.value = true
  let data = {
    queryId: queryId,
    uniSql: sqlQueryParams.uniSql,
    uniCons: columns.value,
    uniColumns: uniColumns.value
  }
  previewSql(data, pageInfo).then(res => {
    if (res.code === 1000) {
      ElMessage.success(res.msg)
      previewLoading.value = false
      previewVisible.value = true
      previewTable.value = res.data.table.rows
      total.value = res.data.table.total
      let keyList = []
      for (let key in res.data.table.rows[0]) {
        let keyObject = {
          label: key,
          prop: key,
        }
        keyList.push(keyObject)
      }
      uniColumns.value = keyList
    } else {
      ElMessage.error(res.msg)
    }
  })
}
//切换每页显示条数
const handleSizeChange = (val) => {
  pageInfo.pageSize = val
  previewSqlHandle()
}

//点击页码进行分页功能
const handleCurrentChange = (val) => {
  pageInfo.pageNum = val
  previewSqlHandle()
}
//点击上线按钮弹出选择菜单框
const handleTopLine = () => {
  getMenuOpt().then(res => {
    menuOpt.value = [{
      value: 0,
      label: "一级目录",
      children: res.data
    }]
  })
  isTopLineVisited.value = true
}
//提取字段
const handleGetParams = () => {
  isFieldVisited.value = true
}
const restForm = () => {
  form.value = {
    parentId: ''
  }
}
//取消
const handleCancel = () => {
  restForm();
  isTopLineVisited.value = false;
};
const handleFieldCancel = () => {
  isFieldVisited.value = false;
};
const handleFieldSubmit = () => {
  isFieldVisited.value = false;
}
const handleSubmit = async (instance) => {
  if (!instance) return
  instance.validate(async (valid, fields) => {
    if (!valid) return
    let data = {
      menuId: form.value.parentId,
      queryId: queryId,
      uniSql: sqlQueryParams.uniSql,
      uniCons: columns.value,
      uniColumns: uniColumns.value
    }
    sqlToLine(data).then(res => {
      if (res.code === 1000) {
        ElMessage.success(res.msg)
        router.push({path: `/custom/query/sql`})
      } else {
        ElMessage.error(res.msg)
      }
    })
  })
}
getDictInfo()
getSqlQueryInfo()
</script>

<style lang="scss" scoped>
.code-editor {
  border: 1px solid #b3b3b3;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 10px;
}
</style>
