<template>
  <div class="dialog" v-if="dialogForm">
    <div class="head_box">
      <div>详情</div>
      <div><el-button @click="close">关闭</el-button></div>
    </div>
    <div class="form_cnt">
      <FormMessage v-model="listQuery" disabled :formList="formData" ref="elform" />
    </div>
  </div>
</template>

<script setup>
import FormMessage from "@/components/aboutTable/FormMessage.vue";
import { qcckGet } from "@/api/qcckApi.js";
import { ref, defineExpose, onMounted, getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance();
const { JQCLJG,JQLB,D_BZ_JQLY,JQLX,JQXL ,JQZL} = proxy.$dict( 'JQCLJG',"JQLB","D_BZ_JQLY","JQLX",'JQXL','JQZL' ); //获取字典数据
const dialogForm = ref(false); //弹窗
const formData = ref([
  { label: "报警电话", prop: "bjdh", type: "input" },
  { label: "报警地址", prop: "bjdz", type: "input" },
  { label: "报警内容", prop: "bjnr", type: "input" },
  { label: "报警人名称", prop: "bjrmc", type: "input" },
  { label: "报警人证件号码", prop: "bjrzjhm", type: "input" },
  { label: "报警时间", prop: "bjsj", type: "input" },
  { label: "接警完成时间", prop: "jjwcsj", type: "input" },
  { label: "警情子类", prop: "jqzldm", type: "select", options: JQZL },
  { label: "警情细类", prop: "jqxldm", type: "select", options: JQXL },
  { label: "警情类型", prop: "jqlxdm", type: "select",options: JQLX },
  { label: "警情来源", prop: "jqlyfs", type: "select",options: D_BZ_JQLY },
  { label: "警情类别", prop: "jqlbdm", type: "select", options: JQLB },
  { label: "警情处理状态", prop: "jqclztdm", type: "select",options: JQCLJG },
]);
const listQuery = ref({}); //表单
const elform = ref();
onMounted(() => {
});

// 初始化数据
const init = (row) => {
  dialogForm.value = true;
  qcckGet({}, `/mosty-gsxt/jjdbYp/getInfo/${row.id}`).then(res => {
    listQuery.value = res;
  }).catch(() => {
  })
};

// 关闭
const close = () => {
  listQuery.value = {};
  dialogForm.value = false;
};

defineExpose({ init });
</script>

<style lang="scss" scoped>
@import "~@/assets/css/layout.scss";
@import "~@/assets/css/element-plus.scss";

::v-deep .el-tabs--card>.el-tabs__header .el-tabs__item.is-active {
  color: #0072ff;
  background: rgba(0, 114, 255, 0.3);
}

.boxlist {
  width: 99%;
  height: 225px;
  margin-top: 10px;
  overflow: hidden;
}

::v-deep .avatar-uploader {
  display: flex;
  align-items: center;
}

::v-deep .el-upload-list {
  margin-left: 20px;
  display: flex;
  align-items: center;
}

::v-deep .el-upload-list__item-name .el-icon {
  top: 3px;
}
</style>
