<template>
  <div v-loading="loading">
    <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px">
      <el-form-item label="时间" prop="date">
        <el-date-picker
          v-model="ruleForm.date"
          value-format="yyyy-MM"
          type="month"
          placeholder="请选择时间"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="部门" prop="department">
        <el-cascader
          v-model="ruleForm.department"
          placeholder="请选择部门"
          clearable
          change-on-select
          :props="prop"
          :options="departmentData"
        ></el-cascader>
      </el-form-item>
      <el-form-item label="团队" prop="team">
        <el-select v-model="ruleForm.team" clearable placeholder="请选择团队">
          <el-option
            v-for="item in teamData"
            :key="item.F_Id"
            :label="item.F_Name"
            :value="item.F_Id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="是否更新" prop="isUpdate">
        <el-select v-model="ruleForm.isUpdate" clearable placeholder="请选择是否更新">
          <el-option value="0" label="全部未更新"></el-option>
          <el-option value="1" label="强制更新"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm">保存</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {
  addTeamPerformance,
  getTeamPerformanceDetail,
} from "@/api/reportFormManagement/teamPerformance/teamPerformance";
import { getDepartmentList } from "@/api/systemSetup/roleSetting/department";
import { getTeamLists } from "@/api/systemSetup/sysSetting/teamManagement";
import { filterContent } from "@/utils";

export default {
  name: "AddOrEdit",
  props: {
    rowid: {
      type: String,
      default: "",
    },
    layerid: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      ruleForm: {
        id: "",
        date: "",
        department: [],
        team: "",
        isUpdate: "",
      },
      departmentData: [], //部门数据
      rules: {
        date: [
          {
            required: true,
            message: "请选择时间!",
            trigger: "change",
          },
        ],
        department: [
          {
            required: true,
            message: "请选择部门!",
            trigger: "change",
          },
        ],
        team: [
          {
            required: true,
            message: "请选择团队!",
            trigger: "change",
          },
        ],
      },
      prop: {
        label: "F_DeptName",
        value: "F_DeptId",
        children: "children",
      },
      teamData: [], //团队数据
      loading: false,
    };
  },
  created() {
    this.getDepartment();
    this.getTeam();
    if (this.rowid) {
      this.ruleForm.id = this.rowid;
      this.getDetail(this.rowid);
    }
  },
  methods: {
    submitForm() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.loading = true;
          const datas = {
            date: this.ruleForm.date,
            teamid: this.ruleForm.team,
            deptid: this.ruleForm.department[
              this.ruleForm.department.length - 1
            ],
            isstrong: this.ruleForm.isUpdate,
          };

          // 添加
          if (!this.rowid) {
            addTeamPerformance(datas)
              .then((response) => {
                this.loading = false;
                if (response.state.toLowerCase() === "success") {
                  this.$parent.$layer.close(this.layerid);
                  this.$parent.getList(); // 重新加载父级数据
                  this.$message.success("恭喜你，团队绩效添加成功!");
                }
              })
              .catch(() => {
                this.loading = false;
              });
            return;
          }
        } else {
          this.$message.error("请输入有效的必填项信息!");
          return false;
        }
      });
    },
    resetForm() {
      this.$refs.ruleForm.resetFields();
    },
    // 获取详情
    getDetail(rid) {
      getTeamPerformanceDetail(rid).then((response) => {
        if (response.state.toLowerCase() === "success") {
          const res = response.data;
          this.ruleForm.state = res.F_State;
        }
      });
    },
    //获取部门信息
    getDepartment() {
      getDepartmentList().then((response) => {
        response.map((item) => {
          if (item.F_DeptId == "1") {
            this.departmentData.push(item);
          }
        });
        this.departmentData.unshift(
          {
            F_DeptId: 0,
            F_DeptName: "全部",
          },
          {
            F_DeptId: -1,
            F_DeptName: "不更新",
          }
        );
      });
    },
    //获取团队信息
    getTeam() {
      const params = {
        pageindex: 1,
        pagesize: 100,
        deptid:'1'
      };
      getTeamLists(params).then((response) => {
        if (response.state == "success") {
          this.teamData = response.data.Rows;
          this.teamData.unshift(
            {
              F_Id: 0,
              F_Name: "全部",
            },
            {
              F_Id: -1,
              F_Name: "不更新",
            }
          );
        }
      });
    },
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.date_picker {
  width: 100%;
}
div.date_picker input.el-range-input {
  width: 46%;
}
</style>
