<template>
  <el-dialog
    :title="!dataForm.id ? '新建团队' : '编辑团队'"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :visible.sync="visible"
    :show-close="false"
    lock-scroll
    class="JNPF-dialog JNPF-dialog_center"
    fullscreen
  >
    <el-form
      ref="dataForm"
      :model="dataForm"
      :roles="dataRule"
      label-width="80px"
      v-loading="formLoading"
      class="menuForm"
    >
      <el-form-item label="团队名称" prop="name">
        <el-input v-model="dataForm.name" placeholder="输入名称" />
      </el-form-item>

      <el-form-item label="团队成员" prop="bodyText">
        <div class="" style="margin-bottom: 10px;">
          <el-button type="primary" icon="el-icon-plus" @click="addPerson()"
            >新增成员</el-button
          >
        </div>
        <JNPF-table
          v-loading="formLoading"
          :data="dataForm.userInfo"
          :key="tamptime"
          height="500"
        >
          <el-table-column prop="userLabel" label="名字" />
          <el-table-column prop="leader" label="是否组长">
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.leader"
                active-color="#1890ff"
                inactive-color="#c0c4cc"
                disabled
                @change="leaderChange(scope.row)"
              >
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column prop="role" label="角色">
            <template slot-scope="scope">
              <span>{{ findRoleLabel(scope.row.teamRole) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="150" fixed="right">
            <template slot-scope="scope">
              <tableOpts
                @edit="editPerson(scope.row)"
                @del="deleteRow(scope.$index)"
              >
              </tableOpts>
            </template>
          </el-table-column>
        </JNPF-table>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="formCancel">{{ $t("common.cancelButton") }}</el-button>
      <el-button type="primary" :loading="btnLoading" @click="dataFormSubmit()">
        {{ $t("common.confirmButton") }}</el-button
      >
    </span>
    <PersonForm
      v-if="formVisible"
      ref="personForm"
      @addPersonData="addPersonData"
    />
  </el-dialog>
</template>

<script>
import iconBox from "@/components/JNPF-iconBox";
import {
  addOrEditSysTeam,
  getTeamDetail
} from "@/api/governmentCloud/serviceTeamManage/serviceTeamManage";
import { getDictionaryDataSelector } from "@/api/systemData/dictionary";

import PersonForm from "./personForm.vue";

export default {
  components: { iconBox },
  data() {
    return {
      visible: false,
      dataForm: {
        name: "",
        teamId: "",
        type: "",
        userInfo: []
      },
      dataRule: {
        name: [{ required: true, message: "团队名称不能为空", trigger: "blur" }]
      },
      formLoading: false,
      btnLoading: false,
      roles: [],
      formVisible: false,
      tamptime: null
    };
  },
  components: {
    PersonForm
  },
  async mounted() {
    this.formLoading = true;
    this.roles = await this.getRoles();
    this.formLoading = false;
  },
  methods: {
    init(type, row, id) {
      this.visible = true;
      this.dataForm.type = type;
      this.tamptime = new Date().valueOf();

      if (type == "1") {
        this.dataForm = {
          name: "",
          teamId: "",
          type: "1",
          userInfo: []
        };
      }
      if (type !== "1") {
        this.dataForm.teamId = id || "";
        if (row) {
          this.dataForm.name = row.name || "";
        }
        this.$nextTick(() => {
          if (this.dataForm.teamId) {
            this.formLoading = true;
            getTeamDetail({ id: this.dataForm.teamId })
              .then(res => {
                // this.dataForm.userInfo = res.data.records;
                this.dataForm = res.data[0];
                this.dataForm.teamId = this.dataForm.id;
                delete this.dataForm.id;
                this.dataForm.type = type;
                this.$nextTick(() => {
                  this.formLoading = false;
                });
              })
              .catch(() => {});
          } else {
          }
        });
      }
    },
    dataFormSubmit() {
      this.$refs["dataForm"].validate(valid => {
        if (valid) {
          addOrEditSysTeam(this.dataForm)
            .then(res => {
              this.$message({
                message: res.msg,
                type: "success",
                duration: 1500,
                onClose: () => {
                  this.visible = false;
                  this.btnLoading = false;
                  this.$emit("refreshDataList");
                }
              });
            })
            .catch(() => {
              this.btnLoading = false;
            });
        }
      });
    },
    deleteRow(index) {
      this.dataForm.userInfo.splice(index, 1);
    },
    leaderChange(row) {
      if (row.leader) {
        this.dataForm.userInfo.map(item => {
          if (item.userLabel !== row.userLabel) {
            item.leader = false;
          }
        });
      }
    },
    getRoles() {
      return new Promise((resolve, reject) => {
        getDictionaryDataSelector("teamRole").then(res => {
          resolve(res.data.list);
        });
      });
    },
    findRoleLabel(value) {
      let label = "";
      this.roles.map(item => {
        if (item.enCode == value) {
          label = item.fullName;
        }
      });
      return label;
    },
    // 新增成员
    addPerson() {
      this.formVisible = true;
      this.$nextTick(() => {
        this.$refs.personForm.init("add");
      });
    },
    addPersonData(row, type) {
      // 重选组长
      if (row.leader) {
        this.dataForm.userInfo.map(item => {
          if (item.userLabel !== row.userLabel) {
            item.leader = false;
          }
        });
      }

      if (this.dataForm.userInfo.length == 0) {
        row.leader = true;
      }

      // 修改或新增
      if (type == "add") {
        this.dataForm.userInfo.push(row);
      } else {
        this.dataForm.userInfo.map((item, index) => {
          if (item.userKey == row.userKey) {
            this.dataForm.userInfo[index] = { ...row };
          }
        });
      }
      this.tamptime = new Date().valueOf();
    },
    // 编辑成员
    editPerson(row) {
      this.formVisible = true;
      this.$nextTick(() => {
        this.$refs.personForm.init("edit", row);
      });
    },
    //关闭弹窗
    formCancel() {
      this.$confirm("退出后将不会保留修改, 是否继续?", "提示", {
        type: "warning"
      })
        .then(() => {
          this.visible = false;
        })
        .catch(() => {});
    }
  }
};
</script>
