<template>
  <div class="main">
    <div class="above">
      <div class="btnBox">
        <el-select v-model="pageData.listQuery.planYear" style="width: 150px;">
          <el-option v-for="item in filterYear(7)" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
        <el-button type="primary">
          <el-icon>
            <UploadFilled />
          </el-icon>
          <span>查询</span>
        </el-button>
        <el-button type="primary">
          <el-icon>
            <Histogram />
          </el-icon>
          <span>历史记录</span>
        </el-button>
      </div>
    </div>
    <div class="below">
      <el-table ref="multipleTableRef" stripe :data="pageData.tableData" style="width: 100%"
        @selection-change="handleSelectionChange" border v-loading="tableLoading">
        <el-table-column label="年份" property="year"></el-table-column>
        <el-table-column label="操作" width="200">
          <template #default="{ row }">
            <span class="operedit" @click="clickEdit(row)">
              <el-icon>
                <EditPen />
              </el-icon>编辑
            </span>
            <el-popconfirm confirm-button-text="是" cancel-button-text="否" icon-color="red" title="确定要删除?"
              @confirm="deldete(row)">
              <template #reference>
                <span class="operdel" size="small"><el-icon>
                    <Delete />
                  </el-icon>删除</span>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <div class="flex just-start mt10">
        <el-pagination class="pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="pageData.listQuery.pageCurrent" :page-sizes="[2, 5, 10, 20]"
          :page-size="pageData.listQuery.pageSize" layout="total, prev, pager, next, sizes, jumper"
          :total="total"></el-pagination>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.main {
  width: 100%;
  height: calc(100vh - 220px);

  .above {
    .btnBox {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      margin-bottom: 10px;
    }
  }
}

::v-deep .el-table {
  height: calc(100vh - 300px);
  border-bottom: 1px solid var(--el-color-primary);
  overflow: auto;
}
</style>
<script setup>
import { reactive, ref, getCurrentInstance, onMounted, watchEffect, defineProps } from "vue"
import { getApi } from "@/api/tobAcco_api.js";
import { filterYear } from "@/utils/auth.js";
import { dateFormat } from "@/utils/tools.js"
const props = defineProps({ obj: Object })
const pageData = reactive({
  tableData: [],
  listQuery: {
    pageCurrent: 1,
    pageSize: 10,
    orgid: ""
  },
  fromObj: { year: dateFormat({ type: "year" }) }
});
const { proxy } = getCurrentInstance()
const butLoading = ref(false)
const tableLoading = ref(false)
const total = ref(0)
const dialogVisible = ref(false)
// 初始化
onMounted(() => {
  getStandardScore()
})
//编辑
const clickEdit = val => {
  dialogVisible.value = true
  pageData.fromObj = JSON.parse(JSON.stringify(val))
  pageData.fromObj.fjid = val.files
}
//列表
const getStandardScore = () => {
  tableLoading.value = true
  getApi(pageData.listQuery, "/mosty-jcgl/standard/getHonor").then(async res => {
    if (res) {
      total.value = res.total
      pageData.tableData = res.records
    }
  }).finally(() => {
    tableLoading.value = false
  })
}
// 改变每页条数
const handleSizeChange = (val) => {
  pageData.listQuery.pageSize = val
  getStandardScore()
};
// 翻页
const handleCurrentChange = (val) => {
  pageData.listQuery.pageCurrent = val
  getStandardScore()
};
watchEffect(() => {
  if (props.obj) {
    pageData.listQuery.orgid = props.obj.orgCode
    pageData.fromObj.orgid = props.obj.orgCode
    pageData.listQuery.pageCurrent = 1
    getStandardScore()
  }
})
</script>