<template>
  <el-container style="border-left:1px solid #E7EAEC" class="fullheight">
    <h3 class="flow_table_title">个人常用语列表</h3>
    <el-row class="approval-item-list__row">
      <el-button
        type="primary"
        size="small"
        @click="operating('0', 'add')"
        icon="el-icon-plus"
        style="margin-left:0"
        >{{ $t('common.add') }}</el-button
      >
      <!--      <el-button type="danger" size="small" @click="remove" icon="el-icon-delete" style="margin-left:3px;">删除</el-button>-->
      <eip-popconfirm-button
        type="danger"
        title="确定删除吗？"
        icon="el-icon-delete"
        @onConfirm="remove"
        :disabled="checkBoxData.length < 1"
        style="margin-left:10px;"
        >{{ $t('common.delete') }}</eip-popconfirm-button
      >
      <el-input
        size="small"
        style="width:380px; margin-left:10px;"
        clearable
        :placeholder="$t('approvalItem.commonLanguage')"
        prefix-icon="el-icon-search"
        v-model="tableData"
        @keyup.enter.native="searchEnterFun"
      ></el-input>
      <el-button
        style="margin-left: 10px"
        size="small"
        type="primary"
        icon="el-icon-search"
        @click="search('find')"
        >{{ $t('common.search') }}</el-button
      >
      <el-button size="small" icon="el-icon-refresh" @click="reset">{{
        $t('common.reset')
      }}</el-button>
    </el-row>
    <el-main>
      <el-table
        :data="rows"
        ref="htTable"
        @row-click="rowClick"
        stripe
        border
        style="width: 100%"
        header-cell-class-name="todo-header-row"
        row-class-name="todo-row"
        size="medium"
        v-loading="fullscreenLoading"
        :default-sort="{prop: 'updateTime', order: 'ascending'}"
        @selection-change="handleChecked"
      >
        <el-table-column type="selection" sortable width="50"></el-table-column>
        <el-table-column
          type="index"
          sortable
          width="50"
          :label="$t('common.seq')"
        ></el-table-column>
        <el-table-column
          prop="expression"
          :label="$t('approvalItem.commonLanguage')"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="updateTime"
          width="200"
          label="更新时间"
          align="center"
        ></el-table-column>
        <el-table-column
          prop=""
          :label="$t('common.operation')"
          align="center"
          width="290"
        >
          <template slot-scope="scope">
            <el-button
              @click="operating(scope.row.id, 'edit')"
              size="small"
              icon="el-icon-edit"
              plain
              >{{ $t('common.modify') }}</el-button
            >
            <el-button
              @click="operating(scope.row.id, 'get')"
              size="small"
              icon="el-icon-tickets"
              plain
              >{{ $t('common.detail') }}</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-main>
    <el-footer height="45px">
      <el-row type="flex" justify="end">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pagination.page"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </el-row>
    </el-footer>
  </el-container>
</template>

<script>
import {mapState, mapActions} from 'vuex'
import EipPopconfirmButton from '@/components/eipControl/EipPopconfirmButton'

export default {
  name: 'approvalItemList',
  components: {
    EipPopconfirmButton
  },
  data() {
    return {
      tableData: '',
      fullscreenLoading: true,
      checkBoxData: []
    }
  },
  computed: mapState({
    rows: state => state.approvalItem.rows,
    pagination: state => state.approvalItem.pagination,
    total: state => state.approvalItem.total
  }),
  methods: {
    rowClick(row, column, event) {
      this.$refs.htTable.toggleRowSelection(row)
    },
    remove() {
      var ids = []
      if (this.checkBoxData && this.checkBoxData.length > 0) {
        for (let index = 0; index < this.checkBoxData.length; index++) {
          ids.push(this.checkBoxData[index].id)
        }
      }
      //数组去重
      //this.checkBoxData = Array.from(new Set(this.checkBoxData));
      if (ids.length > 0) {
        this.$store.dispatch('approvalItem/remove', ids.join(',')).then(res => {
          this.search()
        })
      } else {
        this.$message({
          message: '请选择要删除的数据',
          type: 'warning'
        })
      }
    },
    handleChecked(value) {
      this.checkBoxData = value
    },
    //Loading 加载中
    openFullScreen() {
      this.fullscreenLoading = true
    },
    //回车查询
    searchEnterFun: function(e) {
      var keyCode = window.event ? e.keyCode : e.which
      if (keyCode == 13) {
        this.search('find')
      }
    },
    // 查询
    search(str) {
      this.openFullScreen()
      if (str == 'find') {
        this.$store.dispatch('approvalItem/setPaginationPageNum', 1)
      }
      let querys = [] //查询条件
      let queryFilter = {}
      let pageBean = {pageBean: this.pagination}
      if (this.tableData == '') {
        this.$store.dispatch('approvalItem/getlistJson', pageBean).then(() => {
          this.fullscreenLoading = false
        })
      } else {
        querys = [
          {
            property: 'EXPRESSION_',
            value: this.tableData,
            group: 'main',
            operation: 'LIKE',
            relation: 'OR'
          }
        ]
        queryFilter = {pageBean: this.pagination, querys}
        this.$store
          .dispatch('approvalItem/getlistJson', queryFilter)
          .then(() => {
            this.fullscreenLoading = false
          })
      }
    },
    //重置
    reset() {
      this.tableData = ''
      this.search('find')
    },
    operating(id, action) {
      if (action == 'add') {
        this.$router.push('/approvalItem/approvalItemAdd')
      } else if (action == 'edit') {
        this.$router.push('/approvalItem/approvalItemEdit/' + id)
      } else {
        this.$router.push('/approvalItem/approvalItemGet/' + id)
      }
    },
    handleSizeChange: function(size) {
      //每页下拉显示数据
      this.$store.dispatch('approvalItem/setPaginationSize', size)
      this.search()
    },
    handleCurrentChange: function(currentPage) {
      //点击第几页
      this.$store.dispatch('approvalItem/setPaginationPageNum', currentPage)
      this.search()
    }
  },
  created() {
    let pagination = {pageBean: {page: 1, pageSize: 10, showTotal: true}}
    this.$store.dispatch('approvalItem/getlistJson', pagination).then(() => {
      this.fullscreenLoading = false
    })
  }
}
</script>

<style lang="scss" scoped>
@import '@/assets/css/element-variables.scss';

.el-table ::v-deep th.todo-header-row {
  background-color: #fafafa;
  font-size: 13px;
}

.el-table ::v-deep tr.todo-row {
  font-size: 13px;
  color: $--color-text-regular;
}

.el-container {
  background-color: #fff;
}

.approval-item-list__row {
  margin: 10px 0 0 20px;
}

.el-header {
  border-bottom: 1.5px solid #ededed;
}

.todo-subject {
  cursor: pointer;
}

.todo-subject {
  color: $--theme-color;
}
.el-dropdown {
  vertical-align: top;
}
.el-dropdown + .el-dropdown {
  margin-left: 15px;
}
.el-icon-arrow-down {
  font-size: 12px;
}
</style>
