<template>
  <div class="main-contain">
    <div class="position">
      <bread-crumb :crumbs='crumbs'></bread-crumb>
      <el-button  style="float:right;" type="primary" size="small" icon="el-icon-circle-plus-outline" @click="openCreate">添加回复</el-button>
    </div>
    <div class="app-container">
        <reply-nav activeName="keyword"></reply-nav>
        <div style="margin-bottom: 10px">
            <el-row :gutter="24">
                <el-col :span="8">
                    <el-input style="width: 300px" v-model="listQuery.search" placeholder="请输入您需要搜索的内容"></el-input>
                    <el-button type="primary"  icon="el-icon-search" @click="changeKey">搜索</el-button>
                </el-col>
            </el-row>
        </div>
        <div class="filter-container" style="margin-top: 10px;margin-left: 5px">
            <el-checkbox style="width: 30px" @change="changeCheck" v-model="checkAllStatus">全选</el-checkbox>
            <el-button size="small" icon="el-icon-delete" @click="openDeleteReplys">批量删除</el-button>
        </div>
        <el-table ref="multipleTable"  @selection-change="handleSelectionChange"  :header-cell-style="{ backgroundColor: 'rgb(245, 247, 250)'}" :data="messagesData" border fit highlight-current-row  style="width: 100%;margin-top: 10px;">
            <el-table-column
                align="center"
                type="selection"
                width="55">
             </el-table-column>
            <el-table-column label="关键词" align="center">
                <template slot-scope="scope">
                    {{scope.row.message_key_name}}
                </template>
            </el-table-column>
            <el-table-column label="回复内容" align="center">
                <template slot-scope="scope">
                <span>{{scope.row.message_content}}</span>
                </template>
            </el-table-column>
            <el-table-column label="模式" align="center">
                <template slot-scope="scope">
                <span>{{keyTypeName(scope.row.message_key_type)}}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-tooltip class="item" effect="dark" content="编辑" placement="top">
                        <el-button size="mini" type="primary" icon="el-icon-edit-outline" @click="openEdit(scope.row, scope.$index)" ></el-button>
                    </el-tooltip>
                    <el-tooltip class="item" effect="dark" content="删除" placement="top">
                        <el-button size="mini" type="danger" icon="el-icon-delete" @click="openDelete(scope.row, scope.$index)" ></el-button>
                    </el-tooltip>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-sizes="[10,20,50,100]"
            :page-size="10"
            background
            style="margin-top:20px;"
            align="right"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
        <!--添加-->
        <create-k-w-reply-form ref="createKWReplyForm" :replysData="messagesData" ></create-k-w-reply-form>
        <!--编辑-->
        <edit-k-w-reply-form ref="editKWReplyForm" :replysData="messagesData" :replyIndex="replyIndex" :form="editForm"></edit-k-w-reply-form>
    </div>
  </div>
</template>

<script>
  import {GetKeyWordReplys,DeleteReplys} from "@/api/mpwechat/mpreply";
  import BreadCrumb from '../components/bread-crumb';
  import CreateKWReplyForm from './components/CreateKWReplyForm';
  import EditKWReplyForm from './components/EditKWReplyForm';
import replyNav from "./components/replyNav";

  export default {
    name: 'keywordreply',
    components:{
      BreadCrumb,
      replyNav,
      CreateKWReplyForm,
      EditKWReplyForm,
    },
    data(){
      return{
        crumbs: [
        { path: false, name: "系统设置" },
        { path: false, name: "关键词回复" }
        ],
        total:0,
        listQuery:{
            page:1,
            limit:10,
            search:'',
        },
        checkAllStatus:false,
        selectedReplys:[],
        messagesData:[],
        replyIndex:-1,
        editForm:{
            id:0,
            message_regular_name:'',
            message_key_type:1,
            message_key_name:'',
            message_content:'',
        },
      }
    },
    methods:{
        openCreate:function(){
          this.$refs.createKWReplyForm.open();
        },
        openEdit:function(row,index){
            this.replyIndex = index;
            for (const key in this.editForm) {
              this.editForm[key] = row[key];
            }
            this.$refs.editKWReplyForm.open();
        },
        openDeleteReplys:function(){
          if (this.selectedReplys.length==0) {
            this.$message.error("请选择要删除的回复");
            return false;
          }

          this.$confirm('确认要删除所选的回复吗？<br>删除后，回复将无法恢复', '删除提示', {
            dangerouslyUseHTMLString:true,
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            var ids = [];
            var idMap = {};
            for (const index in this.selectedReplys) {
              ids.push(this.selectedReplys[index].id);
              idMap[this.selectedReplys[index].id] = this.selectedReplys[index].id;
            }
            DeleteReplys({ids:ids}).then(response=>{
              var res = response.data;
              if (res.state === 1) {
                var dataLength = this.messagesData.length;
                for (let index = dataLength-1; index >= 0; index--) {
                  if(this.messagesData[index].id in idMap) {
                    this.messagesData.splice(index, 1);
                  }                  
                }
                this.$message.success("删除成功");
              }else {
                this.$message.error(res.msg);
              }
            }).catch(e=>{});
          }).catch(() => {
            return false        
          });
        },
        openDelete:function(row,index){
          this.$confirm('确认要删除该回复吗？<br>删除后，该回复将无法恢复', '删除提示', {
            dangerouslyUseHTMLString:true,
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            var ids = [];
            ids.push(row.id);
            DeleteReplys({ids:ids}).then(response=>{
              var res = response.data;
              if (res.state === 1) {
                this.messagesData.splice(index, 1);
                this.$message.success("删除成功");
              }else {
                this.$message.error(res.msg);
              }
            }).catch(e=>{});
          }).catch(() => {
            return false        
          });
        },
        changeCheck:function(){
          this.$refs.multipleTable.clearSelection();
          if (this.checkAllStatus) {
            this.$refs.multipleTable.toggleAllSelection();
          }
        },
        handleSelectionChange:function (val) {
          this.selectedReplys = val;
        },
        handleSizeChange(limit) {
            this.listQuery.limit = limit;
            this.GetKeyWordReplys();
        },
        handleCurrentChange(page) {
            this.listQuery.page = page;
            this.GetKeyWordReplys();
        },
        changeKey(){
            this.GetKeyWordReplys();
        },
        keyTypeName:function(type){
          return type == 1?'半匹配':'全匹配';
        },
        GetKeyWordReplys(){
            GetKeyWordReplys(this.listQuery).then(response=>{
                var res = response.data;
                if(res.state===1) {
                    this.messagesData = res.data.messages;
                    this.total = res.data.total;
                }
            }).catch(e=>{})
        }
    },
    computed:{
    },
    created(){
        this.GetKeyWordReplys();
    }
  }
</script>

<style scoped>
  /*.app-container .cell.clearfix .time ul li {*/
    /*float: left;*/
    /*list-style: none;*/
    /*cursor: pointer;*/
    /*padding: 6px 20px;*/
    /*color: #606266;*/
    /*border-radius: 4px;*/
    /*margin: 0 8px 0 0;*/
    /*font-size: 14px;*/
    /*text-align: center;*/
  /*}*/
</style>