<script lang="ts" setup>/**
 * @Name: index.vue
 * @Description:管理枚举弹窗
 * @Author: xinyan
 */
import { Delete, View, InfoFilled, Operation, Plus } from '@element-plus/icons-vue';
import PermissionButton from '/src/components/PermissionButton/index.vue';
import { usePagination } from '/src/utils/usePagination';
import { useTableData } from '/src/utils/useTableData';
import * as api from './api';
import { EnumColumns } from '/src/views/sku-manage/Columns';
import { useResponse } from '/@/utils/useResponse';
import { ElMessage } from 'element-plus';
import CreateDialog from '/@/views/sku-manage/product-attribute/component/manage-enum/component/CreateDialog.vue';
import EditDrawer from '/@/views/sku-manage/product-attribute/component/manage-enum/component/EditDrawer.vue';
import EditLabelDialog from '/@/views/product-manage/comment-detail/component/EditLabelDialog.vue';
import ShowEnumDrawer from '/@/views/sku-manage/product-attribute/component/manage-enum/component/ShowEnumDrawer.vue';
import { hasPermission } from '/@/utils/hasPermission';


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

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

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

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

const editData = ref<any>();

const formInline = reactive<any>({
  label: '',
  status: ''
});

const gridRef = ref();
const gridOptions: any = reactive({
  // id: 'NegativeLabel-table',
  // keepSource: true,
  height: 720,
  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 = {
    attr: rowData.id,
    label: formInline.label,
    status: formInline.status
  };
  await useTableData(api.getTableData, query, gridOptions);
  await gridRef.value.loadColumn(EnumColumns);
  gridOptions.showHeader = Boolean(gridOptions.data?.length);
}

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

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

function handleView(row: any) {
  editData.value = row;
  viewOpen.value = true;
}

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

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

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

<template>
	<div class="drawer-container">
		<el-drawer ref="editDrawer"
							 v-model="manageOpen"
							 :close-on-click-modal="false"
							 :close-on-press-escape="false"
							 style="background-color: #f3f4fb"
							 size="50%">
			<template #title>
				<div>
					<span style="font-size: 16px; font-weight: bold">属性枚举:</span>
					<el-check-tag checked style="pointer-events: none;margin-left: 5px">{{ rowData.name }}</el-check-tag>
				</div>
			</template>
			<div class="p-5 w-full whitespace-nowrap">
				<el-card style="height: 850px">
					<el-row >
						<el-col :span="8" >
							<div>
								<span class="mr-2">名称</span>
								<el-input v-model="formInline.label" placeholder="请输入名称" clearable @change="fetchList"></el-input>
							</div>
						</el-col>
						<el-col :span="8" :offset="4">
							<div>
								<span class="mr-2">状态</span>
								<el-select v-model="formInline.status" placeholder="请选择状态" clearable @change="fetchList">
									<el-option label="启用" value="1"></el-option>
									<el-option label="禁用" value="0"></el-option>
								</el-select>
							</div>
						</el-col>
					</el-row>
					<el-divider ref="dividerContainer" style="margin: 20px 0 12px 0" />
					<vxe-grid ref="gridRef" :cell-style="cellStyle" v-bind="gridOptions">
						<template #toolbar_buttons>
							<div class="flex gap-2">
								<PermissionButton :icon="Plus" v-if="hasPermission('AttrCreate')" plain round type="primary" @click="handleCreate"> 新 增</PermissionButton>
							</div>
						</template>
						<template #status="{ row }">
							<el-tag v-if="row.status == true" type="success">启用</el-tag>
							<el-tag v-else type="danger">禁用</el-tag>
						</template>
            <template #operate="{ row }">
              <div class="flex justify-center gap-2">
                <div>
                  <el-button :icon="View" circle plain type="success" @click="handleView(row)"></el-button>
                </div>
                <div>
                  <PermissionButton v-if="hasPermission('AttrUpdate')" circle plain type="warning"
                                    @click="handleEdit(row)">
                    <el-icon>
                      <Operation />
                    </el-icon>
                  </PermissionButton>
                </div>
                <div v-if="hasPermission('AttrDelete')">
                  <el-popconfirm
                      :icon="InfoFilled"
                      icon-color="#626AEF"
                      title="你确定要删除此项吗?"
                      width="220"
                      @confirm="singleDelete(row)"
                  >
                    <template #reference>
                      <PermissionButton circle plain type="danger">
                        <el-icon>
                          <Delete />
                        </el-icon>
                      </PermissionButton>
                    </template>
                    <template #actions="{ confirm, cancel }">
                      <el-button @click="cancel">No!</el-button>
                      <el-button
                          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>
		<CreateDialog v-if="createOpen" v-model="createOpen" :rowData="rowData" @refresh="fetchList"></CreateDialog>
		<EditDrawer v-if="editOpen" v-model="editOpen" :editData="editData" :rowData="rowData" @refresh="fetchList"></EditDrawer>
		<ShowEnumDrawer v-if="viewOpen" v-model="viewOpen" :editData="editData" ></ShowEnumDrawer>
	</div>
</template>

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

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