<script>
import { get, post } from '../../../../utils/request'
import Warning from '@/components/icon/warning.vue'

export default {
  data () {
    return {
      formData: {
        memberName: '',
        memberTeam: '',
      },
      email: '',
      constMenberName: '',
      dialogVisible: false,
      teamList: [],
      clickSureSave: true,
      clickSubmitForm: true
    }
  },
  components:{Warning},
  created () {
    if (!Object.keys(this.$route.query).length) {
      return
    } else {
      this.email = this.$route.query.Email
      this.formData.memberName = this.$route.query.MemberName
      this.constMenberName = this.$route.query.MemberName
    }
    get('/pdf-tech/vppTeam/listWithAdmin').then((res)=>{
      if(res.data.code === 200){
        this.teamList = res.data.result
      }
    })
    get('/pdf-tech/vppRTeamMemberRole/getMemberTeam?memberId='+this.$route.query.Id).then((res)=>{
      if(res.data.code === 200){
        this.formData.memberTeam = res.data.result
      }
    })
  },
  methods: {
    // 提交表单
    submitForm () {
      if(this.clickSubmitForm){
        this.clickSubmitForm = false
        //限制点击
        setTimeout(() => {
          this.clickSubmitForm = true
        }, 2000)
        get('/pdf-tech/vppRTeamMemberRole/getMemberTeam?memberId='+this.$route.query.Id).then((res)=>{
          if(res.data.code === 200){
            if(this.formData.memberTeam !== res.data.result){
              this.dialogVisible = true
            } else if(this.formData.memberName !== this.constMenberName) {
              this.sureSave()
            } else {
              this.$router.push({name:'ManageMember'})
            }
          }
        })
      }
    },
    // 重置表单
    resetForm (formName) {
      this.$refs[formName].resetFields()
    },
    //确定编辑
    sureSave(){
      var urlencoded = new URLSearchParams()
      urlencoded.append("memberId", this.$route.query.Id)
      urlencoded.append("teamId", this.formData.memberTeam)
      urlencoded.append("name", this.formData.memberName)
      if(this.clickSureSave){
        this.clickSureSave = false
        post('/pdf-tech/vppTeam/editTeamMember',urlencoded).then((res)=>{
          //限制点击
          setTimeout(() => {
            this.clickSureSave = true
          }, 2000)
          if(res.data.code === 200){
            this.dialogVisible = false
            this.$message({
              duration: 5000,
              message: 'Modify Successfully',
              type: "success",
            })
            this.$router.push({name:'ManageMember'})
          }
        })
      }
    }
  },
  // 切换路由时清除本地存储数据
  beforeRouteLeave (to, from, next) {
    localStorage.removeItem('rowData')
    next()
  }
}
</script>

<template>
  <div>
    <h1>Manage Member</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>Member Name</span>
            <!-- <span class="text-[#FF5054]">*</span> -->
          </template>
          <el-input v-model="formData.memberName" class="under-border"></el-input>
        </el-form-item>
        <el-form-item label="Member Email">
          <el-input v-model="email" disabled style="width:300px;"></el-input>
        </el-form-item>
        <el-form-item>
          <template slot="label">
            <span>Team</span>
            <span class="text-[#FF5054]">*</span>
          </template>
            <el-select 
              v-model="formData.memberTeam" 
              filterable 
              placeholder="Product Designer" 
              style="width:300px;"
              >
              <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: 'ManageMember' }">
            <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 class="w-152px h-40px border-1 border-[#1460F3] rounded-8px bg-[#1460F3] text-center text-16px text-[#fff] font-700 leading-40px cursor-pointer hover:bg-[#3776f2]"
            @click="submitForm()">Save
          </div>
        </div> 
      </el-form>
    </div>
    <el-dialog
      title=""
      :visible.sync="dialogVisible"
      width="376px"
      center
      top="30vh"
      :show-close="false"
    >
      <Warning class="inline-block" />
      <div class="mt-16px text-16px leading-24px text-[#232A40]">
        <p>After removing the member,<br> you need to re-authorize them.</p>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">Cancel</el-button>
        <el-button type="primary" @click="sureSave">Remove</el-button>
      </span>
    </el-dialog>
  </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;
  }
}
</style>
