<template>
  <!-- 表格 -->
  <div>
    <MOSTY.Assort title="年度安全生产标准化">
      <template #btn>
        <el-button type="primary" @click="addclisk">新增</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>
    <el-dialog v-model="dialogVisible" :title="fromObj.id ? '年度安全生产标准化修改' : '年度安全生产标准化新增'" :before-close="closeDialog"
      width="600px" append-to-body>
      <el-form class="mosty-from-wrap" ref="ruleFormRef" label-width="130px" :model="fromObj" :inline="true"
        :rules="rules" style="flex-wrap: wrap;">
        <el-form-item label="年份:" style="width: 100%;">
          <el-date-picker style="width: 100%;" v-model="fromObj.year" type="year" format="YYYY" value-format="YYYY" />
        </el-form-item>
        <el-form-item label="年度自评得分:" prop="score" style="width: 100%;">
          <el-input v-model.number="fromObj.score" type='number' @blur="fromObj.score = JEblurFn(fromObj.score)"
            clearable placeholder="请输入年度自评得分" />
        </el-form-item>
        <el-form-item label="自评说明:" style="width: 100%;">
          <el-input v-model="fromObj.description" autosize clearable type="textarea" placeholder="请输入自评说明" />
        </el-form-item>
        <el-form-item label="附件:" style="width: 100%;">
          <MOSTY.Upload :widthNumber="860" :limit="20" :nopicer="true" :isImg="false" :ShowfileList="true"
            v-model="fromObj.files" :showinput="false" :key="dialogVisible"></MOSTY.Upload>
        </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, defineProps, watchEffect } from "vue"
import { getApi, postApi } from "@/api/tobAcco_api.js";
import * as rule from "@/utils/rules.js";
import { JEblurFn } from "@/utils/auth.js";
const props = defineProps({
  obj: Object,//参数
})
const pageData = reactive({
  tableData: [],
  listQuery: {
    pageCurrent: 1,
    pageSize: 10,
    orgid: ""
  },

});
const fromObj = ref({
  year: new Date().getFullYear().toString()
})
const { proxy } = getCurrentInstance()
const butLoading = ref(false)
const tableLoading = ref(false)
const ruleFormRef = ref()
const dialogVisible = ref(false)
const tableColumn = ref([
  {
    title: "年份",
    prop: "year",
    sortable: true
  },
  {
    title: "年度安全生产标准化自评得分",
    prop: "score",
    sortable: true
  },
  {
    title: "自评说明",
    prop: "description",
    sortable: true
  },
  {
    title: "操作",
    prop: "actions",
    slot: true
  }
])
const pageConfiger = reactive({
  pageSize: 20,
  pageCurrent: 1,
  total: 0
})
const rules = ref({
  ...rule.percentageRule({ validator: true, require: true }, "score"),
})
onMounted(() => {
  getStandardScore()
})
function addclisk(params) {
  fromObj.value = {};
  fromObj.value.year = new Date().getFullYear().toString()
  dialogVisible.value = true
}
//编辑
const clickEdit = val => {
  fromObj.value = val
  dialogVisible.value = true
}
//列表
const getStandardScore = () => {
  tableLoading.value = true
  if (pageData.listQuery.orgid === '620001') pageData.listQuery.orgid = '620001XN'
  getApi(pageData.listQuery, "/mosty-jcgl/standard/getStandardScore").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
      fromObj.value.score = fromObj.value.score ? parseFloat(fromObj.value.score) : null
      fromObj.value.files = fromObj.value.files ? fromObj.value.files.toString() : null
      let url = "/mosty-jcgl/standard/addStandardScore" //新增
      if (fromObj.value.id) url = "/mosty-jcgl/standard/editStandardScore" //修改
      if (fromObj.value.orgid === '620001') fromObj.value.orgid = '620001XN'
      postApi(fromObj.value, url).then(res => {
        proxy.$message.success("成功")
        dialogVisible.value = false
        if (fromObj.value.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/delStandardScore/${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
    fromObj.value.orgid = props.obj.orgCode
    pageData.listQuery.pageCurrent = 1
    pageConfiger.pageCurrent = 1
    getStandardScore()
  }
})
</script>
<style lang="scss" scoped>
.eltab3 {
  height: calc(100vh - 460px);
}


::v-deep .el-menu-item {
  color: #e71111 !important;
}
</style>