<template>
  <div class="bigBox">
    <MOSTY.FromPage :title="pageTitle" @closeDialog="black">
      <template #content>
        <MOSTY.Assort :title="'基本信息'" />
        <div class="fromBox">
          <el-form ref="ruleFormRefs" :model="FromObj" :rules="rules" :disabled="!saveBtn" class="mosty-from-wrap"
            label-width="140px" :inline="true">
            <el-form-item label="单位名称:" prop="orgname">
              <el-input v-model="FromObj.orgname" readonly style="width: 337px"></el-input>
            </el-form-item>

            <el-form-item label="工具类型:" prop="type">
              <el-select v-model="FromObj.type" placeholder="请选择工具类型" style="width: 337px">
                <el-option v-for="item in props.obj.zdlist.D_BZ_DLGJ_TYPE" :key="item.value" :label="item.label"
                  :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="工器具名称:" prop="name">
              <el-input v-model="FromObj.name" style="width: 337px"></el-input>
            </el-form-item>
            <el-form-item label="数量:" prop="count">
              <el-input v-model.number="FromObj.count" type="number" style="width: 337px"></el-input>
            </el-form-item>
            <el-form-item label="所属场所:" prop="sitename">
              <el-select v-model="FromObj.sitename" @change="cahngecsmc" clearable style="width: 337px"
                placeholder="请选择">
                <el-option v-for="item in csmclist" :key="item" :label="item.placename" :value="item.id" />
              </el-select>
            </el-form-item>
            <el-form-item label="所属建筑物:" prop="buildingname">
              <el-select v-model="FromObj.buildingname" @change="cahngejzwmc" clearable style="width: 337px"
                placeholder="请选择">
                <el-option v-for="item in jzwlist" :key="item" :label="item.buildingname" :value="item.id" />
              </el-select>
            </el-form-item>
            <el-form-item label="所属楼层:" prop="floorname" v-if="FromObj.publicarea != '1'">
              <el-select v-model="FromObj.floorname" @change="cahngelcmc" clearable style="width: 337px"
                placeholder="请选择">
                <el-option v-for="item in lclist" :key="item" :label="item.floorname" :value="item.id" />
              </el-select>
            </el-form-item>
            <el-form-item label="所属部位:" prop="partname">
              <el-select v-model="FromObj.partname" @change="cahngebw" clearable style="width: 337px" placeholder="请选择">
                <el-option v-for="item in bwlist" :key="item" :label="item.partname ? item.partname : item.qtmc"
                  :value="item.id" />
              </el-select>
            </el-form-item>
            <el-form-item label="部门:" prop="deptname" style="display: flex;">
              <el-input v-model="FromObj.deptname" readonly clearable style="width: 337px">
                <template #append>
                  <el-button class='cursor' @click="ChooesDdld('01')">选择</el-button></template>
              </el-input>
            </el-form-item>
            <el-form-item label="具体位置:" prop="location">
              <el-input v-model="FromObj.location" style="width: 337px"></el-input>
            </el-form-item>
            <el-form-item label="上次检测日期:" prop="scjcrq">
              <el-date-picker v-model="FromObj.scjcrq" type="date" value-format="YYYY-MM-DD" style="width: 337px"
                placeholder="请选择上次检测日期" :disabled-date="disablednowDate1" />
            </el-form-item>
          </el-form>
        </div>
      </template>
      <template #footer>

        <el-button v-if="saveBtn" type="primary" v-loading='loadingshow' @click="submit(ruleFormRefs)">
          <el-icon>
            <DocumentChecked />
          </el-icon>保存
        </el-button>
        <el-button @click="black">
          <el-icon>
            <DocumentDelete />
          </el-icon>关闭
        </el-button>
      </template>
      <template #dwbox>
        <!-- 选择部门 -->
        <Choosebm v-if='showDept' :showDdld="showDept" @closezzjg="closezzjg" @listdata="getSonValue" :zzlx="zzlx"
          :searchType="'01'" :deptId='FromObj.orgid' :Isstrictly="Isstrictly" />
      </template>
    </MOSTY.FromPage>


  </div>
</template>

<script setup>
import {
  reactive,
  ref,
  onMounted,
  getCurrentInstance
} from "vue";
import * as MOSTY from "@/components/MyComponents/index";
import { ElMessage } from "element-plus";
import * as rule from "@/utils/rules.js";
import { postApi, getApi } from "@/api/tobAcco_api.js";
import Choosebm from "@/components/MyComponents/ChooseDept/index.vue";
import { getItem } from "@/utils/storage";
import { disablednowDate1 } from "@/utils/tools.js";
const { proxy } = getCurrentInstance();
const props = defineProps({
  obj: {
    type: Object,
    default: () => { }
  }
});
const rules = reactive({
  orgname: [{ required: true, message: "单位名称不能为空", trigger: "blur" }],
  deptname: [{ required: true, message: "部门不能为空", trigger: "blur" }],
  name: [{ required: true, message: "工器具名称不能为空", trigger: "blur" }],
  sitename: [{ required: true, message: "所属场所不能为空", trigger: "blur" }],
  buildingname: [{ required: true, message: "所属建筑物不能为空", trigger: "blur" }],
  floorname: [{ required: true, message: "所属楼层不能为空", trigger: "blur" }],
  partname: [{ required: true, message: "所属部位不能为空", trigger: "blur" }],
  model: [{ required: true, message: "型号不能为空", trigger: "blur" }],
  type: [{ required: true, message: "工具类型不能为空", trigger: "blur" }],
  ...rule.intRule({ validator: true, require: true }, "count"),
  location: [{ required: true, message: "具体位置不能为空", trigger: "blur" }],
  scjcrq: [{ required: true, message: "上次检测日期不能为空", trigger: "blur" }]
});

const saveBtn = ref(false);
const loadingshow = ref(false);
const emit = defineEmits("onChange");
const ruleFormRefs = ref();
const csmclist = ref([])
const jzwlist = ref([])
const lclist = ref([])
const bwlist = ref([])
const FromObj = ref({
});
const Isstrictly = ref(false)
const showDept = ref(false)
const pageTitle = ref("");
onMounted(() => {
  pageTitle.value = props.obj.title;
  saveBtn.value = props.obj.saveBtn;
  FromObj.value.labourId = props.obj.labourId;
  FromObj.value.orgname = getItem("deptId").ssdwmc
  FromObj.value.orgid = getItem("deptId").ssdwid
  getcsData()
  if (props.obj.id) {
    gtdataxq(props.obj.id)
  }
});
//获取详情
function gtdataxq(id) {
  getApi({ id },
    `/mosty-jcgl/labourElectricity/getInfo`
  ).then((res) => {
    FromObj.value = res
    getjzwxq(res.buildingid)//根据建筑物详情来判断是否有楼层
    getjzwlist(res.siteid)
    getbwdata(res.floorid)
  });
}
function ChooesDdld() {
  showDept.value = true

}
function closezzjg(val) {
  showDept.value = false
}
function getSonValue(val) {
  FromObj.value.deptname = val.orgName
  FromObj.value.deptid = val.id
  showDept.value = false
}
// 保存
const submit = async (formEl) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      loadingshow.value = true
      if (FromObj.value.id) {
        postApi(
          FromObj.value,
          "/mosty-jcgl/labourElectricity/update"
        ).then((res) => {
          ElMessage.success("修改成功");
          emit("onChange", false);
          loadingshow.value = false
        });
      } else {
        postApi(
          FromObj.value,
          "/mosty-jcgl/labourElectricity/add"
        ).then((res) => {
          ElMessage.success("新增成功");
          emit("onChange", false);
          loadingshow.value = false
        });
      }
    }
  });
};

const black = () => {
  if (saveBtn.value) {
    proxy.$modal.confirm('离开会丢失页面中修改的内容，确认离开吗？')
      .then(() => {
        // 关闭上一次的表单校验
        ruleFormRefs.value.clearValidate();
        emit("onChange", false);
      })
      .catch(() => {
        // catch error
      })
  } else {
    // 关闭上一次的表单校验
    ruleFormRefs.value.clearValidate();
    emit("onChange", false);
  }

};
//根据操作人 查询 场所
function getcsData() {
  getApi({}, "/mosty-jcgl/site/getSiteListByUser").then(res => {
    csmclist.value = res
  })
}
//	根据placeid，查询建筑物
function getjzwlist(placeid) {
  getApi({ placeid }, "/mosty-jcgl/building/queryBuildingByPlaceid").then(res => {
    jzwlist.value = res ? res : []
  })
}
//根据建筑物查询楼层
function getlcdata(id) {
  getApi({ id }, "/mosty-jcgl/floor/queryFloorByBuildId").then(res => {
    lclist.value = res ? res : []
  })
}
// (新)根据楼层id查询部位
function getbwdata(id) {
  getApi({ id }, "/mosty-jcgl/part/getListByFloorid").then(res => {
    bwlist.value = res ? res : []
  })
}
//(新)根据建筑物id查询部位
function getbw2data(id) {
  getApi({ id }, "/mosty-jcgl/part/getListByBuildid").then(res => {
    bwlist.value = res ? res : []
  })
}
//获取建筑物详情
function getjzwxq(id) {
  getApi({}, `/mosty-jcgl/building/getBuildingById/${id}`).then(res => {
    FromObj.value.publicarea = res.publicarea ? res.publicarea : "2"
    if (FromObj.value.publicarea == "1") {
      getbw2data(id)
    } else {
      getlcdata(id)
    }
  })
}
//获取场所选择
const cahngecsmc = val => {
  csmclist.value.forEach(item => {
    if (item.id == val) {
      FromObj.value.siteid = item.id
      FromObj.value.sitename = item.placename
      FromObj.value.buildingname = ""
      FromObj.value.buildingid = ""
      FromObj.value.publicarea = ""
      FromObj.value.floorname = ""
      FromObj.value.floorid = ""
      FromObj.value.partname = ""
      FromObj.value.partid = ""
      FromObj.value.deptname = ""
      FromObj.value.postusername = ""
      FromObj.value.deptid = ""
      getjzwlist(item.id)
    }
  })
}
//获取建筑物名称
function cahngejzwmc(val) {
  jzwlist.value.forEach(item => {
    if (item.id == val) {
      FromObj.value.buildingid = item.id
      FromObj.value.buildingname = item.buildingname
      FromObj.value.publicarea = item.publicarea
      FromObj.value.floorname = ""
      FromObj.value.floorid = ""
      FromObj.value.partname = ""
      FromObj.value.partid = ""
      FromObj.value.deptname = ""
      FromObj.value.postusername = ""
      FromObj.value.deptid = ""
      if (item.publicarea == "1") {
        getbw2data(item.id)
      } else {
        getlcdata(item.id)
      }
    }
  })
}
//获取楼层名称
function cahngelcmc(val) {
  lclist.value.forEach(item => {
    if (item.id == val) {
      FromObj.value.floorid = item.id
      FromObj.value.floorname = item.floorname
      FromObj.value.partname = ""
      FromObj.value.partid = ""
      FromObj.value.deptname = ""
      FromObj.value.postusername = ""
      FromObj.value.deptid = ""
      getbwdata(item.id)
    }
  })
}
//获取当前部位
const cahngebw = val => {
  bwlist.value.forEach(item => {
    if (item.id == val) {
      FromObj.value.partid = item.id
      FromObj.value.partname = item.partname ? item.partname : item.qtmc
      FromObj.value.deptname = item.deptname
      FromObj.value.postusername = item.postusername
      FromObj.value.deptid = item.deptid
    }
  })
}

</script>

<style lang="scss" scoped>
::-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;
  border-radius: 1px;
}

.ld_box {
  display: flex;
  margin-right: 20px;
}

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

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

.addbtn {
  margin-bottom: 10px;
}

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

.tabbox {
  max-height: 300px;
  overflow-y: scroll;

  .input {
    width: 100%;
    height: 100%;
  }
}

::v-deep .el-table .cell {
  padding: 0 0 !important;
}

::v-deep .el-table--border .el-table__cell .cell {
  padding-left: 0px !important;

  >input {
    width: 100%;
    height: 33px;
  }
}

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