<script setup lang="ts">
import XCellDetail from '@af-mobile-client-vue3/components/data/XCellDetail/index.vue'
import NormalDataLayout from '@af-mobile-client-vue3/components/layout/NormalDataLayout/index.vue'
import TabBarLayout from '@af-mobile-client-vue3/components/layout/TabBarLayout/index.vue'
import { remove } from '@af-mobile-client-vue3/services/api/common'
import {
  showConfirmDialog,
  showFailToast,
  showSuccessToast,
  Cell as VanCell,
  CellGroup as VanCellGroup,
  Dialog as VanDialog,
  Field as VanField,
  Form as VanForm,
  Grid as VanGrid,
  GridItem as VanGridItem,
  Popup as VanPopup,
} from 'vant'
import { onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'

const options = ref([
  { text: '微信', icon: 'wechat' },
  { text: '微博', icon: 'weibo' },
  { text: '微信', icon: 'wechat' },
  { text: '微博', icon: 'weibo' },
  { text: '微信', icon: 'wechat' },
  { text: '微博', icon: 'weibo' },
  { text: '微信', icon: 'wechat' },
  { text: '微博', icon: 'weibo' },
])

const barList = ref([
  { icon: 'edit', text: '编辑', method: 'editElement' },
  { icon: 'delete-o', text: '删除', method: 'delElement' },
  { icon: 'ellipsis', text: '更多', method: 'getMore' },
])

const serviceName = ref('af-system')

const queryParamsName = ref('crud_oper_log_manage')

const route = useRoute()

const id = ref(-1)

const showMore = ref(false)

const showEdit = ref(false)

const msg = ref({
  info1: '',
  info2: '',
})

const loading = ref(true)

const detailContent = ref({
  编号: '测试编号3.1415926...',
  姓名: '测试人员',
  部门: '测试部门',
  完成日期: '测试时间 2024/4/16 16:59:12',
  请求方式: '测试方法 POST',
  请求ip: '测试ip 127.0.0.1',
})

const callbacks = {
  editElement,
  delElement,
  getMore,
}

function editElement() {
  showEdit.value = true
}

function doEdit() {
  showEdit.value = false
}
function delElement() {
  showConfirmDialog({
    title: '提示',
    message:
      `确认删除---${id.value}---?`,
    closeOnClickOverlay: true,
  })
    .then(() => {
      const params = {
        queryParamsName: queryParamsName.value,
        idList: [id.value],
      }
      remove(params, serviceName.value)
        .then((_res) => {
          showSuccessToast('删除成功')
          history.back()
        })
        .catch((_err) => {
          showFailToast('删除失败')
        })
    })
    .catch((err) => {
      console.warn(err)
    })
}

function getMore() {
  showMore.value = true
}

onMounted(() => {
  id.value = route.params.id as unknown as number
  setTimeout(() => {
    loading.value = false
  }, 1000)
})
</script>

<template>
  <div id="XCellDetailView">
    <NormalDataLayout title="详情" class="normal-body">
      <template #layout_content>
        <XCellDetail
          title="测试标题"
          describe="测试描述信息"
          extra="12345"
          :loading="loading"
          :status-bar="{ icon: 'success', color: 'green' }"
        >
          <template #detailContent>
            <div v-for="(value, key) in detailContent" :key="key" class="detail-content">
              <div class="detail-content-title">
                {{ key }}
              </div>
              <div class="detail-content-msg">
                {{ value }}
              </div>
            </div>
          </template>
        </XCellDetail>
      </template>
    </NormalDataLayout>
    <TabBarLayout :bar-list="barList" :callbacks="callbacks" />
    <VanPopup
      v-model:show="showMore"
      class="pop-box"
      :overlay-style="{ height: '92.5vh', top: '7.5vh' }"
      round
      position="bottom"
    >
      <div class="grid-box">
        <VanGrid :gutter="10">
          <VanGridItem v-for="(item, index) in options" :key="index" :icon="(item as any).icon" :text="(item as any).text" />
        </VanGrid>
      </div>
      <VanCell class="cell" title="取消" @click="showMore = false" />
    </VanPopup>
    <VanDialog :show="showEdit" title="编辑信息" :close-on-click-overlay="true" @confirm="doEdit">
      <VanForm>
        <VanCellGroup class="cell-group">
          <VanField
            v-model="msg.info1"
            name="信息一"
            label="信息一"
            placeholder="请填写信息一"
            :rules="[{ required: true, message: '信息一不得为空' }]"
          />
          <VanField
            v-model="msg.info2"
            name="信息二"
            label="信息二"
            placeholder="请填写信息二"
            :rules="[{ required: true, message: '信息二不得为空' }]"
          />
        </VanCellGroup>
      </VanForm>
    </VanDialog>
  </div>
</template>

<style scoped lang="less">
#XCellDetailView {
  .normal-body {
    height: 92vh;
  }
  .grid-box {
    background-color: #f7f8fa;
    margin-top: 2vh;
    :deep(.van-grid-item__content) {
      background-color: #f7f8fa;
    }
    :deep(.van-grid-item__content:hover) {
      background-color: white;
    }
  }
  .pop-box {
    height: 28vh;
    background-color: #f7f8fa;
  }
  .cell {
    margin-top: 1vh;
    text-align: center;
  }
  .cell-group {
    margin-top: 2vh;
    margin-bottom: 2vh;
  }
  .detail-content {
    margin: 5px 0 0 0;
    font-size: 15px;
    .detail-content-title {
      font-size: 13px;
      margin-bottom: 5px;
      color: var(--van-text-color-2);
    }
  }
}
</style>
