<template>
  <div class="words_container">
    <!-- <el-row class="btn_box">
      <el-button type="primary" @click="dialogVisible = true">新增</el-button>
      <el-button @click="delWords()">删除</el-button>
    </el-row> -->
    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      :row-class-name="tableRowClassName"
      :header-cell-style="{background:'#8cc3fb',color:'#fff'}"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        align="center"
        type="selection"
        width="55"
      />
      <el-table-column
        type="index"
        align="center"
        label="序号"
        width="55"
      />
      <!-- <el-table-column
        prop="tag"
        label="标签"
        show-overflow-tooltip
      /> -->
      <el-table-column
        prop="module"
        label="模块"
        show-overflow-tooltip
      />
      <el-table-column
        prop="commonlanguage"
        label="常用语"
        show-overflow-tooltip
      />
      <el-table-column
        label="操作"
        align="center"
      >
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="editWords(scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-row style="background:#fff; padding:12px;">
      <el-col :span="8">
        <el-button size="mini" type="primary" @click="showAddWords">新增</el-button>
        <el-button size="mini" @click="delWords()">删除</el-button>
      </el-col>
      <el-col :span="16" style="text-align:right;">
        <el-pagination
          :current-page="currentPage"
          :page-size="10"
          layout="total, prev, pager, next, jumper"
          :total="total"
        />
      </el-col>
    </el-row>
    <el-dialog
      title="新增常用语"
      :visible.sync="dialogVisible"
      width="30%"
    >
      <el-form ref="ruleForAdd" :model="ruleForm" :rules="rules" label-width="80px">
        <!-- <el-form-item label="标签" prop="tag">
          <el-input v-model="ruleForm.tag" />
        </el-form-item> -->
        <el-form-item label="模块" prop="module">
          <el-select v-model="ruleForm.module">
            <el-option
              v-for="module in modules"
              :key="module"
              :value="module"
              :label="module"
            >
              {{ module }}
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="常用语" prop="commonlanguage">
          <el-input v-model="ruleForm.commonlanguage" type="textarea" :autosize="{ minRows: 2 }" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="dialogVisible = false">取 消</el-button>
        <el-button size="mini" type="primary" :loading="addLoading" @click="addWords('ruleForAdd')">保存</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="编辑常用语"
      :visible.sync="editDialog"
      width="30%"
    >
      <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="80px">
        <!-- <el-form-item label="标签" prop="tag">
          <el-input v-model="ruleForm.tag" />
        </el-form-item> -->
        <el-form-item label="模块" prop="module">
          <el-select v-model="ruleForm.module">
            <el-option
              v-for="module in modules"
              :key="module"
              :value="module"
              :label="module"
            >
              {{ module }}
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="常用语" prop="commonlanguage">
          <el-input v-model="ruleForm.commonlanguage" type="textarea" :autosize="{ minRows: 2 }" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="editDialog = false">取 消</el-button>
        <el-button size="mini" type="primary" :loading="addLoading" @click="updateWords('ruleForm')">保存</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { deleteTRVerifyCommon, saveTRVerifyCommon, verifyCommonList, getAbnormal, updateTRVerifyCommon, getCYY } from '@/api/commonWords'
import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      tableData: [],
      multipleSelection: [],
      addLoading: false,
      ruleForm: {
        commonlanguage: '',
        tag: '',
        module: '',
        verifycommonid: ''
      },
      rules: {
        commonlanguage: [
          { required: true, message: '请输入常用语', trigger: 'blur' }
        ],
        tag: [
          { required: true, message: '请输入标签', trigger: 'blur' }
        ]
      },
      dialogVisible: false,
      editDialog: false,
      currentPage: 1,
      total: null,
      modules: [
        '市场所协同'
      ]
    }
  },
  computed: {
    ...mapGetters(['userId'])
  },
  mounted() {
    this.getList()
    this.aaa()
    this.getModules()
  },
  methods: {
    getModules() {
      return getCYY().then(res => {
        if (res.data.length > 0) {
          const list = []
          res.data.forEach(each => {
            list.push(each.name)
          })
          this.modules = list
        }
      })
    },
    showAddWords() {
      this.dialogVisible = true
      this.ruleForm.commonlanguage = ''
      this.ruleForm.tag = ''
      this.ruleForm.module = ''
      this.ruleForm.verifycommonid = ''
      this.$nextTick(() => {
        if (this.$refs.ruleForAdd) {
          this.$refs.ruleForAdd.clearValidate()
        }
      })
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 === 1) {
        return 'warning-row'
      }
    },
    // 常用语编辑
    editWords(row) {
      this.ruleForm.commonlanguage = row.commonlanguage
      this.ruleForm.tag = row.tag
      this.ruleForm.module = row.module
      this.editDialog = true
      this.ruleForm.verifycommonid = row.verifycommonid
    },
    // 勾选数据
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    // 常用语列表
    getList() {
      const data = {
        page: this.currentPage,
        rows: '10',
        aicUserId: this.userId
      }
      return verifyCommonList(data).then(res => {
        if (res.code === 0) {
          this.tableData = res.data.records
          this.total = res.data.total
        }
      })
    },
    // 编辑保存常用语
    updateWords(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.addLoading = true
          updateTRVerifyCommon({
            ...this.ruleForm,
            userid: this.userId
          }).then(res => {
            if (res.code === 0) {
              this.$message({
                message: '保存成功',
                type: 'success',
                center: true
              })
              this.editDialog = false
              return this.getList()
            }
          }).finally(() => {
            this.addLoading = false
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 新增常用语
    addWords(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.addLoading = true
          saveTRVerifyCommon({
            ...this.ruleForm,
            userid: this.userId
          }).then(res => {
            if (res.code === 0) {
              this.$message({
                message: '新增成功',
                type: 'success',
                center: true
              })
              this.dialogVisible = false
              return this.getList()
            }
          }).finally(() => {
            this.addLoading = false
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 删除常用语
    delWords() {
      if (this.multipleSelection.length) {
        const dataArr = this.multipleSelection.map(function(item) {
          return item.verifycommonid
        })
        const data = {
          commonId: dataArr.toString()
        }
        deleteTRVerifyCommon(data).then(res => {
          console.log('删除成功', res)
          if (res.code === 0) {
            const that = this
            that.$message({
              message: '删除成功',
              type: 'success',
              center: true,
              onClose() {
                that.getList()
              }
            })
          }
        })
      } else {
        this.$message({
          message: '请选择要删除的常用语',
          type: 'warning'
        })
      }
    },
    //
    aaa() {
      const data = {
        aicUserId: this.userId
      }
      getAbnormal(data).then(res => {
        console.log('1111', res)
      })
    }
  }
}
</script>
<style lang="scss" scoped>
  .words_container{
    padding: 10px;
    .btn_box{
      padding:10px;
      margin-bottom: 15px;
      background: #fff;
      text-align: right;
    }
  }
</style>
