<template>
  <div class="app-container">
    <!-- 搜索 -->
    <el-form inline size="mini">
      <el-form-item label="内容类型：">
        <el-select v-model="form.contentType" placeholder="请选择内容类型" clearable>
          <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="内容分类：">
        <el-select v-model="form.type" placeholder="请选择内容分类" clearable>
          <el-option v-for="item in classifyOptions" :key="item.id" :label="item.name" :value='item.id' />
        </el-select>
      </el-form-item>
      <el-form-item label="当前状态：">
        <el-select v-model="form.typeStatus" placeholder="请选择当前状态" clearable>
          <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value='item.value' />
        </el-select>
      </el-form-item>
      <el-form-item label="内容或回复：">
        <el-input v-model="form.content" placeholder="请输入内容或回复" clearable />
      </el-form-item>
      <el-form-item label="更新时间：">
        <el-date-picker v-model="date" type="datetimerange" start-placeholder="开始时间" end-placeholder="结束时间"
          value-format="yyyy-MM-dd HH:mm:ss" clearable />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="getSearch">搜索</el-button>
        <el-button icon="el-icon-refresh" @click="getRefresh">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- 列表 -->
    <el-table :data="tableData" v-loading="loading">
      <el-table-column label="内容" prop="content" align="center" show-overflow-tooltip />
      <el-table-column label="图片" align="center" width="170px">
        <template slot-scope="scope">
          <div class="image-box" v-if="scope.row.images">
            <el-image class="image" v-for="item in scope.row.images.split(',').slice(0, 6)" :key="item" :src="item" :preview-src-list="scope.row.images.split(',').slice(0, 6)" />
          </div>
        </template>
      </el-table-column>
      <el-table-column label="回复/点赞" prop="replyOrLike" align="center" />
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button v-if="scope.row.status === '0'" type="text"
            @click="dialogVisible = true, title = '推荐', dialogForm.id = scope.row.id"
            v-hasPermi="['ohplay:content:push']">
            推荐
          </el-button>
          <el-button type="text" @click="dialogVisible = true, title = '详情', getDetail(scope.row)">
            详情
          </el-button>
          <el-button type="delete" v-if="scope.row.status === '0'" @click="getChange(scope.row, 1)"
            v-hasPermi="['ohplay:content:hide']">
            隐藏
          </el-button>
          <el-button type="text" v-else @click="getChange(scope.row, 0)" v-hasPermi="['ohplay:content:show']">
            显示
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total > 0" :total="total" :page.sync="form.pageNum" :limit.sync="form.pageSize"
      @pagination="getList" />
    <!-- 弹窗 -->
    <el-dialog :visible.sync="dialogVisible" :title="title" :before-close="cancel" width="600px">
      <!-- 推荐 -->
      <div v-if="title === '推荐'">
        <el-form :model="dialogForm" ref="dialogForm" :rules="rules" label-width="100px">
          <el-form-item label="推荐位置：" prop="tagId">
            <el-select v-model="dialogForm.tagId" placeholder="请选择推荐位置">
              <el-option v-for="item in classifyOptions" :key="item.id" :label="item.name" :value='item.id' />
            </el-select>
          </el-form-item>
          <el-form-item label="推荐权重：" prop="weight">
            <el-input-number v-model="dialogForm.weight" :min="0" :max="10" />
          </el-form-item>
          <el-form-item label="权重唯一：" prop="isOnlyWeight">
            <el-select v-model="dialogForm.isOnlyWeight" placeholder="权重是否唯一">
              <el-option v-for="item in onlyOptions" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="推荐日期：" prop="dialogDate">
            <el-date-picker v-model="dialogForm.dialogDate" type="datetimerange" start-placeholder="开始时间"
              end-placeholder="结束时间" value-format="yyyy-MM-dd HH:mm:ss" />
          </el-form-item>
        </el-form>
      </div>

      <!-- 详情 -->
      <div v-else class="item_box">
        <!-- 话题 -->
        <el-row>
          <el-col :span="3">
            <el-avatar :src="dialogList.userAvatar" />
          </el-col>
          <el-col :span="16">
            <div>{{ dialogList.userName }}</div>
            <div>{{ dialogList.creatTime }}</div>
          </el-col>
          <el-col :span="5">
            <el-button v-if="dialogList.isDelete === '0'" type="delete" @click="getChange(dialogList, 1)"
              v-hasPermi="['ohplay:content:hide']">
              隐藏
            </el-button>
            <el-button v-else type="text" @click="getChange(dialogList, 0)"
              v-hasPermi="['ohplay:content:show']">显示</el-button>
          </el-col>
        </el-row>
        <div class="item_content">
          <!-- 内容 -->
          <div style="padding: 20px 0;">{{ dialogList.content }}</div>
          <!-- 图片 -->
          <div class="image-box" v-if="dialogList.images">
            <el-image class="image" v-for="item in dialogList.images.split(',')" :key="item" :src="item" />
          </div>
          <div style="margin-top: 10px">点赞：{{ dialogList.likeNum }}</div>
        </div>
        <!-- 评论 -->
        <div class="dialog_list" v-for="item in dialogList.commentList" :key="item.id">
          <el-row>
            <el-col :span="3">
              <el-avatar :src="item.toUserAvatar" />
            </el-col>
            <el-col :span="16">
              <div>{{ item.toUserName }}</div>
              <div>{{ item.createTime }}</div>
            </el-col>
            <el-col :span="5">
              <el-button v-if="item.isDelete === 0" type="delete" @click="getCommentChange(item, 1)"
                v-hasPermi="['ohplay:recommend:hide']">隐藏
              </el-button>
              <el-button v-else type="text" @click="getCommentChange(item, 0)"
                v-hasPermi="['ohplay:recommend:show']">显示</el-button>
            </el-col>
          </el-row>
          <div class="item_content">
            <div>{{ item.content }}</div>
            <div style="margin-top: 10px">点赞：</div>
          </div>
          <!-- 评论的评论 -->
          <div class="item_children">
            <div class="item_i" v-for="i in item.children" :key="i.id">
              <el-row>
                <el-col :span="3">
                  <el-avatar :src="i.toUserAvatar" />
                </el-col>
                <el-col :span="16">
                  <div>{{ i.toUserName }}</div>
                  <div>{{ i.createTime }}</div>
                </el-col>
                <el-col :span="5">
                  <el-button v-if="i.isDelete === 0" type="delete" @click="getCommentChange(i, 1)"
                    v-hasPermi="['ohplay:content:hide']">隐藏
                  </el-button>
                  <el-button v-else type="text" @click="getCommentChange(i, 0)"
                    v-hasPermi="['ohplay:content:show']">显示</el-button>
                </el-col>
              </el-row>
              <div class="item_content">
                <div>{{ i.content }}</div>
                <div style="margin-top: 10px">点赞：</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div v-if="title === '推荐'" slot="footer">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="getSubmit">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { list, detail, showOrHide, recommend, commentShowOrHide, } from '@/api/ohplay/content'
import { classifyMixin, typeMixin } from '../mixin/index'
export default {
  mixins: [classifyMixin, typeMixin],
  data() {
    return {
      // 遮罩层
      loading: false,
      // 表单
      form: {
        pageNum: 1,
        pageSize: 10
      },
      // 搜索时间
      date: [],
      // 列表
      tableData: [],
      total: 0,
      // 弹窗
      dialogVisible: false,
      title: '',
      // 弹窗列表
      dialogList: {},
      // 推荐表单
      dialogForm: {
        tagId: '',
        weight: 0,
        isOnlyWeight: '',
        dialogDate: [],
      },
      // 当前状态
      statusOptions: [{
        value: 0,
        label: '显示'
      },
      {
        value: 1,
        label: '隐藏'
      }],
      // 权重是否唯一
      onlyOptions: [{
        value: 0,
        label: '否'
      }, {
        value: 1,
        label: '是'
      }],

      // 校验
      rules: {
        tagId: [{
          required: true, message: '请选择推荐位置', trigger: 'change'
        }],
        weight: [{
          required: true, message: '请选择推荐权重', trigger: 'change'
        }],
        isOnlyWeight: [{
          required: true, message: '请选择是否唯一', trigger: 'change'
        }],
        dialogDate: [{
          required: true, message: '请选择推荐日期', trigger: 'change'
        }]
      }
    }
  },
  watch: {
    date(val) {
      this.form.startDate = val[0]
      this.form.endDate = val[1]
    },
    'dialogForm.dialogDate'(val) {
      this.dialogForm.startRecommendTime = val[0]
      this.dialogForm.endRecommendTime = val[1]
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    // 列表
    getList() {
      this.loading = true
      list(this.form).then(res => {
        if (res.code === 0) {
          this.tableData = res.data.records
          this.total = res.data.total
          this.loading = false
        }
      })
    },

    // 搜索
    getSearch() {
      this.form.pageNum = 1
      this.getList()
    },

    // 重置
    getRefresh() {
      this.form = {
        pageNum: 1,
        pageSize: 10
      }
      this.date = []
      this.getList()
    },

    // 详情
    getDetail(row) {
      detail(row.id).then(res => {
        if (res.code === 0) {
          this.dialogList = res.data
        }
      })
    },

    // 隐藏或显示
    getChange(row, type) {
      showOrHide(row.id, type).then(res => {
        let tip = type === 0 ? '显示' : '隐藏'
        if (res.code === 0) {
          this.$message.success(`${tip}成功！`)
          this.getList()
          if (this.dialogVisible === true) {
            this.getDetail(row)
          }
        }
      })
    },
    getCommentChange(row, type) {
      commentShowOrHide(row.id, type).then(res => {
        let tip = type === 0 ? '显示' : '隐藏'
        if (res.code === 0) {
          this.$message.success(`${tip}成功！`)
          this.getDetail(this.dialogList)
        }
      })
    },

    // 确定
    getSubmit() {
      this.$refs.dialogForm.validate((valid) => {
        if (valid) {
          delete this.dialogForm.dialogDate
          recommend(this.dialogForm).then(res => {
            if (res.code === 0) {
              this.$message.success('推荐成功！')
              this.dialogVisible = false
              this.getList()
            }
          })
        } else {
          return false
        }
      })
    },

    // 取消
    cancel() {
      if (this.title === '推荐') {
        this.$refs.dialogForm.resetFields();
      }
      this.dialogVisible = false
    }
  }
}
</script>

<style lang="scss" scoped>
.item_box {
  height: 700px;
  overflow-y: auto;
  overflow-x: hidden;
  border: 1px solid #eee;
  box-shadow: 10px 5px 10px 0px #eee;
  padding: 20px;
}

.dialog_list {
  border: 1px solid #eee;
  box-shadow: 10px 5px 10px 0px #eee;
  padding: 10px;
  width: calc(100% - 20px);
  margin-top: 20px;

  .el-row {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .item_content {
    margin-top: 10px;
  }
}

.dialog_item:last-child {
  border: none;
}

.item_children {
  width: calc(100% - 40px);
  margin-top: 20px;
  border: 1px solid #eee;
  box-shadow: 10px 5px 10px 0px #eee;

  .item_i {
    padding: 20px;
    border-bottom: 1px solid #eee;
  }

  .item_i:last-child {
    border: none;
  }
}

.image-box {
  display: flex;
  flex-wrap: wrap;
  width: 150px;

  .image {
    width: 50px;
    height: 50px;
  }
}
</style>