<template>
<!-- 图文信息管理恒信动态管理 -->
  <div>
      <div class="gva-search-box">
      <el-form ref="searchForm" :inline="true" :model="searchInfo">
        <el-form-item label="文章标题">
          <el-input v-model="queryParams.title" placeholder="文章标题" />
        </el-form-item>
         <el-form-item label="所属栏目">
          <el-select v-model="queryParams.parentIdStr" clearable placeholder="请选择">
            <el-option
              v-for="item in archivetypeList"
              :key="item.outID"
              :label="item.columnr_name"
              :value="item.outID">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所属栏目">
          <el-input v-model="queryParams.column" placeholder="所属栏目" />
        </el-form-item>
        <el-form-item>
          <el-button size="mini" type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>
          <el-button size="mini" icon="el-icon-refresh" @click="onReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="gva-table-box">
        <div class="gva-btn-list">
            <el-button size="mini" type="primary" icon="el-icon-plus" @click="openDialog('add')">新增</el-button>
        </div>
        <el-table :data="tableData" border>
            <el-table-column label="文章标题" prop="title" />
            <el-table-column label="所属栏目" prop="parentColumnTitle" />
            <el-table-column label="所属子栏目" prop="columnTitle" />
            <el-table-column label="可见范围" prop="scope" />
            <el-table-column label="访问数据" prop="data" center>
                <template #default="scope"> 
                    <div>
                        <el-tag class="right mouse" @click="showDetails(scope.row,parameter=1)">阅读量:{{scope.row.reading}}</el-tag>
                        <el-tag class="right">评论数:{{scope.row.comment}}</el-tag>
                        <el-tag class="right">收藏数:{{scope.row.collect}}</el-tag>
                        <el-tag class="right">点赞数:{{scope.row.like}}</el-tag>
                        <el-tag class="right">踩:{{scope.row.tread}}</el-tag>
                        <el-tag>综合评分:{{scope.row.score}}</el-tag>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="状态" prop="state" center>
                <template #default="scope"> 
                    <div>
                        <el-switch style="display: block" v-model="scope.row.state" active-color="#13ce66" inactive-color="#ff4949" active-text="启用" inactive-text="禁用"></el-switch>
                    </div>
                </template>
            </el-table-column>
            <el-table-column align="left" fixed="right" label="操作" width="200">
                <template #default="scope">
                    <el-button icon="el-icon-edit" size="small" type="text" @click="editOperate(scope.row)">修改</el-button>
                    <el-button icon="el-icon-delete" size="small" type="text" @click="deleteOperate(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="queryParams.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
    </div>
    
    <!-- 新增弹窗 -->
    <el-dialog v-model="dialogFormVisible" :before-close="closeDialog" :title="dialogTitle">
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="标题" prop="title">
          <el-input v-model="form.title" placeholder="标题" />
        </el-form-item>
        <el-form-item label="归属栏目" prop="column">
          <el-select clearable v-model="form.istrue" placeholder="请选择">
            <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=4></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="文档来源" prop="source">
          <el-radio-group v-model="form.source" @change='changeSource'>
            <el-radio label=1>原创</el-radio>
            <el-radio label=2>转帖</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-show="originalUrlShow" label="原文地址" prop="source">
          <el-input v-model="form.originalUrl" placeholder="请输入原文地址" />
        </el-form-item>
        <el-form-item label="上传封面" prop="source">
          <!-- action为上传地址 -->
          <el-upload
            class="upload-demo"
            drag
            :before-upload="checkFile"
            action=""
            multiple>
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <div class="el-upload__tip" slot="tip">只能上传jpg/png/jpeg文件</div>
          </el-upload>
        </el-form-item>
        <el-form-item label="文档标签" prop="documentationTitle">
          <el-input v-model="form.documentationTitle" placeholder="请输入文档标签，每个标签请用，隔开！"/>
        </el-form-item>
        <el-form-item label="文档描述" prop="describe">
          <el-input type="textarea" v-model="form.describe" placeholder="请输入简略描述"/>
        </el-form-item>
        <el-form-item label="使用外链" prop="link">
          <el-input v-model="form.link" placeholder="当使用外链地址的时候！（链接以http://或https://开头）"/>
        </el-form-item>
        <el-form-item label="文档正文" prop="text">
              <tinymce ref="editor"
                v-model="form.msg"
                :disabled="disabled"
                @onClick="onClick">
              </tinymce>
        </el-form-item>
        <el-form-item label="上传正文" prop="link">
          <el-upload
            class="upload-demo"
            action=""
            :before-upload="checkFilePdf"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            multiple
            :on-exceed="handleExceed"
            :file-list="fileList">
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传pdf文件</div>
          </el-upload>
        </el-form-item>
        <el-form-item label="附件" prop="link">
          <el-upload
            class="upload-demo"
            action=""
            :on-change="handleChange"
            :file-list="fileList1">
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item label="附件下载" prop="uploadSettings">
          <el-switch
            style="display: block"
            v-model="form.uploadSettings"
            active-color="#13ce66"
            inactive-color="#ff4949"
            active-text="允许"
            inactive-text="禁止">
          </el-switch>
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-input
            placeholder="请输入排序"
            v-model="form.sort"
            clearable>
          </el-input>
        </el-form-item>
        <el-form-item label="评论设置" prop="commentSettings">
          <el-switch
            style="display: block"
            v-model="form.uploadSettings"
            active-color="#13ce66"
            inactive-color="#ff4949"
            active-text="允许"
            inactive-text="禁止">
          </el-switch>
        </el-form-item>
        <el-form-item label="访问权限" prop="commentSettings">
          <el-radio v-model="form.authority" label="1">公开</el-radio>
          <el-radio v-model="form.authority" label="2">分厂</el-radio>
          <el-radio v-model="form.authority" label="3">工段</el-radio>
          <el-radio v-model="form.authority" label="4">自定义</el-radio>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button size="small" @click="closeDialog">取 消</el-button>
          <el-button size="small" type="primary" @click="enterDialog">确 定</el-button>
        </div>
      </template>
    </el-dialog>
   
    <!-- 修改弹窗 -->
    <el-dialog v-model="editDialogFormVisible" :before-close="closeEditDialog" title="修改顶级栏目" width="20%">
      <el-form ref="editForm" :model="editForm" :rules="editRules" label-width="80px">
        
        <el-form-item label="栏目名称" prop="user_name">
          <el-input v-model="editForm.user_name" />
        </el-form-item>
        <el-form-item label="序号" prop="user_wechat">
          <el-input v-model="editForm.user_wechat" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button size="small" @click="closeEditDialog">取 消</el-button>
          <el-button size="small" type="primary" @click="edit">确 定</el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 详情弹窗 -->
    <el-dialog v-model="detailsDialogFormVisible" :before-close="closeDetailsDialog" :title="detailsTittle" width="30%">
      <el-table :data="detailsData">
            <el-table-column label="工号" prop="joBnumber" />
            <el-table-column label="姓名" prop="name" />
            <el-table-column label="时间" prop="date" />
        </el-table>
    </el-dialog>
  </div>
</template>

<script>
// 获取列表内容封装在mixins内部  getTableData方法 初始化已封装完成 条件搜索时候 请把条件安好后台定制的结构体字段 放到 this.searchInfo 中即可实现条件搜索
import {
  archivetypelist
} from '@/api/documentation'
import {
  archivefilelist
} from '@/api/comment'
// import infoList from '@/mixins/infoList'
// import EditorBar from '../../../components/wangEnduit/index.vue'
// 富文本组件
// import Editor from "@/components/Editor/index.vue"
import tinymce from "@/components/tinymce/tinymce-editor.vue"
export default {
  components: {
    tinymce
  },
  name: 'Notify',
  // mixins: [infoList],
  data() {
    return {
      // 查询参数
      queryParams: {
        page: 1,
        pagesize: 10,
        parentId:null,
        parentIdStr:''
      },
      // listApi: archivefilelist,
      originalUrlShow:false,
      detailsData:[
        {
          joBnumber:'123456',
          name:'张三',
          date:'2021-12-06 08:16:02'
        },
        {
          joBnumber:'654321',
          name:'李四',
          date:'2021-12-05 21:28:28'
        },
        {
          joBnumber:'963258',
          name:'王五',
          date:'2021-12-05 15:32:44'
        },
        {
          joBnumber:'456789',
          name:'孙六',
          date:'2021-12-05 11:28:24'
        },
      ],
      detailsTittle:'',
      tableData:[],
      // tableData:[
      //     {
      //       // id
      //       id:1,
      //       //文章标题
      //         title:'2021年11月二级库检查通报',
      //       //所属栏目
      //         column:'检查通报',
      //       //可见范围
      //         scope:'公开',
      //         //阅读量
      //         reading:22,
      //         //评论数
      //         comment:66,
      //         //收藏数
      //         collect:11,
      //         //点赞数
      //         like:33,
      //         //踩
      //         tread:44,
      //         //综合评分
      //         score:55,
      //         //状态
      //         state:true
      //     },
      //     {
      //       // id
      //       id:1,
      //       //文章标题
      //         title:'机焦车间简报',
      //       //所属栏目
      //         column:'新闻动态',
      //       //可见范围
      //         scope:'自定义',
      //         //阅读量
      //         reading:22,
      //         //评论数
      //         comment:66,
      //         //收藏数
      //         collect:11,
      //         //点赞数
      //         like:33,
      //         //踩
      //         tread:44,
      //         //综合评分
      //         score:55,
      //         //状态
      //         state:true
      //     },
      // ],
      // 栏目List
      archivetypeList:[],
      fileList1:[],
      fileList:[],
      detailsDialogFormVisible:false,
      editDialogFormVisible:false,
      deleteVisible: false,
      dialogFormVisible: false,
      dialogTitle: '新增通知人',
      apis: [],
      form:{
        title:null,
        source:null,
        istrue:null
      },
      type: '',
      rules: {
        user_name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
        user_wechat: [{ required: true, message: '请输入微信UID', trigger: 'blur' }],
      },
      editRules: {
        user_name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
        user_wechat: [{ required: true, message: '请输入微信UID', trigger: 'blur' }],
      }
    }
  },
  created() {
    // this.getTableData();
    this.getArchivefilelist()
    this.getArchivetypelist()
  },
  watch: {
      queryParams(newVal, oldVal) {
        this.newVal = newVal
        console.log("inputVal = " + newVal + " , oldValue = " + oldVal)
      }
    },
  methods: {
    // 获取栏目List
    async getArchivetypelist(){
      const res = await archivetypelist(this.queryParams)
     this.archivetypeList =res.data.list
    },
    // pagesize变化
    handleSizeChange(val) {
      this.queryParams.pagesize=val
      this.getArchivefilelist()
      },
      // page变化
      handleCurrentChange(val) {
        this.queryParams.page=val
        this.getArchivefilelist()
      },
      // 获取文章List
    async getArchivefilelist(){
      if(this.queryParams.parentId==null){
        this.queryParams.parentId=0
      }
      const res = await archivefilelist(this.queryParams)
      this.tableData = res.data.list
      this.total=res.data.total
      this.queryParams.pagesize=res.data.pageSize,
      this.queryParams.page=res.data.page,
      this.queryParams.parentId=null
      console.log(this.queryParams.parentId)
      console.log(res.data)
    },
    onReset() {
      this.searchInfo = {}
    },
    // 条件搜索前端看此方法
    onSubmit() {
      this.page = 1
      this.pageSize = 10
      this.getArchivefilelist()
    },
    // 文档来源数据监听
    changeSource(val){
      if(val==2){
        this.originalUrlShow=true
      }else{
        this.originalUrlShow=false
      }
    },
     handleChange(file, fileList) {
        this.fileList = fileList.slice(-3);
      },
    handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },
      handleExceed(files, fileList) {
        this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
      },
      beforeRemove(file, fileList) {
        return this.$confirm(`确定移除 ${ file.name }？`);
      },
    // 上传封面前事件
    checkFile(file) {

      var testmsg=file.name.substring(file.name.lastIndexOf('.')+1)
      const extension = testmsg === 'jpg'
      const extension1 = testmsg === 'png'
      const extension2 = testmsg === 'jpeg'
      if(!extension && !extension1 && !extension2) {
        this.$message({
          message: '您上传的文件格式不符合要求!只支持jpg/png/jpeg格式的文件',
          type: 'warning'
        });
      }
      console.log("extension")
      console.log(extension)
      return extension;

    },
    
      // 上传pdf前事件
      checkFilePdf(file) {

        var testmsg=file.name.substring(file.name.lastIndexOf('.')+1)
        const extension = testmsg === 'Pdf'
        const extension1 = testmsg === 'pdf'
        const extension2 = testmsg === 'PDF'
        if(!extension && !extension1 && !extension2) {
          this.$message({
            message: '您上传的文件格式不符合要求!只支持PDF格式的文件',
            type: 'warning'
          });
        }
        console.log("extension")
        console.log(extension)
        return extension;

      },

    // 点击详情按钮弹出详情
    showDetails(row,parameter){
      console.log("parameter")
      console.log(parameter)
      this.detailsTittle=row.title;
      this.detailsDialogFormVisible=true
    },
    //   删除操作
    async deleteOperate(row) {
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async() => {
          const res = await delnoticeuser({ id: row.id })
          if (res.code === 0) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            
            // this.getNoticeuserList()
          }
        })
    },
     //   修改操作
    edit(){
        this.$refs.editForm.validate(async valid => {
        if (valid) {
          const res = await eitenoticeuser(this.editForm)
                if (res.code === 0) {
                  this.$message({
                    type: 'success',
                    message: '添加成功',
                    showClose: true
                  })
                }
                this.getNoticeuserList()
                this.closeEditDialog()
        }
      })
    },
    //   新增操作
    add(){
        this.$refs.addForm.validate(async valid => {
        if (valid) {
          const res = await addnoticeuser(this.addform)
                if (res.code === 0) {
                  this.$message({
                    type: 'success',
                    message: '添加成功',
                    showClose: true
                  })
                }
                this.getNoticeuserList()
                this.closeDialog()
        }
      })
    },
    // 新增/编辑
    openDialog(type) {
      switch (type) {
        case 'add':
          this.dialogTitle = '新增'
          break
        case 'edit':
          this.dialogTitle = '编辑'
          break
        default:
          break
      }
      this.type = type
      this.dialogFormVisible = true
    },
    
    // 获取通知人列表
    // async getNoticeuserList(){
    //   const res=await noticeuserlist()
    //   if(res.code==0){
    //     this.tableData=res.data
    //   }
    // },
    // 点击修改事件
    async editOperate(row) {
      const res = await looknoticeusercont({ id: row.id })
      this.form = res.data
      this.dialogFormVisible=true
    },
   
    
    
    // 新增form清空
    initForm() {
      this.$refs.form.resetFields()
      this.form = {
        user_name:'',
        user_wechat:''
      }
    },
    // 修改form清空
    editInitForm() {
      this.$refs.editForm.resetFields()
      this.editForm = {
        user_name:'',
        user_wechat:''
      }
    },
    // 关闭添加弹框事件
    closeDialog() {
      this.initForm()
      this.dialogFormVisible = false
    },
    // 关闭修改弹框事件
    closeEditDialog() {
      this.editInitForm()
      this.editDialogFormVisible = false
    },
    
  }
}
</script>

<style scoped lang="scss">
.mouse{
  cursor:pointer
}
.right{
  margin-right: 5px;
}
.button-box {
  padding: 10px 20px;
  .el-button {
    float: right;
  }
}
.warning {
  color: #dc143c;
}
</style>
