<template>
  <div class="app-container">

    <div class="filter-container">
      <el-select
        v-model="listQuery.sysOrigin"
        :placeholder="$t('pages.userCustomGift.filter.system')"
        style="width:120px;"
        class="filter-item"
        @change="changeSysOrigin"
      >
        <el-option
          v-for="item in permissionsSysOriginPlatforms"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
          <span style="float: left;"> <sys-origin-icon :icon="item.value" :desc="item.value" /></span>
          <span style="float: left;margin-left:10px">{{ item.label }}</span>
        </el-option>
      </el-select>
      <div class="filter-item">
        <account-input
          v-model="listQuery.userId"
          :sys-origin="listQuery.sysOrigin"
          :placeholder="$t('pages.userCustomGift.filter.userId')"
        />
      </div>
      <el-select
        v-model="listQuery.approveStatus"
        :placeholder="$t('pages.userCustomGift.filter.status')"
        style="width: 120px"
        class="filter-item"
        clearable
        @change="handleSearch"
      >
        <el-option :label="$t('pages.userCustomGift.status.pending')" :value="0" />
        <el-option :label="$t('pages.userCustomGift.status.processed')" :value="1" />
      </el-select>
      <el-select
        v-model="listQuery.customType"
        :placeholder="$t('pages.userCustomGift.filter.type')"
        style="width: 120px"
        class="filter-item"
        clearable
        @change="handleSearch"
      >
        <el-option :label="$t('pages.userCustomGift.type.uploadGift')" :value="'UPLOAD_GIFT'" />
        <el-option :label="$t('pages.userCustomGift.type.increaseTime')" :value="'INCREASE_TIME'" />
      </el-select>
      <el-select
        v-model="listQuery.region"
        v-loading="loading"
        :placeholder="$t('pages.userCustomGift.filter.region')"
        style="width:120px;"
        class="filter-item"
        clearable
        @change="handleSearch"
      >
        <el-option
          v-for="(item, index) in regions"
          :key="index"
          :label="item.regionName"
          :value="item.id"
        />
      </el-select>
      <el-button
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        @click="handleSearch"
      >
        {{ $t('pages.userCustomGift.action.search') }}
      </el-button>
    </div>
    <el-table
      v-loading="listLoading"
      :data="list"
      :element-loading-text="$t('pages.userCustomGift.loading')"
      fit
      highlight-current-row
      @cell-mouse-enter="handleMouseEnter"
    >
      <el-table-column :label="$t('pages.userCustomGift.table.system')" align="center">
        <template slot-scope="scope">
          <sys-origin-icon :icon="scope.row.sysOrigin" :desc="scope.row.sysOrigin" />
        </template>
      </el-table-column>
      <el-table-column :label="$t('pages.userCustomGift.table.user')" align="center" min-width="150">
        <template slot-scope="scope">
          <user-table-exhibit :user-profile="scope.row.userBaseInfo" :query-details="true" />
        </template>
      </el-table-column>
      <el-table-column prop="regionNameStr" :label="$t('pages.userCustomGift.table.region')" align="center" />
      <el-table-column :label="$t('pages.userCustomGift.table.type')" align="center">
        <template slot-scope="scope">
          <div>
            <el-tag v-if="scope.row.customType === 'UPLOAD_GIFT'">{{ $t('pages.userCustomGift.type.uploadGift') }}</el-tag>
            <el-tag v-else-if="scope.row.customType === 'INCREASE_TIME'">{{ $t('pages.userCustomGift.type.increaseTime') }}</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="giftCode" :label="$t('pages.userCustomGift.table.giftCode')" align="center" />
      <el-table-column prop="quantity" :label="$t('pages.userCustomGift.table.days')" align="center" />
      <el-table-column width="200" :label="$t('pages.userCustomGift.table.approveStatus')" align="center" min-width="100">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.approveStatus"
            :active-value="true"
            :inactive-value="false"
            @change="handleSwitchChange(scope.row)"
          />
        </template>
      </el-table-column>
      <el-table-column prop="createTime" :label="$t('pages.userCustomGift.table.createdAt')" align="center" min-width="100">
        <template slot-scope="scope">
          {{ scope.row.createTime | dateFormat }}
        </template>
      </el-table-column>
      <el-table-column fixed="right" :label="$t('pages.userCustomGift.table.actions')" align="center" width="400">
        <template slot-scope="scope">
          <a class="resourceUrl" @click="downloadFile(scope.row.coverOneUrl)">{{ $t('pages.userCustomGift.action.downloadImage', { index: 1 }) }}</a>
          <a class="resourceUrl" @click="downloadFile(scope.row.coverTwoUrl)">{{ $t('pages.userCustomGift.action.downloadImage', { index: 2 }) }}</a>
          <a class="resourceUrl" @click="downloadFile(scope.row.coverThreeUrl)">{{ $t('pages.userCustomGift.action.downloadImage', { index: 3 }) }}</a>
          <a class="resourceUrl" @click="downloadFile(scope.row.songSourceUrl)">{{ $t('pages.userCustomGift.action.downloadSong') }}</a>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.cursor"
      :limit.sync="listQuery.limit"
      @pagination="renderData"
    />
  </div>
</template>

<script>
import { pageUserCustomGift, switchStatus } from '@/api/user'
import Pagination from '@/components/Pagination'
import { sysOriginPlatforms } from '@/constant/origin'
import { mapGetters } from 'vuex'
import { regionConfigTable } from '@/api/sys'

export default {
  components: { Pagination },
  data() {
    return {
      thatRow: {},
      sysOriginPlatforms,
      loading: false,
      regions: [],
      list: [],
      total: 0,
      listQuery: {
        cursor: 1,
        limit: 20,
        approveStatus: 0,
        sysOrigin: 'HALAR',
        region: '',
        customType: '',
        userId: ''
      },
      textOptTitle: '',
      listLoading: true
    }
  },
  computed: {
    ...mapGetters(['permissionsSysOriginPlatforms'])
  },
  created() {
    const that = this
    const querySystem = this.permissionsSysOriginPlatforms[0]
    if (!querySystem) {
      return
    }
    that.listQuery.sysOrigin = querySystem.value
    this.listRegion()
    that.renderData()
  },
  methods: {
    renderData(isClean) {
      const that = this
      if (isClean === true) {
        this.listQuery.cursor = 1
        this.listQuery.list = []
      }
      that.listLoading = true
      pageUserCustomGift(that.listQuery).then(res => {
        const { body } = res
        that.total = body.total || 0
        that.list = body.records
        that.listLoading = false
      })
    },
    listRegion() {
      const that = this
      that.loading = true
      regionConfigTable({ 'sysOrigin': that.listQuery.sysOrigin }).then(res => {
        that.regions = res.body || []
        that.loading = false
      }).catch(er => {
        that.loading = false
      })
    },
    handleSearch() {
      this.renderData(true)
    },
    renderDataSuccess() {
      this.$message({
        message: this.$t('pages.userCustomGift.message.success'),
        type: 'success'
      })
      this.renderData()
    },
    changeSysOrigin() {
      this.listRegion()
      this.handleSearch()
    },
    queryUserDetails(row) {
      this.userDeatilsDrawer = true
      this.thatSelectedUserId = row.id
    },
    handleMouseEnter(row) {
      this.thatRow = row
    },
    handleSwitchChange(row) {
      switchStatus(row.id, row.approveStatus)
        .then(res => {
          this.renderData()
        })
        .catch(er => {
          row.approveStatus = !row.approveStatus
        })
    },
    downloadFile(resource) {
      if (!resource) {
        this.$message({
          message: this.$t('pages.userCustomGift.message.resourceNotUploaded'),
          type: 'error'
        })
        return
      }
      const fileUrl = resource
      const link = document.createElement('a')
      link.href = fileUrl
      link.style.display = 'none'
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link)
    }
  }
}
</script>
<style scoped lang="scss">
.resourceUrl{
  color: rgb(72, 144, 247);
}
</style>
