<template>
  <div>
    <div class="bigBox" :style="{ height: bigHeight }">
      <!-- 组织机构信息 -->
      <div class="left" :style="{ width: lfBoxWid }">
        <div class="title">
          <div style="display: flex; align-items: center">
            <div style="padding-top: 5px; margin-right: 5px">
              <el-icon style="color: var(--el-color-primary) !important">
                <List />
              </el-icon>
            </div>
            <span class="zzjgxx" v-if="iconChange">组织机构信息</span>
          </div>
          <el-icon @click="handleCollapse" v-show="iconChange">
            <DArrowLeft />
          </el-icon>
          <el-icon @click="handleCollapse" v-show="!iconChange">
            <DArrowRight />
          </el-icon>
        </div>
        <!-- <div :key="1" class="twdtxg" v-if="!iconChange">
          <span style="color: var(--el-color-primary)" :style="{ opacity: opacity }">
            <el-icon style="color: var(--el-color-primary) !important;font-size: 30px;">
              <Pointer />
            </el-icon>
          </span>
        </div> -->
        <div class="treeBox" :style="{ height: treeHeight }">
          <tree width="100%" placeholder="管理部门ID" clearable filterable @getdeptData="getdeptId" />
        </div>
      </div>

      <!--  -->
      <div class="right" :style="{ width: rgBoxWid }">

        <div class="headBox" style="justify-content: space-between">
          <div class="title">
            子设备设施管理(<span style="color: red">{{
              rowid.equipmentname
            }}</span>),部位名称：{{ rowid.partname }}
          </div>
          <div class="btnBox" style="display: flex">
            <el-button type="primary" @click="addUserHander">
              <el-icon>
                <Search />
              </el-icon>
              <span>查询</span>
            </el-button>
            <el-button type="primary" @click="addInfo" v-if="orgCode == orgid">
              <el-icon>
                <CirclePlus />
              </el-icon>
              <span>新增</span>
            </el-button>
            <el-button type="primary" @click="Close">
              <el-icon>
                <Back />
              </el-icon>
              <span>返回</span>
            </el-button>
          </div>
        </div>

        <!-- 表格 -->
        <div class="tabBox">
          <div>
            <el-button type="primary" @click="addtable">
              <span>删除</span>
            </el-button>
          </div>
          <el-table ref="multipleTableRef" stripe v-loading="tableloading" :data="tableData" style="width: 100%"
            @selection-change="handleSelectionChange" border>
            <el-table-column label="子设备名称" show-overflow-tooltip property="name"></el-table-column>
            <el-table-column label="部位名称" show-overflow-tooltip prop="partname">
            </el-table-column>
            <el-table-column label="安装位置" show-overflow-tooltip property="installationsite"></el-table-column>
            <el-table-column label="品牌" show-overflow-tooltip prop="brand"></el-table-column>
            <el-table-column label="型号" show-overflow-tooltip property="childtype"></el-table-column>
            <el-table-column label="生产厂家" show-overflow-tooltip property="manufacturer"></el-table-column>
            <el-table-column label="安装或出厂日期" show-overflow-tooltip property="manufacturedate"></el-table-column>
            <el-table-column label="状态" show-overflow-tooltip property="lrr">
              <template #default="{ row }">
                <dict-tag v-if="row.state" :options="D_BZ_SBSSZT" :value="row.state" :tag="false" />
                <span v-else>无</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="200">
              <template #default="{ row }">
                <span class="operedit" @click="editInfo(row)"><el-icon>
                    <EditPen />
                  </el-icon>修改</span>
                <el-popconfirm confirm-button-text="是" cancel-button-text="否" icon-color="red" title="确定要删除?"
                  @confirm="delInfo(row)">
                  <template #reference>
                    <span class="operdel" size="small"><el-icon>
                        <Delete />
                      </el-icon>删除</span>
                  </template>
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
          <div class="fenye">
            <el-pagination class="pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange"
              :current-page="listQuery.pageCurrent" :page-sizes="[2, 5, 10, 20]" :page-size="listQuery.pageSize"
              layout="total, prev, pager, next, sizes, jumper" :total="total"></el-pagination>
          </div>
        </div>
      </div>
      <!-- 新增 -->
      <el-dialog v-model="dialogVisible" :title="data.title" width="50%" :before-close="CloseEvent">
        <div>
          <el-form class="mosty-from-wrap" ref="ruleFormRef" label-width="130px" :model="data.fromObj" :inline="true"
            :rules="rules" :disabled="!data.savebtn">
            <el-form-item label="子设备名称:" prop="name">
              <el-input v-model="data.fromObj.name" clearable style="width: 250px" />
            </el-form-item>
            <el-form-item label="部位名称:" prop="partid">
              <el-select v-model="data.fromObj.partid" style="width: 250px" @change="cahngebw" clearable disabled
                placeholder="请选择部位名称:">
                <el-option v-for="item in bwlist" :key="item" :label="item.allname" :value="item.id" />
              </el-select>
            </el-form-item>
            <el-form-item label="安装位置:">
              <el-input v-model="data.fromObj.installationsite" clearable style="width: 250px" />
            </el-form-item>

            <el-form-item label="安装或出厂日期:">
              <el-date-picker v-model="data.fromObj.manufacturedate" style="width: 250px" type="date"
                value-format="YYYY-MM-DD" />
            </el-form-item>
            <el-form-item label="生产厂家:">
              <el-input v-model="data.fromObj.manufacturer" clearable style="width: 250px" />
            </el-form-item>
            <el-form-item label="品牌:">
              <el-input v-model="data.fromObj.brand" clearable style="width: 250px" />
            </el-form-item>
            <el-form-item label="型号:">
              <el-input v-model="data.fromObj.childtype" clearable style="width: 250px" />
            </el-form-item>
            <el-form-item label="状态:">
              <el-select v-model="data.fromObj.state" style="width: 250px" clearable>
                <el-option v-for="item in D_BZ_SBSSZT" :key="item" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
            <el-form-item label="备注:">
              <el-input v-model="data.fromObj.bz" clearable style="width: 600px" />
            </el-form-item>
            <el-form-item label="子设备图片:" v-if="!data.seeimg">
              <MOSTY.Upload v-model="data.fromObj.file" :limit="5" :delrow="delrow" :isEdit="fileEdit"
                :ShowfileList="true" @filehandleChange="changeFile" :isImg="true" :disabled='data.seeimg' />
            </el-form-item>
            <div class="img_fix" v-if="data.seeimg">
              <el-form-item label="子设备图片:">
                <el-image v-if='data.img' style="width: 150px; height: 150px" v-for="(item, index) in data.img"
                  :key="index" :src="item" fit="scale-down" :preview-src-list="data.img" />
                <img v-else :src="getImgUrl('img/emptyImg.jpg')" alt="" style="width: 150px; height: 150px;width:auto;">
              </el-form-item>
            </div>
          </el-form>
        </div>
        <template #footer>
          <span class="dialog-footer">
            <el-button v-if="data.savebtn" @click="saveinfo(ruleFormRef)">保存</el-button>
            <el-button @click="CloseEvent">取消</el-button>
          </span>
        </template>
      </el-dialog>
      <!-- 查询 -->
      <el-dialog v-model="searchshow" :title="searchtitle" width="50%" :before-close="handleClose">
        <div>
          <el-form class="mosty-from-wrap" ref="elform" label-width="130px" :model="listQuery" :inline="true"
            :rules="rules">
            <el-form-item label="子设备名称:">
              <el-input v-model="listQuery.name" clearable style="width: 250px" />
            </el-form-item>
            <el-form-item label="安装位置:">
              <el-input v-model="listQuery.installationsite" clearable style="width: 250px" />
            </el-form-item>
            <el-form-item label="生产厂家:">
              <el-input v-model="listQuery.manufacturer" clearable style="width: 250px" />
            </el-form-item>
            <el-form-item label="品牌:">
              <el-input v-model="listQuery.brand" clearable style="width: 250px" />
            </el-form-item>
            <el-form-item label="有效日期:">
              <el-date-picker v-model="listQuery.usetime" style="width: 250px" type="date" value-format="YYYY-MM-DD" />
            </el-form-item>
          </el-form>
        </div>
        <template #footer>
          <span class="dialog-footer">
            <el-button type="primary" :loading="loading" @click="handlesearch">
              <el-icon>
                <DocumentChecked />
              </el-icon>
              <span>查询</span>
            </el-button>
            <el-button @click="searchshow = false" type="primary">
              <el-icon>
                <DocumentDelete />
              </el-icon>
              <span>关闭</span>
            </el-button>
          </span>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script setup>
// 引入
import { getImgUrl } from "@/utils/tools.js"
import SvgIcon from "@/components/SvgIcon/index.vue";
import { reactive, onMounted, defineEmits, ref, getCurrentInstance } from "vue";
import tree from "@/views/yxkzgl/stgl/commonds/tree.vue";
import Addstsbss from "@/views/yxkzgl/stgl/commonds/addstsbss.vue";
import { getApi, deleteApi, putApi, postApi } from "@/api/tobAcco_api.js";
import * as MOSTY from "@/components/MyComponents/index";
import { getItem } from "@/utils/storage";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
const router = useRouter();
const { proxy } = getCurrentInstance();
// 数据
const { D_BZ_SBSSZT } = proxy.$dict("D_BZ_SBSSZT");
const data = reactive({
  fromObj: {},
  deptname: "",
  title: "",
  savebtn: true,
  seeimg: true,
  img: []
});
const iconChange = ref(true);
const lfBoxWid = ref("300px");
const rgBoxWid = ref("calc(100% - 300px)");
const bigHeight = ref(); //整个高度
const comprehensiveShow = ref(false);
const dialogVisible = ref(false);
const emits = defineEmits(["close"]);
const title = ref("");
const props = defineProps({
  rowid: {
    type: Object,
    default: () => { }
  }
});
const tableData = ref([]);
const listQuery = reactive({
  pageCurrent: 1,
  pageSize: 20
});
const searchtitile = ref("");
const searchshow = ref(false);
const tableloading = ref(false);
const delrow = ref({}); //删除文件列表
const total = ref(0);
const addDiaShow = ref(false);
const ruleFormRef = ref();
const orgid = ref("");
const orgCode = ref();
const bwlist = ref([]);
const rules = reactive({
  name: [{ required: true, message: "子设备名称不能为空", trigger: "blur" }],
  partid: [{ required: true, message: "部位不能为空", trigger: "blur" }]
});
const opacity = ref(1);
const blink = () => {
  opacity.value = opacity.value === 1 ? 0 : 1;
};
onMounted(() => {

  bigHeightFn();
  getbwdata();
  // const intervalId = setInterval(blink, 100); // 每秒闪烁一次
  // setTimeout(() => {
  //   clearInterval(intervalId)
  //   opacity.value = 0
  // }, 3000); // 3秒后执行
});
const CloseEvent = () => {
  if (data.savebtn) {
    proxy.$modal.confirm('离开会丢失页面中修改的内容，确认离开吗？')
      .then(() => {
        ruleFormRef.value.clearValidate();
        dialogVisible.value = false;
      })
      .catch(() => {
        // catch error
      })
  } else {
    ruleFormRef.value.clearValidate();
    dialogVisible.value = false;
  }

};
const addUserHander = () => {
  searchtitile.value = "查询";
  searchshow.value = true;
  listQuery.orgid = orgid.value;
  listQuery.pageCurrent = 1;
  listQuery.pageSize = 20;
};
const handlesearch = () => {
  getListData();
  searchshow.value = false;
};
//获取部门数据
const getdeptId = (val) => {
  orgid.value = val.id;
  listQuery.orgid = val.id;
  listQuery.pageCurrent = 1;
  orgCode.value = getItem("deptId").ssdwid;
  getListData();
};
const bigHeightFn = () => {
  bigHeight.value = window.innerHeight - 147 + "px";
};
const handleCollapse = () => {
  iconChange.value = !iconChange.value;
  if (iconChange.value) {
    lfBoxWid.value = "300px";
    rgBoxWid.value = "calc(100% - 300px)";
  } else {
    lfBoxWid.value = "40px";
    rgBoxWid.value = "calc(100% - 40px)";
  }
};
//根据操作人 获取部位信息
function getbwdata() {
  getApi(
    { partId: props.rowid.siteid },
    "/mosty-jcgl/part/getpartListByUser"
  ).then((res) => {
    bwlist.value = res;
  });
}
//新增
function addtable(val) {
  dialogVisible.value = true;
}
const Close = () => {
  emits("close");
};
// 获取表格数据
const getListData = () => {
  tableloading.value = true;
  getApi({ sid: props.rowid.id }, `/mosty-jcgl/equipmentChild/queryEquipmentChildBySid`).then((res) => {
    if (res) {
      tableloading.value = false;
      tableData.value = res;
      total.value = res.total;
    } else {
      tableData.value = [];
      tableloading.value = false;
    }
  });
};
const fromObj = ref();
const getmain = (id) => {
  if (id) {
    getApi({}, "/mosty-jcgl/equipmentChild/getEquipmentChildById/" + id).then(
      (res) => {
        if (res) {
          data.fromObj = res;
          data.fromObj.partid = props.rowid.partid;
          data.fromObj.partname = props.rowid.partname;
          if (data.fromObj.file) {
            data.fromObj.file.forEach((item) => {
              getApi({}, `/mosty-base/minio/file/download/${item}`).then(
                (res) => {
                  if (res) {
                    data.img.push(res.url);
                  }
                }
              );
            });
          }
        }
      }
    );
  }
};
//新增
function addInfo() {
  data.fromObj = {};
  data.fromObj.partid = props.rowid.partid;
  dialogVisible.value = true;
  data.savebtn = true;
  data.seeimg = false;
  data.title = "子设备设施新增";
}
//详情
function handleSee(row) {
  dialogVisible.value = true;
  data.title = "子设备设施详情";
  data.savebtn = false;
  data.seeimg = true;
  getmain(row.id);
}
//修改
function editInfo(row) {
  dialogVisible.value = true;
  data.savebtn = true;
  data.seeimg = false;
  data.title = "子设备设施修改";
  getmain(row.id);
}
//删除
function delInfo(row) {
  postApi(
    {},
    "/mosty-jcgl/equipmentChild/deleteEquipmentChildOne/" + row.id
  ).then((res) => {
    ElMessage.success("删除成功");
    getListData();
  });
}
// 关闭
const handleClose = () => {
  dialogVisible.value = false;
};
//保存
const saveinfo = async (ruleFormRef) => {
  if (!ruleFormRef) return;
  await ruleFormRef.validate((valid) => {
    if (valid) {
      data.fromObj.sequipmentid = props.rowid.id;
      data.fromObj.file = data.fromObj.file ? data.fromObj.file.toString() : "";
      if (data.fromObj) {
        if (data.title == "子设备设施新增") {
          postApi(
            data.fromObj,
            "/mosty-jcgl/equipmentChild/addEquipmentChildOne"
          )
            .then((res) => {
              ElMessage.success("新增成功");
              dialogVisible.value = false;
              getListData();
            })
        } else if (data.title == "子设备设施修改") {
          postApi(
            data.fromObj,
            "/mosty-jcgl/equipmentChild/updateEquipmentChildOne"
          )
            .then((res) => {
              ElMessage.success("修改成功");
              dialogVisible.value = false;
              getListData();
            })
        }
      }
    }
  });
};
//分页
const handleSizeChange = (currentSize) => {
  listQuery.pageSize = currentSize;
  getListData();
};
const handleCurrentChange = (currentPage) => {
  listQuery.pageCurrent = currentPage;
  getListData();
};


</script>

<style lang="scss" scoped>
.twdtxg {
  width: 100%;
  display: flex;
  align-items: center;
  text-align: center;
  z-index: 9999;
}

.from_box {
  display: flex;
  justify-content: space-between;

  .from_left {
    width: 25%;
  }
}

.el-form {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

.bigBox {
  display: flex;

  .title {
    height: 60px;
    line-height: 60px;
    font-size: 18px;
    color: #0f3916;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .el-icon {
      cursor: pointer;
    }
  }

  .left {
    width: 300px;
    // height: 1030px;
    background: #ffffff;
    box-shadow: 0px 2px 10px 0px rgba(107, 107, 107, 0.1);
    border-radius: 0px 0px 0px 0px;
    opacity: 1;

    .treeBox {
      overflow: auto;
    }
  }

  .right {
    padding: 0 10px;
    margin: 0px 14px;
    background: #fff;


    .headBox {
      display: flex;
      align-items: center;
    }

    .btnBox {
      .el-select {
        width: 150px;
      }

      .header-right {
        display: flex;
        align-items: center;
      }

      .btnBox {
        display: flex;
        width: 500px;
        justify-content: space-between;
        align-items: center;
      }
    }
  }
}

.tabBox {
  height: calc(100% - 70px);
  border-left: 0 !important;

  .el-table {
    height: 91%;
  }

  .fenye {
    top: 95%;
  }
}
</style>