<script setup>
import { ref } from 'vue'
import { Search } from '@element-plus/icons-vue'
import defaultImg from '@/assets/cover.jpg'
import {
  informationQueryService,
  informationRemoveService
} from '@/api/information'
import FieldEdit from './components/FiledEdit.vue'
import MoneyEdit from './components/MoneyEdit.vue'
import PhotoShow from '@/components/PhotoShow.vue'
import PhotoUpdate from '@/components/PhotoUpdate.vue'
import { typeNameService } from '@/api/type'
import QRView from './components/QRView.vue'
const loading = ref(false)
const fieldList = ref()
const total = ref(0)
const params = ref({
  current: 1,
  size: 10,
  type: 0,
  key: ''
})

// 场馆列表
const typeList = ref([])
const getTypeList = async () => {
  typeList.value = []

  const {
    data: { data }
  } = await typeNameService()
  typeList.value.push({ label: '所有场馆', value: 0 })
  data.forEach((item) => {
    typeList.value.push({ label: item.vname, value: item.id })
  })
}
getTypeList()

const getFieldList = async () => {
  loading.value = true
  const {
    data: { data }
  } = await informationQueryService(params.value)
  loading.value = false
  fieldList.value = data.list
  total.value = data.total
}
getFieldList()

const onCurrentChange = (current) => {
  params.value.current = current
  getFieldList()
}
const onSizeChange = (size) => {
  params.value.current = 1
  params.value.size = size
  getFieldList()
}
const onReset = () => {
  params.value.status = -1
  params.value.key = ''
  params.value.type = 0
  onSizeChange(10)
}

const fieldEditRef = ref()
const onEdit = (row) => {
  fieldEditRef.value.open(row, typeList.value.slice(1, 4))
}

const moneyEditRef = ref()
const onSetMoney = (id, price) => {
  moneyEditRef.value.open(id, price)
}

// 图片放大
const imgRef = ref()
const imgPreview = (imgUrl) => {
  imgRef.value.open(imgUrl)
}

// 修改场地照片
const imgUpdateRef = ref()
const updateImg = (id, imgUrl) => {
  imgUpdateRef.value.open(id, imgUrl, 'site')
}

// 移除场地信息
const onDelete = (id) => {
  ElMessageBox.confirm('确认删除该条场地信息？', '提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(async () => {
      await informationRemoveService(id)
      ElMessage.success('删除成功')
      getFieldList()
    })
    .catch(() => {})
}

const viewRef = ref()
const openQR = (id, url, name) => {
  viewRef.value.open(id, url, name)
}
</script>
<template>
  <page-container title="场地信息列表">
    <!-- <img :src="imgValue" /> -->
    <template #extra>
      <el-button type="primary" @click="onEdit">添加场地</el-button>
    </template>
    <!-- 表单区域 -->
    <el-form inline>
      <el-form-item label="">
        <el-input
          v-model="params.key"
          style="max-width: 600px"
          placeholder="请输入场地关键词"
          class="input-with-select"
          size="default"
        >
          <template #prepend>
            <el-select
              v-model="params.type"
              placeholder="所有场馆"
              style="width: 145px"
              @change="onSizeChange(10)"
            >
              <el-option
                v-for="(t, i) of typeList"
                :key="i"
                :label="t.label"
                :value="t.value"
              ></el-option>
            </el-select>
          </template>
          <template #append>
            <el-button @click="getFieldList()" :icon="Search" />
          </template>
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="onReset">重置</el-button>
      </el-form-item>
    </el-form>
    <hr />

    <!-- 表格区域 -->
    <el-table :data="fieldList" stripe v-loading="loading">
      <el-table-column type="index" label="序号" width="55vw" />

      <el-table-column label="场地照片">
        <template #default="{ row }">
          <img
            style="height: 100px; width: 120px; cursor: pointer"
            :src="
              row.imgUrl !== null && row.imgUrl !== '' && row.imgUrl != ' '
                ? row.imgUrl
                : defaultImg
            "
            :title="row.venueName"
            @click="imgPreview(row.imgUrl)"
          />
        </template>
      </el-table-column>

      <el-table-column label="场地名称" prop="venueName">
        <template #default="{ row }">
          <el-link type="primary" :underline="false">{{
            row.venueName
          }}</el-link>
        </template>
      </el-table-column>
      <el-table-column label="类型" prop="type"></el-table-column>
      <el-table-column label="位置" prop="location"></el-table-column>
      <el-table-column label="价格(1小时)">
        <template #default="{ row }">
          {{ row.price !== null ? row.price.toFixed(2) : 0.0 }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="360vw">
        <template #default="{ row }">
          <el-button
            link
            type="success"
            @click="onEdit(row)"
            title="编辑场地信息"
            >编辑</el-button
          >
          <el-button link type="primary" @click="onDelete(row.id)"
            >删除</el-button
          >
          <el-button
            link
            type="info"
            @click="onSetMoney(row.id, row.price)"
            title="调整场地使用价格"
            >调整价格</el-button
          >
          <el-button
            link
            type="danger"
            @click="updateImg(row.id, row.imgUrl)"
            title="调整场地图片"
            >场地图片</el-button
          >
          <el-button
            link
            type="success"
            @click="openQR(row.id, row.qrCode, row.venueName)"
            title="查看场地二维码图片"
            >二维码</el-button
          >
        </template>
      </el-table-column>
      <template #empty>
        <el-empty description="无场地数据" />
      </template>
    </el-table>

    <!-- 分页区域 -->
    <el-pagination
      v-model:current-page="params.current"
      v-model:page-size="params.size"
      :page-sizes="[10, 20, 50]"
      layout="jumper, total, sizes, prev, pager, next"
      background
      :total="total"
      @size-change="onSizeChange"
      @current-change="onCurrentChange"
      style="margin-top: 20px; justify-content: flex-end"
    />

    <!-- 编辑场地信息 -->
    <FieldEdit ref="fieldEditRef" @success="onSizeChange(10)"></FieldEdit>
    <!-- 编辑场地的价格信息 -->
    <MoneyEdit ref="moneyEditRef" @success="onSizeChange(10)"></MoneyEdit>
    <!-- 图片预览框 -->
    <PhotoShow ref="imgRef"></PhotoShow>
    <!-- 图片修改框 -->
    <PhotoUpdate ref="imgUpdateRef" @success="onSizeChange(10)"></PhotoUpdate>
    <!-- 二维码查看 -->
    <QRView ref="viewRef"></QRView>
  </page-container>
</template>
