<template>
  <div>
    <header_local />
    <div class="main">
      <el-row class="head">
        <el-col :span="12"> 图片审核 </el-col>
        <el-col style="text-align: right" :span="12">
          <el-input
            v-model="page_data.title"
            placeholder="请输入文件名"
            style="width: 250px; margin-right: 5px"
          >
            <template #append>
              <el-button type="primary" @click="getList"> 检索 </el-button>
            </template>
          </el-input>
          <el-button
            type="primary"
            :icon="UploadFilled"
            @click="(dialogVisible = true), (count = 0)"
          >
            上传审核内容
          </el-button>
        </el-col>
      </el-row>

      <el-table :data="tableData">
        <el-table-column align="center" type="index" width="50" />
        <el-table-column align="center" prop="name" label="封面">
          <template #default="scope">
            <el-image
              style="width: 40px; height: 40px; border-radius: 5px"
              :src="scope.row.url"
              fit="cover"
            />
          </template>
        </el-table-column>
        <el-table-column align="center" prop="title" label="标题">
        </el-table-column>
        <el-table-column
          align="center"
          prop="createTime"
          label="上传时间"
        ></el-table-column>
        <el-table-column align="center" prop="statusCode" label="审核状态">
          <template #default="scope">
            <el-tag :type="scope.row.statusCode">{{
              scope.row.statusDesc
            }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="statusCode" label="审核结果">
          <template #default="scope">
            <div>
              <el-tag
                v-if="scope.row.reviewResult && scope.row.reviewResult.label"
                :type="
                  scope.row.reviewResult
                    ? status[scope.row.reviewResult.label]
                    : 'info'
                "
              >
                {{
                  scope.row.reviewResult
                    ? scope.row.reviewResult.labelDesc
                    : '-'
                }}
              </el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="address" label="操作">
          <template #default="scope">
            <el-button
              size="small"
              v-if="scope.row.statusCode == 'success'"
              @click="detail(scope.row)"
            >
              查看详情
            </el-button>
            <el-popconfirm
              title="确定要删除该文件吗?"
              @confirm="deleteRow(scope.row)"
            >
              <template #reference>
                <el-button size="small"> 删除 </el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <br />
      <el-pagination
        background
        layout="prev, pager, next"
        @current-change="currentChange"
        :current-page="page_data.page"
        :page-size="page_data.pageSize"
        :total="page_data.total"
      />

      <el-dialog @close="dialogClose" v-model="dialogVisible" title="选择文件">
        <div>文件名称</div>
        <br />
        <el-input v-model="input" placeholder="请输入文件名称" clearable />
        <br />
        <br />
        <!-- :action="config.base.videoProcessing + '/review/img/upload'" -->
        <el-upload
          v-model:file-list="fileList"
          ref="upload_ele"
          :on-error="upError"
          :limit="20"
          multiple
          :on-exceed="handleExceed"
          :on-success="upSuccess"
          :headers="{ Authorization }"
          :on-progress="upProgress"
          :before-upload="upload"
          :auto-upload="false"
          :data="{ title: input }"
          :action="config.base.videoProcessing + '/review/img/upload'"
          accept="image/*"
        >
          <el-button type="primary" :icon="UploadFilled"> 选择文件 </el-button>
        </el-upload>
        <template #footer>
          <div class="dialog-footer">
            <el-button type="primary" @click="submit"> 提交 </el-button>
          </div>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script setup>
import header_local from '../components/header.vue';
import { UploadFilled } from '@element-plus/icons-vue';
import { ElMessage, genFileId } from 'element-plus';
import { storeImg, historyImg, deleteRowImage } from '@/api/processing';
import { ref,onUnmounted } from 'vue';
import config from '../../../config/index';
import { useRouter } from 'vue-router';
const route = useRouter();

const Authorization = localStorage.getItem('token') || '';

const count = ref(0);
const dialogVisible = ref(false);
const upload_ele = ref(null);
const fileList = ref([]);
const input = ref('');
const page_data = ref({
  page: 1,
  pageSize: 15,
  title: '',
  total: 0
});

const status = {
  REJECT: 'danger',
  REVIEW: 'warning',
  NORMAL: 'success'
};

const tableData = ref([]);

const getList = () => {
  historyImg({
    data: page_data.value
  }).then(r => {
    tableData.value = (r.records || []).map(v => {
      return {
        ...v,
        createTime: v.createTime.replace('T', ' ')
      };
    });
    page_data.value.total = r.total;
  });
};
window.processing_getList = getList;
getList();

function upProgress(par) {
  // 上传进度
  //   console.log(par);
}

function handleExceed(files) {
  upload_ele.value.clearFiles();
  const file = files[0];
  file.uid = genFileId();
  upload_ele.value.handleStart(file);
  upload_ele.value.submit();
}

function upError() {
  ElMessage.error('请稍后重新选择文件！');
}

function upload(file) {
  if (/^image\//.test(file.type)) return true;
  ElMessage.error('请选择图片文件');
  return false;
}

function submit() {
  upload_ele.value.submit();
}

function dialogClose() {
  upload_ele.value.clearFiles();
  dialogVisible.value = false;
  input.value = '';
}

function upSuccess(res) {
  ++count.value;

  if (res.code !== 0) return ElMessage.error(res.message);
  storeImg({
    data: {
      title: input.value || '',
      url: res.data.url
    }
  }).then(r => {
    count.value >= fileList.value.length && dialogClose();
    getList();
  });
}

function detail(row) {
  sessionStorage.setItem('Processing_detail', JSON.stringify(row));
  route.push({
    name: 'imageProcessing_detail'
  });
}

function currentChange(page) {
  page_data.value.page = page;
  getList();
}

function deleteRow(row) {
  deleteRowImage({ id: row.id }).then(r => {
    getList();
    ElMessage.success('删除成功');
  });
}

onUnmounted(() => {
  window.processing_getList = undefined;
});
</script>

<style>
.main {
  padding: 1em;
  font-size: 14px;
  font-family: PingFangSC, PingFang SC;
}

.main .head {
  background: #f9fafc;
  height: 42px;
  line-height: 42px;
  padding: 0 22px;
}
</style>
