<script lang="ts" setup>
/**
 * @Name: NegativeLabel.vue
 * @Description: 负面标签
 * @Author: Cheney
 */
import { CopyDocument, Delete, InfoFilled, Plus } from '@element-plus/icons-vue';
import * as api from '../api';
import PermissionButton from '/@/components/PermissionButton/index.vue';
import { usePagination } from '/@/utils/usePagination';
import { useTableData } from '/@/utils/useTableData';
import { NegativeLabelColumns } from '/@/views/product-manage/Columns';
import CreateLabelDialog from '/@/views/product-manage/comment-detail/component/CreateLabelDialog.vue';
import EditLabelDialog from '/@/views/product-manage/comment-detail/component/EditLabelDialog.vue';
import { useResponse } from '/@/utils/useResponse';
import { ElMessage } from 'element-plus';
import { handleCopy } from '/@/utils/useCopyText';
import 'echarts-wordcloud';
import { hasPermission } from '/@/utils/hasPermission';


const isShowLabel = defineModel({ default: false });

const props = defineProps({
  rowData: <any>Object
});

const { rowData } = props;
const { tableOptions, handlePageChange } = usePagination(fetchList);

const createOpen = ref(false);
const editOpen = ref(false);

const editData = ref<any>();

const gridRef = ref();
const gridOptions: any = reactive({
  // id: 'NegativeLabel-table',
  // keepSource: true,
  height: 800,
  size: 'small',
  border: false,
  round: true,
  stripe: true,
  showHeader: true,
  showOverflow: true,
  currentRowHighLight: true,
  toolbarConfig: {
    size: 'large',
    slots: {
      buttons: 'toolbar_buttons'
      // tools: 'toolbar_tools',
    }
  },
  rowConfig: {
    isHover: true
  },
  columnConfig: {
    resizable: true
  },
  pagerConfig: {
    total: tableOptions.value.total,
    page: tableOptions.value.page,
    limit: tableOptions.value.limit
  },
  loading: false,
  loadingConfig: {
    icon: 'vxe-icon-indicator roll',
    text: '正在拼命加载中...'
  },
  columns: '',
  data: ''
});

async function fetchList() {
  gridOptions.data = [];
  gridOptions.columns = [];

  const query = {
    review: rowData.id
  };
  await useTableData(api.getNegativeTags, query, gridOptions);
  await gridRef.value.loadColumn(NegativeLabelColumns);
  gridOptions.showHeader = Boolean(gridOptions.data?.length);
}

function handleCreate() {
  createOpen.value = true;
}

function handleEdit(row: any) {
  editOpen.value = true;
  editData.value = row;
}

async function singleDelete(row: any) {
  const res = await useResponse(api.deleteNegativeTags, row);
  if (res.code === 2000) {
    ElMessage.success({ message: '删除成功', plain: true });
    await fetchList();
  }
}

function cellStyle() {
  return {
    fontWeight: 500
  };
}

onMounted(() => {
  fetchList();
});
</script>

<template>
  <div class="drawer-container">
    <el-drawer
        ref="editDrawer"
        v-model="isShowLabel"
        :show-close="false"
        direction="rtl"
        size="55%"
        style="background-color: #f3f4fb"
        title="负面标签"
    >
      <div class="sticky top-0" style="background-color: #f3f4fb; min-height: 20px; z-index: 2"></div>
      <div class="px-5">
        <el-card class="mb-3">
          <el-descriptions :column="1" direction="vertical">
            <el-descriptions-item>
              <template #label>
                <div class="title-item">标 题</div>
              </template>
              <span class="cell-item">{{ rowData.title }}</span>
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="title-item flex items-center">
                  <span>
                    评论内容
                  </span>
                  <el-icon class="ml-2 cursor-pointer" @click="handleCopy(rowData.content)">
                    <CopyDocument />
                  </el-icon>
                </div>
              </template>
              <span class="cell-item">{{ rowData.content }}</span>
              
            </el-descriptions-item>
          </el-descriptions>
        </el-card>
        <el-card>
          <vxe-grid ref="gridRef" :cell-style="cellStyle" v-bind="gridOptions">
            <template #toolbar_buttons>
                <PermissionButton v-if="hasPermission('ReviewLabelCreate')" :icon="Plus" plain round type="primary" @click="handleCreate"> 新 增</PermissionButton>
            </template>
            <template #operate="{ row }">
              <div class="flex justify-center gap-2">
                <div>
                  <PermissionButton v-if="hasPermission('ReviewLabelUpdate')" circle plain type="warning" @click="handleEdit(row)">
                    <el-icon>
                      <Operation />
                    </el-icon>
                  </PermissionButton>
                </div>
								<div>
                  <el-popconfirm
                      :icon="InfoFilled"
                      icon-color="#626AEF"
                      title="你确定要删除此项吗?"
                      width="220"
                      @confirm="singleDelete(row)"
                  >
                    <template #reference>
                      <PermissionButton circle plain type="danger" v-if="hasPermission('ReviewLabelDelete')">
                        <el-icon>
                          <Delete />
                        </el-icon>
                      </PermissionButton>
                    </template>
                    <template #actions="{ confirm, cancel }">
                      <el-button size="small" @click="cancel">No!</el-button>
                      <el-button
                          size="small"
                          type="danger"
                          @click="confirm"
                      >
                        Yes?
                      </el-button>
                    </template>
                  </el-popconfirm>
                </div>
                
              </div>
            </template>
            <template #pager>
              <vxe-pager
                  v-model:currentPage="gridOptions.pagerConfig.page"
                  v-model:pageSize="gridOptions.pagerConfig.limit"
                  :total="gridOptions.pagerConfig.total"
                  class="mt-1.5"
                  @page-change="handlePageChange"
              />
            </template>
						<template #empty>
							<el-empty description="暂无数据" />
						</template>
          </vxe-grid>
        </el-card>
      </div>
    </el-drawer>
    <CreateLabelDialog v-if="createOpen" v-model="createOpen" :rowData="rowData" @refresh="fetchList"></CreateLabelDialog>
    <EditLabelDialog v-if="editOpen" v-model="editOpen" :editData="editData" :rowData="rowData"
                     @refresh="fetchList"></EditLabelDialog>
  </div>

</template>

<style scoped>
.title-item {
  font-weight: bold;
  font-size: 16px;
}

.cell-item {
  font-size: 14px;
  font-weight: 600;
  color: #666;
}

.drawer-container :deep(.el-drawer__header) {
  border-bottom: none;
  font-weight: 500;
}

.drawer-container :deep(.el-drawer__title) {
  font-size: 18px;
}
</style>
