<template>
  <div class="cssbox">
    <el-tabs v-model="questionListParams.type" type="card" @tab-click="handleClick">
      <el-tab-pane label="话术" name="1"></el-tab-pane>
      <el-tab-pane label="流程" name="2"></el-tab-pane>
    </el-tabs>
    <!-- <el-col :span="4" style="text-align: right;"> -->
    <div class="btnBox">
      <el-button type="success" plain @click="postModularInit" v-if="!$store.state.readonly">新建模块</el-button>
    </div>
    <!-- </el-col> -->
    <el-collapse v-model="modularId" @change="handleChange" accordion>
      <el-collapse-item v-for="(item,index) in modularList" :name="item.id" :key="index">
        <template slot="title">
          {{item.title}}
          <div class="btn-block list2-btn">
            <el-button size="mini" style="margin-left:20px;" plain type="warning" @click="editModular(item)" v-if="!$store.state.readonly">编辑</el-button>
              <el-button
                size="mini"
                plain
                type="danger"
                @click="delIndex(item)"
                v-if="!$store.state.readonly"
              >删除</el-button>
              <el-button size="mini"  plain  @click="upIndex(item,index)" v-if="!$store.state.readonly">上移</el-button>
              <el-button size="mini"  plain  @click="downIndex(item,index)" v-if="!$store.state.readonly">下移</el-button>
            <!-- <i class="iconfont icon-shangyi" @click="upIndex(item,index)" v-if="!$store.state.readonly"></i>
            <i class="iconfont icon-xiayi" @click="downIndex(item,index)" v-if="!$store.state.readonly"></i> -->
          </div>
        </template>
          <div class="btnBox">
          <el-button
            type="success"
            plain
            @click="postModularContentInit"
            v-if="!$store.state.readonly"
          >新建模块内容</el-button>
        </div>
         <el-table :data="modularContent" style="width: 100%">
          <!-- <el-table-column
            label="id"
            prop="id">
          </el-table-column>-->
          <el-table-column prop="title" label="标题"></el-table-column>
          <el-table-column prop="keywords" label="关键字"></el-table-column>
          <el-table-column label="创建时间" prop="created_at"></el-table-column>
          <el-table-column width="330" v-if="!$store.state.readonly" label="操作">
            <template slot-scope="scope">
              <el-button size="mini" plain type="warning" @click="editContent(scope.row)" v-if="!$store.state.readonly">编辑查看</el-button>
              <el-button
                size="mini"
                plain
                type="danger"
                @click="delContent(scope.row)"
                v-if="!$store.state.readonly"
              >删除</el-button>
              <el-button size="mini"  plain  @click="upcontent(scope.row,scope.$index)" v-if="!$store.state.readonly">上移</el-button>
              <el-button size="mini"  plain  @click="downcontent(scope.row,scope.$index)" v-if="!$store.state.readonly">下移</el-button>
              <!-- <i class="iconfont icon-shangyi" @click="upcontent(scope.row,scope.$index)" v-if="!$store.state.readonly"></i> -->
              <!-- <i class="iconfont icon-xiayi" @click="downcontent(scope.row,scope.$index)" v-if="!$store.state.readonly"></i> -->
            </template>
            </el-table-column>
          </el-table>
          <page :total="contentTotal" :limit="contentLimit" @pageChange="onPageChangeC" @sizeChange="onSizeChangeC"/>
      </el-collapse-item>
    </el-collapse>
    <!-- <dialog-com :dialogObj="dialogObj" @changeShow="changeShow" @reflash="getList"/> -->
    <page :total="total" :limit="limit" @pageChange="onPageChange" @sizeChange="onSizeChange"/>
    <!-- 新建模块 -->
    <el-dialog :title="modularTitle" center :visible.sync="postModularDialog" width="800px">
      <el-form ref="form" :model="postModularParams">
        <!-- <el-row>
            <el-col :span="8">
              <el-form-item label="类型" label-width="80px" required="">
                <el-select v-model="postModularParams.type" placeholder="请选择">
                  <el-option v-for="data in typeArr" :key="data.value" :label="data.label"
                            :value="data.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
        </el-row>-->
        <el-row>
          <el-col :span="8">
            <el-form-item label="标题" label-width="80px" required>
              <el-input v-model="postModularParams.title"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer" v-if="type !== 1">
        <el-button @click="postModularDialog = false">取 消</el-button>
        <el-button type="primary" @click="postModularFn">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 新建模块内容 -->
    <el-dialog
      :title="modularContentTitle"
      center
      ref="ruleForm"
      :visible.sync="postModularContentDialog"
      width="800px"
    >
      <el-form ref="form" :model="postModularParams">
        <!-- <el-row>
            <el-col :span="8">
              <el-form-item label="类型" label-width="80px" prop='type' required="请选择类型!">
                <el-select v-model="postModularParams.type" @change="typeChange" placeholder="请选择">
                  <el-option v-for="data in typeArr" :key="data.value" :label="data.label"
                            :value="data.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
        </el-row>-->
        <el-row>
          <el-col :span="8">
            <el-form-item label="标题" label-width="80px" required>
              <el-input v-model="postModularParams.title"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- <el-row v-if="selectModular.length">
            <el-col :span="8">
              <el-form-item label="模块" label-width="80px" prop='pid' required>
                <el-select v-model="postModularParams.pid" @change="typeChange" placeholder="请选择">
                  <el-option v-for="data in selectModular" :key="data.id" :label="data.title"
                            :value="data.id"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
        </el-row>-->
        <el-row>
          <el-col :span="8">
            <el-form-item label="关键词" label-width="80px" required>
              <el-input v-model="postModularParams.keywords"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="商品详情" label-width="80px" required>
              <editor-detail :lookData="postModularParams"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer" v-if="type !== 1">
        <el-button @click="postModularContentDialog = false">取 消</el-button>
        <el-button type="primary" @click="postModularContentFn('ruleForm')">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// import dialogCom from './autoReplyDialog'
import {
  getQuestionModularListApi,
  getQuestionModularDetailApi,
  updateQuestionModularDetailApi,
  deleteQuestionModularDetailApi,
  sortQuestionModularDetailApi,
  postQuestionModularApi
} from "../../service/api";
import page from "../framework/page";
import editorDetail from "./editorDetail";
export default {
  name: "index",
  data() {
    return {
      total: 0,
      nowPage: 1,
      limit: 10,
      contentTotal: 0,
      contentNowPage: 1,
      contentLimit: 10,
      activeName: "keywords_reply",
      modularList: [],
      modularContent: [],
      selectModular: [],
      questionListParams: {
        type: "1",
        pid: ""
      },
      postModularParams: {
        type: "1",
        title: "",
        pid: "",
        keywords: "",
        content: ""
      },
      postModularDialog: false,
      modularTitle: "新建模块",
      postModularContentDialog: false,
      modularContentTitle: "新建话术内容",
      typeArr: [
        { value: "1", label: "话术类型" },
        { value: "2", label: "流程类型" }
      ],
      modularId: "",
      contentType: ""
    };
  },
  components: {
    editorDetail,
    page
  },
  mounted() {
    this.getList();
  },
  filters: {
    type(value) {
      if (value === "text") {
        return "文本";
      } else if (value === "voice") {
        return "语音";
      } else if (value === "video") {
        return "视频";
      } else if (value === "image") {
        return "图片";
      } else if (value === "news") {
        return "图文";
      } else if (value === "link") {
        return "链接";
      } else if (value === "news-item") {
        return "图文链接";
      } else {
        return value;
      }
    }
  },
  methods: {
    upcontent(data,index){
      console.log(data,index)
      if(index!=0){
        let json={
          question_up_id: this.modularContent[index].id,
          question_down_id: this.modularContent[index-1].id
        }
        sortQuestionModularDetailApi(json).then(res =>{
          this.handleChange(this.modularId);
        })
      }
    },
    downcontent(data,index){
      if(index<=this.modularContent.length-1){
        let json={
          question_up_id: this.modularContent[index+1].id,
          question_down_id: this.modularContent[index].id
        }
        sortQuestionModularDetailApi(json).then(res =>{
          this.handleChange(this.modularId);
        })
      }
    },
    upIndex(data,index){
      if(index!=0){
        let json={
          question_up_id: this.modularList[index].id,
          question_down_id: this.modularList[index-1].id
        }
        sortQuestionModularDetailApi(json).then(res =>{
          this.getList();
        })
      }
    },
    downIndex(data,index){
      // debugger
      if(index<=this.modularList.length-1){
        let json={
          question_up_id: this.modularList[index+1].id,
          question_down_id: this.modularList[index].id
        }
        sortQuestionModularDetailApi(json).then(res =>{
          this.getList();
        })
      }
    },
    delIndex(data){
      console.log(data)
      this.$confirm("此操作将删除该记录?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        console.log(data);
        deleteQuestionModularDetailApi(data.id).then(res => {
          this.getList()
          this.$message({
            type: "success",
            message: "删除成功!"
          });
        });
      });
    },
    handleChange() {
      this.modularContent = [];
      // console.log(val);
      let json = {
        type: this.questionListParams.type,
        page:this.contentNowPage,
        limit:this.contentLimit 
      };
      if (this.modularId) {
        json.pid = this.modularId;
      }
      this.postModularParams.pid = this.modularId;
      getQuestionModularListApi(json.type, json).then(res => {
        this.modularContent = res.list;
        console.log(res);
        // debugger
        this.contentTotal = res.total;
      });
    },
    postModularContentInit() {
      this.contentType = "new";
      this.postModularParams.title = "";
      this.postModularParams.keywords = "";
      this.postModularParams.content = "";
      this.postModularParams.type = this.questionListParams.type;
      this.postModularContentDialog = true;
    },
    postModularContentFn() {
      console.log(this.postModularParams);
      let json = {};
      if (this.contentType == "new") {
        this.modularContentTitle = "新建话术内容";
        if (!this.postModularParams.type) {
          this.$message({
            message: "请选择类型!"
          });
          return;
        }
        if (!this.postModularParams.title) {
          this.$message({
            message: "请输入标题!"
          });
          return;
        }
        if (!this.postModularParams.pid) {
          this.$message({
            message: "请选择模块!"
          });
          return;
        }
        if (!this.postModularParams.keywords) {
          this.$message({
            message: "请输入关键词!"
          });
          return;
        }
        if (!this.postModularParams.content) {
          this.$message({
            message: "请填写内容!"
          });
          return;
        }
        json = Object.assign({}, this.postModularParams);
        postQuestionModularApi(json).then(res => {
          console.log(res);
          this.getList();
          this.$message({
            type: "success",
            message: "提交成功!"
          });
          let json = {
            type: this.questionListParams.type,
            pid: this.postModularParams.pid
          };
          getQuestionModularListApi(json.type, json).then(res => {
            this.modularContent = res.list;
            console.log(res);
            // debugger
            // this.total = res.total;
          });
          this.postModularContentDialog = false;
        });
      } else {
        this.modularContentTitle = "编辑话术内容";
        json = Object.assign({}, this.postModularParams);
        console.log(json);
        updateQuestionModularDetailApi(json.id, json).then(res => {
          console.log(res);
          this.$message({
            type: "success",
            message: "更新成功!"
          });
          this.postModularContentDialog = false;
          // this.getList()
        });
      }
    },
    editContent(data) {
      // this.postModularParams = {}
      this.contentType = "edit";
      let that = this;
      getQuestionModularDetailApi(data.id).then(res => {
        this.postModularParams = Object.assign({}, res);
        console.log(this.postModularParams);
        this.postModularContentDialog = true;
      });
    },
    editContentFn() {},
    editModular(data){
      this.postModularDialog = true;
      // console.log(data)
      this.modularTitle = '编辑模块'
      this.postModularParams = Object.assign({}, data);
    },
    postModularInit() {
      this.postModularDialog = true;
      this.modularTitle = '新建模块'
      this.postModularParams.title = "";
    },
    postModularFn(){
      let json = {};
      if(this.modularTitle=='新建模块'){
        if (!this.postModularParams.type) {
          this.$message({
            message: "请选择类型!"
          });
          return;
        }
        if (!this.postModularParams.title) {
          this.$message({
            message: "请填写标题!"
          });
          return;
        }
        json.type = this.postModularParams.type;
        json.title = this.postModularParams.title;
        console.log(json);
        postQuestionModularApi(json).then(res => {
          console.log(res);
          this.getList();
          this.$message({
            type: "success",
            message: "提交成功!"
          });
          this.postModularDialog = false;
        });
      }else{
        this.postModularParams.pid = ''
        json.type = this.postModularParams.type;
        json.title = this.postModularParams.title;
        json.id = this.postModularParams.id;
        console.log(json)
        updateQuestionModularDetailApi(json.id,json).then(res =>{
          this.getList();
          this.$message({
            type: "success",
            message: "更新成功!"
          });
          this.postModularDialog = false;
        })
      }
    },
    onPageChange(val) {
      this.nowPage = val;
      this.getList();
    },
    onSizeChange(val) {
      this.nowPage = 1;
      this.limit = val;
      this.getList();
    },
    onPageChangeC(val) {
      this.contentNowPage = val;
      this.handleChange();
    },
    onSizeChangeC(val) {
      this.contentNowPage = 1;
      this.contentLimit = val;
      this.handleChange();
    },
    getList() {
      let json = {
        type: this.questionListParams.type,
        page:this.nowPage,
        limit:this.limit 
      };
      if (this.questionListParams.pid) {
        json.pid = this.questionListParams.pid;
      }
      getQuestionModularListApi(json.type, json).then(res => {
        this.modularList = res.list;
        console.log(this.modularList);
        // debugger
        this.total = res.total;
      });
    },
    delContent(data) {
      console.log(data);
      this.$confirm("此操作将删除该记录?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        console.log(data);
        deleteQuestionModularDetailApi(data.id).then(res => {
          let json = {
            type: this.questionListParams.type
          };
          json.pid = this.postModularParams.pid;
          getQuestionModularListApi(json.type, json).then(res => {
            this.modularContent = res.list;
            console.log(res);
            // debugger
          });
          this.$message({
            type: "success",
            message: "删除成功!"
          });
        });
      });
    },
    handleClick(tab) {
      // console.log(tab.name,413)
      this.questionListParams.type = tab.name;
      this.postModularParams.type = tab.name;
      this.getList();
    },
    // 下拉框选择类型,暂时不用
    typeChange() {
      let json = {
        type: this.postModularParams.type
      };
      getQuestionModularListApi(json.type, json).then(res => {
        this.selectModular = res.list;
      });
    }
  }
};
</script>

<style  lang="less">
@import "../../util/public";
.cssbox{
.el-container{
    height: 100%;
    .el-aside{
      overflow: auto;
      //滚动条样式
    }
    // .el-menu{
    //   height: 100%;
    //   .el-submenu{
        .btn-block{
          margin-left: 10px;
          transition: all 1s;
          display: inline-block;
          i{
            color: #aaaaaa;
            font-size: 14px;
            &:hover{
              color: #3a8ee6;
            }
          }
        }
        .list2:hover .list2-btn{
        }
        .list3:hover .list3-btn{
          display: inline-block;
        }
        
    //   }
    // }
  }
  .el-collapse-item{
    .el-collapse-item__wrap{border: 2px solid #40aaff;}
  }
  .iconfont{
    color: #aaaaaa;
    font-size: 14px;
    &:hover{
     color: #3a8ee6;
    }
  }
}

  
</style>
<style scoped lang="less">
.cssbox{padding-top: 40px;}
.btnBox{
  .el-button{margin: 10px 30px;}
}
</style>