<template>
  <el-button @click="onAdd" class="fr mb10" style="z-index: 9; position: relative" v-if='props.obj.saveBtnShow'>
    <el-icon>
      <Plus />
    </el-icon>
    <span>新增</span>
  </el-button>
  <div style="height: 400px;">
    <MOSTY.Table :table-columns="pageData.tableColumns" :tableData="pageData.tableData" :tableloading="tableloading"
      :isSelect="true" :isSort="true" >
      <template #actions="{ row }">
        <span class="operedit" @click="onEdit(row)" v-if='props.obj.saveBtnShow'>
          <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" v-if='props.obj.saveBtnShow'>
              <el-icon>
                <Delete />
              </el-icon>
              删除</span>
          </template>
        </el-popconfirm>
        <span class="operesee" @click="handleSee(row)">
          <el-icon>
            <View />
          </el-icon>查看</span>
      </template>
    </MOSTY.Table>
  </div>
  <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" :disabled="!isSavedis">
      <el-form-item label="维保单位" prop="upkeepUnit">
        <el-input v-model="ruleForm.upkeepUnit" clearable style="width: 337px" />
      </el-form-item>
      <el-form-item label="维保时间" prop="upkeepDate">
        <el-date-picker v-model="ruleForm.upkeepDate" :disabled-date="disabledyssj" type="date" placeholder="维保时间"
          value-format="YYYY-MM-DD" style="width: 337px" />
      </el-form-item>
      <el-form-item label="维保人" prop="upkeepUser">
        <el-input v-model="ruleForm.upkeepUser" clearable style="width: 337px" />
      </el-form-item>
      <el-form-item label="维保人电话" prop="upkeepUserPhone">
        <el-input v-model="ruleForm.upkeepUserPhone" maxlength="11" show-word-limit clearable
          style="width: 337px"></el-input>
      </el-form-item>
      <el-form-item label="维保描述" prop="upkeepDesc">
        <el-input type="textarea" v-model="ruleForm.upkeepDesc" clearable style="width: 805px" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">

        <el-button type="primary" @click="onSave" v-if="isSavedis"> <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"
import * as rule from "@/utils/rules.js"
const { proxy } = getCurrentInstance();
const isSavedis = ref(false)
const props = defineProps({
  obj: {
    default: () => { },
    type: Object
  }
})
function disabledyssj(time) {
  return time.getTime() + 24 * 60 * 60 * 1000 < new Date(ruleForm.value.designtime).getTime() || time.getTime() > Date.now()
}

const tableloading = ref(false)
const pageData = reactive({
  pageConfiger: {
    pageSize: 10,
    pageCurrent: 1,
    total: 0
  },
  tableColumns: [
    {
      title: "维保单位",
      prop: "upkeepUnit"
    },
    {
      title: "维保人",
      prop: "upkeepUser"
    },
    {
      title: "维保人电话",
      prop: "upkeepUserPhone"
    },
    {
      title: "维保时间",
      prop: "upkeepDate"
    },
    {
      title: "维保描述",
      prop: "upkeepDesc"
    },
    {
      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 = {
  upkeepUnit: [{ required: true, message: "维保单位不能为空", trigger: "blur" }],
  upkeepDesc: [{ required: true, message: "维保描述不能为空", trigger: "blur" }],
  upkeepDate: [{ required: true, message: "请选择维保时间", trigger: "change" }],
  upkeepUser: [{ required: true, message: "维保人", trigger: "blur" }],
  ...rule.phoneRule({ require: true, validator: true }, "upkeepUserPhone"),
}
const onPageList = () => {
  tableloading.value = true
  postApi({ ...pageData.pageConfiger, ...{ bizId: props.obj.id, bizType: props.obj.sblx } }, "/mosty-jcgl/deviceUpkeepRecord/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 = "新增"
  isSavedis.value = true
  dialogVisible.value = true
}
const onEdit = row => {
  title.value = "编辑"
  isSavedis.value = true
  ruleForm.value = JSON.parse(JSON.stringify(row))
  dialogVisible.value = true
}
function handleSee(row) {
  title.value = "查看"
  isSavedis.value = false
  ruleForm.value = JSON.parse(JSON.stringify(row))
  dialogVisible.value = true
}
const onDel = id => {
  postApi({}, `/mosty-jcgl/deviceUpkeepRecord/del?id=${id}`).then(res => {
    ElMessage({
      message: "删除成功",
      type: "success"
    })
    onPageList()
  })
}
const onClose = () => {
  if (isSavedis.value) {
    proxy.$modal.confirm('离开会丢失页面中修改的内容，确认离开吗？')
      .then(() => {
        dialogVisible.value = false
        ruleRef.value.resetFields()
      })
      .catch(() => {
        // catch error
      })
  } else {
    dialogVisible.value = false
    ruleRef.value.resetFields()
  }

}
const onSave = () => {
  ruleRef.value.validate(valid => {
    if (valid) {
      ruleForm.value.testingReport = ruleForm.value.testingReport ? ruleForm.value.testingReport.toString() : null
      if (!ruleForm.value.id) {
        postApi(ruleForm.value, "/mosty-jcgl/deviceUpkeepRecord/add").then(res => {
          ElMessage({
            message: "新增成功",
            type: "success"
          })
          onPageList()
          dialogVisible.value = false
          ruleRef.value.resetFields()
        })
      } else {
        postApi(ruleForm.value, "/mosty-jcgl/deviceUpkeepRecord/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>
