<template>
  <div id="messageManage-container">
    <div class="search-zone">
      <div class="search-zone-left">
        <el-date-picker v-model="searchParams.CreateDate" placeholder="留言时间" @change="search"
        value-format="yyyy-MM-dd" style="width: 248px;margin-right: 48px;"></el-date-picker>
        <el-select v-model="searchParams.ProductType" placeholder="板块" @change="search">
          <el-option :label="item.ProductName" :value="item.ProductType" v-for="item in boardArray" :key="item.value"></el-option>
        </el-select>
      </div>
      <div class="search-zone-right">
        <el-input v-model="searchParams.KeyWord" placeholder="留言内容" @input="search" 
        style="width: 230px;" prefix-icon="el-icon-search"></el-input>
      </div>
    </div>
    <el-table :data="dataList" border row-key="CommentId" :tree-props="{ children: 'ReplyList' }"
    :span-method="spanMethod" ref="messageTable">
      <el-table-column label="留言内容" prop="Content">
        <template slot-scope="{row}">
          {{row.Content}}
        </template>
      </el-table-column>
      <el-table-column label="时间" prop="CreateTime" show-overflow-tooltip align="center"></el-table-column>
      <el-table-column label="留言人" prop="RealName" align="center">
        <template slot-scope="{row}">
          <span style="color: #409EFF;cursor: pointer;" @click="messageDetail(row)" v-if="row.RealName">{{row.RealName}}</span>
          <span v-else>{{row.AdminName || '--'}}</span>
        </template>
      </el-table-column>
      <el-table-column label="来源" prop="Title" show-overflow-tooltip align="center">
        <template slot-scope="{row}">
          {{row.Title}}
        </template>
      </el-table-column>
      <el-table-column label="板块" prop="ProductType" show-overflow-tooltip align="center">
        <template slot-scope="{row}">
          <span>{{boardArray[row.ProductType] ? boardArray[row.ProductType].ProductName:''}}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="{row}">
          <div class="table-option">
            <template v-if="row.ProductType==1">
              <span @click="topOption(row)" v-if="row.IsTop==0">置顶</span>
              <span @click="topOption(row)" v-else>取消置顶</span>
            </template>
            <span @click="replayMessage(row)" v-if="row.ProductType==1">回复</span>
            <span @click="deleteOption(row)" style="color: #B72E18;">删除</span>
          </div>
        </template>
      </el-table-column>
      <div slot="empty" style="padding: 100px 0">
        <img src="~@/assets/img/cus_m/nodata.png" style="display:block;width:128px;height:128px;margin: 0 auto;">
        <span>暂无数据</span>
      </div>
    </el-table>
    <div style="height: 40px;margin-top: 10px; padding: 0 20px;" >
      <m-page
        :page_no="searchParams.CurrentIndex"
        :pageSize="10"
        :total="total"
        @handleCurrentChange="pageChange"
      />
    </div>
    <!-- 留言详情弹窗 -->
    <m-dialog :title="dialogTitle" :show.sync="isDetailShow" width="568px">
      <el-form :model="detailForm" label-width="105px">
        <el-form-item label="留言内容：" id="content-form-item">
          <span>{{detailForm.Content}}</span>
        </el-form-item>
        <el-form-item label="留言人姓名：">
          {{detailForm.RealName}}
        </el-form-item>
        <el-form-item label="公司名称：">
          {{detailForm.CompanyName || '--'}}
        </el-form-item>
        <el-form-item label="客户状态：">
          {{detailForm.CompanyStatus || '--'}}
        </el-form-item>
        <el-form-item label="所属销售：">
          {{detailForm.SellerName || '--'}}
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="isDetailShow = false" type="primary"
        style="height: 40px;width: 224px;">知道了</el-button>
      </div>
    </m-dialog>
    <!-- 留言回复弹窗 -->
    <m-dialog :title="dialogTitle" :show.sync="isReplayShow" width="568px">
      <el-form :model="replayForm" ref="replayForm">
        <el-form-item :rules="[{required: true, message: '回复内容不能为空', trigger: 'blur'}]"  prop="content">
          <el-input v-model="replayForm.content" placeholder="请输入回复"
          type="textarea" resize="none" :show-word-limit="true" maxlength="150" rows="10"></el-input>
        </el-form-item>
        <span style="font-size: 16px;font-family: PingFang SC-Regular, PingFang SC;font-weight: 400;color: #999999;">
          注：至多输入150字，超出部分不予显示
        </span>
      </el-form>
      <div slot="footer" style="margin-top: ;20px">
        <el-button @click="submit" type="primary" style="width: 132px;height: 40px;">保存</el-button>
        <el-button @click="isReplayShow = false" style="width: 132px;height: 40px;">取消</el-button>
      </div>
    </m-dialog>
  </div>
</template>

<script>
import { interactiveInterface } from '@/api/api.js';

import mPage from '@/components/mPage.vue'
import mDialog from '@/components/mDialog.vue'
  export default {
    name:'messageManage',
    components:{mPage,mDialog},
    data() {
      return {
        searchParams:{
          CreateDate:'',
          ProductType:'',
          KeyWord:'',
          CurrentIndex:1,
          PageSize:10
        },
        total:0,
        dataList:[],
        boardArray:[],
        // 弹窗标题
        dialogTitle:'',
        //---------------留言详情弹窗
        // 是否显示
        isDetailShow:false,
        detailForm:{},
        //  ----------------留言回复弹窗
        // 是否显示
        isReplayShow:false,
        replayForm:{
          CommentId:'',
          content:''
        },
        expandRow:{}
      }
    },
    created() {
      this.getMessageList()
      this.getProductionList()
    },
    methods: {
      // 切换页码
      pageChange(page){
        this.searchParams.CurrentIndex = page
        this.getMessageList()
      },
      // 搜索
      search(){
        this.searchParams.CurrentIndex=1
        this.getMessageList()
      },
      // 获取留言列表
      getMessageList(option=''){
        // option 操作 expand展开对应行
        interactiveInterface.getAllBoardMessage(this.searchParams).then(res=>{
          this.dataList = res.Data.List || []
          this.total=res.Data.Paging.Totals || 0
          if(option=='expand'){
            this.$nextTick(()=>{
              this.$refs.messageTable.toggleRowExpansion(this.expandRow,true)
            })
          }
        })
      },
      //获取板块列表
      getProductionList(){
        interactiveInterface.getProductList().then(res=>{
          this.boardArray = [{ProductName:'全部',ProductType:''},...res.Data]
        })
      },
      // // 刷新列表
      // refreshList(){
      //   this.getMessageList()
      // },
      // 置顶/取消置顶
      topOption(row){
        interactiveInterface.messageTop({CommentId:row.CommentId}).then(res=>{
          row.IsTop = res.Data.IsTop
          this.$message.success('操作成功')
        })
      },
      // 留言详情
      messageDetail(row){
        // console.log(row);
        this.dialogTitle='留言人详情'
        this.detailForm = row
        this.isDetailShow=true
      },
      // 回复
      replayMessage(row){
        this.dialogTitle='留言回复'
        this.replayForm={
          CommentId:row.CommentId,
          content:''
        }
        this.expandRow = row;
        if(this.$refs.replayForm) this.$refs.replayForm.clearValidate()
        this.isReplayShow=true
      },
      // 提交
      submit(){
        this.$refs.replayForm.validate((valid)=>{
          if(valid){
            interactiveInterface.messageReplay(this.replayForm).then(res=>{
              if(res.Ret == 200){
                this.$message.success('回复成功')
                this.isReplayShow=false
                this.getMessageList('expand')
              }
            })
          }
        })
      },
      // 删除操作
      deleteOption(row){
        // console.log(row);
        let text=row.ReplyCommentId?'回复':'留言'
        let productType = row.ProductType?row.ProductType
                          :row.ReplyCommentId?1:''
        this.$confirm(text+'删除后不可恢复，确定删除吗？',{
          confirmText:'确定',
          cancelText:'取消',
          customClass:'warning-outline-icon',
          iconClass:'el-icon-warning-outline'
        }).then(res =>{
          interactiveInterface.messageDelete({CommentId:row.CommentId,ProductType:productType}).then(res=>{
            if(res.Ret == 200){
              this.$message.success('删除成功')
              this.getMessageList()
            }
          })
        }).catch(()=>{})
      },
      // 合并单元格
      spanMethod({row,rowIndex,column,columnIndex}){
        if((!row.Title) && (!row.ProductType)){
          if(columnIndex==3){
            return {
              rowspan:1,
              colspan:2
            }
          }else if(columnIndex==4){
            return {
              rowspan:1,
              colspan:0
            }
          }
        }
      }
    },
  }
</script>

<style lang="scss" scoped>
  #messageManage-container{
    background-color: white;
    padding: 18px 20px;
    box-sizing: border-box;
    min-height: calc(100vh - 110px);
    border: 1px solid #ECECEC;
    .search-zone{
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 21px;
    }
    .table-option{
      display: flex;
      align-items: center;
      justify-content: space-around;
      span{
        cursor: pointer;
        color: #409EFF;
      }
    }
  }
</style>
<style lang="scss">
  #content-form-item{
    .el-form-item__label,.el-form-item__content{
      line-height: normal;
    }
  }
  #messageManage-container{
    .el-table__indent{
      padding-left:0!important;
    }
    .el-table__placeholder{
      width: 0;
    }
  }

  .warning-outline-icon{
    .el-icon-warning-outline{
      color: #E6A23C;
    }
  }


</style>