<style>
    .syslog_Content{
        width:100%;
    }
    .syslog_ul li{
        width:100%;
        min-height:135px;
        margin-bottom:10px;
    }
    .syslog_top{
        width:100%;
        height:34px;
        line-height: 34px;
        background-color: #DFDFDF;
    }
    .sys_content{
        width:100%;
        min-height: 101px;
        padding:20px;
        font-size:14px;
        background-color: #fff;
    }
    .systemUpdateLog .ql-editor{
      min-height: 200px;
    }
    .sysTop_left{
        float:left;
    }
    .sysTop_banben{
        display: inline-block;
        color:#38425D;
        font-size: 14px;
        font-weight: bold;
        margin:0 30px;
    }
    .sysTop_uptime{
        font-size:14px;
        color:#666666;
    }
    .sysTop_right{
        float:right;
        margin-right:30px;
    }
    .sysliteleBtn{
        color: #fff;
        padding: 0 10px;
        height: 20px;
        background: #E95252;
        border: 1px solid #E95252;
        cursor: pointer;
        border-radius: 15px;
        margin-left: 10px;
    }
</style>
<template>
  <div class="flexOne systemUpdateLog">
      <div class="query-box">
            <ul>
                <li>
                  <input type="button" class="normalBtn" @click="outerVisible=true,resetInfo(),dialogTitle='新增更新日志'" :value="$t('pub.addBtn')"/>
                </li>
            </ul>
      </div>
    <div class="syslog_Content" v-loading="loading">
        <ul class="syslog_ul">
            <li v-for="item in dataList">
                <div class="syslog_top clearfix">
                    <div class="sysTop_left">
                        <span class="sysTop_banben">
                            {{item.UpdateTitle}}
                        </span>
                        <span class="sysTop_uptime">
                            更新时间：{{item.UpdateTimeStr}}
                        </span>
                    </div> 
                    <div class="sysTop_right">
                        <input type="button" class="sysliteleBtn" @click="updateLog(item.Id)" value="修改"/>   
                        <input type="button" class="sysliteleBtn" @click="delLog(item.Id)" value="删除"/>   
                    </div>  
                </div>
                <div class="sys_content" v-html="item.UpdateContent">

                </div>
            </li>
        </ul>
        <div class="noDataNotice" v-if="dataList.length<1">
            <i class="iconfont icon-kong"></i>
            <p>{{$t("active.ld_noData")}}</p>
        </div>
    </div>
    <el-pagination background @current-change="handleCurrentChange" :current-page.sync="currentPage"
                   layout="total,prev, pager, next, jumper" :page-size='msg.pageSize' :total='total'>
    </el-pagination>

     <el-dialog
      custom-class="w800"
      :title="dialogTitle"
      :visible.sync="outerVisible"
      center
      :before-close="closeChangeMachie"
    >
      <el-form :model="addMsg" :rules="rules" ref="addMsg" label-width="80px">
        <table style="width:100%">
          <tr>
            <td colspan="2">
              <el-form-item label="标题" prop="UpdateTitle" >
                <el-input v-model="addMsg.UpdateTitle" class="w595" placeholder="请输入"/>
              </el-form-item>
            </td>
          </tr>
          <tr>
            <td colspan="2">
              <el-form-item label="更新内容" prop="UpdateContent">
                <quill-editor class="w595" :options="editorOption"  v-model="addMsg.UpdateContent"></quill-editor>
              </el-form-item>
            </td>
          </tr>
        </table>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <button class="hollowFixedBtn" @click="outerVisible = false,resetForm('addMsg')">{{$t('pub.cancelBtn')}}</button> &nbsp;
        <button class="normalBtn" @click="submitForm('addMsg')">{{$t('pub.saveBtn')}}</button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: {
          pageIndex:1,
          pageSize:15
      },
      total: 0,
      currentPage: 1,
      loading:false,
      noData: false,
      dataList:[],
      dialogTitle:'',
      outerVisible:false,
      addMsg:{
          ID:0,
          UpdateTitle:'',
          UpdateContent:'',
      },
      rules:{
        UpdateTitle: [{ required: true, message: "请输入标题", trigger: "blur" }],
        UpdateContent: [{ required: true, message: "请输入更新内容", trigger: "blur" }]
      },
      editorOption:{
          placeholder: '请输入内容',
          modules:{
              toolbar:[
                ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
                ['blockquote', 'code-block','align']
              ]
          }
      },
    };
  },
  methods: {
    getList() {
      //获取现有线路列表
      this.loading = true;
      this.apipost("sysrecord_get_GetPageList",this.msg,res => {
          this.loading = false;
          if (res.data.resultCode == 1) {
              this.dataList = res.data.data.pageData;
              this.total = res.data.data.count;
          } else {
            this.Error(res.data.message);
          }
        },
        err => {}
      );
    },
    //新增日志
    addDialog(){
        this.apipost("sysrecord_get_Set",this.addMsg,res => {
            if (res.data.resultCode == 1) {
                this.Success(res.data.message);
                this.outerVisible = false;
                this.getList();
            } else {
                this.Error(res.data.message);
            }
            },
            err => {}
        );
    },
    //修改获取数据
    updateLog(Id){
        let msg = {
            Id:Id
        }
        this.dialogTitle='修改更新日志';
        this.apipost("sysrecord_get_Get",msg,res => {
            if (res.data.resultCode == 1) {
                this.addMsg = res.data.data;
                this.addMsg.ID = res.data.data.Id;
                this.outerVisible = true;
            } else {
                this.Error(res.data.message);
            }
        },
            err => {}
        );
    },
    //删除日志
    delLog(Id){
        this.$confirm('确定删除该日志?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(() => {
                this.$message({
                    type: 'success',
                    message: '删除成功!'
            });
            let msg = {
                Id:Id
            }
            this.apipost("sysrecord_get_Remove",msg,res=>{
                if(res.data.resultCode==1){
                    this.Success('删除成功！');
                    this.getList();
                }else{
                    this.Error(res.data.message);
                }
            },null);
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
        });
    },
    submitForm(addMsg) {
      //提交创建、修改表单
      this.$refs[addMsg].validate(valid => {
        if (valid) {
            this.addDialog();
        } else {
          return false;
        }
      });
    },
    handleCurrentChange(val) {
      //翻页功能按钮
      this.msg.pageIndex = val;
      this.getList();
    },
    //点击新增初始化
    resetInfo(){
      this.addMsg = {
          ID:0,
          UpdateTitle:'',
          UpdateContent:'',
      };
    },
    closeChangeMachie(done) {
      //弹出框关闭初始化弹框内表单
      done();
      this.resetForm("addMsg");
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
  mounted() {
    this.getList();
  },
};
</script>