<template>
<Modal
  class="addService"
    v-model="showModal"
    width='500px'
    @on-cancel="cancel"
  >
  <h2 class="application__h">{{ $t('add_api_operation') }}</h2>
     <Form ref="formValidate" :model="formValidate" :rules="validateRules">
        <FormItem class="formitem" :label="api_service" prop="rights_service">
          <Input v-model="formValidate.rights_service" :placeholder="$t('api_format')" />
        </FormItem>
        <FormItem class="formitem" :label="desc" prop="service_desc">
          <Input v-model="formValidate.service_desc" :placeholder="$t('description_item')" />
        </FormItem>
        <div class="tips">
          {{ $t('tips_service') }}
        </div>
    </Form>
  <div class="application__btn" slot="footer">
        <Button @click="cancel">{{ $t('cancel') }}</Button>
        <Button type="primary" @click="addService">{{ $t('add') }}</Button>
    </div>
</Modal>
</template>
<script>
import { ListAllRightsService, AddRightsService } from '@/api/port'
import { getToken } from '@/libs/util'
export default {
  data () {
    return {
      showModal: false,
      token: getToken(),
      formValidate: {
        rights_service: '',
        service_desc: ''
      },
      paramTypes: '1',
      member_types: [
        {
          key: '101',
          title: this.$t('company_dev')
        },
        {
          key: '100',
          title: this.$t('personal_dev')
        }
      ],
      api_service: this.$t('api_service'),
      desc: this.$t('desc'),
      apiList: [],
      validateRules: {
        rights_service: [
          { required: true, message: this.$t('enter_service_name'), trigger: 'blur' }
        ],
        service_desc: [
          { required: true, message: this.$t('enter_service_desc'), 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
    },
    addService () {
      // 做校验
      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()
      // 调用接口
      AddRightsService(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('service_desc', this.formValidate.service_desc)
      return formdata
    }
  }
}
</script>
<style lang="scss" scoped>
.addService {
  .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>
