<template>
  <div class="common-words">
    <header-search
      search-tips="常用语关键词"
      :deldisabled="!(selectedRows && selectedRows.length)"
      @search-by-key="searchByKey"
      @handle-add="addCommonWords"
      @handle-del="delMultiple"
    />

    <div class="content-table">
      <el-table
        v-loading="loading"
        border
        :data="rows"
        :height="tableHeight + 'px'"
        @selection-change="selectionChange"
      >
        <el-table-column
          align="center"
          type="selection"
          width="50"
        ></el-table-column>

        <el-table-column
          type="index"
          label="序号"
          width="100"
        ></el-table-column>

        <el-table-column label="常用语" prop="expression"></el-table-column>

        <el-table-column
          label="更新时间"
          prop="updateTime"
          width="200"
        ></el-table-column>

        <el-table-column label="操作" width="200">
          <template #default="{ row }">
            <el-button type="text" @click="handleEdit(row)">修改</el-button>
            <el-button type="text" @click="delSingle(row)">删除</el-button>
          </template>
        </el-table-column>
        <template slot="empty">
          <el-image :src="tableNoDataImg"></el-image>
          <p class="no-data-text">暂无数据</p>
        </template>
      </el-table>

      <el-row type="flex" justify="end" class="my-pagination">
        <el-pagination
          background
          :total="pagination.total"
          :page-size="pagination.pageSize"
          :current-page="pagination.page"
          :page-sizes="pageSizes"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        ></el-pagination>
      </el-row>
    </div>

    <el-dialog
      top="100px"
      width="650px"
      :title="dialogTitle"
      :visible.sync="commonWordsVisible"
      :close-on-click-modal="false"
    >
      <el-form v-model="formData" label-width="100px">
        <el-form-item label="常用语类型：">
          <el-input disabled value="个人常用语"></el-input>
        </el-form-item>

        <el-form-item label="常用语：" required>
          <el-input
            v-model="formData.expression"
            clearable
            maxlength="50"
            show-word-limit
          ></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer">
        <el-button @click="commonWordsVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSava">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import personalSetting from '@/mixins/personalSetting'
  import HeaderSearch from '@/views/personal/components/HeaderSearch'
  import {
    savaCommonWords,
    getCommonWords,
    delCommonWords,
  } from '@/api/personal'
  export default {
    name: 'CommonWords',
    components: {
      HeaderSearch,
    },
    mixins: [personalSetting],
    data() {
      return {
        loading: false,
        dialogTitle: '添加常用语',
        commonWordsVisible: false,
        rows: [],
        formData: {
          type: 4,
          expression: '',
        },
      }
    },
    mounted() {
      this.search()
    },
    methods: {
      handleEdit(row) {
        this.commonWordsVisible = true
        this.dialogTitle = '编辑'
        this.formData = { ...row }
      },
      addCommonWords() {
        this.formDataReset()
        this.commonWordsVisible = true
        this.dialogTitle = '添加常用语'
      },
      delSingle({ id }) {
        this.handleDelete(id, '确定删除该常用语吗？')
      },
      delMultiple() {
        if (!this.selectedRows.length) {
          this.$message.warning('请选择要删除的常用语')
          return
        }
        const delIds = this.selectedRows.map((item) => item.id)
        this.handleDelete(delIds, '确定删除所选中的常用语吗？')
      },
      handleDelete(ids, tips) {
        this.$confirm(tips, '提示', {
          type: 'warning',
        })
          .then(() => {
            delCommonWords(ids).then((res) => {
              if (res.state) {
                this.search()
                this.$message.success(res.message)
              }
            })
          })
          .catch(() => {})
      },
      formDataReset() {
        this.formData = {
          type: 4,
          expression: '',
        }
      },
      searchByKey(searchKey) {
        this.search('', searchKey)
      },
      search(isPageChange, searchKey) {
        this.loading = true
        if (!isPageChange) {
          this.pagination.page = 1
        }
        const queryFilter = {
          pageBean: this.pagination,
        }
        if (searchKey != null && searchKey !== '') {
          queryFilter.querys = [
            {
              group: 'main',
              operation: 'LIKE',
              property: 'EXPRESSION_',
              relation: 'OR',
              value: searchKey,
            },
          ]
        }
        getCommonWords(queryFilter).then((data) => {
          if (data) {
            this.pagination = {
              page: data.page,
              pageSize: data.pageSize,
              total: data.total,
            }
            this.rows = data.rows ? data.rows : []
          }
          setTimeout(() => {
            this.loading = false
          }, 300)
        })
      },
      handleSava() {
        if (this.formData.expression === '') {
          this.$message.warning('常用语不能为空！')
          return
        }
        savaCommonWords(this.formData).then((data) => {
          if (data.state) {
            this.$message.success(data.message)
            this.commonWordsVisible = false
            this.search()
          }
        })
      },
    },
  }
</script>

<style lang="scss" scoped></style>