<template>
<div class="assignment-rules">
  <div class="search-section">
    <div class="search-item">
    <p class="title">{{ $t('api_service') }}：</p>
    <Input clearable :placeholder="$t('enter_api_service')" class="search-input" v-model="queryOpts.rights_service"/>
    </div>
    <div class="flexbox">
      <div class="search-item">
      <p class="title">{{ $t('member_type') }}：</p>
      <Select v-model="queryOpts.member_type" clearable class="search-col">
        <Option v-for="item in member_types" :value="item.level" :key="item.level">{{ item.name }}</Option>
      </Select>
      </div>
      <div class="search-item">
      <p class="title">{{ $t('account_id') }}：</p>
      <Input clearable :placeholder="$t('enter_dev_ID')" class="search-input" v-model="queryOpts.user_id"/>
      </div>
      <div class="search-item">
      <p class="title">app_key：</p>
      <Input clearable :placeholder="$t('enter_app_key')" class="search-input" v-model="queryOpts.app_key"/>
      </div>

    </div>
    <div class="flexbox">
      <Button class="button" @click="query" type="primary">{{ $t('search') }}</Button>
      <Button class="button" @click="addNewRule" type="success" plain>{{ $t('create_new_rules') }}</Button>
    </div>
  </div>
  <addNewRules ref="addRules" @success="query" :member_types="member_types"></addNewRules>
  <div class="dataList-container">
    <Table :columns="listHead" border :data="listData" :loading="loading">
      <template slot="member_type" slot-scope="{ row }">
        <span>{{member_type_name(row.member_type)}}</span>
      </template>
      <template slot="uid" slot-scope="{ row }">
        <span>{{row.uid===0?'-':row.uid}}</span>
      </template>
      <template slot="app_key" slot-scope="{ row }">
        <span>{{row.app_key===''?'-':row.app_key}}</span>
      </template>
      <template slot="is_allow" slot-scope="{ row }">
        <div :class="row.is_allow ? 'toggle-red' : 'toggle-blue'" @click="toggleAssign(row)">{{row.is_allow? $t('repeal') : $t('designate') }}</div>
      </template>
      <template slot="operation" slot-scope="{ row, index }">
        <Button @click="handelDelRule(row,index)" size="small">{{ $t('delete') }}</Button>
      </template>
    </Table>
  </div>
  <div class="pagination">
    <Page :total="total" show-elevator show-sizer @on-page-size-change='changeSize' @on-change='changePage'/>
  </div>
</div>
</template>
<script>
import { SearchRightsList, AssignRightsOrNotById, DelelteRightsRule } from '@/api/port'
import addNewRules from './components/addRules.vue'
import { getToken } from '@/libs/util'
export default {
  components: {
    addNewRules
  },
  data () {
    return {
      total: 0,
      queryOpts: {
        access_token: getToken(),
        rights_service: '',
        member_type: '',
        user_id: '',
        app_key: '',
        page: 1,
        perpage: 10
      },
      listData: [],
      member_types: [],
      listHead: [
        {
          title: this.$t('api_service'),
          key: 'service'
        },
        {
          title: this.$t('member_type'),
          slot: 'member_type',
          align: 'center'
        },
        {
          title: this.$t('account_id'),
          slot: 'uid',
          align: 'center'
        },
        {
          title: this.$t('application_app_key'),
          slot: 'app_key',
          align: 'center'
        },
        {
          title: this.$t('state_authority'),
          slot: 'is_allow',
          align: 'center'
        },
        {
          title: this.$t('operation'),
          slot: 'operation',
          align: 'center'
        }
      ],
      loading: true
    }
  },
  created () {
    this.query()
  },
  methods: {
    changeSize (size) {
      this.queryOpts.perpage = size
      this.query()
    },
    changePage (page) {
      this.queryOpts.page = page
      this.query()
    },
    query () {
      this.loading = true
      let formdata = new FormData()
      let params = this.queryOpts
      for (const k in params) {
        if (params[k]) {
          formdata.append(k, params[k])
        }
      }
      SearchRightsList(formdata).then(res => {
        this.listData = res.data.items
        this.total = res.data.total
        let dev_types = res.data.dev_types
        dev_types.forEach(o => {
          o.level += ''
        })
        this.member_types = res.data.dev_types
        this.loading = false
      })
    },
    member_type_name (level) {
      if (level === 0) {
        return '-'
      }
      let name = ''
      if (!this.member_types.length) {
        return false
      }
      this.member_types.forEach((obj) => {
        if (obj.level === level) {
          name = obj.name
        }
      })
      return name
    },
    addNewRule () {
      this.$refs.addRules.show()
    },
    toggleAssign (row) {
      let that = this
      let is_allow = row.is_allow
      let operate = is_allow ? this.$t('designate') : this.$t('repeal')
      this.$Modal.confirm({
        title: this.$t('prompt_for_action'),
        content: this.$t('switch_permission_status') + ` ${operate}`,
        onOk () {
          let data = new FormData()
          data.append('access_token', that.queryOpts.access_token)
          data.append('id', row.id)
          AssignRightsOrNotById(data).then(res => {
            if (res.ret === 200) {
              that.$Message.success(is_allow ? that.$t('assigned_to_success') : that.$t('revocation_of_success'))
              that.$set(row, 'is_allow', !is_allow)
            }
          })
        },
        onCancel () {
          return false
        }
      })
    },
    handelDelRule (row, index) {
      let that = this
      let id = row.id

      this.$Modal.confirm({
        title: this.$t('prompt_for_action'),
        content: this.$t('is_delete_rule') + '？',
        onOk () {
          that.delRule(id, index)
        },
        onCancel () {
          return false
        }
      })
    },
    delRule (id, index) {
      let data = new FormData()
      let that = this
      data.append('access_token', this.queryOpts.access_token)
      data.append('id', id)
      DelelteRightsRule(data).then(res => {
        if (res.ret === 200 && res.data.is_deleted) {
          that.$Message.success(this.$t('successfully_delete'))
          this.$delete(this.listData, index)
        }
      })
    }
  }
}
</script>
<style lang="scss">
.assignment-rules{
  .search-section {
    padding: 20px;
    background: #fff;
    border-radius: 10px;
    .search-item {
    display: flex;
    width: 270px;
    margin-right: 20px;
    margin-bottom: 10px;
    .title {
      min-width: 70px;
      text-align: right;
      font-size: 13px;
      line-height: 30px;
    }
    .search-item:last-child{
      margin-right: 0px;
    }
    }
    .flexbox {
      display: flex;

      .button {
        width: 100px;
        margin-right: 8px;
      }
    }
  }
  .toggle-blue {
    color: blue;
    cursor: pointer;
  }
  .toggle-red {
    color: red;
    cursor: pointer;
  }
  .dataList-container {
    margin-top: 20px;
    border-radius: 10px;
    background: #fff;
  }
  .pagination {
    margin-top: 30px;
    display: flex;
    justify-content: flex-end;
  }
}
</style>
