<template>
  <div>
    <div class="gva-search-box">
      <el-form ref="searchForm" :inline="true" :model="searchInfo">
        <el-form-item label="游戏id">
          <el-input v-model="searchInfo.game_id" placeholder="游戏id" />
        </el-form-item>
        <el-form-item label="日志编号">
          <el-input v-model="searchInfo.coding" placeholder="日志编号" />
        </el-form-item>
        <el-form-item label="uuid">
          <el-input v-model="searchInfo.log_uuid" placeholder="uuid" />
        </el-form-item>
        <el-form-item label="电脑编号">
          <el-input v-model="searchInfo.pc_code" placeholder="电脑编号" />
        </el-form-item>
        <el-form-item label="日志类型">
          <el-select v-model="searchInfo.code" placeholder="日志类型">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                :disabled="item.disabled"
              />
            </el-select>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="searchInfo.status" placeholder="日志状态" >
              <el-option
                v-for="item in statusList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                :disabled="item.disabled"
              />
            </el-select>
        </el-form-item>
        <el-form-item label="日期" prop="create_date">
         <el-date-picker
          v-model="searchInfo.create_date"
          popper-class="picker-popovers"
          class="timefilter"
          type="datetime"
          placeholder="选择日期时间"
          value-format="YYYY-MM-DD"
        >
        </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="primary" icon="search" @click="onSubmit">查询</el-button>
          <el-button size="small" icon="refresh" @click="onReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="gva-table-box">
      <el-table :data="tableData" @sort-change="sortChange" @selection-change="handleSelectionChange">
        <el-table-column
          type="selection"
          width="55"
        />
        <el-table-column align="left" label="id" min-width="100" prop="id" sortable="custom" />
        <el-table-column align="left" label="游戏id" min-width="150" prop="game_id" sortable="custom" />
        <el-table-column align="left" label="账号" min-width="150" prop="account" />
        <el-table-column align="left" label="日期" min-width="150" prop="create_date" />
        <el-table-column align="left" label="创建时间" min-width="150" prop="create_time" />
        <el-table-column align="left" label="日志编号" min-width="150" prop="coding" />
        <el-table-column align="left" label="编号描述" min-width="150" prop="describe" />
        <el-table-column align="left" label="UUID" min-width="150" prop="log_uuid" />
        <el-table-column align="left" label="脚本负责人" min-width="150" prop="operator" />
        <el-table-column align="left" label="电脑编号" min-width="100" prop="pc_code" />
        <el-table-column align="left" label="上报源" min-width="80" prop="script_type">
          <template #default="scope">
            <div>
              {{ typeFiletr(scope.row.script_type) }}
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="gva-pagination">
        <el-pagination
          :current-page="page"
          :page-size="pageSize"
          :page-sizes="[10, 30, 50, 100]"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        />
      </div>

    </div>

    <el-dialog v-model="dialogFormVisible" :before-close="closeDialog" :title="dialogTitle">
      <el-form ref="apiForm" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="游戏名称" prop="game_name">
          <el-input v-model="form.game_name" autocomplete="off" />
        </el-form-item>
        <el-form-item label="游戏包名" prop="game_package_name">
          <el-input v-model="form.game_package_name" autocomplete="off" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button size="small" @click="closeDialog">取 消</el-button>
          <el-button size="small" type="primary" @click="enterDialog">确 定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'GameList',
}
</script>

<script setup>
import {
  logList,
} from '@/api/log'
import { toSQLLine } from '@/utils/stringFun'
import { ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import warningBar from '@/components/warningBar/warningBar.vue'

const apis = ref([])
const form = ref({
    game_name: '',
    game_package_name: ''
})


const type = ref('')
const rules = ref({
  game_name: [{ required: true, message: '请输入游戏名称', trigger: 'blur' }],
  game_package_name: [
    { required: true, message: '请输入游戏包名', trigger: 'blur' }
  ]
})

const typeFiletr = (value) => {
  const target = typeOptions.value.filter(item => item.value === value)[0]
  return target && `${target.label}`
}
  
  const typeOptions = ref([
  {
    value: 0,
    label: '脚本',
    type: ''
  },
  {
    value: 1,
    label: '中控',
    type: ''
  }
])

const page = ref(1)
const total = ref(0)
const pageSize = ref(10)
const tableData = ref([])
const searchInfo = ref({})

const onReset = () => {
  searchInfo.value = {}
}

const value = ref('')
const statusList = [
  {
    value: 1,
    label: '成功',
  },
  {
    value: 2,
    label: '失败',
  },
]

const options = [
  {
    value: 45010,
    label: '启动游戏',
  },
  {
    value: 46010,
    label: '小绵羊登录',
  },
  {
    value: 46020,
    label: '微信登录',
  },
  {
    value: 46030,
    label: '魅族登录',
  },
  {
    value: 46050,
    label: '进入游戏',
  },
  {
    value: 47010,
    label: '主线教程',
  },
  {
    value: 46040,
    label: '选区',
  },
  {
    value: 46070,
    label: '实名认证',
  },
]
// 搜索

const onSubmit = () => {
  page.value = 1
  pageSize.value = 10
  searchInfo.value.game_id = Number(searchInfo.value.game_id)
  searchInfo.value.coding = Number(searchInfo.value.coding)
  getTableData()
}

// 分页
const handleSizeChange = (val) => {
  pageSize.value = val
  getTableData()
}

const handleCurrentChange = (val) => {
  page.value = val
  getTableData()
}

// 排序
const sortChange = ({ prop, order }) => {
  if (prop) {
    if (prop === 'id') {
      prop = 'id'
    }
    searchInfo.value.orderKey = toSQLLine(prop)
    searchInfo.value.desc = order === 'descending'
  }
  getTableData()
}

// 查询
const getTableData = async() => {
  const table = await logList({ page: page.value, pageSize: pageSize.value, ...searchInfo.value })
  if (table.code === 0) {
    tableData.value = table.data.list
    total.value = table.data.total
    page.value = table.data.page
    pageSize.value = table.data.pageSize
  }
}

getTableData()

// 批量操作
const handleSelectionChange = (val) => {
  apis.value = val
}

const deleteVisible = ref(false)


// 弹窗相关
const apiForm = ref(null)
const initForm = () => {
  apiForm.value.resetFields()
  form.value = {
    game_name: '',
    game_package_name: ''
  }
}

const dialogTitle = ref('新增game')
const dialogFormVisible = ref(false)
const openDialog = (key) => {
  switch (key) {
    case 'addGame':
      dialogTitle.value = '新增game'
      break
    case 'edit':
      dialogTitle.value = '编辑game'
      break
    default:
      break
  }
  type.value = key
  dialogFormVisible.value = true
}
const closeDialog = () => {
  initForm()
  dialogFormVisible.value = false
}

const editCardFunc = async(row) => {
  const res = await getGameById({ id: row.id })
  form.value = res.data
  openDialog('edit')
}

const enterDialog = async() => {
  apiForm.value.validate(async valid => {
    if (valid) {
      switch (type.value) {
        case 'addGame':
          {
            const res = await cuGame(form.value)
            if (res.code === 0) {
              ElMessage({
                type: 'success',
                message: '添加成功',
                showClose: true
              })
            }
            getTableData()
            closeDialog()
          }

          break
        case 'edit':
          {
            const res = await cuGame(form.value)
            if (res.code === 0) {
              ElMessage({
                type: 'success',
                message: '编辑成功',
                showClose: true
              })
            }
            getTableData()
            closeDialog()
          }
          break
        default:
          // eslint-disable-next-line no-lone-blocks
          {
            ElMessage({
              type: 'error',
              message: '未知操作',
              showClose: true
            })
          }
          break
      }
    }
  })
}


</script>

<style scoped lang="scss">
.button-box {
  padding: 10px 20px;
  .el-button {
    float: right;
  }
}
.warning {
  color: #dc143c;
}
</style>
