<template>

  <el-dialog :title="topTitle" :visible.sync="show" :width="popWidth" :close-on-click-modal="false"
    :before-close="handleClose" append-to-body>

    <!-- 修改ID -->
    <el-form v-if="type == 'ID'" :model="showIdForm" :rules="showRules" label-width="80px">
      <el-form-item label="输入新ID" prop="showId">
        <el-input v-model="showIdForm.showId" placeholder="输入新ID"></el-input>
      </el-form-item>
      <span>当前ID：{{obj ? obj.showId : ''}}</span>
    </el-form>

    <!-- 修改VIP财富值 -->
    <el-form v-if="type == 'Value'" :model="valueForm" :rules="valueRules" label-width="80px">
      <div class="layout_v" style="margin-bottom: 16px;">
        <span class="self_center">当前财富值:{{obj ? obj.value : 0}} 当前等级:{{obj ? obj.vipName : '--'}}</span>
      </div>
      <el-form-item label="修改方式" prop="isAdd">
        <el-select v-model="valueForm.isAdd" placeholder="请修改方式" @change="onValueChange">
          <el-option label="增加" :value="true"></el-option>
          <el-option label="减少" :value="false"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="修改数量" prop="amount">
        <el-input v-model="valueForm.amount" placeholder="输入修改数量" :min="1" type="number" @change="onValueChange">
        </el-input>
      </el-form-item>
      <div class="layout_v" style="margin-top: 16px;">
        <span class="self_center">修改后财富值:{{afterValue}} 修改后等级:{{valueForm.nowName}}</span>
      </div>
    </el-form>

    <!-- 修改成长值 -->
    <el-form v-if="type == 'Growth'" :model="growthForm" :rules="growthRules" label-width="80px">
      <div class="layout_v" style="margin-bottom: 16px;">
        <span class="self_center">当前成长:{{obj ? obj.growthValue : 0}} 当前等级:{{obj ? obj.growthName : '--'}}</span>
      </div>
      <el-form-item label="修改方式" prop="isAdd">
        <el-select v-model="growthForm.isAdd" placeholder="请修改方式" @change="onGrowthChange">
          <el-option label="增加" :value="true"></el-option>
          <el-option label="减少" :value="false"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="修改数量" prop="amount">
        <el-input v-model="growthForm.amount" placeholder="输入修改数量" :min="1" type="number" @change="onGrowthChange">
        </el-input>
      </el-form-item>
      <div class="layout_v" style="margin-top: 16px;">
        <span class="self_center">修改后成长:{{afterValue}} 修改后等级:{{growthForm.nowName}}</span>
      </div>
    </el-form>

    <!-- 设为推广员 -->
    <div v-if="type == 'PromoteTrue'" class="layout_v" style="width: 100%;">
      <span class="self_center">是否将选中的用户设为推广员？</span>
    </div>

    <!-- 取消推广员 -->
    <div v-if="type == 'PromoteFalse'" class="layout_v" style="width: 100%;">
      <span class="self_center">是否取消选中用户的推广员身份？</span>
    </div>

    <!-- 修改邀请用户 -->
    <el-form v-if="type == 'Invitor'" :model="invitorForm" :rules="invitorRules" label-width="120px">
      <el-form-item label="修改邀请用户" prop="superId">
        <el-select
          v-model="invitorForm.superId"
          clearable
          filterable
          remote
          reserve-keyword
          placeholder="请输入ID,手机号或昵称"
          :remote-method="remoteMethod"
          :loading="searching">
          <el-option v-for="item in invitorForm.users" :key="item.id" :label="item.nickname + '-' + item.phone + '-' + item.showId" :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <div class="layout_v" style="margin-top: 16px;">
        <span class="self_center">当前邀请用户: {{obj ? (obj.superName + '-' + obj.superPhone + '-' + obj.superShowId) : '--'}}</span>
      </div>
    </el-form>

    <!-- 修改A币 -->
    <el-form v-if="type == 'A'" :model="aForm" :rules="aRules" label-width="80px">
      <div class="layout_v" style="margin-bottom: 16px;">
        <span class="self_center">当前A币:{{obj ? obj.a : 0}}</span>
      </div>
      <el-form-item label="修改方式" prop="isAdd">
        <el-select v-model="aForm.isAdd" placeholder="请修改方式">
          <el-option label="增加" :value="true"></el-option>
          <el-option label="减少" :value="false"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="修改数量" prop="amount">
        <el-input v-model="aForm.amount" placeholder="输入修改数量" :min="1" type="number">
        </el-input>
      </el-form-item>
      <div class="layout_v" style="margin-top: 16px;">
        <span class="self_center">修改后A币:{{afterValue}}</span>
      </div>
    </el-form>

    <!-- 修改B币 -->
    <el-form v-if="type == 'B'" :model="bForm" :rules="bRules" label-width="80px">
      <div class="layout_v" style="margin-bottom: 16px;">
        <span class="self_center">当前B币:{{obj ? obj.b : 0}}</span>
      </div>
      <el-form-item label="修改方式" prop="isAdd">
        <el-select v-model="bForm.isAdd" placeholder="请修改方式">
          <el-option label="增加" :value="true"></el-option>
          <el-option label="减少" :value="false"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="修改数量" prop="amount">
        <el-input v-model="bForm.amount" placeholder="输入修改数量" :min="1" type="number">
        </el-input>
      </el-form-item>
      <div class="layout_v" style="margin-top: 16px;">
        <span class="self_center">修改后B币:{{afterValue}}</span>
      </div>
    </el-form>

    <!-- 修改用户权限 -->
    <div class="layout_v" v-if="type == 'Permission'" v-loading="loading">
      <template v-for="(item, index) in permissionForm.groups">
        <el-checkbox :style="{marginTop: index > 0 ? '16px' : '0px'}" :indeterminate="item.isIndeterminate" v-model="item.checkAll" @change="(val) => { handlePermissionAll(val, index) }">
        <span style="font-weight: 700;">{{item.groupName}}</span>
        </el-checkbox>
        <el-checkbox-group style="margin-top: 16px;" v-model="item.checked" @change="(val) => { handleSubChecked(val, index) }">
          <el-checkbox v-for="permission in item.permissions" :label="permission.tag" :key="permission.tag">{{permission.name}}</el-checkbox>
        </el-checkbox-group>
      </template>
    </div>

    <!-- 禁用 -->
    <div v-if="type == 'Block'" class="layout_v" style="width: 100%;">
      <span class="self_center">是否禁用选中用户，禁用后用户将不能再使用app？</span>
    </div>

    <!-- 启用 -->
    <div v-if="type == 'UnBlock'" class="layout_v" style="width: 100%;">
      <span class="self_center">是否启用选中用户？</span>
    </div>

    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" :loading="loading" @click="onSubmit">确 认</el-button>
    </span>

  </el-dialog>

</template>

<script>
  import {
    changeShowId,
    changeValue,
    changeGrowth,
    changePromote,
    changeInvitor,
    changeA,
    changeB,
    changePermission,
    changeStatus,
    getValueInfo,
    getTaskInfo,
    getUserPermissions,
    quickSearch
  } from '@/api/userMgt/userMgt.js'
  import {
    ZmMixin
  } from '@/mixins/ZmMixin.js'


  export default {
    mixins: [ZmMixin],
    props: {
      show: Boolean,
      type: String,
      obj: Object
    },
    data() {
      return {
        loading: false,
        searching: false,
        showRules: {
          showId: [{
            required: true,
            message: '请输入新ID',
            trigger: 'blur'
          }]
        },
        valueRules: {
          isAdd: [{
            required: true,
            message: '请选择修改方式',
            trigger: 'blur'
          }],
          amount: [{
            required: true,
            message: '请输入修改数量',
            trigger: 'blur'
          }]
        },
        growthRules: {
          isAdd: [{
            required: true,
            message: '请选择修改方式',
            trigger: 'blur'
          }],
          amount: [{
            required: true,
            message: '请输入修改数量',
            trigger: 'blur'
          }]
        },
        invitorRules: {
          superId: [{
            required: true,
            message: '请选择新的邀请用户',
            trigger: 'blur'
          }]
        },
        aRules: {
          isAdd: [{
            required: true,
            message: '请选择修改方式',
            trigger: 'blur'
          }],
          amount: [{
            required: true,
            message: '请输入修改数量',
            trigger: 'blur'
          }]
        },
        bRules: {
          isAdd: [{
            required: true,
            message: '请选择修改方式',
            trigger: 'blur'
          }],
          amount: [{
            required: true,
            message: '请输入修改数量',
            trigger: 'blur'
          }]
        },
        showIdForm: {
          showId: ''
        },
        valueForm: {
          isAdd: true,
          amount: 0,
          nowName: '--'
        },
        growthForm: {
          isAdd: true,
          amount: 0,
          nowName: '--'
        },
        invitorForm: {
          superId: '',
          users: []
        },
        aForm: {
          isAdd: true,
          amount: 0,
        },
        bForm: {
          isAdd: true,
          amount: 0,
        },
        permissionForm: {
          groups: []
        }
      }
    },
    computed: {
      popWidth() {
        if (this.type == 'ID') {
          return "400px"
        } else if (this.type == 'Value') {
          return "400px"
        } else if (this.type == 'Growth') {
          return "400px"
        } else if (this.type == 'PromoteTrue') {
          return '500px'
        } else if (this.type == 'PromoteFalse') {
          return '500px'
        } else if (this.type == 'Invitor') {
          return '500px'
        } else if (this.type == 'A') {
          return "400px"
        } else if (this.type == 'B') {
          return "400px"
        } else if (this.type == 'Permission') {
          return "40%"
        } else if (this.type == 'Block') {
          return '500px'
        } else if (this.type == 'UnBlock') {
          return '500px'
        }
        return "50%"
      },
      topTitle() {
        if (this.type == 'ID') {
          return "修改ID"
        } else if (this.type == 'Value') {
          return "修改VIP财富值"
        } else if (this.type == 'Growth') {
          return "修改成长值"
        } else if (this.type == 'PromoteTrue') {
          return '提示'
        } else if (this.type == 'PromoteFalse') {
          return '提示'
        } else if (this.type == 'Invitor') {
          return '修改邀请用户'
        } else if (this.type == 'A') {
          return "修改A币"
        } else if (this.type == 'B') {
          return "修改B币"
        } else if (this.type == 'Permission') {
          return "用户权限"
        } else if (this.type == 'Block') {
          return '禁用用户'
        } else if (this.type == 'UnBlock') {
          return '启用用户'
        }
        return ""
      },
      afterValue() {
        if (this.type == 'Value') {
          let r = parseFloat(this.obj.growthValue) + parseFloat((this.growthForm.isAdd ? this.growthForm.amount : (-this
            .growthForm.amount)))
          return parseInt(r)
        } else if (this.type == 'Growth') {
          let r = parseFloat(this.obj.growthValue) + parseFloat((this.growthForm.isAdd ? this.growthForm.amount : (-this
            .growthForm.amount)))
          return parseInt(r)
        } else if (this.type == 'A') {
          let r = parseFloat(this.obj.a) + parseFloat((this.aForm.isAdd ? this.aForm.amount : (-this
            .aForm.amount)))
          return this.remain(r)
        } else if (this.type == 'B') {
          let r = parseFloat(this.obj.b) + parseFloat((this.bForm.isAdd ? this.bForm.amount : (-this
            .bForm.amount)))
          return this.remain(r)
        }
      }
    },
    watch: {
      show(n, o) {
        if(n && this.type == 'Permission') {
          this.loading = true
          getUserPermissions({userId: this.obj.id})
          .then(r => {
            this.loading = false
            let z = this.zmRes(r)
            if(z) {
              z.forEach(it => {
                let granted = it.permissions.filter(r => { return r.grant })
                let all = it.permissions.length != 0 && granted.length == it.permissions.length
                it.isIndeterminate = granted.length > 0 && granted < it.permissions.length
                it.checkAll = all
                it.checked = it.permissions.filter(r => { return r.grant }).map(r => { return r.tag })
              })
              this.permissionForm.groups = z
            }
          })
          .catch(e => {
            this.loading = false
          })
        }
      }
    },
    methods: {
      onValueChange(v) {
        this.valueForm.nowName = "计算中..."
        getValueInfo({
            value: this.afterValue
          })
          .then(r => {
            let z = this.zmRes(r)
            if (z) {
              this.valueForm.nowName = z.vipSubName
            }
          }).catch(e => {
            this.valueForm.nowName = "计算失败"
          })
      },
      onGrowthChange(v) {
        this.growthForm.nowName = "计算中..."
        getTaskInfo({
            value: this.afterValue
          })
          .then(r => {
            let z = this.zmRes(r)
            if (z) {
              this.growthForm.nowName = z.levelName
            }
          }).catch(e => {
            this.growthForm.nowName = "计算失败"
          })
      },
      remoteMethod(keyword) {
        if(keyword == undefined || keyword == '' || this.searching) {
          return
        }
        this.searching = true
        quickSearch({keyword: keyword, current: 1, size: 10})
        .then(r => {
          this.searching = false
          let z = this.zmRes(r)
          if(z) {
            this.invitorForm.users = z.records || []
          }
        })
        .catch(e => {
          this.searching = false
        })
      },
      // 权限全选
      handlePermissionAll(val, index) {
        let group = this.permissionForm.groups[index]
        let permissons = group.permissions.map(r => r.tag)
        group.checked = val ? permissons : []
        group.isIndeterminate = false
      },
      // 权限子选
      handleSubChecked(val, index) {
        let count = val.length
        let group = this.permissionForm.groups[index]
        group.checkAll = count == group.permissions.length
        group.isIndeterminate = count > 0 && count < group.permissions.length
      },
      checkParams() {
        if (this.type == 'ID') {
          let showId = this.showIdForm.showId
          if (showId == '' || showId == undefined) {
            this.warn("请填写ID")
            return undefined
          }
          return {
            showId: this.showIdForm.showId
          }
        } else if (this.type == 'Value') {
          let amount = this.valueForm.amount
          if (amount == undefined || amount < 0) {
            this.warn("请填写正确的数量")
            return undefined
          }
          return {
            isAdd: this.valueForm.isAdd,
            amount: amount
          }
        } else if (this.type == 'Growth') {
          let amount = this.growthForm.amount
          if (amount == undefined || amount < 0) {
            this.warn("请填写正确的数量")
            return undefined
          }
          return {
            isAdd: this.growthForm.isAdd,
            amount: amount
          }
        } else if (this.type == 'PromoteTrue') {
          return {
            isPromote: true
          }
        } else if (this.type == 'PromoteFalse') {
          return {
            isPromote: false
          }
        } else if (this.type == 'Invitor') {
          let superId = this.invitorForm.superId
          if(superId == undefined || superId == '') {
            this.warn("请选择邀请用户")
            return undefined
          }
          return {
            superId: superId
          }
        } else if (this.type == 'A') {
          let amount = this.aForm.amount
          if(amount == undefined || amount == '') {
            this.warn("请填写修改数量")
            return undefined
          }
          return {
            isAdd: this.aForm.isAdd,
            amount: amount
          }
        } else if (this.type == 'B') {
          let amount = this.bForm.amount
          if(amount == undefined || amount == '') {
            this.warn("请填写修改数量")
            return undefined
          }
          return {
            isAdd: this.bForm.isAdd,
            amount: amount
          }
        } else if (this.type == 'Permission') {
          let tags = []
          this.permissionForm.groups.forEach(r => {
            tags = tags.concat(r.checked)
          })
          return {
            tags: tags.join(',')
          }
        } else if (this.type == 'Block') {
          return {
            isBlock: true
          }
        } else if (this.type == 'UnBlock') {
          return {
            isBlock: false
          }
        }
        return undefined
      },
      handleClose() {
        this.$emit('close')
      },
      onSubmit() {
        let req = undefined
        let query = {
          id: this.obj.id
        }
        let params = this.checkParams()
        if (params == undefined) {
          return
        }
        query = {
          ...query,
          ...params
        }
        if (this.type == 'ID') {
          req = changeShowId
        } else if (this.type == 'Value') {
          req = changeValue
        } else if (this.type == 'Growth') {
          req = changeGrowth
        } else if (this.type == 'PromoteTrue') {
          req = changePromote
        } else if (this.type == 'PromoteFalse') {
          req = changePromote
        } else if (this.type == 'Invitor') {
          req = changeInvitor
        } else if (this.type == 'A') {
          req = changeA
        } else if (this.type == 'B') {
          req = changeB
        } else if (this.type == 'Permission') {
          req = changePermission
        } else if (this.type == 'Block') {
          req = changeStatus
        } else if (this.type == 'UnBlock') {
          req = changeStatus
        }
        if(req == undefined) {
          return
        }
        this.loading = true
        req(query).then(r => {
          this.loading = false
          let z = this.zmRes(r)
          if (z) {
            this.$emit('success')
          }
        }).catch(e => {
          this.loading = false
        })
      }
    }
  }
</script>

<style scope>
</style>
