<template>
  <div class="p-2">
    <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
      <div v-show="showSearch" class="search">
        <el-form ref="queryFormRef" :model="queryParam" :inline="true">
          <el-form-item label="手机号" prop="phone">
            <el-input v-model="queryParam.phone" placeholder="请输入手机号" clearable @keyup.enter="handleQuery" />
          </el-form-item>
          <el-form-item label="被投诉对象id" prop="aimId" label-width="120px">
            <el-input v-model="queryParam.aimId" placeholder="请输入被投诉对象id" clearable @keyup.enter="handleQuery" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </transition>
    <el-table
      ref="categoryTableRef"
      :data="vlogList"
      row-key="categoryId"
      border
      :default-expand-all="isExpandAll"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <el-table-column label="申请人" prop="status" align="center" width="100">
        <template #default="{ row }">
          {{ row.member == null ? '' : row.member.nickname }}
        </template>
      </el-table-column>

      <el-table-column label="申请原因" prop="reasonType" align="center" width="150">
        <template #default="{ row }">
          {{ getEmulistLabelById(row.reasonType, statusreasontype) }}
        </template>
      </el-table-column>
      <el-table-column label="投诉类型" prop="type" align="center" width="150">
        <template #default="{ row }">
          {{ getEmulistLabelById(row.type, statustype) }}
        </template>
      </el-table-column>
      <el-table-column label="被投诉对象" prop="aimType" align="center" width="150">
        <template #default="{ row }">
          {{ getEmulistLabelById(row.aimType, statusaimobject) }}
        </template>
      </el-table-column>
      <el-table-column label="处理方案" prop="resulttype" align="center" width="150">
        <template #default="{ row }">
          {{ getEmulistLabelById(row.resultType, statusresulttype) }}
        </template>
      </el-table-column>
      <el-table-column label="方案内容" align="center" prop="resultContent" width="200" />
      <el-table-column label="状态" prop="status" align="center" width="100">
        <template #default="{ row }">
          {{ getEmulistLabelById(row.status, feedbackstatus) }}
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" align="center" class-name="small-padding fixed-width">
        <template #default="scope">
          <el-tooltip content="审核" placement="top">
            <el-button link type="primary" @click="handleAdd(scope.row)" v-hasPermi="['workflow:video:add']">审核</el-button>
          </el-tooltip>
          <el-tooltip content="删除" placement="top">
            <el-button link type="primary" @click="handleDelete(scope.row)" v-hasPermi="['workflow:video:remove']">删除</el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <pagination v-if="totalref > 0" :total="totalref" v-model:page="queryParam.current" v-model:limit="queryParam.size" @pagination="getList" />
    </div>
    <el-dialog v-model="showRefuteDialog" title="审核">
      <el-form>
        <el-form-item label="处理方案">
          <el-select v-model="param.resultType" placeholder="处理方案">
            <el-option v-for="(item, index) in statusresulttype" :label="item.label" :value="item.value" :key="index" />
          </el-select>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="param.remark" type="textarea" :rows="4"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showRefuteDialog = false">取消</el-button>
          <el-button type="primary" @click="subclick">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="Category" lang="ts">
import { reQueryOV, vlogListVO, paramOV } from '@/api/report/types';
import { listCategory, posthandle } from '@/api/report/index';
import { getDictionaryByKey } from '@/utils/dict';
import { getEmulistLabelById } from '@/utils';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const showSearch = ref(true);
const showRefuteDialog = ref(false);
const queryParam = ref<reQueryOV>({
  current: 1,
  size: 10,
  aimId: undefined,
  phone: undefined
});
const vlogList = ref<vlogListVO[]>([]);
const totalref = ref<number>(0);
const isExpandAll = ref(true);

//搜索
const handleQuery = () => {
  queryParam.value.current = 1;
  getList();
};
const handleDelete = (row: any) => {};
//重置
const resetQuery = () => {
  queryParam.value = {
    current: 1,
    size: 10,
    aimId: undefined,
    phone: undefined
  };
  getList();
};
//获取举报列表
const getList = async () => {
  const res = await listCategory(queryParam.value);
  const { records, total } = (res.data || {}) as { records: any[]; total: number };
  if (res.code == 200) {
    vlogList.value = records;
    totalref.value = total;
  }
};
const statustype = ref([]);
const statusresulttype = ref([]);
const statusreasontype = ref([]);
const statusaimobject = ref([]);
const feedbackstatus = ref([]);

const getByKey = async () => {
  const orderStatustype = await getDictionaryByKey('ums_feedback_type');
  statustype.value = orderStatustype;
  const orderStatusresulttype = await getDictionaryByKey('ums_feedback_resulttype');
  statusresulttype.value = orderStatusresulttype;
  const orderStatusreasontype = await getDictionaryByKey('ums_feedback_reasontype');
  statusreasontype.value = orderStatusreasontype;
  const orderStatusaimobject = await getDictionaryByKey('ums_feedback_aimobject');
  statusaimobject.value = orderStatusaimobject;
  const orderStatusstatus = await getDictionaryByKey('ums_feedback_status');
  feedbackstatus.value = orderStatusstatus;
};
const handObj = ref({});

const param = ref<paramOV>({
  id: '',
  resultType: '',
  remark: '',
  status: 1
});
const handleAdd = (row: any) => {
  param.value = {
    id: '',
    resultType: '',
    remark: '',
    status: 1
  };
  handObj.value = row;
  showRefuteDialog.value = true;
  param.value.id = row.id;
};
const subclick = async () => {
  const res = await posthandle(param.value);
  console.log(res);
  if (res.code === 200) {
    getList();
    showRefuteDialog.value = false;
  }
};
onMounted(() => {
  getList();
  getByKey();
});
</script>
<style scoped lang="scss">
.video-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.video-container .video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.video-info {
  width: 100%;
  display: flex;
  justify-content: space-around;
  margin-top: 10px;
  font-size: 20px;
  font-weight: bold;
  & > div {
    cursor: pointer;
  }
}
.comment-list {
  width: 100%;
}
.comment-item {
  display: flex;
  width: 100%;
  .comment-avatar {
    padding: 10px;
  }
  .comment-content {
    padding: 10px;
    width: 100%;
    .comment-header {
      width: 100%;
      display: flex;
      justify-content: space-between;
      .comment-name {
        color: rgb(145, 145, 145);
      }
    }

    .comment-text {
      display: flex;
      width: 100%;
      justify-content: space-between;
      .el-button {
        width: 50px;
        height: 20px;
      }
    }
  }
}
</style>
