<script>
import { get, post } from '../../../utils/request'

export default {
  data () {
    return {
      formData: {
        TeamAdmin: [],
      },
      email: '',
      memberId: '',
      teamList: [],
      click: true,
      memberRole: ''
    }
  },
  created () {
    if (!Object.keys(this.$route.query).length) {
      return
    } else {
      this.email = this.$route.query.Email
      this.memberId = this.$route.query.Id
    }
    get('/pdf-tech/vppTeam/listForAdminEdit',{
      memberId: this.memberId
    }).then((res)=>{
      if(res.data.code === 200){
        this.formData.TeamAdmin = res.data.result.manageTeamIds
        this.teamList = res.data.result.vppTeams
      }
    })
    get('/pdf-tech/vppMember/getMemberInfo').then((res)=>{
      if(res.data.code === 200){
        this.memberRole = res.data.result.role
      }
    })
  },
  methods: {
    // 提交表单
    submitForm () {
      if(this.click && this.memberRole?.indexOf("1") !== -1){
        this.click = false
        var urlencoded = new URLSearchParams()
        urlencoded.append("memberId", this.memberId)
        urlencoded.append("teamIds", this.formData.TeamAdmin)
        if (this.formData.TeamAdmin.length === 0) {
          this.$message.error({duration: 5000, message: 'Please choose a team'})
        } else {
          post( '/pdf-tech/vppTeam/editTeamAdmin',urlencoded ).then((res)=>{
            if(res.data.code === 200){
                this.$message({
                  duration: 5000,
                  message: 'Change Successfully',
                  type: "success",
                })
                this.$router.push("/manage-admin")
              }
          })
        }
        //限制点击
        setTimeout(() => {
          this.click = true
        }, 3000)
      }
    },
    // 重置表单
    resetForm (formName) {
      this.$refs[formName].resetFields()
    },
  },
  // 切换路由时清除本地存储数据
  beforeRouteLeave (to, from, next) {
    localStorage.removeItem('rowData')
    next()
  }
}
</script>

<template>
  <div>
    <h1>Edit Admin</h1>
    <div class="block mt-24px p-40px pr-50px">
      <el-form label-position="top" label-width="80px" :model="formData" ref="formData">
        <el-form-item>
          <template slot="label">
            <span>Admin Email</span>
            <!-- <span class="text-[#FF5054]">*</span> -->
          </template>
          <el-input v-model="email" disabled style="width:600px;"></el-input>
        </el-form-item>
        <el-form-item>
          <template slot="label">
            <span>Team to manage</span>
            <span class="text-[#FF5054]">*</span>
          </template>
            <el-select 
              v-model="formData.TeamAdmin" 
              filterable 
              multiple
              placeholder="Please choose a team" 
              style="width:600px;"
              >
              <el-option
                v-for="item in teamList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
        </el-form-item>  
        <div class="mt-32px flex">
          <router-link :to="{ name: 'manageAdmin' }">
            <div class="w-152px h-40px border-1 border-[#1460F3] rounded-8px text-center text-16px text-[#1460F3] font-700 leading-40px mr-16px hover:border-[#1460F3cc] hover:text-[#3776f2]"
              @click="resetForm('formData')">Cancel</div>
          </router-link>
          <div >
            <div class="w-152px h-40px border-1 border-[#1460F3] rounded-8px bg-[#1460F3] text-center text-16px text-[#fff] font-700 leading-40px hover:bg-[#3776f2] cursor-pointer"
              @click="submitForm()">Save</div>
          </div>
        </div> 
      </el-form>
    </div>
  </div>
</template>

<style lang="scss" scoped>
::v-deep .el-form-item {
  margin-bottom: 24px;
}
::v-deep .under-border .el-input__inner {
  border-top: none;
  border-left: none;
  border-right: none;
  border-radius: 0;
}
::v-deep.el-form--label-top .el-form-item__label {
  padding: 0 0 4px 12px;
  font-size: 14px;
  line-height: 20px;
  color: #232A40;
  font-weight: 700;
}
::v-deep .el-select {
  .el-input__inner {
    border-color: #D9D9D9;
  }
  .el-input .el-select__caret {
    color: #808185;
    font-weight: bold;
  }
  .el-tag {
    border-color: #8D9CB9;
    background-color: #EEF4FF;
    margin-left: 8px;
  }
  .el-tag.el-tag--info {
    color: #505258;
    font-size: 14px;
    padding-left: 4px;
  }
  .el-tag__close.el-icon-close {
    background-color: transparent;
    color: #8D9CB9;
    font-size: 20px;
    font-weight: bold;
  }
}

::v-deep .el-input.is-disabled .el-input__inner {
  background: #D9D9D9;
  color: #232A40;
}
</style>
