
<template>
  <!-- 发布配置 -->
  <div class="containerBox faq bgf7f8fb">
    <div class="tableContainer">
      <div class="tableSearch">
        <el-row>
          <el-col :span="6">
            问题：
            <el-input
              v-model="search"
              placeholder="请输入内容"
              suffix-icon="el-icon-search"
            />

          </el-col>
          <el-col :span="5">
            <el-button type="primary" @click="init">检索</el-button>
            <el-button @click="reset">重置</el-button>
          </el-col>
          <el-col :span="5" style="float: right">
            <el-button
              type="primary"
              style="float: right"
              @click="addUser"
            ><i class="el-icon-plus" /></el-button>
          </el-col>
        </el-row>
      </div>
      <el-table
        v-loading="loading"
        :header-cell-style="{ backgroundColor: '#edeff3', color: '#333' }"
        :data="tableData"
        border
        height="534"
      >
        <el-table-column prop="question" label="问题" width="400" />
        <el-table-column prop="answer" label="答案" />
        <el-table-column label="操作" width="400">
          <template slot-scope="scope">
            <i class="el-icon-edit" @click="handleDetail(scope.row)" />
            <i class="el-icon-close" @click="deleteSetting(scope.row)" />
            <!-- <i class="el-icon-d-arrow-right"></i> -->
            <!-- <i class="el-icon-zoom-in" @click="handleDetail(scope.row)" /> -->
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="mt20"
        background
        layout="total,sizes, prev, pager, next"
        :total="total"
        :page-sizes="[10, 20, 30]"
        :page-size="listQuery.pageSize"
        :current-page.sync="listQuery.currentPage"
        @current-change="currentChange"
        @size-change="handleSizeChange"
      />
    </div>
    <el-dialog
      v-if="dialogSetVisible"
      :close-on-click-modal="false"
      :title="userStatus ? '编辑' : '新建'"
      :visible.sync="dialogSetVisible"
      :height="300"
      :append-to-body="true"
      width="800px"
    >
      <el-form ref="rowObj" :model="rowObj" label-width="100px" :rules="rules">
        <el-row>
          <el-col :span="24">
            <el-form-item label="问题:" prop="question">
              <el-input v-model="rowObj.question" autocomplete="off" maxlength="50" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="答案:" prop="answer">
              <el-input
                v-model="rowObj.answer"
                autocomplete="off"
                type="textarea"
                :rows="4"
                maxlength="500"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button
          @click="dialogSetVisible = false"
        >取 消</el-button>
        <el-button
          v-loading="buttonLoading"
          type="primary"
          @click="confirm('rowObj')"
        >确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { faqConfigSave, faqConfigSearch, faqConfigDelete, faqConfigEdit
} from '@/api/releaseConfig'
import {
  validateSpecialChart
} from '@/utils/validate' // get token from cookie
export default {
  /* eslint-disable */
  name: 'FaqConfig',
  props: {},
  data() {
    return {
      loading:false,
      buttonLoading:false,
      search: '',
      //编辑状态 默认编辑
      userStatus:true,
      //编辑弹窗
      dialogSetVisible:false,
      listQuery: {
        currentPage: 1,
        pageSize: 10
      },
      total: 0,
      //当前行用户组名称
      editUserName: '',
      tableData: [
      ],
      page:1,
      rowObj:{
      },
      rules: {
          question: [
            { required: true, message:'请输入问题', trigger:'blur' },
            // { pattern: /^([\u4e00-\u9fa5]+|[ a-zA-Z0-9]+)$/im, message: '输入不合规', trigger: 'blur'},
            //{ pattern: /^(?!\s+).*(?<!\s)$/im,  message: '首尾不能为空格', trigger: 'blur' }
          ],
          answer: [
            { required: false, message:'请输入答案', trigger:'blur',},
            // { pattern: /^([\u4e00-\u9fa5]+|[ a-zA-Z0-9]+)$/im, message: '输入不合规', trigger: 'blur'},
            //{ pattern: /^(?!\s+).*(?<!\s)$/im,  message: '首尾不能为空格', trigger: 'blur' }
          ],
        }
    }
  },
  computed: {},
  created() {
    this.init()
  },
  mounted() {},
  methods: {
    init() {
      this.listQuery.currentPage = 1
      this.getData()
    },
    async getData() {
      if(this.search.length && !validateSpecialChart(this.search)){
        this.$message({
            message: "输入不合规！",
            type: "warning",
        })
        this.tableData=[];
        this.total=0;
        return;
      }
      this.loading = true
      let data={
        currentPage:this.listQuery.currentPage,
        pageSize:this.listQuery.pageSize,
        question:this.search
      }
      try {
        const res = await faqConfigSearch(data)
        if(res.code==200){
          if(res.data.faqConfigList){
            this.tableData=res.data.faqConfigList;
            this.total=res.data.count;
          }
        }
        // this.tableData=res.userGroupList;
      } catch (error) {
        console.log(error)
      }
      this.loading = false
    
    },
    addUser() {
      this.dialogSetVisible = true
      this.userStatus = false
      this.rowObj={
        answer: "",
        id: '',
        question: "",
        time: ""
      }
    },
    //编辑用户组
    handleDetail(row) {
      this.rowObj=row;
      this.dialogSetVisible = true
      this.userStatus = true
    },
    //删除用户组
    deleteSetting(row) {
      this.$confirm('确认删除所选的吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then((res) => {
        this.deleteUserGroup(row)
      })
    },
    confirm(formName){
       this.$refs[formName].validate((valid) => {
          if (valid) {
            // this.rowObj.time=this.time(new Date())
            if(!this.userStatus){
              this.addSave()
            }else{
              this.editSave()
            }
          } else {
            console.log('error submit!!');
            return false;
          }
        });
    
    },
    // FAQ删除
    async deleteUserGroup(row){
      this.loading = true
      try {
        const res = await faqConfigDelete({id:row.id})
         if(res.code==200){
          this.$message({
          message: '删除成功！',
          type: 'success'
        });
          this.init()
      }
      } catch (error) {
        console.log(error)
      }
      this.loading = false

    },
    // FAQ保存
    async addSave(){
      // let data={
      //   currentPage:this.listQuery.currentPage,
      //   pageSize:this.listQuery.pageSize,
      //   Question:this.search
      // }
       this.buttonLoading = true
       let data={
         answer:this.rowObj.answer.trim(),
         question:this.rowObj.question.trim(),
       }
      try {
        const res = await faqConfigSave(data)
        if(res.code==200){
          this.dialogSetVisible = false;
          this.$message({
          message: '新增成功！',
          type: 'success'
        });
          this.init()
        }
        // this.total=res.userGroupCount;
        // this.tableData=res.userGroupList;
      } catch (error) {
        console.log(error)
      }
      this.buttonLoading = false

    },
    //FAQ编辑保存
    async editSave(){
      this.buttonLoading = true
      let data={
         answer:this.rowObj.answer.trim(),
         question:this.rowObj.question.trim(),
         id:this.rowObj.id,
       }
      try {
        const res = await faqConfigEdit(data)
        if(res.code==200){
          this.dialogSetVisible = false;
          this.$message({
          message: '修改成功！',
          type: 'success'
        });
          this.init()
        }
        // this.total=res.userGroupCount;
        // this.tableData=res.userGroupList;
      } catch (error) {
        console.log(error)
      }
      this.buttonLoading = false

    },
    time(date) {
      var y = date.getFullYear()
      var m = date.getMonth() + 1
      m = m < 10 ? '0' + m : m
      var d = date.getDate()
      d = d < 10 ? '0' + d : d
      var h = date.getHours()
      h = h < 10 ? '0' + h : h
      var minute = date.getMinutes()
      minute = minute < 10 ? '0' + minute : minute
      var second = date.getSeconds()
      second = second < 10 ? '0' + second : second
      return y + '-' + m + '-' + d + ' ' + h + ':' + minute + ':' + second
    },
    //重置搜索框
    reset() {
      this.search = ''
      // this.init()
    },
    // 分页
    currentChange(item) {
      this.listQuery.currentPage = item
      this.getData()
    },
    handleSizeChange(item) {
      this.listQuery.pageSize = item
      this.getData()
    }
  }
}
</script>

<style>
.containerBox {
  margin: 0;
}
/* .el-table i {
  font-size: 14px;
  color: #409eff;
  padding: 0 4%;
}
.el-select {
  display: block;
} */
</style>
