<template>
  <div>
    <PageTitle :title="pageTitle">
      <el-button type="primary" @click="submit(ruleFormRef)">保存</el-button>
      <el-button @click="black">关闭</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="8">
              <el-form-item label="姓名">
                <el-input v-model="data.formData.dw" placeholder="请输入姓名" style="width: 100%"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="性别">
                <el-input v-model="data.formData.djbm" placeholder="请输入性别" style="width: 100%"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="出生年月">
                <el-date-picker v-model="value2" type="date" placeholder="请输入出生年月" :disabled-date="disabledDate"
                  :shortcuts="shortcuts" :size="size" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="工作单位">
                <el-input v-model="data.formData.ygxm" placeholder="请输入工作单位" style="width: 100%"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="文化程度">
                <el-input v-model="data.formData.ssbm" placeholder="请输入文化程度" style="width: 100%"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="驾驶工龄">
                <el-input v-model="data.formData.ssbm" placeholder="请输入驾驶工龄" style="width: 100%"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="驾驶证证号">
                <el-input v-model="data.formData.ssbm" placeholder="请输入驾驶证证号" style="width: 100%"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="准驾车型">
                <el-input v-model="data.formData.ssbm" placeholder="请输入准驾车型" style="width: 100%"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="从事岗位">
                <el-input v-model="data.formData.ssbm" placeholder="请输入从事岗位" style="width: 100%"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="有效期">
                <el-input v-model="data.formData.ssbm" placeholder="请输入有效期" style="width: 100%"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="家庭住址">
                <el-input v-model="data.formData.ssbm" placeholder="请输入家庭住址" style="width: 100%"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="联系电话:">
                <MaskInput v-model="data.formData.ssbm" placeholder="请输入联系电话：" style="width: 100%" />
              </el-form-item>
              <!-- <el-form-item label="联系电话">
                <el-input v-model="data.formData.ssbm" placeholder="请输入联系电话" style="width: 100%"></el-input>
              </el-form-item> -->
            </el-col>
            <el-col :span="8">
              <el-form-item label="政治面貌">
                <el-input v-model="data.formData.ssbm" placeholder="请输入政治面貌" style="width: 100%"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="技术职称">
                <el-input v-model="data.formData.ssbm" placeholder="请输入技术职称" style="width: 100%"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="理论考试成绩">
                <el-input v-model="data.formData.ssbm" placeholder="请输入理论考试成绩" style="width: 100%"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="备注" prop="bz">
                <el-input v-model="data.formData.bz" type="textarea" :rows="6" show-word-limit maxlength="200" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <el-collapse v-model="检查内容信息">
        <el-collapse-item title="车辆保险信息" name="1">
          <div class="tabbox">
            <el-table :data="data.tableData" border stripe style="width: 100%" :height="tableHeight" :key="keyCount"
              @current-change="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="pingpai" label="品牌">
                <template #default="{ row }">
                  <input v-if="row.input == true" type="text" v-model="row.pingpai" />
                  <span v-else>{{ row.pingpai }}</span>
                </template>
              </el-table-column>
              <el-table-column sortable prop="xh" align="center" label="型号">
                <template #default="{ row }">
                  <input v-if="row.input == true" type="text" v-model="row.xh" />
                  <span v-else>{{ row.xh }}</span>
                </template>
              </el-table-column>
              <el-table-column sortable prop="azwz" align="center" label="安装位置">
                <template #default="{ row }">
                  <input v-if="row.input == true" type="text" v-model="row.azwz" />
                  <span v-else>{{ row.azwz }}</span>
                </template>
              </el-table-column>
              <el-table-column sortable prop="price" align="center" label="单价">
                <template #default="{ row }">
                  <input v-if="row.input == true" type="text" v-model="row.price" />
                  <span v-else>{{ row.price }}</span>
                </template>
              </el-table-column>
              <el-table-column sortable prop="count" align="center" label="数量">
                <template #default="{ row }">
                  <input v-if="row.input == true" type="text" v-model="row.count" />
                  <span v-else>{{ row.count }}</span>
                </template>
              </el-table-column>
              <el-table-column sortable prop="mobile" align="center" label="单位">
                <template #default="{ row }">
                  <el-select v-if="row.input == true" v-model="row.dw" style="width: 100%" clearable
                    placeholder="请选择单位：">
                    <el-option v-for="item in D_BZ_WPDW" :key="item" :label="item.label" :value="item.value" />
                  </el-select>
                  <dict-tag v-else :options="D_BZ_WPDW" :value="row.dw" :tag="false" />
                </template>
              </el-table-column>
              <el-table-column sortable prop="bh" align="center" label="内部编号">
                <template #default="{ row }">
                  <input v-if="row.input == true" type="text" v-model="row.bh" />
                  <span v-else>{{ row.bh }}</span>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-collapse-item>
      </el-collapse>
    </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";
import MaskInput from "@/components/MaskInput.vue"

const { proxy } = getCurrentInstance();
const activeNames = ref(["1"]);

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 emit = defineEmits("changePage");
const ruleFormRef = ref();
let pageTitle = ref("职业危害场所新增");
const data = reactive({
  formData: {
    dw: "", //单位
    cph: "", //车牌号
    ygxm: "", //员工姓名
    ssbm: "", //所属部门
    lxdh: "", //联系电话
    jszh: "", //驾驶证号
    djbm: "", //登记部门
    jlr: "" //记录人
  }
});
//新增电器设备表格
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>