<template>
  <div>
    <MOSTY.FromPage :title="props.formData.title" @closeDialog="closeDialog">
      <template #content>
        <div>
          <MOSTY.Assort :title="'基础信息'" />
        </div>
        <el-form :model="props.formData" ref="ruleFormRef" label-position="right" :rules="rules" label-width="140px"
          :disabled='!props.formData.saveBtnShow'>
          <el-form-item label="所属场所:" prop="sitename">
            <el-input v-model="props.formData.sitename" style="width: 337px" disabled />
          </el-form-item>
          <el-form-item label="所属建筑物:" prop="buildingname">
            <el-input v-model="props.formData.buildingname" style="width: 337px" disabled />
          </el-form-item>
          <el-form-item label="楼层名称:" prop="floorname">
            <el-input v-model="props.formData.floorname" style="width: 337px" />
          </el-form-item>
          <el-form-item label="楼层数:" prop="floornumber">
            <el-input v-model.number="props.formData.floornumber" @blur="changenumber(props.formData.floornumber)"
              type="number" style="width: 337px" />
          </el-form-item>
          <el-form-item label="楼层面积:" prop="area">
            <el-input v-model.number="props.formData.area" @blur="props.formData.area = JEblurFn(props.formData.area)"
              type="number" style="width: 337px">
              <template #append>平方米</template>
            </el-input>
          </el-form-item>
          <el-form-item label="备注:" style="width:100%">
            <el-input v-model="props.formData.bz" autosize type="textarea" style="width:1291px" />
          </el-form-item>
          <el-form-item label="楼层信息图片:">
            <div style='display:flex;'>
              <MOSTY.Upload :width="'100%'" :limit="5" :nopicer="false" :isImg="true" :ShowfileList="false"
                v-model="props.formData.venuefile" :nameshow='true' :gsgfList="['jpg', 'png']"
                :disabled='!props.formData.saveBtnShow' @filehandleChange="changeFiles">
              </MOSTY.Upload>
            </div>
          </el-form-item>
        </el-form>
        <div v-if='props.formData.id'>
          <div>
            <MOSTY.Assort :title="'关联信息(固定信息、动态信息)'" />
            <div>
              <div class='table-lable'>
                <span>固定信息</span>
                <img :src="getImgUrl('img/icon-jt.png')" style='cursor:pointer' @click='isShowgd = !isShowgd' />
              </div>
              <div v-show='isShowgd'>
                <MOSTY.TabList :tablist='tablist' :obj='props.formData' :type='"lc"' @handleChange="changelicolor"
                  @resetChange='resetChange' />
              </div>
            </div>
          </div>
          <div>
            <div class='table-lable'>
              <span>动态信息</span>
              <img :src="getImgUrl('img/icon-jt.png')" style='cursor:pointer' @click='isShowdt = !isShowdt' />
            </div>
            <div v-show='isShowdt'>
              <MOSTY.TabList :tablist='tablist2' :type='"lc"' :obj='props.formData' @handleChange="changelicolor2" />
            </div>
          </div>
        </div>
      </template>
      <template #footer>
        <el-button type="primary" @click="saveData(ruleFormRef)" v-loading="saveloading"
          v-if='props.formData.saveBtnShow'> <el-icon>
            <DocumentChecked />
          </el-icon>保存 </el-button>
        <el-button @click="closeDialog()"> <el-icon>
            <DocumentDelete />
          </el-icon>关闭</el-button>
      </template>
    </MOSTY.FromPage>

  </div>
</template>

<script setup>
import { getImgUrl } from "@/utils/tools.js"
import { ref, getCurrentInstance, defineAsyncComponent, onMounted } from "vue";
import * as MOSTY from "@/components/MyComponents/index";
import { ElMessage } from "element-plus";
import { JEblurFn } from "@/utils/auth.js";
import * as rule from "@/utils/rules.js";
import { postApi, getApi } from "@/api/tobAcco_api.js";
const { proxy } = getCurrentInstance();
const rules = {
  sitename: [{ required: true, message: "请输入场所名称", trigger: "blur" }],
  buildingname: [{ required: true, message: "请输入建筑物名称", trigger: "blur" }],
  floorname: [{ required: true, message: "请输入楼层名称", trigger: "blur" }],
  floornumber: [{ required: true, message: "请输入楼层数", trigger: "blur" }],
  sfds: [{ required: true, message: "请选择是否处于地上", trigger: "blur" }],
  ...rule.znumberRule({ validator: true, require: true }, "area"),
};
const isShowdt = ref(true)
const ruleFormRef = ref();
const isShowgd = ref(true)
const tablist = ref([
  // { title: '重点部位', num: 0, icon: 'sbss2', actives: true, components: defineAsyncComponent(() => import("@/components/MyComponents/TabList/Focalpoint.vue")) },
  // { title: '非重点部位', num: 0, icon: 'sbss2', actives: false, components: defineAsyncComponent(() => import("@/components/MyComponents/TabList/Focalpoint.vue")) },
  // { title: '安全设备设施', num: 0, icon: 'sbss2', actives: false, components: defineAsyncComponent(() => import("@/components/MyComponents/TabList/Security.vue")) },
  // { title: '安全器材', num: 0, icon: 'sbss2', actives: false, components: defineAsyncComponent(() => import("@/components/MyComponents/TabList/Apparatus.vue")) },
  // { title: '安全标识', num: 0, icon: 'sbss2', actives: false, components: defineAsyncComponent(() => import("@/components/MyComponents/TabList/Safetysigns.vue")) },
  // { title: '生产设备设施', num: 0, icon: 'sbss2', actives: false, components: defineAsyncComponent(() => import("@/components/MyComponents/TabList/Produce.vue")) },
  // { title: '变配电设备设施', num: 0, icon: 'sbss2', actives: false, components: defineAsyncComponent(() => import("@/components/MyComponents/TabList/Distributing.vue")) },
  // { title: '特种设备', num: 0, icon: 'sbss2', actives: false, components: defineAsyncComponent(() => import("@/components/MyComponents/TabList/Equipment.vue")) },
])
const tablist2 = ref([
  // { title: '风险清单', num: 0, icon: 'sbss2', actives: true, components: defineAsyncComponent(() => import("@/components/MyComponents/TabList/Risklist.vue")) },
  // { title: '隐患清单', num: 0, icon: 'sbss2', actives: false, components: defineAsyncComponent(() => import("@/components/MyComponents/TabList/Pitfall.vue")) }
])

const emits = defineEmits(["saveSuccess"]);
// 接收子组件传来的
const props = defineProps({
  formData: {
    type: Object,
    default: {}
  }
});
const saveloading = ref(false)
onMounted(() => {
  props.formData.area = props.formData.area ? Number(props.formData.area).toFixed(2) : null
  getaqbscount()
  getbwcount()
  getscsbsscount()
  getbpdcount()
  getaqqccount()
  gettzsbcount()
  getaqsbsscount()
  getCount()
})
function changenumber(val) {
  if (props.formData.sfds == '2') {
    //处于地下，用负数
    props.formData.floornumber = -Math.abs(val)
  } if (props.formData.sfds == '1') {
    props.formData.floornumber = Math.abs(val)
  }
}
//安全标识总数
function getaqbscount() {
  postApi({ floorid: props.formData.id, type: '1' }, '/mosty-jcgl/sitelogo/countAllSitelogo').then(res => {
    tablist.value[4].num = res ? res : 0
  })
}
//安全设备设施总数
function getaqsbsscount() {
  postApi({ floorid: props.formData.id, type: '1' }, '/mosty-jcgl/sbglAqsbss/countAll').then(res => {
    tablist.value.forEach(item => {
      if (item.title == '安全设备设施') {
        item.num = res ? res : 0
      }
    })
  })

}
//生产设备设施总数
function getscsbsscount() {
  postApi({ floorid: props.formData.id, type: '1' }, '/mosty-jcgl/sbglScsbss/countAll').then(res => {
    tablist.value.forEach(item => {
      if (item.title == '生产设备设施') {
        item.num = res ? res : 0
      }
    })
  })
}
//安全器材总数
function getaqqccount() {
  postApi({ floorid: props.formData.id, type: '1' }, '/mosty-jcgl/sbglAqqc/countAll').then(res => {
    tablist.value.forEach(item => {
      if (item.title == '安全器材') {
        item.num = res ? res : 0
      }
    })
  })
}
//特种设备总数
function gettzsbcount() {
  postApi({ floorid: props.formData.id, type: '1' }, '/mosty-jcgl/sbglTzsb/countAll').then(res => {
    tablist.value.forEach(item => {
      if (item.title == '特种设备') {
        item.num = res ? res : 0
      }
    })
  })
}
//变配电设备设施总数
function getbpdcount() {
  postApi({ floorid: props.formData.id, type: '1' }, '/mosty-jcgl/sbglBpdsb/countAll').then(res => {
    tablist.value.forEach(item => {
      if (item.title == '变配电设备设施') {
        item.num = res ? res : 0
      }
    })
  })
}
//获取风险清单总数
function getCount() {
  getApi({ floorid: props.formData.id }, '/mosty-jcgl/dynamic/riskStatistics').then(res => {
    tablist2.value.forEach(item => {
      if (item.title == '风险清单') {
        item.num = res ? res.R + res.O + res.Y + res.B : 0
      }
    })
  })
}
//获取部位总数
function getbwcount() {
  getApi({ floorid: props.formData.id }, '/mosty-jcgl/part/getCountById').then(res => {
    if (res) {
      tablist.value.forEach(item => {
        if (item.title == '重点部位') {
          item.num = res.zdbw ? res.zdbw : 0
        } else if (item.title == '非重点部位') {
          item.num = res.fzdbw ? res.fzdbw : 0
        }

      })
    }

  })
}
// 关闭弹窗
function closeDialog() {
  if (props.formData.saveBtnShow) {
    proxy.$modal.confirm('离开会丢失页面中修改的内容，确认离开吗？')
      .then(() => {
        ruleFormRef.value.clearValidate()
        ruleFormRef.value.resetFields()
        emits("saveSuccess");

      })
      .catch(() => {
        // catch error
      })
  } else {
    ruleFormRef.value.clearValidate()
    ruleFormRef.value.resetFields()
    emits("saveSuccess");

  }

}

//分类点击事件
function changelicolor(val) {
  tablist.value.forEach(item => {
    if (item.title == val.title) {
      item.actives = true
    } else {
      item.actives = false
    }
  })
  if (val.title == '安全设备设施') {
    getaqsbsscount()
  } else if (val.title == '安全器材') {
    getaqqccount()
  } else if (val.title == '安全标识') {
    getaqbscount()
  } else if (val.title == '生产设备设施') {
    getscsbsscount()
  } else if (val.title == '变配电设备设施') {
    getbpdcount()
  } else if (val.title == '特种设备') {
    gettzsbcount()
  } else if (val.title == '重点部位' || val.title == '非重点部位') {
    getbwcount()
  }
}
//刷新接口
function resetChange(val) {
  if (val == 'bw') {
    getbwcount()
  } else if (val == 'aqbs') {
    getaqbscount()
  } else if (val == 'scsb') {
    getscsbsscount()
  } else if (val == 'bpdsb') {
    getbpdcount()
  } else if (val == 'aqqc') {
    getaqqccount()
  } else if (val == 'tzsb') {
    gettzsbcount()
  } else if (val == 'aqsbss') {
    getaqsbsscount()
  }
}
function changelicolor2(val) {
  tablist2.value.forEach(item => {
    if (item.title == val.title) {
      item.actives = true
    } else {
      item.actives = false
    }
  })
  if (val.title == '风险清单') {
    getCount()
  }
}
// 保存数据
const saveData = async (formEl) => {
  saveloading.value = true
  if (!formEl) return
  await formEl.validate((valid) => {
    if (valid) {
      props.formData.venuefile = props.formData.venuefile
        ? props.formData.venuefile.toString()
        : null;
      props.formData.area = props.formData.area ? parseFloat(props.formData.area) : null
      if (!props.formData.id) {
        postApi(props.formData, "/mosty-jcgl/floor/addSceneFloorOne").then((res) => {
          if (res) {
            ElMessage.success("新增成功");
            emits("saveSuccess", res);
          }
        }).finally(() => {
          saveloading.value = false
        })
      } else {
        postApi(props.formData, "/mosty-jcgl/floor/updateSceneFloorOne").then(() => {
          ElMessage.success("修改成功");
          emits("saveSuccess");
        }).finally(() => {
          saveloading.value = false
        })
      }


    } else {
      saveloading.value = false
      ElMessage.warning('请输入必填项！！！')
    }
  });
};

</script>

<style lang="scss" scoped>
::v-deep .el-dialog {
  --el-dialog-margin-top: 10vh !important;
}

::v-deep .el-form-item__content {
  margin-left: 0px !important;
}


.table-lable {
  margin: 10px;
  color: var(--el-color-primary)
}

::v-deep ::-webkit-scrollbar {
  display: none !important;
}

::v-deep .el-pagination {
  justify-content: center !important;
}

::v-deep .el-form {
  // width: 1580px;
  margin: auto;
  padding: 10px;
  flex-wrap: wrap;
  justify-content: start;
}
</style>
