<template>
  <div>
    <!-- 详情列表 -->
    <el-dialog
      title="人员档案管理"
      width="1400px"
      :model-value="peopleValue"
      :close-on-click-modal="false"
      :destroy-on-close="true"
      @close="closed"
    >
      <div class="cntBox">
        <div class="cntbox-title one-border">{{dataValue.xm }}个人综合档案</div>
        <div class="cntInfo">
          <div class="left">
            <div class="img">
              <img src="@\assets\images\layout\default_male.png" alt="" />
            </div>
          </div>
          <ul class="right">
            <li class="rightItem">
              <div class="text">姓名</div>
              <div class="info">{{ dataValue.xm }}</div>
              <div class="text">性别</div>
              <div class="info">{{ dataValue.xbmc }}</div>
            </li>
            <li class="rightItem">
              <div class="text">身份证号</div>
              <div class="info">{{ dataValue.sfzh }}</div>
              <div class="text">年领</div>
              <div class="info">{{ dataValue.age }}</div>
            </li>
            <li class="rightItem">
              <div class="text">联系电话</div>
              <div class="info">{{ dataValue.lxdh }}</div>
              <div class="text">警号</div>
              <div class="info">{{ dataValue.jh }}</div>
            </li>
            <li class="rightItem">
              <div class="text">所属单位</div>
              <div class="info">{{ dataValue.ssbm }}</div>
              <div class="text">家庭地址</div>
              <div class="info">{{ dataValue.ssbm }}</div>
            </li>
            <li class="rightItem">
              <div class="text">入职时间</div>
              <div class="info"></div>
              <div class="text">籍贯</div>
              <div class="info">{{ dataValue.jgdm }}</div>
            </li>
            <li class="rightItem">
              <div class="text">民族</div>
              <div class="info">{{ dataValue.mzmc }}</div>
              <div class="text">学历</div>
              <div class="info"></div>
            </li>
            <li class="rightItem">
              <div class="text">婚姻状况</div>
              <div class="info"></div>
              <div class="text">政治面貌</div>
              <div class="info"></div>
            </li>
            <li class="rightItem">
              <div class="text">特殊技能</div>
              <div class="infoText"></div>
            </li>
          </ul>
        </div>
        <div class="cntbox-title two-border">训练档案</div>
        <div class="buns">
          <el-button @click="add_edit('', 'add')">新增</el-button>
        </div>
        <el-table
          :data="tableData"
          border
          row-key="id"
          width="100%"
          element-loading-background="rgba(0,0,0,0.3)"
        >
          <el-table-column
            label="序号"
            type="index"
            align="center"
            width="80"
          />
          <el-table-column label="训练日期" prop="xlrq" align="center" />
          <el-table-column label="训练类型" prop="xllx" align="center">
            <template #default="{ row }">
              <dict-tag
                :options="props.D_BZ_XFXLLX"
                :value="row.xllx"
                :tag="false"
              />
            </template>
          </el-table-column>
          <el-table-column label="训练时长(H)" prop="xlsc" align="center" />
          <el-table-column label="训练层级" prop="xlcj" align="center">
            <template #default="{ row }">
              <dict-tag
                :options="props.D_BZ_XLCJ"
                :value="row.xlcj"
                :tag="false"
              />
            </template>
          </el-table-column>
          <el-table-column label="备注" prop="bz" align="center" />
          <el-table-column label="操作" align="center" fixed="right">
            <template #default="{ row }">
              <el-button @click="add_edit(row, 'edit')" size="small"
                >修改</el-button
              >
              <el-button @click="delDictItem(row.id)" type="danger" size="small"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="closed">取消</el-button>
          <el-button type="primary" @click="onComfirm">确认</el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 添加-编辑- 训练记录 -->
    <el-dialog
      :title="titleValue"
      width="400px"
      :model-value="recordsValue"
      :close-on-click-modal="false"
      :destroy-on-close="true"
    >
      <el-form
        ref="elform"
        :model="addForm"
        :rules="rules"
        :inline="true"
        label-position="right"
        :label-width="120"
      >
        <el-form-item label="训练日期" prop="xlrq">
          <el-date-picker
            style="width: 100%"
            v-model="addForm.xlrq"
            placeholder="请选择"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
          />
        </el-form-item>
        <el-form-item label="训练时长(h)" prop="xlsc">
          <el-input
            v-model="addForm.xlsc"
            placeholder="请输入训练时长(h)"
            clearable
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="训练类型 " prop="xllx">
          <el-select
            clearable
            v-model="addForm.xllx"
            placeholder="请选择训练类型"
            style="width: 100%"
          >
            <el-option
              v-for="(item, index) in D_BZ_XFXLLX"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="训练层级" prop="xlcj">
          <el-select
            clearable
            v-model="addForm.xlcj"
            placeholder="请选择"
            style="width: 100%"
          >
            <el-option
              v-for="(item, index) in D_BZ_XLCJ"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="closeAdd">取消</el-button>
          <el-button type="primary" :loading="loading" @click="submit"
            >确认</el-button
          >
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup >
import {
  ref,
  defineExpose,
  reactive,
  onMounted,
  getCurrentInstance
} from "vue";
import {
  addXljl,
  getXljlById,
  updateXljl,
  deleteXljl,
  getXljlList
} from "@/api/base.js";
import { IdCard } from "@/utils/validate.js";
import { ElMessage } from "element-plus";
const { proxy } = getCurrentInstance();
const props = defineProps({
  D_BZ_XB: Array,
  D_BZ_MZ: Array,
  D_BZ_XLCJ: Array,
  D_BZ_XFXLLX: Array
});
const peopleValue = ref(false);
const recordsValue = ref(false); //新增
const dataValue = ref({});
const elform = ref(null); //表单对象
const loading = ref(false);
const titleValue = ref("");
const addFormDefault = ref({});
const addForm = ref({
  xlrq: "",
  xlsc: "",
  xllx: "",
  xlcj: ""
}); //训练档案表单
const tableData = ref([]); //训练档案
const rules = reactive({
  xlrq: [
    {
      required: true,
      message: "请选择训练日期"
    }
  ],
  xlsc: [
    {
      required: true,
      message: "请输入训练时长(h)"
    }
  ],
  xllx: [
    {
      required: true,
      message: "请选择训练类型"
    }
  ],
  xlcj: [
    {
      required: true,
      message: "请选择训练层级"
    }
  ]
});

onMounted(() => {
  addFormDefault.value = JSON.parse(JSON.stringify(addForm.value));
});

// 初始化
function init(row) {
  peopleValue.value = true;
  row.age = IdCard(row.sfzh, 3);
  let sex = props.D_BZ_XB.find((v) => {
    return v.value == row.xbdm;
  });
  row.xbmc = sex ? sex.label : "";
  let origin = props.D_BZ_MZ.find((v) => {
    return v.value == row.mzdm;
  });
  row.mzmc = origin ? origin.label : "";
  dataValue.value = row;
  getDetail(dataValue.value.ryid);
}

// 查询记录数据
function getDetail(id) {
  getXljlList({ xfid: id }).then((res) => {
    tableData.value = res;
  });
}

// 新增-编辑
function add_edit(row, type) {
  recordsValue.value = true;
  if (type == "add") {
    titleValue.value = "新增";
  } else {
    titleValue.value = "编辑";
    addForm.value = Object.assign(row);
  }
}

//新增提交
function submit() {
  elform.value.validate((valid) => {
    if (valid) {
      loading.value = true;
      let data = addForm.value;
      let params = {
        ...addForm.value,
        id: dataValue.value.id,
        xfllId: dataValue.value.ryid
      };
      if (titleValue.value == "新增") {
        addXljl(params)
          .then((res) => {
            loading.value = false;
            ElMessage({ message: "新增成功", type: "success" });
            closeAdd();
            getDetail(dataValue.value.ryid);
          })
          .catch(() => {
            loading.value = false;
          });
      }

      if (titleValue.value == "编辑") {
        updateXljl(addForm.value)
          .then((res) => {
            ElMessage({ message: "编辑成功", type: "success" });
            closeAdd();
            getDetail(dataValue.value.ryid);
          })
          .catch(() => {
            loading.value = false;
          });
      }
    }
  });
}

// 关闭新增弹窗
function closeAdd() {
  addForm.value = JSON.parse(JSON.stringify(addFormDefault.value));
  recordsValue.value = false;
}

//删除人员
function delDictItem(id) {
  let ids = [id];
  proxy
    .$confirm("确定要删除", "警告", { type: "warning" })
    .then(() => {
      deleteXljl(ids).then((res) => {
        ElMessage({ message: "删除成功", type: "success" });
        getDetail(dataValue.value.ryid);
      });
    })
    .catch(() => {
      proxy.$message.info("已取消");
    });
}

// 关闭弹窗
function closed() {
  peopleValue.value = false;
  dataValue.value = {};
}
defineExpose({ init });
</script>

<style lang="scss" scoped>
@mixin boderLine() {
  border: 1px solid #136bff;
}
.cntBox {
  width: 100%;
  height: 64vh;
  overflow: hidden;
  overflow-y: auto;
  color: #fff;
  .cntbox-title {
    line-height: 40px;
    font-size: 16px;
    text-align: center;
  }
  .one-border {
    border-bottom: none;
  }
  .two-border {
    @include boderLine;
    border-top: none;
  }
  .cntInfo {
    display: flex;
    .left {
      width: 400px;
      @include boderLine;
      border-right: none;
      position: relative;
      .img {
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        margin: auto;
        width: 180px;
        height: 220px;
        background: #ccc;
        img {
          width: 180px;
          max-height: 220px;
        }
      }
    }
    @mixin boderc() {
      min-height: 40px;
      line-height: 26px;
      color: rgb(27, 189, 238);
      border-right: 1px solid #136bff;
      border-left: 1px solid #136bff;
    }
    .right {
      flex: 1;
      .rightItem {
        display: flex;
        align-items: center;
        @include boderLine;
        border-bottom: none;
        border-right: none;
        div {
          height: 100%;
          text-align: center;
        }
        .text {
          width: 200px;
        }
        .info {
          width: calc((100% - 400px) / 2);
          @include boderc;
        }
        .infoText {
          width: calc(100% - 200px);
          @include boderc;
        }
      }
      .rightItem:last-child {
        border-bottom: 1px solid #136bff;
      }
    }
  }
  .buns {
    text-align: right;
    padding: 8px 6px;
  }
}
</style>