<template>
  <div class="projectect-attendance-drawer">
    <el-drawer
      v-if="isOpen"
      :visible.sync="isOpen"
      direction="rtl"
      size="30%"
      style="padding-left: 20px"
    >
      <template slot="title">
        <div>{{ title + " 【今日出勤】" }}</div>
      </template>
      <el-tabs v-model="activeName" style="padding-left: 20px" @tab-click="loadData">
        <el-tab-pane
          v-for="(it, idx) in nodes"
          :label="it.unitName + ''"
          :name="it.unitId + ''"
          :key="idx"
        ></el-tab-pane>
      </el-tabs>
      <el-form label-width="120px" ref="form" :rules="rules">
        <div
          style="
            padding: 8px 16px;
            background-color: #ecf8ff;
            border-radius: 4px;
            border-left: 5px solid #50bfff;
            margin: 20px;
          "
        >
          <el-form-item label="在册劳务人员" prop="servicePersonnel">
            <el-input style="width: 80%" v-model="vform.servicePersonnel" :disabled="true"
              ><i slot="suffix">人</i></el-input
            >
          </el-form-item>
          <el-form-item label="在册管理人员" prop="supervisorPersonnel">
            <el-input
              style="width: 80%"
              v-model="vform.supervisorPersonnel"
              :disabled="true"
              ><i slot="suffix">人</i></el-input
            >
          </el-form-item>
          <el-form-item label="在册总包人员" prop="contractorPersonnel">
            <el-input
              style="width: 80%"
              v-model="vform.contractorPersonnel"
              :disabled="true"
              ><i slot="suffix">人</i></el-input
            >
          </el-form-item>
        </div>
        <el-form-item label="劳务人员" prop="servicePersonnel">
          <el-input-number
            style="width: 80%"
            v-model="form.servicePersonnel"
            :min="0"
            :max="vform.servicePersonnel"
            label="请输入劳务人员"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="管理人员" prop="supervisorPersonnel">
          <el-input-number
            style="width: 80%"
            v-model="form.supervisorPersonnel"
            :min="0"
            :max="vform.supervisorPersonnel"
            label="请输入管理人员"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="总包人员" prop="contractorPersonnel">
          <el-input-number
            style="width: 80%"
            v-model="form.contractorPersonnel"
            :min="0"
            :max="vform.contractorPersonnel"
            label="请输入总包人员"
          ></el-input-number>
        </el-form-item>
      </el-form>
      <div style="text-align: center">
        <el-button type="primary" @click="doOk">确定</el-button>
        <el-button @click="doCanel">取消</el-button>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import {
  unitList,
  deptWroksViewData,
  updateProjectDeptWroks,
} from "@/api/project/projectDeptWroks";
import {
  listSurProjectAttendance,
  updateSurProjectAttendance,
} from "@/api/project/surProjectAttendance";

export default {
  name: "RuoyiUiProjectDeptWroksDrawer",
  data() {
    return {
      isOpen: false,
      project: null,
      title: "",
      nodes: [],
      vform: {
        servicePersonnel: 0,
        supervisorPersonnel: 0,
        contractorPersonnel: 0,
      },
      form: {
        servicePersonnel: null,
        supervisorPersonnel: null,
        contractorPersonnel: null,
      },
      rules: {},
      activeName: "",
    };
  },
  computed: {
    ...mapGetters(["dept"]),
  },
  mounted() {},

  methods: {
    doOk() {
      updateSurProjectAttendance(this.form).then((response) => {
        this.$modal.msgSuccess("保存成功");
        this.isOpen = false;
      });
    },
    doCanel() {
      this.isOpen = false;
    },
    show(project) {
      this.form.servicePersonnel = null;
      this.form.supervisorPersonnel = null;
      this.form.contractorPersonnel = null;
      this.project = project;
      this.title = project.projectName;
      this.isOpen = true;
      unitList({
        projectId: project.id,
        unitType: 2,
      }).then((d1) => {
        this.nodes = d1.rows;
        if (this.nodes.length > 0) {
          this.activeName = this.nodes[0].unitId + "";
          this.loadData();
        }
      });
    },
    loadData() {
      deptWroksViewData({
        projectId: this.project.id,
        nowDept: this.activeName,
      }).then((d2) => {
        this.vform = d2.rows[0];
      });
      listSurProjectAttendance({
        projectId: this.project.id,
        deptId: this.activeName,
        workDate: "" + new Date(),
      }).then((d3) => {
        if (d3.rows.length > 0) {
          this.form = d3.rows[0];
        } else {
          this.form.projectId = this.project.id;
          this.form.deptId = this.activeName;
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped></style>
