<template>
  <el-card shadow="hover">
    <div class="launch-table-search">
      <el-row>
        <el-button @click="addModuleConfig">新增</el-button>
        <el-select @change="searchQuery" v-model="search.sortTypes" style="margin-left: 20px" placeholder="配置分类">
          <el-option
              v-for="item in sortTypes"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          />
        </el-select>
        <el-select @change="searchQuery" v-model="search.statusTypes" style="margin-left: 10px" placeholder="配置状态">
          <el-option
              v-for="item in statusTypes"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          />
        </el-select>
        <el-input
            style="width: 200px;margin-left: 10px"
            :suffix-icon="Search"
            v-model="search.inputSearch"
            placeholder="请输入配置类型"
            @change="searchQuery">
        </el-input>
        <el-button style="margin-left: 10px" @click="clearSerach">清空</el-button>
      </el-row>
    </div>

    <div>
      <el-table :data="tableData" style="width: 100%" max-height="400">
        <el-table-column prop="description" label="描述" />
        <el-table-column prop="sort" label="配置分类" width="150">
          <template #default="scope">
            <div style="display: flex; align-items: center">
              <span>{{ dictFormat.formatArrayDict(sortTypes,scope.row.sort) }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="type" label="配置类型" />
        <el-table-column prop="version" label="版本" width="150"/>
        <el-table-column prop="status" label="激活状态" width="150">
          <template #default="scope">
            <div style="display: flex; align-items: center">
              <span style="color: #409EFF" v-if="scope.row.status === '1'">
                {{ dictFormat.formatArrayDict(statusTypes,scope.row.status) }}
              </span>
              <span v-else>
                {{ dictFormat.formatArrayDict(statusTypes,scope.row.status) }}
              </span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="updateTime" label="更新时间" width="150"/>
        <el-table-column fixed="right" label="操作" width="200">
          <template #default="scope">
            <el-button link type="primary" @click="showConfigInfo(scope.row)">详情</el-button>
            <el-popconfirm v-if="scope.row.status === '2' || scope.row.status === '3'" title="确定要删除吗?" @confirm="delConfigInfo(scope.row)">
              <template #reference>
                <el-button link type="primary">删除</el-button>
              </template>
            </el-popconfirm>

          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="launch-table-page">
      <el-pagination
          small
          :currentPage="page.current"
          :page-size="page.size"
          :page-sizes="[10, 20, 30, 40]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
    </div>
  </el-card>
</template>

<script setup>
import { reactive, ref, getCurrentInstance, onMounted } from 'vue'
import { Plus, ArrowLeft, Search } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'

const {proxy} = getCurrentInstance()
const router = useRouter()

const moduleConfigApi = proxy.$launchApi.moduleConfigApi
const dictApi = proxy.$launchApi.dictApi
const dictFormat = proxy.$launchUtil.dictFormat
const ConditionEnum = proxy.$launchUtil.ConditionEnum
const {Page, Query, createSelectPage} = proxy.$launchUtil.selectPage


//搜索
let search = ref({})

function searchQuery() {
  let queryArray = new Array()
  if(search.value.sortTypes){
    let query = new Query()
    query.setCondition(ConditionEnum.eq())
    query.setVal(search.value.sortTypes)
    query.setColumn("sort")
    queryArray.push(query)
  }
  if(search.value.statusTypes){
    let query = new Query()
    query.setCondition(ConditionEnum.eq())
    query.setVal(search.value.statusTypes)
    query.setColumn("status")
    queryArray.push(query)
  }
  if(search.value.inputSearch && search.value.inputSearch.trim() !== ""){
    let query = new Query()
    query.setCondition(ConditionEnum.eq())
    query.setVal(search.value.inputSearch)
    query.setColumn("type")
    queryArray.push(query)
  }
  querys.value = queryArray
  selectPage()
}

function clearSerach() {
  search.value = {}
  querys.value = []
  selectPage()
}

// 查询表格数据
let newPage = new Page(10,1)
newPage.setOrders([
  {column:"update_time",asc:false}
])
let page = reactive(newPage)
let querys = ref([])
let tableData = ref([])

function selectPage(){
  moduleConfigApi.selectPage(createSelectPage(page,querys.value)).then(data => {
    if(data != null){
      tableData.value = data.records
      page.total = data.total
      page.current = data.current
    }
  })
}

function handleSizeChange(val) {
  page.size = val
  selectPage()
}

function handleCurrentChange(val) {
  page.current = val
  selectPage()
}

// 详情
function showConfigInfo(val) {

}

// 删除
function delConfigInfo(row){
  moduleConfigApi.deleteById(row.id).then(result => {
    if(result === 1){
      proxy.$message.success("删除成功")
      selectPage()
    }
  })
}

// 新建配置
function addModuleConfig() {
  router.push("/main/moduleConfigInfo")
}

// 激活配置
function activateConfig() {

}

// 新版本
function newVersion(){

}

function getCodeError(value) {

}

// 字典处理
let sortTypes = ref([])
let statusTypes = ref([])

onMounted(() => {

  dictApi.getDict("launch.system.dict.sortType").then(data => {
    if(data !== null && data !== undefined){
      sortTypes.value = JSON.parse(data.configData)
    }
  })

  dictApi.getDict("launch.system.dict.statusType").then(data => {
    if(data !== null && data !== undefined){
      statusTypes.value = JSON.parse(data.configData)
    }
  })

  selectPage()
})

</script>

<style scoped>
.launch-table-search{
  min-height: 60px;
}
.launch-table-page{
  margin-top: 20px;
}
</style>