<template>
<Modal
  class="addRules"
    v-model="showModal"
    width='500px'
    @on-cancel="cancel"
  >
  <h2 class="application__h">{{ $t('create_new_rules') }}</h2>
     <Form ref="formValidate" :model="formValidate" :rules="ruleValidate">
        <FormItem class="formitem" :label="`${$t('api_service')}:`" prop="rights_service">
          <Select v-model="formValidate.rights_service" v-if="apiList.length" >
          <Option v-for="item in apiList" :value="item.value" :key="item.value">{{ item.title }}</Option>
          </Select>
        </FormItem>
        <FormItem class="formitem" :label="`${$t('grant')}:`" style="margin-bottom:0 !imoportant">
           <RadioGroup v-model="paramTypes">
              <Radio label="1">
                  <span>{{ `${$t('developer_role')}:` }}</span>
              </Radio>
              <Radio label="2">
                  <span>{{ $t('developer_account') }}</span>
              </Radio>
              <Radio label="3">
                  <span>{{ `${$t('developer_app')}:` }}</span>
              </Radio>
          </RadioGroup>
        </FormItem>
        <FormItem class="formitem" :label="$t('developer_role')" prop="member_type" v-if="paramTypes==='1'">
          <Select v-model="formValidate.member_type">
          <Option v-for="item in member_types" :value="item.level" :key="item.level">{{ item.name }}</Option>
          </Select>
        </FormItem>
        <FormItem class="formitem" :label="`${$t('developer_ID')}:`" prop="user_id" v-if="paramTypes==='2'">
          <Input :placeholder="$t('developer_ID')" v-model="formValidate.user_id"/>
        </FormItem>
        <FormItem class="formitem" :label="`${$t('developer_app')}:`" prop="app_key" v-if="paramTypes==='3'">
          <Input :placeholder="$t('developer_app_key')" v-model="formValidate.app_key"/>
        </FormItem>
        <FormItem class="formitem" prop="is_allow">
          <Checkbox class="label" v-model="formValidate.is_allow"  @on-change="toggle">{{ $t('assign_permissions') }}</Checkbox>
        </FormItem>
        <div class="tips">
          {{ $t('tips_from') }}
        </div>
    </Form>
  <div class="application__btn" slot="footer">
        <Button @click="cancel">{{ $t('cancel') }}</Button>
        <Button type="primary" @click="addRules">{{formValidate.app_key? $t('sure_modify') : $t('cancel') }}</Button>
    </div>
</Modal>
</template>
<script>
import { CreateNewRightsRule, ListAllRightsService } from '@/api/port'
import { getToken } from '@/libs/util'
export default {
  props: {
    member_types: {
      type: Array,
      default: () => [
        {
          level: '101',
          name: '企业开发者'
        },
        {
          key: '100',
          name: '个人开发者'
        }
      ]
    }
  },
  data () {
    return {
      showModal: false,
      token: getToken(),
      formValidate: {
        rights_service: '',
        member_type: '',
        user_id: '',
        app_key: '',
        is_allow: true
      },
      paramTypes: '1',
      apiList: []
    }
  },
  computed: {
    ruleValidate () {
      let { rights_service, member_type, user_id, app_key } = this.validateRules
      let rules = {}
      if (this.paramTypes === '1') {
        rules = { rights_service, member_type }
      } else if (this.paramTypes === '2') {
        rules = { rights_service, user_id }
      } else if (this.paramTypes === '3') {
        rules = { rights_service, app_key }
      }
      return rules
    },
    validateRules () {
      return {
        rights_service: [
          { required: true, message: this.$t('enter_role'), trigger: 'blur' }
        ],
        member_type: [
          { required: true, message: this.$t('enter_dev_role'), trigger: 'blur' }
        ],
        user_id: [
          { required: true, message: this.$t('developer_account_tips'), trigger: 'blur' }
        ],
        app_key: [
          { required: true, message: this.$t('enter_dev_app'), trigger: 'blur' }
        ]
      }
    }
  },
  created () {
    this.getApiList()
  },
  methods: {
    resetForm () {
      Object.assign(this.$data.formValidate, this.$options.data().formValidate)
      setTimeout(() => {
        this.$refs.formValidate.resetFields()
      }, 0)
    },
    getApiList () {
      let formdata = new FormData()
      formdata.append('access_token', this.token)
      ListAllRightsService(formdata).then(res => {
        let data = res.data.items
        let apiList = []
        data.forEach((o) => {
          let item = {}
          item.value = o.service
          item.title = `${o.service} - ${o.title}`
          apiList.push(item)
        })
        this.apiList = apiList
      })
    },
    cancel () {
      this.showModal = false
      this.resetForm()
    },
    show () {
      this.showModal = true
    },
    toggle () {
      this.formValidate.is_allow = !this.formValidate.is_allow
    },
    addRules () {
      // 做校验
      this.$refs.formValidate.validate((val) => {
        if (!val) {
          return this.$Modal.warning({ title: this.$t('tips'), content: this.$t('pls_fill_in_correctly') })
        }
        // 生成接口参数
        let formdata = this.initFormData()
        // 调用接口
        CreateNewRightsRule(formdata).then(res => {
          if (res.ret === 200 && res.data.is_add) {
            this.$Message.success(this.$t('creating_successful'))
            this.$emit('success')
            this.resetForm()
            this.showModal = false
          } else {
            this.$Message.warning(res.msg)
          }
        })
      })
    },
    initFormData () {
      let formdata = new FormData()
      formdata.append('access_token', this.token)
      formdata.append('rights_service', this.formValidate.rights_service)
      formdata.append('is_allow', this.formValidate.is_allow)
      this.paramTypes === '1'
        ? formdata.append('member_type', this.formValidate.member_type)
        : this.paramTypes === '2'
          ? formdata.append('user_id', this.formValidate.user_id)
          : formdata.append('app_key', this.formValidate.app_key)
      return formdata
    }
  }
}
</script>
<style lang="scss" scoped>
.addRules {
  .ivu-form-item {
    padding-left: 15px;
  }
  &__h{
    margin-bottom: 30px;
  }
  >>> .ivu-form-item-content{
    margin-left: 0;
  }

  .flexbox {
    display: flex;
    align-items: flex-end;
    .app_icon {
      width: 100px;
      height: 100px;
      object-fit: cover;
      margin-right: 15px;
      border-radius: 3px;
      border: #e4e4e6 1px solid;
    }
  }
  .tips {
    padding: 0 16px;
    color: #888;
  }
  .ivu-form-item {
    margin-bottom: 15px !important;
  }
  .ivu-modal-body {
    h2 {
      margin-bottom: 20px;
    }
  }
}
</style>
