<template>
  <div class="bigBox">
    <MOSTY.FromPage :title="data.config.title" @closeDialog="black">
      <template #content>
        <MOSTY.Assort :title="'基础信息'" />
        <div class="fromBox">
          <el-form class="mosty-from-wrap" ref="ruleFormRef" label-width="155px" :model="data.fromObj" :inline="true"
            :rules="rules" :disabled="!data.config.saveBtnShow">
            <el-form-item label="检查标题：">
              <el-input v-model="data.fromObj.checktitle" placeholder="请输入检查标题" style="width: 848px"></el-input>
            </el-form-item>
            <el-form-item label="车牌号：">
              <el-input v-model="data.fromObj.carnumber" placeholder="请输入车牌号" style="width: 337px"></el-input>
            </el-form-item>
            <el-form-item label="检查时间：">
              <el-date-picker v-model="data.fromObj.checktime" type="date" placeholder="请输入检查时间"
                :disabled-date="disabledDate" :shortcuts="shortcuts" style="width: 337px" :size="size" />
            </el-form-item>
            <el-form-item label="检查人：">
              <el-input v-model="data.fromObj.username" placeholder="请输入检查人" style="width: 337px"></el-input>
            </el-form-item>
            <el-form-item label="所属单位：">
              <el-input v-model="data.fromObj.orgname" placeholder="请输入所属单位" style="width: 337px"></el-input>
            </el-form-item>
            <!-- <el-form-item label="备注：">
              <el-input v-model="data.fromObj.bz" type="textarea" autusize show-word-limit maxlength="200"
                style="width: 848px" />
            </el-form-item> -->
          </el-form>
        </div>
        <MOSTY.Assort :title="'检查内容信息'" />
        <section class="eltab4">
          <MOSTY.Table :table-columns="data.tableColumn" :tableData="data.tableData" :tableloading="tableloading"
            :tableHeight="'100%'" :isSelect="false" style="width: 100%;" :isSort="false">
            <template #state="{ row }">
              <span v-if="row.state == '01'">正常</span>
              <span style="color: red;" v-if="row.state == '02'">异常</span>
            </template>
            <template #actions="{ row }">
              <span v-if="row.state == '02'" class="operesee" @click="seeInfo(row)">
                <el-icon>
                  <View />
                </el-icon>查看</span>
              <span v-else>--</span>
            </template>
          </MOSTY.Table>
        </section>
      </template>
      <template #footer>

        <el-button type="primary" @click="submit(ruleFormRef)" v-loading="saveloading" v-if="data.config.saveBtnShow">
          <el-icon>
            <DocumentChecked />
          </el-icon>
          <span>保存</span> </el-button>
        <el-button @click="black()"> <el-icon>
            <DocumentDelete />
          </el-icon>
          <span>关闭</span></el-button>
      </template>
    </MOSTY.FromPage>
    <div v-if="comprehensiveShow" class="dialog-box">
      <Ckyhjd @changePage="changePage" :editObj="editObj.editObj" />
      <!-- <YhInfo @close="closeEvent" /> -->
    </div>
  </div>
</template>

<script setup>
import {
  reactive,
  ref,
  watchEffect,
  getCurrentInstance,
  onMounted,
  watch,
  nextTick
} from "vue";
import { useRouter, useRoute } from "vue-router";
import * as MOSTY from "@/components/MyComponents/index";
import { ElMessage } from "element-plus";
import { getApi, deleteApi, putApi, postApi } from "@/api/tobAcco_api.js";
import * as rule from "@/utils/rules.js";
import Ckyhjd from "@/views/fxgk/jcss/components/ckyhjd.vue";
const { proxy } = getCurrentInstance();
const activeNames = ref(["1"]);
const comprehensiveShow = ref(false)
const editObj = reactive({
  editObj: null
})
const props = defineProps({
  saveBtnShow: {
    type: Boolean,
    default: true
  },
  editObj: {
    type: Object,
    default: () => { }
  }
});
const emit = defineEmits("changePage");
const ruleFormRef = ref();
const data = reactive({
  fromObj: {},
  tableColumn: [
    {
      title: "检查项名称",
      prop: "name"
    },
    {
      title: "检查内容",
      prop: "content"
    },
    {
      title: "检查状态",
      prop: "state",
      slot: true
    },
    // {
    //   title: "检查时间",
    //   prop: "checktime"
    // },
    // {
    //   title: "所属单位",
    //   prop: "orgname"
    // },
    {
      title: "操作",
      prop: "actions",
      slot: true
    }
  ],
  config: {
    title: "",
    saveBtnShow: true,
    wbjlShow: false,
    jcrzShow: false
  }
});
//获取详情
function getmain(id) {
  if (id) {
    getApi({ id: id }, "/mosty-jcgl/car3inspectionInfo/getInfo").then((res) => {
      if (res) {
        data.fromObj = res;
      }
    });
    getApi(
      { id: id },
      "/mosty-jcgl/car3inspectionInfo/getCheckDetailList"
    ).then((res) => {
      if (res) {
        data.tableData = res;
      }
    });
  }
}
const router = useRouter();
//查看
const seeInfo = (row) => {
  editObj.editObj = row
  editObj.editObj.pifallid = row.pitfallinfoid
  comprehensiveShow.value = true
};
const black = () => {
  if (data.config.saveBtnShow) {
    proxy.$modal.confirm('离开会丢失页面中修改的内容，确认离开吗？')
      .then(() => {
        // 关闭上一次的表单校验
        ruleFormRef.value.clearValidate();
        emit("changePage", "Main");
      })
      .catch(() => {
        // catch error
      })
  } else {
    // 关闭上一次的表单校验
    ruleFormRef.value.clearValidate();
    emit("changePage", "Main");
  }

};
function changePage(e) {
  comprehensiveShow.value = false
}
onMounted(() => {
  if (props.editObj) {
    data.config = JSON.parse(JSON.stringify(props.editObj));
  }
  getmain(props.editObj.id);
  activeNames.value = ["1"];
});

</script>

<style lang="scss" scoped>
.eltab4 {
  height: 40vh;
}

::-webkit-scrollbar {
  width: 0 !important;
  height: 0;
}

.box_cont {
  height: calc(100vh - 15vh);
  overflow-y: scroll;
}

.fromBox {
  margin: 20px auto;
  padding: 15px 15px 0 15px;
}



.el-form {
  width: 100%;
  align-items: center;
  display: flex;
  justify-content: start;
  flex-wrap: wrap;
}

.el-form-item {
  display: flex;
  margin-right: 20px;
}



.bigBox {
  display: block !important;
  box-sizing: border-box;
}



::v-deep .el-upload-list {
  width: 50%;
}
</style>