<template>
  <div class="app-container">
    <div class="filter-container">
      <el-button
        class="filter-item"
        type="primary"
        icon="el-icon-edit"
        @click="handleCreate('IP')"
      >
        {{ $t('pages.requestBlacklist.action.addIp') }}
      </el-button>
      <el-button
        class="filter-item"
        type="primary"
        icon="el-icon-edit"
        @click="handleCreate('PHONE_MODEL')"
      >
        {{ $t('pages.requestBlacklist.action.addPhoneModel') }}
      </el-button>
    </div>
    <div v-loading="listLoading" class="content">
      <div v-for="(item, index) in list" :key="index">
        <div class="item">
          {{ item }}
          <i class="el-icon-delete-solid" @click="handlDel(item)" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  requestBlackList,
  addBlackListPhoneModel,
  addBlackListIP,
  delBlackList
} from '@/api/sys'
export default {
  data() {
    return {
      list: [],
      listQuery: {
        cursor: 1,
        limit: 20,
        sysOrigin: '',
        startTime: '',
        endTime: ''
      },
      listLoading: true
    }
  },
  created() {
    const that = this
    that.renderData()
  },
  methods: {
    renderData() {
      const that = this
      that.listLoading = true
      requestBlackList()
        .then(res => {
          that.listLoading = false
          const { body } = res
          that.list = body || []
        })
        .catch(er => {
          that.listLoading = false
        })
    },
    handlDel(content) {
      this.$confirm(
        this.$t('pages.requestBlacklist.confirm.delete'),
        this.$t('pages.requestBlacklist.confirm.title'),
        {
        type: 'warning'
        }
      )
        .then(() => {
          delBlackList(content).then(res => {
            this.$opsMessage.success()
            this.renderData()
          })
        })
        .catch(() => {})
    },
    handleCreate(type) {
      const that = this
      let tips = this.$t('pages.requestBlacklist.prompt.invalidType')
      if (type === 'IP') {
        tips = this.$t('pages.requestBlacklist.prompt.ipTip')
      }

      if (type === 'PHONE_MODEL') {
        tips = this.$t('pages.requestBlacklist.prompt.phoneModelTip')
      }
      this.$prompt(tips, this.$t('pages.requestBlacklist.prompt.title'), {
        confirmButtonText: this.$t('pages.requestBlacklist.prompt.confirm'),
        cancelButtonText: this.$t('pages.requestBlacklist.prompt.cancel')
      })
        .then(({ value }) => {
          if (type === 'IP') {
            addBlackListIP(value)
              .then(res => {
                that.$opsMessage.success()
                that.renderData()
              })
              .catch(er => {})
            return
          }

          if (type === 'PHONE_MODEL') {
            addBlackListPhoneModel(value)
              .then(res => {
                that.$opsMessage.success()
                that.renderData()
              })
              .catch(er => {})
            return
          }
          that.$opsMessage.fail(this.$t('pages.requestBlacklist.message.paramTypeError'))
        })
        .catch(() => {})
    }
  }
}
</script>

<style scoped lang="scss">
.content {
  .item {
    background-color: #9e9ee64f;
    color: #909399;
    margin-bottom: 5px;
    padding: 10px;
    border-radius: 5px;
    position: relative;
    i {
      font-size: 24px;
      cursor: pointer;
      color: #fa0e0e;
      position: absolute;
      right: 10px;
      top: 5px;
    }
  }
}
</style>
