<template>
  <div class="bigBox" :style="{ height: bigHeight }">

    <div class="right">
      <!-- 头部 -->
      <div class="titleBox">
        <div class="title">{{ props.title }}</div>
        <div class="btnBox">
          <el-button style="margin-left: 10px" type="primary" @click="handleSave(ruleFormRef)" v-if="props.saveBtnShow">
            <el-icon>
              <Search />
            </el-icon>
            <span>保存</span>
          </el-button>
          <el-button type="primary" @click="CloseEvent">
            <el-icon>
              <Back />
            </el-icon>
            <span>返回</span>
          </el-button>
        </div>
      </div>
      <div class="box_cont">
        <div class="searchBox" ref="searchBox">
          <el-form class="mosty-from-wrap" ref="ruleFormRef" label-width="130px" :model="data.fromObj" :inline="true"
            :rules="rules" :disabled="!props.saveBtnShow">
            <div style="display: flex; justify-content: space-between; width: 100%">
              <div style="width: 400px; display: flex;justify-content:center; margin-left: 30px">
                <div v-if="!props.saveBtnShow">
                  <el-image v-if='data.fromObj.img' style="width: 150px; height: 150px"
                    v-for="(item, index) in data.fromObj.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;">
                </div>
                <div v-if="props.saveBtnShow">
                  <MOSTY.Upload v-model="data.fromObj.file" :limit="1" :delrow="delrow" :ShowfileList="true"
                    :gsgfList="['pdf', 'ofd', 'doc', 'docx', 'xls', 'xlsx', 'wps']" @filehandleChange="changeFile"
                    :isImg="true" />
                </div>
                <div style="margin-left: 30px">
                  <MOSTY.ErwmImg :url="preViewImg" :filename='"食堂设备设施二维码"' v-if="props.fromObj.id"
                    :id='"htmlsmewmstsb"' />
                </div>
              </div>
              <div style='display:flex;justify-content:space-between;flex-wrap:wrap;width:852px;'>
                <el-form-item label="设备名称:" prop="equipmentname">
                  <el-input v-model="data.fromObj.equipmentname" clearable style="width: 250px" />
                </el-form-item>
                <el-form-item label="所属单位名称:">
                  <el-input v-model="data.fromObj.orgname" disabled clearable style="width: 250px" />
                </el-form-item>
                <el-form-item label="场所名称:" prop="siteid">
                  <el-select v-model="data.fromObj.siteid" disabled style="width: 250px" @change="cahngecsmc" clearable
                    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="partid">
                  <el-select v-model="data.fromObj.partid" style="width: 250px" clearable @change="changebw"
                    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.brand" clearable style="width: 250px" />
                </el-form-item>
                <el-form-item label="责任人:" prop="responsibilitypersonname">
                  <el-input v-model="data.fromObj.responsibilitypersonname" disabled style="width: 191px" />
                  <el-button type="primary" @click="ChooesDdld('01')">选择</el-button>
                </el-form-item>
                <el-form-item label="责任部门:">
                  <el-input v-model="data.fromObj.responsibilitydeptname" disabled clearable style="width: 250px" />
                </el-form-item>
                <el-form-item label="规格型号:">
                  <el-input v-model="data.fromObj.typenumber" clearable style="width: 250px" />
                </el-form-item>
              </div>
            </div>

            <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.installationsite" clearable style="width: 250px" />
            </el-form-item>
            <el-form-item label="安装日期:">
              <el-date-picker v-model="data.fromObj.purchasedate" style="width: 250px" type="date"
                value-format="YYYY-MM-DD" />
            </el-form-item>
            <el-form-item label="有效日期:">
              <el-date-picker v-model="data.fromObj.periodvalidity" style="width: 250px" type="date"
                value-format="YYYY-MM-DD" />
            </el-form-item>
            <el-form-item label="类型:">
              <el-select v-model="data.fromObj.type" style="width: 700px" clearable placeholder="请选择厨房设备类型：">
                <el-option v-for="item in D_TB_CFSB_LX" :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: 1150px" />
            </el-form-item>

            <el-collapse v-model="activeNames" style="width: 100%; margin-bottom: 50px">
              <el-collapse-item title="附属设备信息列表" name="1">
                <div>
                  <el-button class="addbtn" type="primary" @click="addShowinput">
                    <el-icon>
                      <CirclePlus />
                    </el-icon>
                    <span>新增</span>
                  </el-button>
                  <el-button class="addbtn" type="primary" @click="submittab">
                    <el-icon>
                      <Select />
                    </el-icon>
                    <span>编辑完成</span>
                  </el-button>
                  <el-button class="addbtn" type="primary" @click="deletetab">
                    <el-icon>
                      <DeleteFilled />
                    </el-icon>
                    <span>删除</span>
                  </el-button>
                </div>
                <div class="tabbox">
                  <el-table :data="data.fromObj.tbChildList" border stripe style="width: 100%" :height="tableHeight"
                    :key="keyCount" @row-click="handleCurrentChange">
                    <el-table-column sortable prop="name" align="center" label="附属设备名称">
                      <template #default="{ row }">
                        <input v-if="row.input == true" type="text" v-model="row.name" />
                        <span v-else>{{ row.name }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column sortable prop="mobile" label="数量">
                      <template #default="{ row }">
                        <input v-if="row.input == true" type="number" v-model="row.mobile" />
                        <span v-else>{{ row.mobile }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column sortable prop="brand" align="center" label="品牌">
                      <template #default="{ row }">
                        <input v-if="row.input == true" type="text" v-model="row.brand" />
                        <span v-else>{{ row.brand }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column sortable prop="childtype" align="center" label="型号">
                      <template #default="{ row }">
                        <input v-if="row.input == true" type="text" v-model="row.childtype" />
                        <span v-else>{{ row.childtype }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column sortable prop="maintenancetime" align="center" label="安装日期">
                      <template #default="{ row }">
                        <el-date-picker v-if="row.input == true" v-model="row.maintenancetime" style="width: 100%"
                          type="date" value-format="YYYY-MM-DD" />
                        <span v-else>{{ row.maintenancetime }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column sortable prop="manufacturer" align="center" label="生产厂家">
                      <template #default="{ row }">
                        <input v-if="row.input == true" type="text" v-model="row.manufacturer" />
                        <span v-else>{{ row.manufacturer }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column sortable prop="state" align="center" label="状态">
                      <template #default="{ row }">
                        <el-select v-if="row.input == true" v-model="row.state" style="width: 100%" clearable>
                          <el-option v-for="item in D_BZ_SBSSZT" :key="item" :label="item.label" :value="item.value" />
                        </el-select>
                        <dict-tag v-else :options="D_BZ_SBSSZT" :value="row.state" :tag="false" />
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </el-collapse-item>
              <el-collapse-item title="安全附件信息列表" name="2">
                <div>
                  <el-button class="addbtn" type="primary" @click="addfjinput">
                    <el-icon>
                      <CirclePlus />
                    </el-icon>
                    <span>新增</span>
                  </el-button>
                  <el-button class="addbtn" type="primary" @click="submitfjtab">
                    <el-icon>
                      <Select />
                    </el-icon>
                    <span>编辑完成</span>
                  </el-button>
                  <el-button class="addbtn" type="primary" @click="deletefjtab">
                    <el-icon>
                      <DeleteFilled />
                    </el-icon>
                    <span>删除</span>
                  </el-button>
                </div>
                <div class="tabbox">
                  <el-table :data="data.fromObj.tbChildAqfjList" border stripe style="width: 100%" :height="tableHeight"
                    :key="keyCount" @row-click="handlecheckChange">
                    <el-table-column sortable prop="name" align="center" label="安全附件名称">
                      <template #default="{ row }">
                        <input v-if="row.input == true" type="text" v-model="row.name" />
                        <span v-else>{{ row.name }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column sortable prop="brand" label="品牌">
                      <template #default="{ row }">
                        <input v-if="row.input == true" type="text" v-model="row.brand" />
                        <span v-else>{{ row.brand }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column sortable prop="childtype" align="center" label="型号">
                      <template #default="{ row }">
                        <input v-if="row.input == true" type="text" v-model="row.childtype" />
                        <span v-else>{{ row.childtype }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column sortable prop="manufacturedate" align="center" label="安装日期">
                      <template #default="{ row }">
                        <el-date-picker v-if="row.input == true" v-model="row.manufacturedate" style="width: 100%"
                          type="date" value-format="YYYY-MM-DD" />
                        <span v-else>{{ row.manufacturedate }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column sortable prop="manufacturer" align="center" label="生产厂家">
                      <template #default="{ row }">
                        <input v-if="row.input == true" type="text" v-model="row.manufacturer" />
                        <span v-else>{{ row.manufacturer }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column sortable prop="state" align="center" label="状态">
                      <template #default="{ row }">
                        <el-select v-if="row.input == true" v-model="row.state" style="width: 100%" clearable>
                          <el-option v-for="item in D_BZ_SBSSZT" :key="item" :label="item.label" :value="item.value" />
                        </el-select>
                        <dict-tag v-else :options="D_BZ_SBSSZT" :value="row.state" :tag="false" />
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </el-collapse-item>
              <el-collapse-item title="安全装置信息列表" name="3">
                <div>
                  <el-button class="addbtn" type="primary" @click="addzzinput">
                    <el-icon>
                      <CirclePlus />
                    </el-icon>
                    <span>新增</span>
                  </el-button>
                  <el-button class="addbtn" type="primary" @click="submitzztab">
                    <el-icon>
                      <Select />
                    </el-icon>
                    <span>编辑完成</span>
                  </el-button>
                  <el-button class="addbtn" type="primary" @click="deletezztab">
                    <el-icon>
                      <DeleteFilled />
                    </el-icon>
                    <span>删除</span>
                  </el-button>
                </div>
                <div class="tabbox">
                  <el-table :data="data.fromObj.tbChildAqzzList" border stripe style="width: 100%" :height="tableHeight"
                    :key="keyCount" @row-click="handlewbChange">
                    <el-table-column sortable prop="name" align="center" label="安全装置名称">
                      <template #default="{ row }">
                        <input v-if="row.input == true" type="text" v-model="row.name" />
                        <span v-else>{{ row.name }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column sortable prop="brand" label="品牌">
                      <template #default="{ row }">
                        <input v-if="row.input == true" type="text" v-model="row.brand" />
                        <span v-else>{{ row.brand }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column sortable prop="childtype" align="center" label="型号">
                      <template #default="{ row }">
                        <input v-if="row.input == true" type="text" v-model="row.childtype" />
                        <span v-else>{{ row.childtype }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column sortable prop="manufacturedate" align="center" label="安装日期">
                      <template #default="{ row }">
                        <el-date-picker v-if="row.input == true" v-model="row.manufacturedate" style="width: 100%"
                          value-format="YYYY-MM-DD" type="date" />
                        <span v-else>{{ row.manufacturedate }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column sortable prop="manufacturer" align="center" label="生产厂家">
                      <template #default="{ row }">
                        <input v-if="row.input == true" type="text" v-model="row.manufacturer" />
                        <span v-else>{{ row.manufacturer }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column sortable prop="state" align="center" label="状态">
                      <template #default="{ row }">
                        <el-select v-if="row.input == true" v-model="row.state" style="width: 100%" clearable>
                          <el-option v-for="item in D_BZ_SBSSZT" :key="item" :label="item.label" :value="item.value" />
                        </el-select>
                        <dict-tag v-else :options="D_BZ_SBSSZT" :value="row.state" :tag="false" />
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </el-collapse-item>
            </el-collapse>
          </el-form>
        </div>
      </div>
    </div>
    <!-- 选择带队领导 -->
    <ChooseUser v-model="chooseUserVisible" :Single="singleShow" :data="memberList" :leaderid="leaderid"
      :deptId="data.fromObj.responsibilitydept" @choosedUsers="getSonValue"></ChooseUser>
  </div>
</template>

<script setup>
import { getImgUrl } from "@/utils/tools.js"
import {
  ref,
  onMounted,
  defineProps,
  defineEmits,
  reactive,
  watch,
  watchEffect,
  getCurrentInstance
} from "vue";
import { getItem } from "@/utils/storage";
import { filterYear } from "@/utils/auth.js";
import * as MOSTY from "@/components/MyComponents/index";
import { ElMessage } from "element-plus";
import { getApi, deleteApi, putApi, postApi } from "@/api/tobAcco_api.js";
import ChooseUser from "@/components/MyComponents/ChooseUser/Leader.vue";
import { qrcodeImg } from "@/utils/tools.js";
import { Html2canvasImg } from "@/utils/html2pdf.js";
const { proxy } = getCurrentInstance();
const { D_TB_CFSB_LX, D_BZ_SBSSZT, D_TB_JCBZLB, D_BZ_JXSBLX, D_BZ_JCZT } =
  proxy.$dict(
    "D_TB_CFSB_LX",
    "D_BZ_SBSSZT",
    "D_TB_JCBZLB",
    "D_BZ_JXSBLX",
    "D_BZ_JCZT"
  );
const props = defineProps({
  title: {
    type: String,
    default: ""
  },
  siteid: {
    type: String,
    default: ""
  },
  fssbShow: {
    type: Boolean,
    default: true
  },
  saveBtnShow: {
    type: Boolean,
    default: true
  },
  editObj: {
    type: Object,
    default: () => { }
  },
  tbChildAqfjList: {
    type: Object,
    default: () => { }
  },
  tbChildAqzzList: {
    type: Object,
    default: () => { }
  }
});
const rules = reactive({
  equipmentname: [
    { required: true, message: "设备名称不能为空", trigger: "blur" }
  ],
  siteid: [{ required: true, message: "场所名称不能为空", trigger: "blur" }],
  partid: [{ required: true, message: "部位名称不能为空", trigger: "blur" }],
  responsibilitypersonname: [
    { required: true, message: "责任人不能为空", trigger: "blur" }
  ],
  lx: [{ required: true, message: "类型不能为空", trigger: "blur" }]
});
const placename = ref("");
const allname = ref("");
const activeNames = ref(1);
const emits = defineEmits(["close"]);
const dialogVisible = ref(false);
const fjid = ref("");
const bwlist = ref([]);
const fromObj = ref({});
const currentRow = ref(); //选中的表格数据
const currentRowfj = ref(); //选中的表格数据
const chooseUserVisible = ref(false); //选择领导弹窗
const csmclist = ref([]);
const singleShow = ref(true); //单选多选
const leaderid = ref("");
const zzlx = ref(null);

const tableData = ref([]);
const tableData2 = ref([]);
const jcjlTable = ref([]);

const searchFn = (row) => { };
const CloseEvent = () => {
  if (props.saveBtnShow) {
    proxy.$modal.confirm('离开会丢失页面中修改的内容，确认离开吗？')
      .then(() => {
        // 关闭上一次的表单校验
        ruleFormRef.value.clearValidate();
        emits("close");
      })
      .catch(() => {
        // catch error
      })
  } else {
    // 关闭上一次的表单校验
    ruleFormRef.value.clearValidate();
    emits("close");
  }

};
const showPeop = ref(false);

onMounted(() => {
  activeNames.value = ["1", "2", "3"];
  getcsData();
});
const data = reactive({
  fromObj: {}
});
//点击带队领导选择按钮
function ChooesDdld(val) {
  zzlx.value = val;
  leaderid.value = "";
  if (val == "01") {
    leaderid.value = data.fromObj.responsibilityperson;
  }
  singleShow.value = true;
  chooseUserVisible.value = true;
}
const getSonValue = (value) => {
  if (zzlx.value == "01") {
    data.fromObj.responsibilitypersonname = value[0].userName;
    data.fromObj.responsibilityperson = value[0].id;
    data.fromObj.responsibilitydept = value[0].deptId;
    data.fromObj.responsibilitydeptname = value[0].deptName;
  }
};
//新增表格
//新增附属设备信息表格
function addShowinput() {
  let tab = {
    name: "",
    brand: "",
    childtype: "",
    maintenancetime: "",
    manufacturer: "",
    state: "",
    input: true
  };
  if (data.fromObj.tbChildList) {
    data.fromObj.tbChildList.push(tab);
  } else {
    let arr = [];
    arr.push(tab);
    data.fromObj.tbChildList = arr;
  }
}
//保存表格数据
function submittab() {
  data.fromObj.tbChildList.forEach((el) => {
    el.input = false;
  });
}
//删除表格数据
function deletetab() {
  data.fromObj.tbChildList.forEach((item, index) => {
    if (currentRow.value == item) {
      data.fromObj.tbChildList.splice(index, 1);
    }
  });
}
//选中当前表格行
function handleCurrentChange(val) {
  currentRow.value = val;
  if (props.saveBtnShow) {
    data.fromObj.tbChildList.forEach((el) => {
      if (el == val) {
        el.input = true;
      } else {
        el.input = false;
      }
    });
  }
}

//新增安全附件表格
function addfjinput() {
  let tab = {
    name: "",
    brand: "",
    childtype: "",
    tbChildAqfjList: "",
    manufacturer: "",
    state: "",
    input: true
  };
  if (data.fromObj.tbChildAqfjList) {
    data.fromObj.tbChildAqfjList.push(tab);
  } else {
    let arr = [];
    arr.push(tab);
    data.fromObj.tbChildAqfjList = arr;
  }
}
//保存表格数据
function submitfjtab() {
  data.fromObj.tbChildAqfjList.forEach((el) => {
    el.input = false;
  });
}
//删除表格数据
function deletefjtab() {
  data.fromObj.tbChildAqfjList.forEach((item, index) => {
    if (currentRowfj.value == item) {
      data.fromObj.tbChildAqfjList.splice(index, 1);
    }
  });
}
function handlecheckChange(val) {
  currentRowfj.value = val;
  if (props.saveBtnShow) {
    data.fromObj.tbChildAqfjList.forEach((el) => {
      if (el == val) {
        el.input = true;
      } else {
        el.input = false;
      }
    });
  }
}
const currentRowzz = ref(); //选中的表格数据
//新增安全装置表格
function addzzinput() {
  let tab = {
    name: "",
    brand: "",
    childtype: "",
    maintenancetime: "",
    manufacturer: "",
    state: "",
    input: true
  };
  if (data.fromObj.tbChildAqzzList) {
    data.fromObj.tbChildAqzzList.push(tab);
  } else {
    let arr = [];
    arr.push(tab);
    data.fromObj.tbChildAqzzList = arr;
  }
}
//保存表格数据
function submitzztab() {
  data.fromObj.tbChildAqzzList.forEach((el) => {
    el.input = false;
  });
}
//删除表格数据
function deletezztab() {
  data.fromObj.tbChildAqzzList.forEach((item, index) => {
    if (currentRowzz.value == item) {
      data.fromObj.tbChildAqzzList.splice(index, 1);
    }
  });
}
//选中当前表格行
function handlewbChange(val) {
  currentRowzz.value = val;
  if (props.saveBtnShow) {
    data.fromObj.tbChildAqzzList.forEach((el) => {
      if (el == val) {
        el.input = true;
      } else {
        el.input = false;
      }
    });
  }

}
const ruleFormRef = ref();
// 保存
const handleSave = async (ruleFormRef) => {
  if (!ruleFormRef) return;
  await ruleFormRef.validate((valid) => {
    if (valid) {
      data.fromObj.tbChildAqfjList
        ? data.fromObj.tbChildAqfjList
        : (data.fromObj.tbChildAqfjList = []);
      data.fromObj.tbChildAqzzList
        ? data.fromObj.tbChildAqzzList
        : (data.fromObj.tbChildAqzzList = []);
      data.fromObj.tbChildList
        ? data.fromObj.tbChildList
        : (data.fromObj.tbChildList = []);
      if (data.fromObj) {
        if (props.title == "设备设施新增") {
          postApi(
            data.fromObj,
            "/mosty-jcgl/equipmentFather/addEquipmentFatherOne"
          )
            .then((res) => {
              ElMessage.success("新增成功");
              emits("close");
            })

        } else if (props.title == "设备设施修改") {
          postApi(
            data.fromObj,
            "/mosty-jcgl/equipmentFather/updateEquipmentFatherOne"
          )
            .then((res) => {
              ElMessage.success("修改成功");
              emits("close");
            })
        }
      }
    } else {
      ElMessage.error("请输入必填项");
    }
  });
};
//根据操作人 查询 场所
function getcsData() {
  data.fromObj.orgname = getItem("deptId").ssdwmc;
  getApi({}, "/mosty-jcgl/site/getSiteListByUser").then((res) => {
    csmclist.value = res;
  });
}
function getbwlist() {
  if (data.fromObj.siteid) {
    csmclist.value.forEach((item) => {
      if (item.id == data.fromObj.siteid) {
        getbwdata(item.id);
      }
    });
  }
}
//获取场所选择
const cahngecsmc = (val) => {
  csmclist.value.forEach((item) => {
    if (item.id == val) {
      getbwdata(item.id);
    }
  });
  data.fromObj.partid = ''
};
const changebw = (val) => {
  bwlist.value.forEach((item) => {
    if (item.id == val) {
      data.fromObj.buildingid = item.buildingid
      data.fromObj.floorid = item.floorid
    }
  });
}
//根据操作人 获取部位信息
function getbwdata(id) {
  getApi({ partId: id }, "/mosty-jcgl/part/getpartListByUser").then((res) => {
    bwlist.value = res;
  });
}
watchEffect(() => {
  if (props.editObj) {
    data.fromObj = props.editObj;
    getbwlist();
  }
  if (props.title == "设备设施新增") {
    data.fromObj.siteid = props.siteid;
  }
});
</script>

<style lang="scss" scoped>
.box_cont {
  height: calc(100vh - 10vh);
  overflow-y: scroll;
}

.searchBox {
  width: 1333px;
  margin: 20px auto;
}

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

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



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

.addbtn {
  margin-bottom: 10px;
}

.bigBox {
  display: block !important;
  padding: 0 14px;
  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>