<template>
  <div class="u-page" style="padding-right:32px">
    <Remark>
      <ul>
        <li>正文内容需求上要求显示两行，建议不显示 上架和下架图标待定</li>
        <li>
          上架和审核没有对应接口，先写好了，到时候换个名就行,数据传参也可以改一下
        </li>
        <li>点击标题打开新页面并且传参不会</li>
      </ul>
    </Remark>
    <div style="padding: 2px 0px 10px 8px;">
      <div style="display: flex; justify-content: flex-start">
        <div style="padding: 0px 5px">
          <el-select
            v-model="pageData.status"
            style="width: 110px"
            clearable
            placeholder="审核状态"
          >
            <el-option label="全部" value=""></el-option>
            <el-option label="草稿" :value="1"></el-option>
            <el-option label="待审核" :value="2"></el-option>
            <el-option label="未通过" :value="3"></el-option>
            <el-option label="已通过" :value="5"></el-option>
            <el-option label="已发布" :value="9"></el-option>
          </el-select>
        </div>
        <div style="padding: 0px 5px">
          <el-input
            placeholder="关键词搜索"
            v-model="pageData.keyword"
            clearable
          ></el-input>
        </div>
        <div style="padding: 0px 5px">
          <el-button
            @click="getsearch"
            icon="el-icon-search"
            type="primary"
            >搜索</el-button
          >
          <!-- <el-button type="primary" >批量设置推荐</el-button> -->
        </div>

         <div style="padding: 0px 5px;"><el-button icon="el-icon-refresh-right" type="primary"  @click="reset">重置</el-button></div>
      </div>
    </div>
    <el-table style="width: 100%;margin:10px 32px 10px 12px;" :data="pageData.list" border stripe >
      <!-- <el-table-column type="selection" width="55"></el-table-column> -->
      <el-table-column label="标题" show-overflow-tooltip prop="title" >
        <template slot-scope="scope">
          <span class="previewStyle" @click="viewTopic(scope.row)">{{scope.row.title}}</span>
          <!-- <a :style="cursor:pointer;" target="_blank" :href="`${webBaseUrl}/qa/answer`">{{scope.row.name}}</a> -->
          <!-- <el-link style="display:inline;" :href="`${webBaseUrl}/article/detail`">{{scope.row.title}}</el-link> -->
        </template>
      </el-table-column>
      <!-- <el-table-column label="介绍" prop="content"> -->
      <el-table-column label="浏览" width="60px" prop="views"></el-table-column>
      <el-table-column label="点赞" width="60px" prop="praises" ></el-table-column>
      <el-table-column label="收藏" width="60px" prop="favorites" ></el-table-column>
      <el-table-column label="评论" width="60px" prop="comments" ></el-table-column>
      <el-table-column label="作者" width="80px" prop="sysCreateBy" ></el-table-column>
      <el-table-column label="发布时间" width="160px" prop="sysCreateTime" ></el-table-column>
      <el-table-column label="状态" width="80px" prop="status">
        <template slot-scope="scope">
          {{ scope.row.status | statusFilter }}
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="160">
        <template slot-scope="scope">
          <el-button  v-if="scope.row.status === 2" type="text" icon="el-icon-refresh-left"  @click="audit(scope.row)" >审核</el-button>
          <el-button  type="text"  @click="delItem(scope.row)"  icon="el-icon-delete">删除</el-button>
          <el-button  type="text"  @click="shelfHandle(scope.row)"  :icon="scope.row.enabled ? 'el-icon-download' : 'el-icon-upload2'">
            {{ scope.row.enabled ? '下架' : '上架' }}
          </el-button>
          <!-- <el-button type="text" icon="el-icon-share" size="mini">推荐</el-button> -->
        </template>
      </el-table-column>
    </el-table>
    <div v-if="pageData.list.length > 0" style="text-align: center;margin-top: 50px;">
      <el-pagination
      background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageData.pageIndex"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageData.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
    <div style="height: 100px"></div>
    <el-dialog  custom-class="g-dialog"  title="审核文章" :visible.sync="dialogVisible">
      <el-row>
        <h3 style="text-align: center">{{ form.title }}</h3>
        作者：{{ form.sysCreateBy }}
      </el-row>
      <el-form :model="form" ref="auditForm" :rules="rules" label-width="80px">
        <div  v-html="form.content"
          style="padding: 0 10px;margin-top: 10px;border: 1px solid #d9d9d9;height: 400px; overflow: auto;">
          <!-- <img style="width: 100%;" :src="`${webBaseUrl}/temp/articleTwo.png·" /> -->
        </div>
        <!-- <el-form-item label="人数"><el-input v-model="form.num"></el-input></el-form-item> -->
        <el-form-item label="审核结果" prop="status">
          <el-radio-group v-model="form.status">
            <el-radio :label="true">通过</el-radio>
            <el-radio :label="false">拒绝</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="审核意见">
          <el-input type="textarea" placeholder="请输入0-200个字" v-model="form.auditRemark" maxlength="200" ></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="enSure">确认</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import apiArticle from '@/api/modules/article.js'
export default {
  name: 'articleItems',
  data() {
    return {
      pageData: {
        pageIndex: 1,
        pageSize: 10,
        list: [],
      },
      total: 0,
      form: {status:null,id:'',auditRemark:''},
      rules: {
        status: [
          { required: true, message: '请选择审核结果', trigger: 'blur' },
        ],
      },
      dialogVisible: false,
    }
  },
  mounted() {},
  created() {
    this.getArticleList()
  },
  filters: {
    statusFilter(item) {
      switch (item) {
        case 1: {
          return '草稿'
        }
        case 2: {
          return '待审核'
        }
        case 3: {
          return '未通过'
        }
        case 5: {
          return '已通过'
        }
        case 9: {
          return '已发布'
        }
      }
    },
  },
  methods: {
    getsearch(){
      this.pageData.pageIndex = 1;
	  this.getArticleList()

    },
    reset() {
      this.pageData.status = ''
      this.pageData.keyword = ''
      this.pageData.pageIndex = 1;
	  this.getArticleList()
    },
    //获取文章列表数据
    getArticleList() {
      const { pageIndex, pageSize } = this.pageData
      let query = { pageIndex, pageSize }
      if (this.pageData.status) {
        const { status } = this.pageData
        query.status = status
      }
      if (this.pageData.keyword) {
        const { keyword } = this.pageData
        query.keyword = keyword
      } //拼接查询条件
      apiArticle
        .portalPageList(query)
        .then((res) => {
          if (res.status == 200) {
            this.total = res.result.count
            this.pageData.list = res.result.list
          }
        })
        .catch((err) => {
          this.$message.error('获取数据失败')
        })
    },
    //改变条数的回调
    handleSizeChange(value) {
      this.pageData.pageIndex = 1;
      this.pageData.pageSize = value;
      this.getArticleList();
    },
    //改变页数的回调
    handleCurrentChange(value) {
      this.pageData.pageIndex = value;
      this.getArticleList();
    },
    //删除文章
    delItem(item) {
      this.$confirm('您确定要删除所选文章吗？', '删除提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          apiArticle
            .del(item.id)
            .then((res) => {
              if (res.status == 200) {
                this.$message.success('删除成功')
                 this.getArticleList()
              } else {
                this.$message.error('删除失败')
              }
            })
            .catch((err) => {
              this.$message.error('删除失败')
            })
        })
        .catch(() => {})
    },
    //审核操作
    audit(row) {
      apiArticle.detail(row.id, false).then((res) => {
        if (res.status == 200) {
          this.form.id = res.result.id;
          this.form.content = res.result.content;
          this.form.auditRemark = '';
          this.dialogVisible = true
        }
      })
    },
    //确认审核结果
    enSure() {
      const { auditRemark, status, id } = this.form
      if(!status&&!auditRemark){
        return this.$message.warning("如果审核未通过要填写拒绝理由")
      }
      this.$refs.auditForm.validate((valid) => {
        if (valid) {
          apiArticle
            .savaAudit(id, auditRemark, status)
            .then((res) => {
              if (res.status == 200) {
                this.$message.success('审核成功')
                this.dialogVisible = false
                this.getArticleList()
              } else {
                this.$message.error('审核失败')
              }
            })
            .catch((err) => {
              this.$message.error('审核失败')
            })
        }
      })
    },
    //上下架子
    shelfHandle(row) {
      let successMessage, errorMessage
      if (row.enabled) {
        ;(successMessage = '下架成功'), (errorMessage = '下架失败')
      } else {
        ;(successMessage = '上架成功'), (errorMessage = '上架失败')
      }
      row.enabled = !row.enabled
      const { id, enabled } = row
      apiArticle
        .isEnabled(id, enabled)
        .then((res) => {
          if (res.status == 200) {
            this.$message.success(successMessage)
            this.getArticleList()
          } else {
            this.$message.error(errorMessage)
          }
        })
        .catch((err) => {
          this.$message.error(errorMessage)
        })
    },
    viewTopic(data) {
    //  window.open(this.webBaseUrl+'/article/detail?id='+data.id , '_blank')
      this.$router.push({path:'/article/detail',query:{id:data.id}})
    },
  },
}
</script>

<style lang="scss" scoped>
</style>
