<script lang="ts">
// 声明额外的选项
export default {
  name: "PriList"
};
</script>
<script setup lang="ts">
import { provide } from "vue";
import { usePriList } from "./hook";
import { http } from "@/utils/http";
import { useRenderIcon, hasAuth, PureTableBar } from "@/utils/importUsed"
import Add from "./components/add/index.vue";
import EditUpdatePriList from "./components/updatePriList/index.vue";
import Search from "@iconify-icons/ep/search";
import Addicon from "@iconify-icons/ep/document-add";
import Delete from "@iconify-icons/ep/delete";
import EditPen from "@iconify-icons/ep/edit-pen";
import More from "@iconify-icons/ep/more-filled";

const {
  form,
  loading,
  columns,
  dataList,
  pagination,
  onSearch,
  handleSizeChange,
  handleCurrentChange,
  handleSelectionChange,
  ruleFormRef,
  projectIdOptionList,
  conditionModeOptionList,
  prizeContentOptionList,
  handleAdd,
  addVisible,
  handleUpdatePriList,
  editUpdatePriListVisible,
  editUpdatePriListFormData,
  handleDelete,
  linkToPriCondition,
  linkToPriLoopSet,
  linkToPriRecord,
  linkToPriLog,
  linkToPriPrizeInTable,
  linkToPriListAmountSet,
  linkToPriRecursionStartTable,
  linkToPriRecursionEndTable,
} = usePriList();
// 关闭添加
const closeAddVisible = () => {
  onSearch(ruleFormRef.value);
  addVisible.value = false;
}
provide('closeAddVisible', closeAddVisible)
// 关闭修改
const closeEditUpdatePriListVisible = () => {
  onSearch(ruleFormRef.value);
  editUpdatePriListVisible.value = false
}
provide('closeEditUpdatePriListVisible', closeEditUpdatePriListVisible)

</script>

<template lang="pug">
.main
  div
    //- 搜索表格组件条件
    el-form.bg-bg_color.pl-8.pt-4.pr-8(
      label-position="left"
      label-width="100px"
      :inline="true",
      :model="form",
      class="w-[99/100]"
      ref="ruleFormRef"
      :rules="rules"
    )
      el-form-item(label="项目", prop="projectId")
        el-select(
          v-model="form.projectId",
          placeholder="请选择项目",
          clearable,
        )
          el-option(:label="item.projectName", :value="item.id" v-for="(item,index) in projectIdOptionList")
      el-form-item(label='奖励名称' prop="prizeName")
        el-input(v-model='form.prizeName' autocomplete='off'
          placeholder="请输入奖励名称")
      el-form-item(label="条件模式", prop="conditionMode")
        el-select(
          v-model="form.conditionMode",
          placeholder="请选择条件模式",
          clearable,
        )
          el-option(:label="item.label", :value="item.id" v-for="(item,index) in conditionModeOptionList")
      el-form-item(label="奖励内容", prop="prizeContent")
        el-select(
          v-model="form.prizeContent",
          placeholder="请选择奖励内容",
          clearable,
        )
          el-option(:label="item.label", :value="item.id" v-for="(item,index) in prizeContentOptionList")

      el-form-item
        el-button(
          type="primary",
          :icon="useRenderIcon(Search)",
          :loading="loading",
          @click="onSearch(ruleFormRef)"
        ) 查询
    //- 表格组件
    PureTableBar(title="奖励配置", @refresh="onSearch(ruleFormRef)" )
      template(#buttons)
        el-button(type="primary" :icon="useRenderIcon(Addicon)" @click="handleAdd()" v-if="hasAuth(['add'])") 新增

      template(v-slot="{ size, checkList }")
        pure-table( 
          row-key="id"
          ref="tableRef"
          adaptive
          align-whole="center"
          table-layout="auto"
          :loading="loading"
          :size="size",
          :data="dataList",
          :columns="columns",
          :checkList="checkList",
          :pagination="pagination",
          :paginationSmall="size === 'default' ? true : false",
          :header-cell-style="{ background: 'var(--el-table-row-hover-bg-color)', color: 'var(--el-text-color-primary)' }",
          @selection-change="handleSelectionChange",
          @size-change="handleSizeChange",
          @current-change="handleCurrentChange"
        )
          template(#operation="{ row }")
            el-button.reset-margin(
              link
              type="primary"
              size="small"
              @click="handleUpdatePriList(row)"
              :icon="useRenderIcon(EditPen)"
              v-if="hasAuth(['updatePriList'])"
            ) 编辑
            el-button.reset-margin(
              link
              type="primary"
              size="small"
              @click="handleDelete(row)"
              :icon="useRenderIcon(Delete)"
              v-if="hasAuth(['delete'])"
            ) 删除


            el-dropdown(trigger="click", :hide-on-click="false")
              el-button.ml-3(class="mt-[2px]" link type='primary' :size='size' :icon='useRenderIcon(More)')
              template(#dropdown)
                el-dropdown-menu
                  el-dropdown-item
                    el-button.reset-margin.edit-btn(
                      link
                      type="primary"
                      size="small"
                      @click="linkToPriListAmountSet(row)"
                      :icon="useRenderIcon(EditPen)"
                      v-if="hasAuth(['linkToPriListAmountSet'])"
                    ) 奖励金额设置
                  el-dropdown-item
                    el-button.reset-margin.edit-btn(
                      link
                      type="primary"
                      size="small"
                      @click="linkToPriCondition(row)"
                      :icon="useRenderIcon(EditPen)"
                      v-if="hasAuth(['linkToPriCondition'])"
                    ) 奖励条件
                  el-dropdown-item
                    el-button.reset-margin.edit-btn(
                      link
                      type="primary"
                      size="small"
                      @click="linkToPriLoopSet(row)"
                      :icon="useRenderIcon(EditPen)"
                      v-if="hasAuth(['linkToPriLoopSet'])"
                    ) 递归配置
                  el-dropdown-item
                    el-button.reset-margin.edit-btn(
                      link
                      type="primary"
                      size="small"
                      @click="linkToPriRecursionStartTable(row)"
                      :icon="useRenderIcon(EditPen)"
                      v-if="hasAuth(['linkToPriRecursionStartTable'])"
                    ) 递归开始条件对象表
                  el-dropdown-item
                    el-button.reset-margin.edit-btn(
                      link
                      type="primary"
                      size="small"
                      @click="linkToPriRecursionEndTable(row)"
                      :icon="useRenderIcon(EditPen)"
                      v-if="hasAuth(['linkToPriRecursionEndTable'])"
                    ) 递归停止条件对象表
                  el-dropdown-item
                    el-button.reset-margin.edit-btn(
                      link
                      type="primary"
                      size="small"
                      @click="linkToPriRecord(row)"
                      :icon="useRenderIcon(EditPen)"
                      v-if="hasAuth(['linkToPriRecord'])"
                    ) 奖励记录
                  el-dropdown-item
                    el-button.reset-margin.edit-btn(
                      link
                      type="primary"
                      size="small"
                      @click="linkToPriLog(row)"
                      :icon="useRenderIcon(EditPen)"
                      v-if="hasAuth(['linkToPriLog'])"
                    ) 奖励发放日志
                  el-dropdown-item
                    el-button.reset-margin.edit-btn(
                      link
                      type="primary"
                      size="small"
                      @click="linkToPriPrizeInTable(row)"
                      :icon="useRenderIcon(EditPen)"
                      v-if="hasAuth(['linkToPriPrizeInTable'])"
                    ) 奖励入库表

    Add(:addVisible="addVisible" :projectId="form.projectId")
    EditUpdatePriList(:editVisible="editUpdatePriListVisible" :formData="editUpdatePriListFormData")

                    
</template>

<style scoped lang="scss">
:deep(.el-dropdown-menu__item i) {
  margin: 0;
}

:deep(.el-form-item__label) {
  font-weight: 700;
}

:deep(.el-pagination) {
  flex-flow: wrap;
}

:deep(.is-draggable) {
  max-height: 80vh;
  overflow: auto;
}

:deep(.el-dialog__header) {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #fff;
}

:deep(.el-descriptions__header) {
  margin: 16px 0 !important;
}
</style>