<template>
  <div class="app-container">
    <el-card shadow="never">
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
        <el-form-item label="SecUid" prop="secUid">
          <el-input
            v-model="queryParams.secUid"
            placeholder="请输入SecUid"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="抖音号" prop="uniqueId">
          <el-input
            v-model="queryParams.uniqueId"
            placeholder="请输入抖音号"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="昵称" prop="nickname">
          <el-input
            v-model="queryParams.nickname"
            placeholder="请输入昵称"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="直播间ID" prop="roomId">
          <el-input
            v-model="queryParams.roomId"
            placeholder="请输入直播间ID"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card shadow="never" class="mt10">
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button
            type="primary"
            plain
            icon="el-icon-plus"
            size="mini"
            @click="handleAdd"
            v-hasPermi="['douyin:douyinUserInfo:add']"
          >新增
          </el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="warning"
            plain
            icon="el-icon-download"
            size="mini"
            @click="handleExport"
            v-hasPermi="['douyin:douyinUserInfo:export']"
          >导出
          </el-button>
        </el-col>
        <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
      </el-row>
      <Waterfall :list="douyinUserInfoList" :width="310" :gutter="12">
        <template #item="{ item }">
          <el-card shadow="never" :class="item.liveStatus === 0 ?'':'live'"
                   :style="{ backgroundImage: `url(${item.coverUrl})` }" class="card-back"
          >
            <div class="cover">
              <div class="handle-but">
                <svg-icon @click="handleDelete(item)" icon-class="live"/>
                <svg-icon @click="handleDelete(item)" icon-class="xiangqing"/>
                <svg-icon @click="handleDelete(item)" icon-class="delete"/>
              </div>
              <div class="no_one mt20">
                <div>
                  <el-image :src="item.avatar" :preview-src-list="[item.avatar]"
                            style="width: 50px;border-radius: 50%"
                  >
                  </el-image>
                  <span v-if="item.liveStatus === 1" class="live-text">直播中...</span>

                </div>
                <div class="user-info">
                  <span class="fs16" style="color: #333333">{{ item.nickname }}</span>
                  <span class="fs12">抖音号：{{ item.uniqueId }}</span>
                  <span class="fs12 disabled">{{ item.ipLocation === null ? 'IP属地：未知' : item.ipLocation }}</span>
                </div>
              </div>
              <div class="mt10">
                 <span
                   class="fs12 disabled signature-text"
                   :class="{ 'expanded': item.signatureExpanded }"
                   v-html="item.signature === null ? '这个人很懒什么都没留下' : item.signature"
                   @click="toggleSignature(item)"
                 ></span>
                <span
                  v-if="(item.signature && item.signature.length > 50) || (item.signature === null && '这个人很懒什么都没留下'.length > 50)"
                  class="expand-btn fs12"
                  @click="toggleSignature(item)"
                >
                  {{ item.signatureExpanded ? '收起' : '展开' }}
                </span>
              </div>
              <div class="mt10">
                <div style="display: flex; gap: 10px;justify-content: space-around;">
                  <span class="fs12 disabled user-info-count">作品<span>{{ item.awemeCount }}</span></span>
                  <span class="fs12 disabled user-info-count">获赞<span>{{ item.totalFavorited }}</span></span>
                  <span class="fs12 disabled user-info-count">关注<span>{{ item.followingCount }}</span></span>
                  <span class="fs12 disabled user-info-count">粉丝<span>{{ item.followerCount }}</span></span>
                </div>
              </div>
              <div class="mt10 box-card">
                <div class="box-card-but">
                  <span>资料更新</span>
                  <span :class="item.jobInfoStatus ? 'moitor-t' : 'moitor-f'" class="mt-2"
                  >{{ item.jobInfoStatus ? '监控中' : '未开启' }}</span>
                  <div :class="item.jobInfoStatus ? 'moitor-t-but' : 'moitor-f-but'" class="mt5"
                       @click="updataStatus(item,'jobInfoStatus')"
                  >
                    {{ item.jobInfoStatus ? '关闭' : '开启' }}
                  </div>
                </div>
                <div class="box-card-but">
                  <span>直播监控</span>
                  <span :class="item.jobInfoStatus ? 'moitor-t' : 'moitor-f'" class="mt-2"
                  >{{ item.jobInfoStatus ? '监控中' : '未开启' }}</span>
                  <div :class="item.jobInfoStatus ? 'moitor-t-but' : 'moitor-f-but'" class="mt5"
                       @click="updataStatus(item,'jobInfoStatus')"
                  >
                    {{ item.jobInfoStatus ? '关闭' : '开启' }}
                  </div>
                </div>
                <div class="box-card-but">
                  <span>直播录制</span>
                  <span :class="item.jobVideoStatus ? 'moitor-t' : 'moitor-f'" class="mt-2"
                  >{{ item.jobVideoStatus ? '监控中' : '未开启' }}</span>
                  <div :class="item.jobVideoStatus ? 'moitor-t-but' : 'moitor-f-but'" class="mt5"
                       @click="updataStatus(item,'jobVideoStatus')"
                  >
                    {{ item.jobVideoStatus ? '关闭' : '开启' }}
                  </div>
                </div>
              </div>
              <div class="mt10 box-card">
                数据更新时间：{{ item.updateTime }}
              </div>
            </div>
          </el-card>
        </template>
      </Waterfall>
      <pagination
        v-show="total>0"
        :total="total"
        :pageSizes="[50, 100, 150]"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </el-card>
    <!-- 添加或修改抖音用户信息对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="用户链接" prop="userUrl">
          <el-input type="textarea" v-model="form.userUrl" placeholder="请输入用户链接"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  listDouyinUserInfo,
  getDouyinUserInfo,
  delDouyinUserInfo,
  addDouyinUserInfo,
  updateDouyinUserInfo, updateMonitorState
} from '@/api/douyin/douyinUserInfo'

import { LazyImg, Waterfall } from 'vue-waterfall-plugin'
import 'vue-waterfall-plugin/dist/style.css'

export default {
  name: 'DouyinUserInfo',
  components: { LazyImg, Waterfall }, // 组件列表
  data() {
    return {
      // 按钮loading
      buttonLoading: false,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 抖音用户信息表格数据
      douyinUserInfoList: [],
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 50,
        secUid: undefined,
        uniqueId: undefined,
        nickname: undefined,
        signature: undefined,
        ipLocation: undefined,
        avatar: undefined,
        liveStatus: undefined,
        userAge: undefined,
        totalFavorited: undefined,
        followerCount: undefined,
        followingCount: undefined,
        awemeCount: undefined,
        coverUrl: undefined,
        roomId: undefined
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        userUrl: [
          { required: true, message: '用户链接不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    updataStatus(item, key) {
      let data = {
        id: item.id,
        [key]: !item[key]
      }
      updateMonitorState(data).then(response => {
        this.$modal.msgSuccess('修改成功')
        this.getList()
      })
    },
    /** 查询抖音用户信息列表 */
    getList() {
      this.loading = true
      listDouyinUserInfo(this.queryParams).then(response => {
        this.douyinUserInfoList = response.rows
        this.total = response.total
        this.loading = false
      })
    },
    // 取消按钮
    cancel() {
      this.open = false
      this.reset()
    },
    // 表单重置
    reset() {
      this.form = {
        userUrl: '长按复制此条消息，开启抖音搜索，查看TA的更多作品。 https://v.douyin.com/MQHBwAkCYew/'
      }
      this.resetForm('form')
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm')
      this.handleQuery()
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.userId)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset()
      this.open = true
      this.title = '添加抖音用户信息'
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.loading = true
      this.reset()
      const userId = row.userId || this.ids
      getDouyinUserInfo(userId).then(response => {
        this.loading = false
        this.form = response.data
        this.open = true
        this.title = '修改抖音用户信息'
      })
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          this.buttonLoading = true
          if (this.form.userId != null) {
            updateDouyinUserInfo(this.form).then(response => {
              this.$modal.msgSuccess('修改成功')
              this.open = false
              this.getList()
            }).finally(() => {
              this.buttonLoading = false
            })
          } else {
            addDouyinUserInfo(this.form).then(response => {
              this.$modal.msgSuccess('新增成功')
              this.open = false
              this.getList()
            }).finally(() => {
              this.buttonLoading = false
            })
          }
        }
      })
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const userIds = row.id || this.ids
      this.$modal.confirm('是否确认删除抖音用户信息为"' + row.nickname + '"的数据项？').then(() => {
        this.loading = true
        return delDouyinUserInfo(userIds)
      }).then(() => {
        this.loading = false
        this.getList()
        this.$modal.msgSuccess('删除成功')
      }).catch(() => {
      }).finally(() => {
        this.loading = false
      })
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('/model/douyin/userInfo/export', {
        ...this.queryParams
      }, `douyinUserInfo_${new Date().getTime()}.xlsx`)
    },
    /** 切换签名展开/收缩 */
    toggleSignature(item) {
      // 只有当签名内容较长时才允许展开/收缩
      const signatureText = item.signature === null ? '这个人很懒什么都没留下' : item.signature
      if (signatureText && signatureText.length > 50) {
        this.$set(item, 'signatureExpanded', !item.signatureExpanded)
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.card-back {
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  overflow: hidden;
  border: #e5e5e5 solid 1px;
  cursor: pointer;

  ::v-deep .el-card__body {
    padding: 0 !important;
  }

  &:hover {
    box-shadow: 0 0 10px #cccccc;
    transform: translateY(-5px);
  }

  &::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: #ffffff50;
    z-index: 0;
  }

}

.disabled {
  user-select: none;
}

.cover {
  border-radius: 2px;
  padding: 15px 20px;
  z-index: 2;
  backdrop-filter: blur(5px);
  color: #33333390;
}

.no_one {
  display: flex;
  gap: 10px;

  .user-info {
    display: flex;
    flex-direction: column;
  }
}

.user-info-count {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.live {
  border: 2px solid #fe346e;
  animation: live-border-glow 2s ease-in-out infinite;
}

.live-text {
  background: #fe346e;
  color: #fff;
  font-size: 10px;
  padding: 1px 3px;
  padding-bottom: 2px;
  border-radius: 3px;
  position: absolute;
  top: 10px;
  left: 20px;
}

@keyframes live-border-glow {
  0% {
    border-color: rgba(254, 52, 110, 1);
    box-shadow: 0 0 0 0 rgba(254, 52, 110, 0.3);
  }
  70% {
    border-color: rgba(254, 52, 110, 0.8);
    box-shadow: 0 0 0 10px rgba(254, 52, 110, 0);
  }
  100% {
    border-color: rgba(254, 52, 110, 1);
    box-shadow: 0 0 0 0 rgba(254, 52, 110, 0);
  }
}

.signature-text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;

  &.expanded {
    -webkit-line-clamp: unset;
    display: block;
  }
}

.expand-btn {
  color: #0138c6;
  cursor: pointer;
  margin-left: 5px;
  user-select: none;

  &:hover {
    text-decoration: underline;
  }
}

.handle-but {
  position: absolute;
  right: 10px;
  top: 10px;
  z-index: 1;
  cursor: pointer;
  display: flex;
  gap: 10px;
  color: #0138c6;
}

.box-card {
  border: #ffffff50 solid 1px;
  background-color: #ffffff30;
  font-size: 12px;
  min-height: 20px;
  border-radius: 5px;
  display: flex;
  justify-content: space-around;
  padding: 5px 10px;
}

.moitor-f {
  color: #f55353;
}

.moitor-t {
  color: #0138c6;
}

.moitor-f-but {
  color: #ff4747;
  width: 100%;
  text-align: center;
  border-radius: 3px;
  background-color: #ff000010;
  border: #f5535350 solid 1px;

  &:hover {
    color: #ffffff;
    background-color: #ff4747;
    border: #ff4747 solid 1px;
  }
}

.moitor-t-but {
  color: #0138c6;
  width: 100%;
  text-align: center;
  border-radius: 3px;
  background-color: #0138c620;
  border: #0138c650 solid 1px;

  &:hover {
    color: #ffffff;
    background-color: #0138c6;
    border: #0138c6 solid 1px;
  }
}

.box-card-but {
  display: flex;
  flex-direction: column;
  align-items: center;
}

</style>
