<template>
  <!-- 表格 -->
  <div>
    <MOSTY.Assort title="单位荣誉情况">
      <template #btn>
        <el-button type="primary" @click="onClickAdd">新增</el-button>
      </template>
    </MOSTY.Assort>
    <section class="eltab3">
      <MOSTY.Table :table-columns="tableColumn" :tableData="pageData.tableData" :tableloading="tableloading"
        :isSelect="false" :isSort="true" @SortChange="SortChange" style="width: 100%;">
        <template #actions="{ 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>
      </MOSTY.Table>
    </section>
    <div class="fenye">
      <MOSTY.Pages :pageConfiger="pageConfiger" @changeSize="handleSizeChange" @changeNo="handleCurrentChange">
      </MOSTY.Pages>
    </div>


    <div class="flex">
      <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>
    <el-dialog v-model="dialogVisible" :title="pageData.fromObj.id ? '单位荣誉修改' : '单位荣誉新增'" :before-close="closeDialog"
      width="700px" append-to-body>
      <el-form class="mosty-from-wrap" ref="ruleFormRef" label-width="130px" :model="pageData.fromObj" :inline="true"
        :rules="rules" style="flex-wrap: wrap;">
        <el-form-item label="年份:" prop="year" style="width: 100%;">
          <el-date-picker style="width: 100%;" v-model="pageData.fromObj.year" type="year" format="YYYY"
            value-format="YYYY" />
        </el-form-item>
        <el-form-item label="荣誉/证书名称:" prop="name" style="width: 100%;">
          <el-input v-model="pageData.fromObj.name" clearable placeholder="请输入荣誉/证书名称" />
        </el-form-item>
        <el-form-item label="荣誉获得时间:" style="width: 100%;" prop="time">
          <el-date-picker v-model="pageData.fromObj.time" type="date" value-format="YYYY-MM-DD" placeholder="请选择荣誉获得时间"
            style="width: 100%;" />
        </el-form-item>
        <el-form-item label="备注:" style="width: 100%;">
          <el-input v-model="pageData.fromObj.bz" autosize type="textarea" style="width: 100%;" clearable />
        </el-form-item>

      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="savefrom(ruleFormRef)">保存</el-button>
          <el-button @click="closeDialog">取消</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import * as MOSTY from "@/components/MyComponents/index";
import { reactive, ref, getCurrentInstance, onMounted, watchEffect, watch, defineProps } from "vue"
import { getApi, postApi } from "@/api/tobAcco_api.js";
const props = defineProps({
  obj: Object,//参数
})
const pageData = reactive({
  tableData: [],
  listQuery: {
    pageCurrent: 1,
    pageSize: 10,
    orgid: ""
  },
  fromObj: {
    year: new Date().getFullYear().toString()
  }
});
const uploadIndex = ref(1)
const { proxy } = getCurrentInstance()
const butLoading = ref(false)
const tableLoading = ref(false)
const ruleFormRef = ref()
const total = ref(0)
const dialogVisible = ref(false)
const rules = ref({
  year: [{ required: true, message: "请选择年份", trigger: "blur" }],
  name: [{ required: true, message: "请输入荣誉/证书名称", trigger: "blur" }],
  time: [{ required: true, message: "请选择荣誉获得时间", trigger: "change" }],
})
const tableColumn = ref([
  {
    title: "年份",
    prop: "year",
    sortable: true
  },
  {
    title: "荣誉/证书名称",
    prop: "name",
    sortable: true
  },
  {
    title: "荣誉获得时间",
    prop: "time",
    sortable: true
  },
  {
    title: "备注",
    prop: "bz",
    sortable: true
  },
  {
    title: "操作",
    prop: "actions",
    slot: true
  }
])
const pageConfiger = reactive({
  pageSize: 20,
  pageCurrent: 1,
  total: 0
})
onMounted(() => {

  getStandardScore()
})
const onClickAdd = () => {
  dialogVisible.value = true
  pageData.fromObj = {
    year: new Date().getFullYear().toString()
  }
  uploadIndex.value++
}
//编辑
const clickEdit = val => {
  dialogVisible.value = true
  pageData.fromObj = JSON.parse(JSON.stringify(val))
}
//列表
const getStandardScore = () => {
  tableLoading.value = true
  if (pageData.listQuery.orgid === '620001') pageData.listQuery.orgid = '620001XN'
  getApi(pageData.listQuery, "/mosty-jcgl/standard/getHonor").then(async res => {
    if (res) {
      pageConfiger.total = res.total
      pageData.tableData = res.records
    }
  }).finally(() => {
    tableLoading.value = false
  })
}
//保存
const savefrom = async (formEl) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      butLoading.value = true
      let url = "/mosty-jcgl/standard/addHonor" //新增
      if (pageData.fromObj.id) url = "/mosty-jcgl/standard/editHonor" //修改
      if (pageData.fromObj.orgid === '620001') pageData.fromObj.orgid = '620001XN'
      postApi(pageData.fromObj, url).then(res => {
        proxy.$message.success("成功")
        dialogVisible.value = false
        if (pageData.fromObj.id) {
          getStandardScore()
        } else {
          pageData.tableData.unshift(res)
        }
      }).finally(() => {
        butLoading.value = false
      })
    }
  })
}

const closeDialog = () => {
  proxy.$modal.confirm('离开会丢失页面中修改的内容，确认离开吗？')
    .then(() => {
      dialogVisible.value = false
    })
    .catch(() => {
      // catch error
    })

};

//删除
const deldete = val => {
  postApi({}, `/mosty-jcgl/standard/delHonor/${val.id}`).then(res => {
    proxy.$message.success("成功")
    getStandardScore()
  })
}
// 改变每页条数
const handleSizeChange = (val) => {
  pageData.listQuery.pageSize = val
  pageConfiger.pageSize = val
  getStandardScore()
};
// 翻页
const handleCurrentChange = (val) => {
  pageData.listQuery.pageCurrent = val
  pageConfiger.pageCurrent = val
  getStandardScore()
};
watchEffect(() => {
  if (props.obj) {
    pageData.listQuery.orgid = props.obj.orgCode
    pageData.fromObj.orgid = props.obj.orgCode
    pageData.fromObj.orgname = props.obj.orgname
    pageData.listQuery.pageCurrent = 1
    pageConfiger.pageCurrent = 1
    getStandardScore()
  }
})
// watch(() => props.obj, () => {
//   if (props.obj) {
//     pageData.listQuery.orgid = props.obj.orgCode
//     pageData.fromObj.orgid = props.obj.orgCode
//     pageData.fromObj.orgname = props.obj.orgname
//     pageData.listQuery.pageCurrent = 1
//     pageConfiger.pageCurrent = 1
//     getStandardScore()
//   }
// })
</script>
<style lang="scss" scoped>
.eltab3 {
  height: calc(100vh - 467px);
}
</style>
