<template>
  <div class="app-container">
    <el-row :gutter="20" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          >新增</el-button
        >
      </el-col>
    </el-row>

    <el-table v-loading="loading" :data="tableData">
      <el-table-column label="序号" type="index" />
      <el-table-column label="规则名称" prop="ruleName" width="180">
      </el-table-column>
      <el-table-column label="年假起算方式" prop="calculationMethod">
        <template slot-scope="scope">
          <span v-if="scope.row.calculationMethod == 1">
            自然年（每年1月1日统一生成）
          </span>
          <span v-if="scope.row.calculationMethod == 2"> 入职周年 </span>
        </template>
      </el-table-column>
      <el-table-column label="年假发放规则" prop="annualLeaveTiers">
        <template slot-scope="scope">
          <span v-if="scope.row.annualLeaveTiers == 5"> 入职满一年（5天) </span>
          <span v-if="scope.row.annualLeaveTiers == 10">
            入职满10年（10天)
          </span>
          <span v-if="scope.row.annualLeaveTiers == 15">
            入职满20年（15天）
          </span>
          <span v-if="scope.row.annualLeaveTiers == 0">
            年假天数 = 入职当年剩余日历天数 / 365 × 5
          </span>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        width="220"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="editRuleConfig(scope.row)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="text"
            @click="deleteRuleConfig(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="960px" append-to-body>
      <el-form
        :model="formData"
        :rules="rules"
        ref="groupForm"
        label-position="top"
      >
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="规则名称" prop="ruleName">
              <el-input
                v-model="formData.ruleName"
                placeholder="请输入规则名称"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="生成周期" prop="generationCycle">
              <el-radio
                disabled
                v-model="formData.generationCycle"
                :label="true"
              >
                每年1月1日自动生成（自然年）</el-radio
              >
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="年假起算方式" prop="calculationMethod">
              <el-select
                v-model="formData.calculationMethod"
                placeholder="请选择年假起算方式"
                style="width: 100%"
              >
                <el-option
                  v-for="item in calculationMethods"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                  :disabled="item.disabled"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="年假发放规则">
              <el-select
                v-model="formData.annualLeaveTiers"
                placeholder="请选择年假发放规则"
                style="width: 100%"
              >
                <el-option
                  v-for="item in annualLeaveTierss"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                  :disabled="item.disabled"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 
        <el-form-item label="年假有效期" prop="validityPeriod">
          <el-radio disabled v-model="formData.validityPeriod" :label="true"
            >当前年</el-radio
          >
        </el-form-item> 
        -->

        <!-- 
        <el-form-item label="可否请半天年假" prop="allowHalfDay">
          <el-col :span="24">
            <el-switch
              v-model="formData.allowHalfDay"
              active-text="允许"
              inactive-text="不允许"
              disabled
              @change="handleLateChange"
            ></el-switch>
          </el-col>
        </el-form-item> 
        -->
        <!-- <el-col :span="12">
            <el-form-item label="适用范围" prop="applicableRange">
              <el-switch
                v-model="formData.applicableRange"
                active-text="全员"
                inactive-text="指定员工"
                @change="handleApplicableRange"
              ></el-switch>
            </el-form-item>
          </el-col> -->

        <el-form-item v-if="!formData.applicableRange" label="关联员工">
          <el-button
            type="primary"
            size="small"
            @click="openUserSelectionDialog"
          >
            <i class="el-icon-plus"></i> 选择员工
          </el-button>

          <el-table
            :data="formData.members"
            empty-text="暂无关联员工"
            height="400px"
            size="mini"
            style="margin-top: 20px"
          >
            <el-table-column type="index" label="序号"></el-table-column>
            <el-table-column prop="userName" label="员工编号"></el-table-column>
            <el-table-column prop="nickName" label="员工姓名"></el-table-column>
            <el-table-column prop="deptName" label="部门"></el-table-column>
            <el-table-column label="操作" width="80">
              <template #default="scope">
                <el-button
                  type="text"
                  @click="deleteRow(scope.$index, formData.members)"
                >
                  取消关联
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button
          :loading="buttonLoading"
          type="primary"
          @click="createNewGroup"
          >保 存</el-button
        >
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <sys-dept-user
      :propUserList="copyUserList"
      ref="userCopyRef"
      @confirmUser="confirmCopyUser"
    />
  </div>
</template>

<script>
import { ruleList, addRule, delRule } from "@/api/oa/leave/annual";

import SysDeptUser from "@/views/components/user/sys-dept-user";
export default {
  name: "AnnualRules",
  components: { SysDeptUser },
  data() {
    return {
      copyUserList: [],
      // 按钮loading
      buttonLoading: false,
      // 遮罩层
      loading: true,
      // 总条数
      total: 0,
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },

      // 表单验证规则
      rules: {},
      // 提示信息
      calculationMethods: [
        { value: 1, label: "自然年（每年1月1日统一生成）", disabled: false },
        { value: 2, label: "入职周年", disabled: true },
      ],
      formData: {
        ruleName: "",
        calculationMethod: 1,
        annualLeaveTiers: 0,
        validityPeriod: true,
        allowHalfDay: false,
        applicableRange: false,
        generationCycle: true,
        members: [],
      },

      annualLeaveTierss: [
        {
          value: 0,
          label: "默认规则（年假天数 = 入职当年剩余日历天数 / 365 × 5）",
          disabled: false,
        },
        { value: 5, label: "入职满一年（5天）", disabled: true },
        { value: 10, label: "入职满10年（10天）", disabled: true },
        { value: 15, label: "入职满20年（15天）", disabled: true },
      ],
      tableData: [],
      applicableRangeFlag: false,
    };
  },
  computed: {},
  mounted() {
    this.getList();
  },
  methods: {
    deleteRow(index, rows) {
      rows.splice(index, 1);
    },
    confirmCopyUser(data) {
      this.formData.members = data.map((item) => ({
        ...item,
        deptName: item.dept && item.dept.deptName,
      }));
      this.$refs.userCopyRef.visible = false;
    },
    // 加载数据
    getList() {
      ruleList(this.queryParams).then((response) => {
        this.tableData = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },

    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "新增";
    },

    reset() {
      this.formData = {
        ruleName: "",
        calculationMethod: 1,
        annualLeaveTiers: 0,
        validityPeriod: true,
        allowHalfDay: false,
        applicableRange: false,
        generationCycle: true,
        members: [],
      };
    },

    // 创建年假规则
    createNewGroup() {
      addRule(this.formData).then((res) => {
        this.open = false;
        this.getList();
      });
    },

    // 编辑区域
    editRuleConfig(formData) {
      this.open = true;
      this.title = "编辑";
      this.formData = { ...formData };
    },

    // 删除
    deleteRuleConfig(formData) {
      this.$confirm("确定删除该规则吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        delRule(formData).then((res) => {
          this.getList();
        });
      });
    },

    // 打开员工选择对话框
    openUserSelectionDialog() {
      this.$refs.userCopyRef.visible = true;
      if (this.formData.members.length === 0) {
        this.copyUserList = [];
      } else {
        this.copyUserList = this.formData.members.map((item) => item.userId);
      }
    },

    // 取消按钮
    cancel() {
      this.open = false;
      this.applicableRangeFlag = false;
      this.reset();
    },
  },
};
</script>
