<template>
  <div class="m-right-block fr mh576" style="position: relative;">
    <div class="right-block-bd">

      <div class="right mh500 mt30" v-if="isPost">
         <div class="tr">
           <a class="ui-btn btn-gr btn-m" @click="isPost=false">
             返回</a>
        </div>
        <i-post-info :post-info="info" />
      </div>

      <div v-else class="ng-scope">
        <div class="m-account">
          <div class="account-tit tr">
            <el-button type="text" size="medium" icon="el-icon-plus" @click="addPost()"> 添加互动</el-button>
          </div>
        </div>

        <el-table v-loading="listLoading" :data="list" border fit highlight-current-row>
          <el-table-column label="互动流水号" prop="postId" width="100"/>
          <el-table-column label="信件标题:" min-width="220">
            <template slot-scope="{row}">
              <el-button type="text" @click="gotoDetail(row.postId)">
                {{row.title}}
              </el-button>
            </template>
          </el-table-column>

          <el-table-column label="信件状态:">
            <template slot-scope="{row}">
              <span>{{row.publishStatus|toStatus}}</span>
            </template>
          </el-table-column>

          <el-table-column label="发送时间" prop="createTime" />
        </el-table>

        <el-pagination
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-size="size"
          layout="total, prev, pager, next"
          class="m-pages"
          :total="total">
        </el-pagination>
      </div>
    </div>

    <el-dialog title="添加互动" center :visible.sync="dialogFormVisible" width="800px">
    	<el-form :model="postForm" :rules="rules" label-width="100px" ref="elForm">
    		<el-row>
    			<el-col :span="24">
    				<el-form-item label="信件标题" prop="title">
    					<el-input v-model="postForm.title" type="text" class="user-form-item" clearable></el-input>
    				</el-form-item>
    			</el-col>

          <el-col :span="24">
          	<el-form-item label="信件内容" prop="subTitle">
          		<el-input v-model="postForm.subTitle" type="textarea" class="user-form-item" clearable></el-input>
          	</el-form-item>
          </el-col>

    		</el-row>

    	</el-form>
    	<div class="dialog-footer" slot="footer">
    		<el-button @click="dialogFormVisible = false">取 消</el-button>
    		<el-button @click="doAddPost" type="primary">确 定</el-button>
    	</div>
    </el-dialog>

  </div>
</template>

<script>
  const defForm= {
    title:'',
    subTitle:'',
  }
  import {httpServer} from "@/components/httpServer/httpServer.js";
  import {parseTime} from "@/utils/index.js";
  import IPostInfo from '@/components/info/post.vue'
  export default {
    name: 'cert',
    components:{IPostInfo},
    data() {
      return {
        page: 1, //初始页
        size: 10, //    每页的数据
        type:'交流互动',
        dialogFormVisible: false,
        isPost:false,
        postForm: Object.assign( {}, defForm),
        info:{},
        list: [],
        total: 0,
        listLoading: true,
        rules:{

        }
      }
    },
    filters:{
      dateformat(val){
        return parseTime( +new Date(val), '{y}-{m}-{d}')
      },
      toStatus(val){
        const status ={'edit':'等待回复', 'publish':'已回复', 'reply':'已回复'}
        return status[val]||'处理中';
      }
    },
    beforeMount() {
      this.getList()
    },
    watch: {
      type(res) {
        this.currentPage = 1
        this.getList()
      }
    },
    methods: {
      getList() {
        this.listLoading = true
        let page = this.page
        let type= this.type
        httpServer("Course.getUserPostList", {page,type }).then( ({data, code}) => {
          let { total, list } = data
          if (!list) list = [];
          this.list = list.map(v => {
            this.$set(v, 'edit', false)
            return v
          })
          this.total = total || 0;
          this.listLoading = false
        })
      },
      addPost(){
        this.postForm = Object.assign({}, defForm);
        this.dialogFormVisible = true
      },
      doAddPost(){
        let param = Object.assign({}, this.postForm);
        httpServer("Course.addPostInfo", param).then(res=>{
          this.$message.successMsg("添加成功")
          this.dialogFormVisible = false
          this.getList()
        })
      },
      gotoDetail(postId) {
        httpServer("Course.getPostInfo", {postId}).then(({
          data,
          code
        }) => {
          this.info = data
          this.isPost = true
          this.listLoading = false
        })
      },
      handleCurrentChange: function(currentPage) {
        this.page = currentPage;
        this.getList()
      }
    }
  }
</script>

<style>
    @import url("./index.css");
    @import url("../../../assets/css/m-account.css");
    @import url("../../../assets/css/m-notice.css");
</style>
