<template>
  <div class="app-container">
    <el-card shadow="never">
      <template #header>
        <div class="card-header">
          <span>整改进展记录</span>
          <div>
            <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['hidd:objhidd:edit']">新增进展</el-button>
            <el-button plain icon="ArrowLeft" @click="goBack">返回</el-button>
          </div>
        </div>
      </template>

      <el-table v-loading="loading" :data="rectProgList">
        <el-table-column label="序号" type="index" width="60" align="center" />
        <el-table-column label="整改进展" align="center" prop="rectProg" :show-overflow-tooltip="true" />
        <el-table-column label="记录人" align="center" prop="recPers" />
        <el-table-column label="记录时间" align="center" prop="collTime" width="180" />
        <el-table-column label="备注" align="center" prop="note" :show-overflow-tooltip="true" />
      </el-table>

      <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
    </el-card>

    <!-- 新增进展对话框 -->
    <el-dialog title="新增整改进展" v-model="open" width="600px" append-to-body>
      <el-form :model="form" :rules="rules" ref="rectProgRef" label-width="100px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="整改进展" prop="rectProg">
              <el-input v-model="form.rectProg" type="textarea" :rows="4" placeholder="请输入整改进展情况" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="记录人" prop="recPers">
              <el-input v-model="form.recPers" placeholder="请输入记录人" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="记录时间" prop="collTime">
              <el-date-picker v-model="form.collTime" type="datetime" placeholder="请选择记录时间" value-format="YYYY-MM-DD HH:mm:ss" style="width: 100%" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="备注" prop="note">
              <el-input v-model="form.note" type="textarea" placeholder="请输入备注" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="BisHiddRectProg">
import { listBisHiddRectProg, addBisHiddRectProg } from "@/api/slaj/hidd"

const { proxy } = getCurrentInstance()
const route = useRoute()
const router = useRouter()

const rectProgList = ref([])
const loading = ref(true)
const total = ref(0)
const open = ref(false)
const title = ref("")

const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
  hiddGuid: undefined
})

const form = ref({})
const rules = {
  rectProg: [{ required: true, message: "整改进展不能为空", trigger: "blur" }],
  recPers: [{ required: true, message: "记录人不能为空", trigger: "blur" }],
  collTime: [{ required: true, message: "记录时间不能为空", trigger: "change" }]
}

/** 查询列表 */
function getList() {
  loading.value = true
  queryParams.value.hiddGuid = route.query.hiddGuid
  listBisHiddRectProg(queryParams.value).then(res => {
    loading.value = false
    rectProgList.value = res.rows
    total.value = res.total
  })
}

/** 新增按钮操作 */
function handleAdd() {
  reset()
  open.value = true
  title.value = "新增整改进展"
}

/** 提交按钮 */
function submitForm() {
  proxy.$refs["rectProgRef"].validate(valid => {
    if (valid) {
      form.value.hiddGuid = route.query.hiddGuid
      addBisHiddRectProg(form.value).then(response => {
        proxy.$modal.msgSuccess("新增成功")
        open.value = false
        getList()
      })
    }
  })
}

/** 取消按钮 */
function cancel() {
  open.value = false
  reset()
}

/** 重置表单 */
function reset() {
  form.value = {
    rectProg: undefined,
    recPers: undefined,
    collTime: undefined,
    note: undefined
  }
  proxy.resetForm("rectProgRef")
}

/** 返回 */
function goBack() {
  router.push({ path: '/slaj/hidd/detail', query: { guid: route.query.hiddGuid } })
}

onMounted(() => {
  getList()
})
</script>

<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
