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

export default {
  data() {
    return {
      active: 0,
      singleAssign: '',
      singleProduct: '',
      teamAssign: '',
      teamProduct: '',
      memberId: '',
      teamList: [],
      memberList: [],
      productList: [],
      singleLoading: false,
      teamLoading: false,
      click: true
    }
  },
  mounted() {
    //获取团队列表
    get('/pdf-tech/vppTeam/listWithAdmin').then((res) => {
      this.teamList = res.data.result
    })
  },
  watch: {
    singleAssign: {
      handler(val) {
        if (val) {
          this.memberId = []
          this.singleProduct = []
          //获取成员列表
          get(
            '/pdf-tech/vppRTeamMemberRole/listByTeamId?teamId=' +
              this.singleAssign
          ).then((res) => {
            this.memberList = res.data.result
          })
          //获取产品列表
          get(
            '/pdf-tech/product/listWithSimpleInfo?teamId=' + this.singleAssign
          ).then((res) => {
            this.productList = productListNameMapping(res.data.result)
          })
        }
      }
    },
    teamAssign: {
      handler(val) {
        if (val) {
          this.memberId = []
          this.teamProduct = []
          //获取成员列表
          get(
            '/pdf-tech/vppRTeamMemberRole/listByTeamId?teamId=' +
              this.singleAssign
          ).then((res) => {
            this.memberList = res.data.result
          })
          //获取产品列表
          get(
            '/pdf-tech/product/listWithSimpleInfo?teamId=' + this.teamAssign
          ).then((res) => {
            this.productList = productListNameMapping(res.data.result)
          })
        }
      }
    }
  },
  methods: {
    assignLicense() {
      if (!this.click) {
        return
      }
      this.click = false
      setTimeout(() => {
        this.click = true
      }, 2000)
      if (
        this.singleAssign === '' ||
        this.memberId === '' ||
        this.memberId == undefined ||
        this.memberId == null ||
        this.memberId.length <= 0 ||
        this.singleProduct === '' ||
        this.singleProduct == undefined ||
        this.singleProduct == null ||
        this.singleProduct.length <= 0
      ) {
        this.$message.error({
          message: 'Missing required information',
          duration: 5000
        })
        return
      }
      if (this.singleLoading) return
      this.singleLoading = true
      var urlencoded = new URLSearchParams()
      urlencoded.append('memberIds', this.memberId)
      urlencoded.append('teamId', this.singleAssign)
      urlencoded.append('productIds', this.singleProduct)
      post('/pdf-tech/vppLicenseCode/singleAssign', urlencoded).then((res) => {
        setTimeout(() => {
          this.singleLoading = false
        }, 2000)
        if (res.data.code === 200 && res.data.msg == ' Assign Success！') {
          this.$message({
            duration: 5000,
            message: 'Assign Successfully',
            type: 'success'
          })
          this.$router.push({ name: 'licenseManage' })
        } else if (
          res.data.code === 700 &&
          res.data.msg ==
            'Please add the user to a team which has remaining license first'
        ) {
          this.$message.error({
            duration: 5000,
            message: 'Please assign more license to the team'
          })
        } else if (
          res.data.code === 700 &&
          res.data.msg == 'Please allocate more license to the team first'
        ) {
          this.$message.error({
            duration: 5000,
            message: 'Please assign more license to the team'
          })
        }
      })
    },
    assignTeamLicense() {
      if (!this.click) {
        return
      }
      this.click = false
      setTimeout(() => {
        this.click = true
      }, 2000)
      if (
        this.teamAssign === '' ||
        this.teamProduct === '' ||
        this.teamProduct == undefined ||
        this.teamProduct == null ||
        this.teamProduct.length <= 0
      ) {
        this.$message.error({
          duration: 5000,
          message: 'Missing required information'
        })
        return
      }
      if (this.teamLoading) return
      this.teamLoading = true
      var urlencoded = new URLSearchParams()
      urlencoded.append('teamId', this.teamAssign)
      urlencoded.append('productIds', this.teamProduct)
      post('/pdf-tech/vppLicenseCode/teamAssign', urlencoded).then((res) => {
        setTimeout(() => {
          this.teamLoading = false
        }, 2000)
        if (res.data.code === 200 && res.data.msg == ' Assign Success！') {
          this.$message({
            duration: 5000,
            message: 'Assign Successfully',
            type: 'success'
          })
          this.$router.push({ name: 'licenseManage' })
        } else if (
          res.data.code === 700 &&
          res.data.msg ==
            'Please add the user to a team which has remaining license first'
        ) {
          this.$message.error({
            duration: 5000,
            message: 'Please assign more license to the team'
          })
        } else if (
          res.data.code === 700 &&
          res.data.msg == 'Please allocate more license to the team first'
        ) {
          this.$message.error({
            duration: 5000,
            message: 'Please assign more license to the team'
          })
        }
      })
    }
  }
}
</script>

<template>
  <div>
    <h1 class="text-28px leading-40px mb-15px font-700">Assign License</h1>
    <div class="flex">
      <span
        class="flex justify-center bg-[#C6C9CC] rounded-t-8px items-center font-bold w-200px h-32px hand"
        @click="active = 0"
        :class="active === 0 ? 'active' : ''"
        >Single License</span
      >
      <span
        class="flex justify-center bg-[#C6C9CC] rounded-t-8px items-center font-bold w-200px h-32px ml-8px hand"
        @click="active = 1"
        :class="active === 1 ? 'active' : ''"
        >Team License</span
      >
    </div>
    <div class="bg-[#fff] card">
      <el-form
        label-position="top"
        label-width="100px"
        class="p-40px"
        v-show="active === 0"
      >
        <el-form-item prop="userName" class="required">
          <span slot="label" class="label"
            >Team<span class="text-[#FF5054]">*</span></span
          >
          <el-select
            v-model="singleAssign"
            placeholder="Team Name"
            class="w-600px"
          >
            <el-option
              v-for="item in teamList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="email" class="w-600px required">
          <span slot="label" class="label"
            >Email<span class="text-[#FF5054]">*</span></span
          >
          <el-select
            v-model="memberId"
            multiple
            placeholder="Select Email"
            class="w-600px"
          >
            <el-option
              v-for="item in memberList"
              :key="item.id"
              :label="item.email"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <span slot="label" class="label"
            >Product<span class="text-[#FF5054]">*</span></span
          >
          <el-select
            v-model="singleProduct"
            multiple
            placeholder="Select Product"
            class="w-600px"
          >
            <el-option
              v-for="item in productList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <button
            type="button"
            @click="$router.push({ name: 'licenseManage' })"
            class="w-168px h-48px border-1px border-[#1460F3] text-[#1460F3] rounded-8px font-bold hover:opacity-80"
          >
            Cancel
          </button>
          <button
            type="button"
            @click="assignLicense()"
            class="w-168px h-48px ml-16px bg-[#1460F3] text-[#fff] rounded-8px font-bold hover:opacity-80"
          >
            Assign
          </button>
        </el-form-item>
      </el-form>
      <el-form
        label-position="top"
        label-width="100px"
        inline-message
        class="p-40px"
        v-show="active === 1"
      >
        <el-form-item prop="userName" class="required">
          <span slot="label" class="label"
            >Team<span class="text-[#FF5054]">*</span></span
          >
          <el-select
            v-model="teamAssign"
            placeholder="Team Name"
            class="w-600px"
          >
            <el-option
              v-for="item in teamList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <span slot="label" class="label"
            >Product<span class="text-[#FF5054]">*</span></span
          >
          <el-select
            v-model="teamProduct"
            multiple
            placeholder="Select Product"
            class="w-600px"
          >
            <el-option
              v-for="item in productList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <button
            type="button"
            @click="$router.go(-1)"
            class="w-168px h-48px border-1px border-[#1460F3] text-[#1460F3] rounded-8px font-bold hover:opacity-80"
          >
            Cancel
          </button>
          <button
            type="button"
            @click="assignTeamLicense()"
            class="w-168px h-48px ml-16px bg-[#1460F3] text-[#fff] rounded-8px font-bold hover:opacity-80"
          >
            Assign
          </button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.hand {
  cursor: pointer;
}
.el-form-item::v-deep label {
  color: #232a40 !important;
}
.active {
  color: #1460f3;
  background-color: #fff;
}
.card {
  border-radius: 8px;
  border-top-left-radius: 0px;
}
.el-input::v-deep input {
  border: 0px !important;
  border-bottom: 1px solid #d9d9d9 !important;
  border-radius: 6px !important;
}
.username::v-deep input {
  border-radius: 0px !important;
}
.email::v-deep input {
  border: 0px !important;
}
.required::v-deep label::before {
  display: none;
}
.el-form-item::v-deep label {
  font-weight: 700;
  padding: 0;
  margin-left: 8px;
}
</style>

<style lang="scss">
.el-tag__close {
  font-weight: 700;
  font-size: 18px !important;
  color: #8d9cb9 !important;
  background-color: #eef4ff !important;
}
</style>