<template>
  <div>
    <PageTitle :title="pageTitle">

      <el-button type="primary" @click="submit(ruleFormRef)">
        <el-icon>
          <DocumentChecked />
        </el-icon>保存
      </el-button>
      <el-button @click="black">
        <el-icon>
          <DocumentDelete />
        </el-icon>关闭</el-button>
    </PageTitle>
    <div class="Box">
      <div style="display: flex; justify-content: center; margin-top: 10px">
        <el-form ref="ruleFormRef" :model="data.formData" :rules="rules" label-width="120px" class="demo-ruleForm"
          status-icon :inline="true" label-position="top">
          <el-row :gutter="80">
            <el-col :span="12">
              <el-form-item label="车辆双检类型" prop="qcdw">
                <el-select v-model="data.formData.qcdw" placeholder="车辆双检类型" style="width: 100%">
                  <el-option v-for="item in D_BZ_SBGL_DW" :key="item.value" :label="item.label"
                    :value="item.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="检查项目名称">
                <el-input v-model="data.formData.sccj" placeholder="请输入检查项目名称" style="width: 100%"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script setup>
import {
  reactive,
  ref,
  watchEffect,
  getCurrentInstance,
  watch,
  nextTick
} from "vue";
import * as MOSTY from "@/components/MyComponents/index";
import PageTitle from "@/components/PageTitle/PageTitle.vue";
import * as rule from "@/utils/rules.js";
const { proxy } = getCurrentInstance();
const { D_BZ_SBGL_DW } = proxy.$dict("D_BZ_SBGL_DW");
const props = defineProps({
  editObj: {
    type: Object,
    default: () => { }
  }
});
const currentRow = ref(); //选中的表格数据
const currentRowjc = ref(); //选中的表格数据
const fjid = ref("");
const tableData = ref([]);
const jcjlTable = ref([]);
const fjidlist = ref({});
const dialogVisible = ref(false);
const fjtableData = ref([]);
const activeNames = ref(["1"]);
const emit = defineEmits("changePage");
const ruleFormRef = ref();
let pageTitle = ref("车辆检查库-基本信息新增");
const data = reactive({
  formData: {
    afqcmc: "", //安防器材名称
    csmc: "", //场所名称
    bwmc: "", //部位名称
    cgsj: "", //采购时间
    qcsl: "", //器材数量
    qcdw: "", //器材单位
    zrr: "", //责任人
    zrbm: "", //责任部门
    xhggcs: "", //型号规格参数
    sccj: "", //生产厂家
    nbbh: "", //内部编号
    szwz: "", //所在位置
    zt: "", //状态
    jcbz: "", //检查标准
    bz: "" //备注
  },
  tableData: []
});
//新增电器设备表格
function addShowinput() {
  let tab = {
    Name: "",
    pingpai: "",
    xh: "",
    azwz: "",
    price: "",
    count: "",
    dw: "",
    bh: "",
    input: true
  };
  if (data.tableData.value.length) {
    let legths = data.tableData.value.length - 1;
    let data = data.tableData.value[legths];
    if (data.userName != "" && data.mobile != "" && data.dw != "") {
      data.tableData.value.push(tab);
    }
  } else {
    data.tableData.value.push(tab);
  }
}
//保存表格数据
function submittab() {
  data.tableData.value.forEach((el) => {
    el.input = false;
  });
}
//删除表格数据
function deletetab() {
  data.tableData.value.forEach((item, index) => {
    if (currentRow.value == item) {
      data.tableData.value.splice(index, 1);
    }
  });
}
//选中当前表格行
function handleCurrentChange(val) {
  currentRow.value = val;
  data.tableData.value.forEach((el) => {
    if (el == val) {
      el.input = true;
    }
  });
}
function handlecheckChange(val) {
  currentRowjc.value = val;
  jcjlTable.value.forEach((el) => {
    if (el == val) {
      el.input = true;
    }
  });
}

//新增检测记录表格
function addjcinput() {
  let tab = { jcjg: "", mobile: "", yxqx: "", type: "", fie: "", input: true };
  if (jcjlTable.value.length) {
    let legths = jcjlTable.value.length - 1;
    let data = jcjlTable.value[legths];
    if (
      data.jcjg != "" &&
      data.mobile != "" &&
      data.yxqx != "" &&
      data.type != "" &&
      data.type != ""
    ) {
      jcjlTable.value.push(tab);
    }
  } else {
    jcjlTable.value.push(tab);
  }
}
//保存表格数据
function submitjctab() {
  jcjlTable.value.forEach((el) => {
    el.input = false;
  });
}
//删除表格数据
function deletejctab() {
  jcjlTable.value.forEach((item, index) => {
    if (currentRowjc.value == item) {
      jcjlTable.value.splice(index, 1);
    }
  });
}
//附件详情弹窗
function handleChangefj(index, id) {
  fjid.value = id;
  dialogVisible.value = true;
}
const rules = reactive({
  // yalx: [{ required: true, message: "请选择类别", trigger: "change" }],
  // yt: [{ required: true, message: "请选择用途", trigger: "change" }],
  // yaName: [
  //   {
  //     required: true,
  //     message: "请输入预案名称",
  //     trigger: "blur"
  //   }
  // ],
  // bzxzmc: [
  //   {
  //     required: true,
  //     message: "请输入名称",
  //     trigger: "input"
  //   }
  // ]
});

// 保存
const submit = async (formEl) => {
  if (!formEl) return;
  // await formEl.validate((valid, fields) => {
  //   if (valid) {
  //     let attr = JSON.parse(JSON.stringify(data.formData));
  //     const fnName = pageTitle == "修改" ? "userUpdate" : "userSave";
  //     fns[fnName](attr).then((res) => {
  //       const message = pageTitle == "修改" ? "修改成功" : "添加成功";
  //       proxy.$message({
  //         message,
  //         type: "success"
  //       });
  //       emit("changePage", "Main");
  //     });
  //   }
  // });
};

const black = () => {
  proxy.$modal.confirm('离开会丢失页面中修改的内容，确认离开吗？')
    .then(() => {
      emit("changePage", "Main");
    })
    .catch(() => {
      // catch error
    })

};

watchEffect(() => {
  if (props.editObj) {
    pageTitle = "安防设施详情";
    data.formData = JSON.parse(JSON.stringify(props.editObj));

  }
});
</script>

<style lang="scss" scoped>
::v-deep .el-cascader,
::v-deep .el-select {
  width: 100%;
}

.Box {
  border: 1px solid var(--el-color-primary);
  margin-left: 150px;
  width: calc(100% - 300px);
  color: black;
  font-size: 20px;
}
</style>