<script setup>
/**
 * name：
 * user：sa0ChunLuyu
 * date：2023年8月10日 10:20:24
 */
import {
  UploadDeleteAction,
  UploadSearchAction,
  UploadListAction,
  $response, $image, $base64, UploadImageAction
} from '~/api'
import $router from '~/router'
import {onBeforeRouteUpdate} from "vue-router";
import {$copy} from "~/tool/copy";

const default_page_options = {
  search: '',
  time: [null, null],
  ext: '',
  from: '',
  page: 1,
}
const page_options = ref(JSON.parse(JSON.stringify(default_page_options)))
onBeforeRouteUpdate((to) => {
  routerChange(to.query)
})
const table_list = ref([])
const last_page = ref(0)
const UploadList = async () => {
  edit_data.value = JSON.parse(JSON.stringify(default_data))
  table_ref.value.setCurrentRow(null)
  const response = await UploadListAction(page_options.value)
  $response(response, () => {
    table_list.value = response.data.list.data
    last_page.value = response.data.list.last_page
  })
}

const routerChange = (query) => {
  page_options.value = {
    search: query.search || default_page_options.search,
    time: (!!query.time && query.time !== 'null') ? JSON.parse(query.time) : default_page_options.time,
    ext: query.ext || default_page_options.ext,
    from: query.from || default_page_options.from,
    page: Number(query.page) || default_page_options.page,
  }
  UploadList()
}

onMounted(() => {
  routerChange($router.currentRoute.value.query)
  UploadSearch()
})
const ext_arr = ref([])
const from_arr = ref([])
const UploadSearch = async () => {
  const response = await UploadSearchAction()
  $response(response, () => {
    ext_arr.value = response.data.ext
    from_arr.value = response.data.from
  })
}
const searchClick = (page = 1) => {
  page_options.value.page = page
  let query = JSON.parse(JSON.stringify(page_options.value))
  query.time = JSON.stringify(query.time)
  $router.push({query})
}
const searchClearClick = () => {
  let query = JSON.parse(JSON.stringify(default_page_options))
  query.time = JSON.stringify(query.time)
  $router.push({query})
}
const table_ref = ref(null)
const tableRef = (e) => {
  table_ref.value = e
}
const tableRowClick = (e) => {
  if (e.id === edit_data.value.id) {
    edit_data.value = JSON.parse(JSON.stringify(default_data))
    table_ref.value.setCurrentRow(null)
  } else {
    edit_data.value = JSON.parse(JSON.stringify(e))
    table_ref.value.setCurrentRow(e)
  }
}
const default_data = {
  id: 0,
}
const edit_data = ref(JSON.parse(JSON.stringify(default_data)))
const UploadDelete = async () => {
  const response = await UploadDeleteAction({
    id: edit_data.value.id
  })
  $response(response, () => {
    window.$message().success('删除成功')
    edit_data.value = JSON.parse(JSON.stringify(default_data))
    table_ref.value.setCurrentRow(null)
    const index = table_list.value.findIndex(item => item.id === response.data.id)
    table_list.value.splice(index, 1)
  })
}
const deleteClick = () => {
  window.$box.confirm(
      '是否确认删除该上传文件？',
      '提示',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }
  ).then(() => {
    UploadDelete()
  }).catch(() => {
  })
}
const image_arr = ['png', 'jpeg', 'jpg', 'gif']

const fileChange = async (e) => {
  if (e.size > 1024 * 1024 * 2) return window.$message().error('图片大小不能超过2M')
  await UploadImage(await $base64(e.raw))
}
const UploadImage = async (base64) => {
  const response = await UploadImageAction({
    base64
  })
  $response(response, () => {
    UploadList()
  })
}

const copyLinkClick = (link) => {
  $copy(link, () => {
    window.$message().success('复制成功')
  })
}
</script>
<template>
  <div>
    <el-card>
      <template #header>上传管理</template>
      <div>
        <div class="input_line_wrapper">
          <div my-1 class="input_line_tag_wrapper">
            <el-tag disable-transitions w-full type="info">搜索</el-tag>
          </div>
          <div ml-2 my-1>
            <el-input @keydown.enter="searchClick()" class="input_line_input_wrapper" v-model="page_options.search"
                      placeholder="请输入搜索"></el-input>
          </div>
          <div ml-2 my-1 class="input_line_tag_wrapper">
            <el-tag disable-transitions w-full type="info">时间范围</el-tag>
          </div>
          <div ml-2 my-1>
            <el-date-picker v-model="page_options.time" type="daterange" range-separator="至"
                            start-placeholder="开始时间" end-placeholder="结束时间" value-format="YYYY-MM-DD"/>
          </div>
          <div ml-2 my-1 class="input_line_tag_wrapper">
            <el-tag disable-transitions w-full type="info">类型</el-tag>
          </div>
          <div ml-2 my-1>
            <el-select v-model="page_options.ext" class="input_line_input_wrapper"
                       placeholder="请选择类型">
              <el-option label="全部" value=""/>
              <el-option v-for="(i,k) in ext_arr" :key="k" :label="i.ext" :value="i.ext"/>
            </el-select>
          </div>
          <div ml-2 my-1 class="input_line_tag_wrapper">
            <el-tag disable-transitions w-full type="info">来源</el-tag>
          </div>
          <div ml-2 my-1>
            <el-select v-model="page_options.from" class="input_line_input_wrapper"
                       placeholder="请选择来源">
              <el-option label="全部" value=""/>
              <el-option v-for="(i,k) in from_arr" :key="k" :label="i" :value="i"/>
            </el-select>
          </div>
          <el-button my-1 @click="searchClick()" ml-3 type="primary">搜索</el-button>
          <el-button my-1 @click="searchClearClick()" type="warning">清空</el-button>
        </div>
        <div mt-1 class="button_group_wrapper">
          <el-dropdown>
            <el-button type="primary">
              上传
              <el-icon ml-2>
                <Icon type="down"></Icon>
              </el-icon>
            </el-button>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>
                  <el-upload :auto-upload="false" :show-file-list="false" @change="fileChange">
                    上传图片
                  </el-upload>
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
          <el-button ml-2 :disabled="edit_data.id === 0" @click="deleteClick()" type="danger">删除</el-button>
        </div>
        <el-table row-class-name="cursor-pointer" mt-2 border :data="table_list" highlight-current-row
                  style="width: 100%"
                  @row-click="tableRowClick" :ref="tableRef">
          <el-table-column type="expand">
            <template #default="props">
              <div v-if="!!props.row.url">
                <div v-if="image_arr.indexOf(props.row.ext) !== -1">
                  <div class="table_image_wrapper">
                    <el-image :preview-src-list="[$image(props.row.url)]" class="image_box_wrapper" fit="contain"
                              :src="$image(props.row.url)" preview-teleported>
                      <template #error>
                        <div class="image_error_wrapper">暂无图片</div>
                      </template>
                    </el-image>
                  </div>
                </div>
                <div class="no_preview_wrapper" v-else>暂无预览</div>
                <div text-center>
                  <el-dropdown mt-2>
                    <el-button type="primary">
                      复制链接
                      <el-icon ml-2>
                        <Icon type="down"></Icon>
                      </el-icon>
                    </el-button>
                    <template #dropdown>
                      <el-dropdown-menu>
                        <el-dropdown-item @click="copyLinkClick($image(props.row.url))">完整链接</el-dropdown-item>
                        <el-dropdown-item @click="copyLinkClick(props.row.url)">不带域名</el-dropdown-item>
                      </el-dropdown-menu>
                    </template>
                  </el-dropdown>
                </div>
              </div>
              <div class="no_preview_wrapper" v-else>暂无预览</div>
            </template>
          </el-table-column>
          <el-table-column label="UUID" prop="uuid"></el-table-column>
          <el-table-column label="文件名" prop="name"></el-table-column>
          <el-table-column label="来源" prop="from" width="200"></el-table-column>
          <el-table-column label="大小" width="100">
            <template #default="scope">
              {{ scope.row.size }}MB
            </template>
          </el-table-column>
          <el-table-column label="类型" prop="ext" width="60"></el-table-column>
          <el-table-column label="MD5" prop="md5" width="290"></el-table-column>
          <el-table-column label="上传时间" prop="created_at" width="170"></el-table-column>
        </el-table>
        <el-pagination v-if="last_page > 1" :current-page="page_options.page" mt-2 background layout="prev, pager, next"
                       :page-count="last_page" @update:current-page="searchClick"/>
      </div>
    </el-card>
  </div>
</template>
<style scoped>
.no_preview_wrapper {
  line-height: 100px;
  text-align: center;
  color: #999999;
}

.table_image_wrapper {
  width: 200px;
  aspect-ratio: 1/1;
  background: #cccccc;
  border-radius: 6px;
  overflow: hidden;
  position: relative;
  margin: 0 auto;
}

.image_box_wrapper {
  width: 100%;
  aspect-ratio: 1/1;
  position: relative;
  background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.2) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.2) 75%), linear-gradient(45deg, rgba(0, 0, 0, 0.2) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.2) 75%);
  background-size: 20px 20px;
}

.image_error_wrapper {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: #333333;
}

.button_group_wrapper {
  display: flex;
}
</style>
<route>
{"meta":{"title":"上传管理"}}
</route>
