<template>
  <el-button @click="onAdd" class="fr mb10" style="z-index: 9; position: relative">
    <el-icon>
      <Plus />
    </el-icon>
    <span>新增</span>
  </el-button>
  <MOSTY.Table :table-columns="pageData.tableColumns" :tableData="pageData.tableData" :tableloading="tableloading"
    :isSelect="true" :isSort="true">
    <template #actions="{ row }">
      <span class="operedit" @click="onEdit(row)">
        <el-icon>
          <EditPen />
        </el-icon>编辑</span>
      <el-popconfirm confirm-button-text="是" cancel-button-text="否" icon-color="red" title="确定要删除?"
        @confirm="onDel(row.id)">
        <template #reference>
          <span class="operdel" size="small">
            <el-icon>
              <Delete />
            </el-icon>
            删除</span>
        </template>
      </el-popconfirm>
    </template>
  </MOSTY.Table>
  <div class="fenye">
    <MOSTY.Pages :pageConfiger="pageData.pageConfiger" @changeNo="handleCurrentChange" @changeSize="handleSizeChange" />
  </div>
  <el-dialog :title="title + '检测记录'" width="1100px" v-model="dialogVisible" :before-close="onClose">
    <el-form ref="ruleRef" label-width="150px" :model="ruleForm" label-suffix=":" :rules="rules"
      style="flex-wrap: wrap; width: 100% !important">
      <el-form-item label="检测机构" prop="testingAgency">
        <el-input v-model="ruleForm.testingAgency" clearable style="width: 337px" />
      </el-form-item>
      <el-form-item label="上传检测报告附件" prop="testingReport">
        <MOSTY.Upload :limit="1" :widthNumber="337" :showinput="true"
          :placeholder="'请上传检测报告附件（pdf,ofd,doc,docx,xls,xlsx）'" :gsgfList="['pdf', 'ofd', 'doc', 'docx', 'xls', 'xlsx']"
          :nopicer="true" :isImg="false" :ShowfileList="true" v-model="ruleForm.testingReport" />
      </el-form-item>
      <el-form-item label="是否认证" prop="testingStatus">
        <el-radio-group v-model="ruleForm.testingStatus" style="width: 337px">
          <el-radio :label="'合格'">合格</el-radio>
          <el-radio :label="'不合格'">不合格</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="有效期限" prop="validityPeriod">
        <el-input v-model="ruleForm.validityPeriod" type="number" min="0" step="1" clearable style="width: 337px" />
      </el-form-item>
      <el-form-item label="检测描述" prop="testingDesc">
        <el-input type="textarea" v-model="ruleForm.testingDesc" clearable style="width: 805px" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="onSave"> <el-icon>
            <DocumentChecked />
          </el-icon>
          <span>保存</span> </el-button>
        <el-button @click="onClose"> <el-icon>
            <DocumentDelete />
          </el-icon>
          <span>关闭</span></el-button>

      </span>
    </template>
  </el-dialog>
</template>
<script setup>
import * as MOSTY from "@/components/MyComponents/index"
import { reactive, ref, onMounted, getCurrentInstance } from "vue"
import { postApi, getApi } from "@/api/tobAcco_api.js"
import { ElMessage } from "element-plus"
const { proxy } = getCurrentInstance();
// const emits = defineEmits(["handleChange", "searchChange"])
// emits("searchChange", { total: 138 })
const props = defineProps({
  obj: {
    default: () => { },
    type: Object
  }
})
const tableloading = ref(false)
const pageData = reactive({
  pageConfiger: {
    pageSize: 10,
    pageCurrent: 1,
    total: 0
  },
  tableColumns: [
    {
      title: "检测机构",
      prop: "testingAgency"
    },
    {
      title: "检测机构",
      prop: "testingAgency"
    },
    {
      title: "检测状态",
      prop: "testingStatus"
    },
    {
      title: "有效期限",
      prop: "validityPeriod"
    },
    {
      title: "操作",
      prop: "actions",
      width: 200,
      slot: true
    }
  ],
  tableData: []
})
const dialogVisible = ref(false)
const title = ref("新增")
const ruleRef = ref(null)
const ruleForm = ref({
  bizId: props.obj.id,
  bizType: props.obj.sblx
})
const rules = {
  testingAgency: [{ required: true, message: "检测机构不能为空", trigger: "blur" }],
  testingDesc: [{ required: true, message: "检测描述不能为空", trigger: "blur" }],
  testingReport: [{ required: true, message: "请上传检测报告附件", trigger: "blur" }],
  testingStatus: [{ required: true, message: "请选择检测状态", trigger: "blur" }],
  validityPeriod: [{ required: true, message: "有效期限", trigger: "blur" }]
}
const onPageList = () => {
  tableloading.value = true
  postApi({ ...pageData.pageConfiger, ...{ bizId: props.obj.id, bizType: props.obj.sblx } }, "/mosty-jcgl/deviceCheckRecord/pageList")
    .then(res => {
      tableloading.value = false
      pageData.tableData = res.records
      pageData.pageConfiger.total = res.total
    })
    .catch(err => {
      tableloading.value = false
    })
}
const handleCurrentChange = val => {
  pageData.pageConfiger.pageCurrent = val
  onPageList()
}
const handleSizeChange = val => {
  pageData.pageConfiger.pageSize = val
  onPageList()
}
const onAdd = () => {
  title.value = "新增"
  dialogVisible.value = true
}
const onEdit = row => {
  dialogVisible.value = true
  title.value = "编辑"
  ruleForm.value = JSON.parse(JSON.stringify(row))
}
const onDel = id => {
  postApi({}, `/mosty-jcgl/deviceCheckRecord/del?id=${id}`).then(res => {
    ElMessage({
      message: "删除成功",
      type: "success"
    })
    onPageList()
  })
}
const onClose = () => {
  proxy.$modal.confirm('离开会丢失页面中修改的内容，确认离开吗？')
    .then(() => {
      dialogVisible.value = false
      ruleRef.value.resetFields()
    })
    .catch(() => {
      // catch error
    })

}
const onSave = () => {
  ruleRef.value.validate(valid => {
    if (valid) {
      ruleForm.value.testingReport = ruleForm.value.testingReport ? ruleForm.value.testingReport.toString() : null
      if (title.value === "新增") {
        postApi(ruleForm.value, "/mosty-jcgl/deviceCheckRecord/add").then(res => {
          ElMessage({
            message: "新增成功",
            type: "success"
          })
          onPageList()
          dialogVisible.value = false
          ruleRef.value.resetFields()
        })
      } else {
        postApi(ruleForm.value, "/mosty-jcgl/deviceCheckRecord/update").then(res => {
          ElMessage({
            message: "修改成功",
            type: "success"
          })
          onPageList()
          dialogVisible.value = false
          ruleRef.value.resetFields()
        })
      }
    }
  })
}
onMounted(() => {
  onPageList()
})
</script>

<style lang="scss" scoped>
.el-pagination {
  justify-content: end !important;
}
</style>
