<template>
  <div class="informationManage">
    <template v-if="informationShowAdd">
      <div class="head-title">
        资讯列表
        <el-button style="float:right;margin-top: -5px;" size="small" type="primary"
          @click="informationShowAdd=false,clearMsg()">新增</el-button>
      </div>
      <div class="content">
        <div>
          <span>资讯状态：</span>
          <el-select class="w120" @change="msg.pageIndex=1,getList()" v-model="msg.ArticleStatus" size="small"
            placeholder="请选择">
            <el-option label="全部" :value="-1"></el-option>
            <el-option label="启用中" :value="1"></el-option>
            <el-option label="禁用中" :value="2"></el-option>
          </el-select>
          <el-date-picker size="small" @change="msg.pageIndex=1,getList()" v-model="dateList" type="datetimerange"
            range-separator="至" start-placeholder="开始日期" value-format="yyyy-MM-dd HH:mm:ss" end-placeholder="结束日期">
          </el-date-picker>
          <div style="margin-left:20px" class="searchInput">
            <el-input style="display:inline-block;width:225px;height:30px" placeholder="标题"
              @keyup.enter.native="msg.pageIndex=1,getList()" v-model="msg.Name" size="small"
              @clear="msg.pageIndex=1,getList()" clearable>
            </el-input>
            <span @click="msg.pageIndex=1,getList()" class="el-icon-search"
              style="color:#979dad;font-size:14px;position:relative;top:1px"></span>
          </div>
          <div style="margin-top:15px;">
            <el-button @click="tableSet(1)" size="mini">启用</el-button>
            <el-button @click="tableSet(2)" style="margin:0 10px;" size="mini">禁用</el-button>
            <el-button @click="tableSet(3)" size="mini">删除</el-button>
          </div>
        </div>
        <el-table v-loading="loading" :data="tableData" @selection-change="tableSelect" border
          style="width: 100%;margin:20px 0">
          <el-table-column type="selection" width="55">
          </el-table-column>
          <el-table-column prop="ID" width="80" label="编号">
          </el-table-column>
          <el-table-column prop="Name" width="280" label="标题">
          </el-table-column>
          <el-table-column prop="CreateDateStr" label="发布时间">
          </el-table-column>
          <el-table-column label="资讯状态">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.ArticleStatus==1" type="success">启用中</el-tag>
              <el-tag v-if="scope.row.ArticleStatus==2" type="warning">禁用中</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="是否可以留言">
            <template slot-scope="scope">
              <p v-if="scope.row.IsComment==0">否</p>
              <p v-if="scope.row.IsComment==1">是</p>
            </template>
          </el-table-column>
          <el-table-column label="留言数">
            <template slot-scope="scope">
              <span style="color:#409EFF;text-decoration:underline;cursor:pointer;"
                @click="CommonJump('informationEvalution',{ArticleId:scope.row.ID})">{{scope.row.CommentNum}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="BrowseNum" label="实际浏览数">
          </el-table-column>
          <el-table-column prop="FictitiousBrowseNum" label="虚拟浏览数">
          </el-table-column>
          <el-table-column prop="address" width="120" label="操作">
            <template slot-scope="scope">
              <img @click="Edit(scope.row)" style="width:32px;height:32px" src="../../assets/img/userman/edit.png"
                alt="">
              <img @click="Delete(scope.row)" style="width:32px;height:32px;margin:0 10px"
                src="../../assets/img/userman/del.png" alt="">
            </template>
          </el-table-column>
        </el-table>
        <el-pagination style="text-align:right" background @current-change="handleCurrentChange"
          :page-size="msg.pageSize" layout="prev, pager, next" :current-page.sync="msg.pageIndex" :total="total">
        </el-pagination>
      </div>
    </template>
    <template v-else>
      <div class="head-title">
        <span @click="informationShowAdd=true" style="color:rgb(64, 158, 255);cursor:pointer;">资讯管理</span><span
          style="margin:0 9px;color:#C0C4CC">/</span><span>资讯编辑</span>
      </div>
      <div class="content">
        <el-form :model="addMsg" :rules="rules" ref="addMsg" label-width="120px">
          <el-form-item label="标题" prop="Name">
            <el-input type="text" class="w300" v-model="addMsg.Name" size="small"></el-input>
          </el-form-item>
          <el-form-item label="标签" class="is-required">
            <el-tag :key="index" v-for="(tag,index) in addMsg.LableNameList" closable :disable-transitions="false"
              @close="handleClose(tag)">
              {{tag}}
            </el-tag>
            <el-input class="input-new-tag" v-if="inputVisible" v-model="inputValue" ref="saveTagInput" size="small"
              @keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm">
            </el-input>
            <el-button v-else class="button-new-tag" size="small" @click="showInput">+ 标签</el-button>
          </el-form-item>
          <el-form-item label="资讯状态">
            <el-radio v-model="addMsg.ArticleStatus" :label="1">启用</el-radio>
            <el-radio v-model="addMsg.ArticleStatus" :label="2">禁用</el-radio>
          </el-form-item>
          <el-form-item label="关联老师">
            <el-select class="w150" style="margin-right: 10px;" v-model="addMsg.TeacherId" size="small"
              placeholder="请选择" @change='changeSupplier'>
              <el-option label="不限" :value="0"></el-option>
              <el-option v-for="item in teacherList" :key="item.ID" :label="item.Name" :value="item.ID">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="封面" size="small">
            <el-button @click="openChangeDig(1)" size="small">选择文件</el-button>
            <div class="app-gallery-item" style="position: relative;width: 100px;margin-top: 10px;border:none;">
              <img v-if="!addMsg.ArticlePic || addMsg.ArticlePic==''" src="../../assets/img/default.png"
                style="width:80px;height:80px" alt="">
              <img v-else style="width:80px;height:80px" :src="addMsg.ArticlePic" alt="">
            </div>
          </el-form-item>
          <el-form-item label="排序">
            <el-input type="number" class="w300" v-model="addMsg.Sort" size="small"></el-input>
          </el-form-item>
          <el-form-item label="自动上架时间">
            <el-date-picker size="small" class="w300" v-model="addMsg.ShelvesDate" type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期时间">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="自动下架时间">
            <el-date-picker size="small" class="w300" v-model="addMsg.DownDate" type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期时间">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="虚拟浏览数量">
            <el-input type="number" class="w300" v-model="addMsg.FictitiousBrowseNum" size="small"></el-input>
          </el-form-item>
          <el-form-item label="是否可以留言">
            <el-switch v-model="addMsg.IsComment" class="w300" active-color="#409EFF" :active-value="1"
              :inactive-value="0">
            </el-switch>
          </el-form-item>
          <el-form-item label="资讯内容">
            <UE style="width:750px;" :defaultMsg="defaultMsg" :config="config" :IsMultiple="true" ref="ue"></UE>
          </el-form-item>
        </el-form>
      </div>
      <el-button size="small" style="margin-top:20px;padding:9px 25px;" type="primary" @click="submitform('addMsg')">保存
      </el-button>
    </template>
    <!-- 选择文件 -->
    <el-dialog title="选择文件" :visible.sync="changeState" width="1240px">
      <ChooseImg @SelectId="SelectId"></ChooseImg>
    </el-dialog>
  </div>
</template>
<script>
  import ChooseImg from "@/components/global/ChooseImg.vue";
  import UE from "@/components/global/UE.vue";

  export default {
    components: {
      ChooseImg,
      UE
    },
    data() {
      return {
        loading: false,
        tableData: [],
        msg: {
          pageIndex: 1,
          pageSize: 15,
          ArticleStatus: -1, //资讯状态
          StartTime: '',
          EndTime: '',
          Name: '' //标题
        },
        total: 0,
        dateList: [],
        informationShowAdd: true, //是否显示新增
        addMsg: {
          ID: 0,
          ArticleStatus: 1, //资讯状态 1上架 2下架
          Sort: 0, //排序
          ShelvesDate: '', //自动上架时间
          DownDate: '', //自动下架时间
          FictitiousBrowseNum: 0, //虚拟浏览数量
          Name: '', //标题
          LableName: '', //标签
          IsComment: 0, //是否可以留言，0-否，1-是
          Describe: '', //资讯内容
          TeacherId: 0,
          LableNameList: [], //标签数组
          ArticlePic: '', //图片
        },
        //选中IDs
        CheckedIds: [],
        teacherList: [], //老师的选择
        rules: {
          Name: [{
            required: true,
            message: '请输入标题',
            trigger: 'change'
          }]
        },
        inputVisible: false,
        inputValue: '',
        changeState: false,
        imgType: 0,
        defaultMsg: "",
        config: {
          initialFrameWidth: null,
          initialFrameHeight: 350
        },
      };
    },
    created() {
      this.getList();
      this.getTeacherList()
    },
    methods: {
      handleCurrentChange(val) {
        this.msg.pageIndex = val;
        this.getList();
      },
      getList() {
        if (this.dateList && this.dateList.length > 0) {
          this.msg.StartTime = this.dateList[0];
          this.msg.EndTime = this.dateList[1];
        } else {
          this.msg.StartTime = '';
          this.msg.EndTime = '';
        }
        this.loading = true;
        this.apipost("/api/Education/GetArticlePageList", this.msg, res => {
          this.loading = false;
          if (res.data.resultCode == 1) {
            this.total = res.data.data.count;
            let pageData = res.data.data.pageData;
            this.tableData = pageData;
          }
        })
      },
      //修改
      Edit(item) {
        this.apipost("/api/Education/GetArticleModel", {
          Id: item.ID
        }, res => {
          if (res.data.resultCode == 1) {
            this.informationShowAdd = false;
            var myData = res.data.data;
            this.addMsg.ID = myData.ID;
            this.addMsg.ArticleStatus = myData.ArticleStatus;
            this.addMsg.Sort = myData.Sort;
            this.addMsg.ShelvesDate = myData.ShelvesDate;
            this.addMsg.DownDate = myData.DownDate;
            this.addMsg.FictitiousBrowseNum = myData.FictitiousBrowseNum;
            this.addMsg.Name = myData.Name;
            this.addMsg.LableName = myData.LableName;
            this.addMsg.IsComment = myData.IsComment;
            this.addMsg.Describe = myData.Describe;
            if (myData.LableNameList != null && myData.LableNameList.length > 0) {
              this.addMsg.LableNameList = myData.LableNameList;
            }
            if (this.addMsg.Describe && this.addMsg.Describe != "") {
              this.defaultMsg = this.addMsg.Describe;
            }
            this.addMsg.TeacherId = myData.TeacherId;
            this.addMsg.ArticlePic = myData.ArticlePic;
          } else {
            this.Error(res.data.message);
          }
        })
      },
      //清空值
      clearMsg() {
        this.addMsg.ID = 0;
        this.addMsg.ArticleStatus = 1;
        this.addMsg.Sort = 0;
        this.addMsg.ShelvesDate = '';
        this.addMsg.DownDate = '';
        this.addMsg.FictitiousBrowseNum = 0;
        this.addMsg.Name = '';
        this.addMsg.LableName = '';
        this.addMsg.IsComment = 0;
        this.addMsg.Describe = '';
        this.addMsg.LableNameList = [];
        this.addMsg.TeacherId = 0;
        this.addMsg.ArticlePic = '';
      },
      submitform(addMsg) {
        //提交创建、修改表单
        this.$refs[addMsg].validate(valid => {
          if (valid) {
            this.saveMsg();
          } else {
            return false;
          }
        });
      },
      //保存
      saveMsg() {
        if (this.addMsg.LableNameList.length == 0) {
          this.Error('请选择标签');
          return;
        }
        let content = this.$refs.ue.getUEContent();
        this.addMsg.Describe = content;
        this.apipost("/api/Education/AddOrUpdateArticle", this.addMsg, res => {
          if (res.data.resultCode == 1) {
            this.informationShowAdd = true;
            this.getList();
            this.clearMsg();
            this.Success(res.data.message);
          } else {
            this.Error(res.data.message);
          }
        })
      },
      getTeacherList() {
        this.apipost("/api/Education/GetTeacherList", {}, res => {
          if (res.data.resultCode == 1) {
            this.teacherList = res.data.data
          } else {
            this.Error(res.data.message);
          }
        })
      },
      changeSupplier(val) {},
      //单个删除
      Delete(item) {
        let that = this;
        that.$confirm('是否删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.apipost('/api/Education/DelArticleInfo', {
              Ids: item.ID
            },
            res => {
              if (res.data.resultCode === 1) {
                this.getList();
                this.Success(res.data.message)
              } else {
                this.Error(res.data.message);
              }
            },
            null
          );
        }).catch(() => {

        });
      },
      tableSelect(val) {
        this.CheckedIds = val;
      },
      //上架 下架 删除
      tableSet(num) {
        if (this.CheckedIds.length == 0) {
          this.Error("请先勾选要设置的资讯!");
          return;
        }
        let idList = [];
        this.CheckedIds.forEach(item => {
          idList.push(item.ID)
        })
        let GoodsIds = idList.join(',');
        let str = "";
        let msg = {
          Ids: GoodsIds,
          ArticleStatus: num,
        }
        if (num == 1) {
          str = "批量启用,是否继续";
        }
        if (num == 2) {
          str = "批量禁用,是否继续";
        }
        if (num == 3) {
          str = "是否确认删除选中的资讯?";
          var mymsg = {
            Ids: GoodsIds
          }
        }
        let that = this;
        that.$confirm(str, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          if (num == 1 || num == 2) {
            this.BatchShevlves(msg);
          }
          if (num == 3) {
            this.BatchDelete(mymsg);
          }
        }).catch(() => {});
      },
      //批量上下架
      BatchShevlves(msg) {
        this.apipost("/api/Education/EnableArticleInfo", msg, res => {
          if (res.data.resultCode == 1) {
            this.getList();
            this.Success(res.data.message);
            this.CheckedIds = [];
          } else {
            this.Error(res.data.message);
          }
        })
      },
      //批量删除
      BatchDelete(msg) {
        this.apipost("/api/Education/DelArticleInfo", msg, res => {
          if (res.data.resultCode == 1) {
            this.getList();
            this.Success(res.data.message);
            this.CheckedIds = [];
          } else {
            this.Error(res.data.message);
          }
        })
      },
      handleClose(tag) {
        this.addMsg.LableNameList.splice(this.addMsg.LableNameList.indexOf(tag), 1);
      },
      showInput() {
        this.inputVisible = true;
        this.$nextTick(_ => {
          this.$refs.saveTagInput.$refs.input.focus();
        });
      },
      handleInputConfirm() {
        let inputValue = this.inputValue;
        if (inputValue) {
          this.addMsg.LableNameList.push(inputValue);
        }
        this.inputVisible = false;
        this.inputValue = '';
      },
      openChangeDig(num) {
        this.changeState = true;
        this.imgType = num;
      },
      SelectId(msg) {
        if (this.imgType == 1) {
          let url = this.getIconLink(msg.url)
          this.addMsg.ArticlePic = url
        }
        this.changeState = false;
      },
    },
    mounted() {

    }
  };
</script>
<style>
  .informationManage .content .searchInput {
    border: 1px solid #DCDFE6;
    border-radius: 4px;
  }

  .informationManage .content .searchInput .el-input__inner {
    border: none;
    outline: none;
    height: 30px;
    line-height: 30px;
  }

  .informationManage .content .searchInput {
    line-height: normal;
    display: inline-table;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    width: 250px;
    margin-right: 20px;
  }

  .informationManage .content {
    background: #fff;
    margin-top: 10px;
    padding: 20px;
    box-sizing: border-box;
  }

  .informationManage .w300 {
    width: 300px !important;
  }

  .informationManage .el-tag+.el-tag {
    margin-left: 10px;
  }

  .informationManage .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }

  .informationManage .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }

</style>