<template>
  <div class="app-container">
    <div class="filter-container">
      <el-select
        v-model="listQuery.sysOrigin"
        :placeholder="$t('pages.userReportApproval.filter.system')"
        style="width: 120px"
        class="filter-item"
        @change="handleSearch"
      >
        <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>
      <el-select
        v-model="listQuery.approvalStatus"
        :placeholder="$t('pages.userReportApproval.filter.status')"
        style="width: 120px"
        class="filter-item"
        @change="handleSearch"
      >
        <el-option
          v-for="item in reportStatus"
          :key="item.value"
          :label="reportStatusName(item.value)"
          :value="item.value"
        />
      </el-select>
      <el-select
        v-model="listQuery.reportType"
        :placeholder="$t('pages.userReportApproval.filter.reportType')"
        clearable
        style="width: 120px"
        class="filter-item"
      >
        <el-option
          v-for="item in reportTypes"
          :key="item.value"
          :label="reportTypeName(item.value)"
          :value="item.value"
        />
      </el-select>
      <div class="filter-item">
        <account-input
          v-model="listQuery.reportUserId"
          :sys-origin="listQuery.sysOrigin"
          :placeholder="$t('pages.userReportApproval.filter.reporterId')"
        />
      </div>
      <div class="filter-item">
        <account-input
          v-model="listQuery.reportedUserId"
          :sys-origin="listQuery.sysOrigin"
          :placeholder="$t('pages.userReportApproval.filter.reportedUserId')"
        />
      </div>
      <div class="filter-item">
        <el-date-picker
          v-model="rangeDate"
          value-format="timestamp"
          :picker-options="pickerOptions"
          type="datetimerange"
          :range-separator="$t('pages.userReportApproval.date.rangeSeparator')"
          :start-placeholder="$t('pages.userReportApproval.date.start')"
          :end-placeholder="$t('pages.userReportApproval.date.end')"
        />
      </div>
      <el-select
        v-model="listQuery.updateUserId"
        :placeholder="$t('pages.userReportApproval.filter.adminMember')"
        style="width: 120px"
        class="filter-item"
        clearable
        filterable
        @change="handleSearch"
      >
        <el-option
          v-for="(item, index) in members"
          :key="index"
          :label="item.nickname"
          :value="item.id"
        />
      </el-select>
      <el-button
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        @click="handleSearch"
      >
        {{ $t('pages.userReportApproval.action.search') }}
      </el-button>
    </div>
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      fit
      highlight-current-row
      default-expand-all
      @selection-change="selsUserChange"
    >
      <el-table-column type="expand">
        <template slot-scope="scope">
          <el-row class="row-expand">
            <el-col :span="24" class="expand-col">
              <div class="flex-l">
                <div>
                  <user-table-exhibit :user-profile="scope.row.reportUser" />
                </div>
                <div style="margin: 0px 20px;"><el-tag>{{ $t('pages.userReportApproval.tag.report') }}</el-tag></div>
                <div>
                  <user-table-exhibit :user-profile="scope.row.reportedUser" />
                </div>
                <div style="margin: 0px 20px;"><el-tag>{{ $t('pages.userReportApproval.tag.suspected') }}</el-tag></div>
                <div>{{ scope.row.reportTypeName }}</div>
              </div>
            </el-col>
            <el-col :span="24" class="expand-col">
              <div class="cursor-pointer">
                <div
                  v-if="
                    scope.row.origin !== 'SHORT_VIDEO' &&
                      handleImageUrls(scope.row).length > 0
                  "
                >
                  <div class="flex-l">
                    <div
                      v-for="(item, index) in handleImageUrls(scope.row)"
                      :key="index"
                      class="feedback-img"
                      style="margin-right: 10px;"
                    >
                      <el-image
                        :src="item"
                        :preview-src-list="handleImageUrls(scope.row)"
                      />
                    </div>
                  </div>
                </div>
              </div>
            </el-col>

            <el-col :span="24" class="expand-col">
              <div class="cursor-pointer">
                <div
                  v-if="handleVideoUrls(scope.row).length > 0"
                  style="width: 120px;margin-right: 10px;"
                  class="flex-l"
                >
                  <div
                    v-for="(item, index) in handleVideoUrls(scope.row)"
                    :key="index"
                    class="video-info"
                  >
                    <video
                      style="width:50px;height:50px;"
                      :src="item"
                      muted
                      @click="handleVideoOpenClick(item)"
                    />
                    <div class="video-icon" @click="handleVideoOpenClick(item)">
                      <i class="el-icon-video-play" />
                    </div>
                  </div>
                </div>
              </div>
            </el-col>

            <el-col :span="24" class="expand-col">
              {{ $t('pages.userReportApproval.label.reportContent') }}: {{ scope.row.reportedContent }}
            </el-col>
            <el-col v-if="scope.row.updateNickname" :span="24">
              {{ $t('pages.userReportApproval.label.latestHandler') }}: {{ scope.row.updateNickname }}
            </el-col>
          </el-row>
        </template>
      </el-table-column>
      <el-table-column
        v-if="listQuery.approvalStatus === 0"
        type="selection"
        width="55"
      />

      <el-table-column
        prop="reportTypeName"
        :label="$t('pages.userReportApproval.table.reportType')"
        align="center"
        min-width="100"
      />
      <el-table-column
        prop="createTime"
        :label="$t('pages.userReportApproval.table.createTime')"
        align="center"
        width="200"
      >
        <template slot-scope="scope">
          {{ scope.row.createTime | dateFormat }}
        </template>
      </el-table-column>
      <el-table-column
        prop="updateTime"
        :label="$t('pages.userReportApproval.table.updateTime')"
        align="center"
        width="200"
      >
        <template slot-scope="scope">
          {{ scope.row.updateTime | dateFormat }}
        </template>
      </el-table-column>
      <el-table-column :label="$t('pages.userReportApproval.table.actions')" align="center" width="100">
        <template slot-scope="scope">
          <el-button
            type="text"
            @click="accountHanle(scope.row)"
          >{{ $t('pages.userReportApproval.action.accountHandle') }}</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div
      v-if="listQuery.approvalStatus === 0"
      style="text-align:center;padding: 20px;"
    >
      <el-collapse>
        <el-collapse-item>
          <template slot="title">
            {{ $t('pages.userReportApproval.description.title') }}&nbsp;<i class="header-icon el-icon-info" />
          </template>
          <div style="text-align:left;">
            <p>
              {{ $t('pages.userReportApproval.description.noDirectAction') }}
            </p>
            <p>
              {{ $t('pages.userReportApproval.description.valid') }}
            </p>
            <p>{{ $t('pages.userReportApproval.description.invalid') }}</p>
          </div>
        </el-collapse-item>
      </el-collapse>
      <div style="padding:5px;font-size:14px;color:#909399">
        {{ $t('pages.userReportApproval.label.selectedCount') }}:<span style="color:#F00">{{ checkList.length }}</span>
      </div>
      <el-button
        class="filter-item"
        type="primary"
        icon="el-icon-folder-checked"
        @click="pass"
      >
        {{ $t('pages.userReportApproval.action.valid') }}
      </el-button>

      <el-button
        class="filter-item"
        type="danger"
        icon="el-icon-folder-delete"
        @click="notpass"
      >
        {{ $t('pages.userReportApproval.action.invalid') }}
      </el-button>
    </div>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.cursor"
      :limit.sync="listQuery.limit"
      @pagination="renderData"
    />

    <user-deatils-drawer
      v-if="userDeatilsDrawer"
      :user-id="thatSelectedUserId"
      @close="userDeatilsDrawer = false"
    />
    <account-hanle
      v-if="accountHandleVisible"
      :user-id="thatSelectedUserId"
      @success="renderDataSuccess"
      @close="accountHandleVisible = false"
    />
  </div>
</template>

<script>
import { getReportedTable } from '@/api/table'
import Pagination from '@/components/Pagination'
import { approvalReportedPass, approvalReportedNotPass } from '@/api/approval'
import { pickerOptions } from '@/constant/el-const'
import { copyText } from '@/utils'
import { sysOriginPlatforms } from '@/constant/origin'
import AccountHanle from '@/components/data/AccountHanle'
import { mapGetters } from 'vuex'
import { listMembers } from '@/api/team'

export default {
  name: 'UserReportApproval',
  components: { Pagination, AccountHanle },
  data() {
    return {
      sysOriginPlatforms,
      pickerOptions,
      reportStatus: [
        { value: 0 },
        { value: 1 },
        { value: 2 }
      ],
      thatSelectedUserId: '',
      userDeatilsDrawer: false,
      accountHandleVisible: false,
      reportOrigins: [
        { value: 'VIDEO' },
        { value: 'CARD' },
        { value: 'IM' },
        { value: 'SHORT_VIDEO' },
        { value: 'PROFILE' }
      ],
      reportTypes: [
        { value: 0 },
        { value: 1 },
        { value: 2 },
        { value: 3 },
        { value: 4 },
        { value: 5 }
      ],
      list: [],
      checkList: [],
      total: 0,
      listQuery: {
        cursor: 1,
        limit: 20,
        sysOrigin: '',
        reportType: '',
        reportUserId: '',
        reportedUserId: '',
        approvalStatus: 0,
        startTime: '',
        endTime: '',
        updateUserId: ''
      },
      rangeDate: '',
      listLoading: true,
      members: [],
      numbersLoading: false
    }
  },
  computed: {
    ...mapGetters(['permissionsSysOriginPlatforms'])
  },
  watch: {
    rangeDate: {
      immediate: true,
      deep: true,
      handler(newVal) {
        if (newVal && newVal.length > 0) {
          this.listQuery.startTime = newVal[0]
          this.listQuery.endTime = newVal[1]
          return
        }
        this.listQuery.startTime = ''
        this.listQuery.endTime = ''
      }
    }
  },
  created() {
    const that = this
    const querySystem = this.permissionsSysOriginPlatforms[0]
    if (!querySystem) {
      return
    }
    that.listQuery.sysOrigin = querySystem.value
    that.renderData()
    that.loadMembers()
  },
  methods: {
    loadMembers() {
      const that = this
      that.numbersLoading = true
      listMembers()
        .then(res => {
          const { body } = res
          that.members = body
          that.numbersLoading = false
        })
        .catch(er => {
          that.numbersLoading = false
        })
    },
    renderData(isClean) {
      const that = this
      that.checkList = []
      if (isClean === true) {
        that.list = []
        that.listQuery.cursor = 1
      }
      that.listLoading = true
      getReportedTable(that.listQuery).then(res => {
        const { body } = res
        that.total = body.total || 0
        that.list = body.records
        that.listLoading = false
      })
    },
    handleSearch() {
      this.renderData(true)
    },
    accountHanle(row) {
      this.accountHandleVisible = true
      this.thatSelectedUserId = row.reportedUser.id
    },
    reportStatusName(status) {
      return this.$t(`pages.userReportApproval.reportStatus.${status}`)
    },
    reportTypeName(type) {
      return this.$t(`pages.userReportApproval.reportType.${type}`)
    },
    renderDataSuccess() {
      this.$message({
        message: this.$t('pages.userReportApproval.message.success'),
        type: 'success'
      })
      this.renderData()
    },
    selsUserChange(checkList) {
      this.checkList = checkList
    },
    queryUserDetails(userId) {
      this.userDeatilsDrawer = true
      this.thatSelectedUserId = userId
    },
    pass() {
      const that = this
      if (that.checkList.length === 0) {
        that.$opsMessage.warn(that.$t('pages.userReportApproval.message.selectApprovalItem'))
        return
      }
      that
        .$confirm(that.$t('pages.userReportApproval.message.confirmApproval'), that.$t('pages.userReportApproval.confirm.title'), {
          type: 'warning'
        })
        .then(() => {
          that.listLoading = true
          approvalReportedPass(that.getApprovalParams())
            .then(res => {
              that.listLoading = false
              that.$opsMessage.success()
              that.renderData(true)
            })
            .catch(() => {
              that.listLoading = false
            })
        })
        .catch(() => {})
    },
    notpass() {
      const that = this
      if (that.checkList.length === 0) {
        that.$opsMessage.warn(that.$t('pages.userReportApproval.message.selectApprovalItem'))
        return
      }
      that
        .$confirm(that.$t('pages.userReportApproval.message.confirmApproval'), that.$t('pages.userReportApproval.confirm.title'), {
          type: 'warning'
        })
        .then(() => {
          that.listLoading = true
          approvalReportedNotPass(that.getApprovalParams())
            .then(res => {
              that.listLoading = false
              that.$opsMessage.success()
              that.renderData(true)
            })
            .catch(() => {
              that.listLoading = false
            })
        })
        .catch(() => {})
    },
    getApprovalParams() {
      const that = this
      const approvalParams = []
      that.checkList.forEach(item => {
        if (!item.reportUserId || !item.reportedUserId) {
          return
        }
        approvalParams.push({
          userId: item.reportUserId,
          contentId: item.id,
          ext: item.reportedUserId
        })
      })
      return approvalParams
    },
    handleImageUrls(row) {
      if (row.imageUrls === 'null') {
        return []
      }
      return row.imageUrls ? row.imageUrls.split(',') : []
    },
    handleVideoUrls(row) {
      if (row.videoUrls === 'null') {
        return []
      }
      return row.videoUrls ? row.videoUrls.split(',') : []
    },
    handleVideoClick(imageUrls) {
      if (!imageUrls) {
        return
      }
      window.open(imageUrls)
    },
    handleVideoOpenClick(url) {
      if (!url) {
        return
      }
      window.open(url)
    },
    copyTextContent(text) {
      const that = this
      copyText(text)
        .then(() => {
          that.$message({
            message: that.$t('pages.userReportApproval.message.copySuccess'),
            type: 'success'
          })
        })
        .catch(() => {
          that.$message({
            message: that.$t('pages.userReportApproval.message.copyFailed'),
            type: 'error'
          })
        })
    }
  }
}
</script>
<style scoped lang="scss">
.feedback-img {
  position: relative;
  width: 50px;
  height: 50px;
  overflow: hidden;
  img {
    width: 100%;
    height: 100%;
  }
}
.row-expand {
  padding: 20px;
  .expand-col {
    margin-bottom: 10px;
  }
  .video-info {
    position: relative;
    .video-icon {
      font-size: 30px;
      position: absolute;
      top: 10px;
      left: 10px;
    }
  }
}
</style>
