<template>
  <div class="bigBox" :style="{ height: bigHeight }">
    <PageTitle :title="data.config.title">
      <el-button type="primary" @click="submit(ruleFormRef)" v-if="data.config.saveBtnShow">保存</el-button>
      <el-button @click="black">关闭</el-button>
    </PageTitle>
    <div class="box_cont">
      <div class="searchBox" ref="searchBox">
        <el-form class="mosty-from-wrap" ref="ruleFormRef" label-width="155px" :model="data.fromObj" :inline="true"
          :rules="rules">
          <el-form-item label="器材名称：" prop="name">
            <el-input v-model="data.fromObj.name" placeholder="请输入器材名称" style="width: 250px"></el-input>
          </el-form-item>
          <el-form-item label="型号规格参数：">
            <el-input v-model="data.fromObj.brand" placeholder="请输入型号规格参数" style="width: 250px"></el-input>
          </el-form-item>
          <el-form-item label="内部编号：">
            <el-input v-model="data.fromObj.nbbh" placeholder="请输入内部编号" style="width: 250px"></el-input>
          </el-form-item>
          <el-form-item label="器材数量：">
            <el-input-number controls-position="right" v-model="data.fromObj.number" placeholder="请输入器材数量"
              style="width: 250px"></el-input-number>
          </el-form-item>
          <el-form-item label="生产厂家：">
            <el-input v-model="data.extendattr.ext_sccj" placeholder="请输入生产厂家" style="width: 250px"></el-input>
          </el-form-item>
          <el-form-item label="出厂日期：" prop="ccrq">
            <el-date-picker v-model="data.fromObj.cssj" value-format="YYYY-MM-DD" type="date" placeholder="请选择安装时间"
              style="width: 250px" />
          </el-form-item>
          <el-form-item label="安装日期：">
            <el-date-picker v-model="data.fromObj.azsj" type="date" value-format="YYYY-MM-DD" placeholder="请选择安装日期"
              style="width: 250px" />
          </el-form-item>
          <el-form-item label="采购日期：">
            <el-date-picker v-model="data.fromObj.cgsj" type="date" value-format="YYYY-MM-DD" placeholder="请选择采购日期"
              style="width: 250px" />
          </el-form-item>
          <el-form-item label="状态：">
            <el-select v-model="data.fromObj.status" placeholder="请选择状态" style="width: 250px">
              <el-option v-for="item in D_BZ_SBSSZT" :key="item.value" :label="item.label"
                :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="投入金额(元)：">
            <el-input-number controls-position="right" v-model="data.fromObj.money" placeholder="请输入金额"
              style="width: 250px"></el-input-number>
          </el-form-item>
          <el-form-item label="场所名称：" prop="placename">
            <el-select v-model="data.fromObj.placename" @change="cahngecsmc" clearable placeholder="请选择场所名称："
              style="width: 250px">
              <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="allname">
            <el-select v-model="data.fromObj.allname" @change="cahngebw" style="width: 250px" clearable
              placeholder="请选择部位名称：">
              <el-option v-for="item in bwlist" :key="item" :label="item.allname" :value="item.id"
                style="width: 250px" />
            </el-select>
          </el-form-item>
          <div class="ld_box">
            <el-form-item label="责任人：" prop="zrrname">
              <el-input v-model="data.fromObj.zrrname" disabled clearable style="width: 166px" />
            </el-form-item>
            <el-button type="primary" @click="ChooesDdld('01')">选择</el-button>
          </div>
          <el-form-item label="责任部门：" prop="zrbmname">
            <el-input v-model="data.fromObj.zrbmname" disabled clearable style="width: 250px" />
          </el-form-item>
          <el-form-item label="安装具体位置：">
            <el-input v-model="data.extendattr.ext_location" placeholder="请输入安装具体位置" style="width: 725px"></el-input>
          </el-form-item>
          <el-form-item label="备注：" prop="bz">
            <el-input v-model="data.fromObj.bz" type="textarea" :rows="6" show-word-limit maxlength="200"
              style="width: 1000px" />
          </el-form-item>
        </el-form>
      </div>
    </div>
    <ChooseUser v-model="chooseUserVisible" :Single="singleShow" :data="memberList" :leaderid="leaderid"
      @choosedUsers="getSonValue"></ChooseUser>
  </div>
</template>

<script setup>
import {
  reactive,
  ref,
  watchEffect,
  getCurrentInstance,
  onMounted,
  watch,
  nextTick
} from "vue";
import * as MOSTY from "@/components/MyComponents/index";
import Choosebm from "@/components/MyComponents/ChooseDept/index.vue";
import { ElMessage } from "element-plus";
import { getApi, deleteApi, putApi, postApi } from "@/api/tobAcco_api.js";

import ChooseUser from "@/components/MyComponents/ChooseUser/Leader.vue";
import PageTitle from "@/components/PageTitle/PageTitle.vue";
import * as rule from "@/utils/rules.js";
const { proxy } = getCurrentInstance();
const { D_BZ_SBSSZT } = proxy.$dict("D_BZ_SBSSZT");
const props = defineProps({
  saveBtnShow: {
    type: Boolean,
    default: true
  },
  editObj: {
    type: Object,
    default: () => { }
  }
});

const emit = defineEmits("changePage");
const ruleFormRef = ref();
const data = reactive({
  fromObj: {},
  extendattr: {},
  config: {
    title: "",
    saveBtnShow: true,
    wbjlShow: false,
    jcrzShow: false
  }
});
//点击带队领导选择按钮
const chooseUserVisible = ref(false); //选择领导弹窗
const singleShow = ref(true); //单选多选
const leaderid = ref("");
const zzlx = ref(null);
function ChooesDdld(val) {
  zzlx.value = val;
  leaderid.value = "";
  if (val == "01") {
    leaderid.value = data.fromObj.zrrid;
  }
  singleShow.value = true;
  chooseUserVisible.value = true;
}

const getSonValue = (value) => {
  if (zzlx.value == "01") {
    data.fromObj.zrrname = value[0].userName;
    data.fromObj.zrrid = value[0].id;
    data.fromObj.zrbmname = value[0].deptName;
    data.fromObj.zrbmcode = value[0].deptId;
  }
};
const rules = reactive({
  name: [{ required: true, message: "请输入器材名称", trigger: "change" }],
  placename: [{ required: true, message: "请选择所属场所", trigger: "change" }],
  allname: [{ required: true, message: "请选择所属部位", trigger: "change" }],
  zrrname: [{ required: true, message: "请选择责任人", trigger: "change" }],
  zrbmname: [{ required: true, message: "请选择责任部门", trigger: "change" }]
});

// 保存
const submit = async (ruleFormRef) => {
  if (!ruleFormRef) return;
  await ruleFormRef.validate((valid) => {
    if (valid) {
      if (data.fromObj) {
        const arr = Object.entries(data.extendattr).map(([key, value]) => ({
          name: key,
          value
        }));
        data.fromObj.catalogid = "416";
        data.fromObj.extendattr = arr ? JSON.stringify(arr) : "";

        if (data.config.title == "其他类型新增") {
          postApi(data.fromObj, "/mosty-jcgl/equipment/addEquipmentOne")
            .then((res) => {
              ElMessage.success("新增成功");
              emit("changePage", "Main");
            })

        } else if (data.config.title == "编辑") {
          postApi(data.fromObj, "/mosty-jcgl/equipment/updateEquipmentOne")
            .then((res) => {
              ElMessage.success("修改成功");
              emit("changePage", "Main");
            })

        }
      }
    } else {
      ElMessage.error("请输入必填项!");
    }
  });
};

const placename = ref("");
const allname = ref("");
//获取详情
function getmain(id) {
}
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");
  }

};
const csmclist = ref([]);
const bwlist = ref([]);
//根据操作人 查询 场所
function getcsData() {
  getApi({}, "/mosty-jcgl/site/getSiteListByUser").then((res) => {
    csmclist.value = res;
  });
}
//获取场所选择
const cahngecsmc = (val) => {
  csmclist.value.forEach((item) => {
    if (item.id == val) {
      data.fromObj.siteid = item.id;
      data.fromObj.sitename = item.placename;
      getbwdata(item.id);
    }
  });
};
//根据操作人 获取部位信息
function getbwdata(id) {
  getApi({ partId: id }, "/mosty-jcgl/part/getpartListByUser").then((res) => {
    bwlist.value = res;
  });
}
//获取当前部位
const cahngebw = (val) => {
  bwlist.value.forEach((item) => {
    if (item.id == val) {
      data.fromObj.partid = item.id;
      data.fromObj.partname = item.areaname;
    }
  });
};
onMounted(() => {
  getcsData();
});
watchEffect(() => {
  if (props.editObj) {
    data.config = JSON.parse(JSON.stringify(props.editObj));
  }
});
</script>

<style lang="scss" scoped>
::-webkit-scrollbar {
  width: 0 !important;
  height: 0;
}

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

.searchBox {
  width: 1200px;
  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>