<template>
<el-container class="fullheight">
    <h3 class="flow_table_title">邮件配置管理列表</h3>
  <el-row class="mail-setting-list__row">
			<el-button type="primary" size="small" icon="el-icon-plus" @click="operating('0','add')">新增</el-button>
			<el-button @click="deleted" type="danger" size="small" icon="el-icon-delete" style="margin-left:10px" :disabled="multipleSelection.length < 1">删除</el-button>
          <el-input
            size="small"
            style="width:380px"
            clearable
            placeholder="请输入关键词 用户名称/邮箱地址"
            prefix-icon="el-icon-search"
            v-model="tableData"
            class="search-input"
            @keyup.enter.native="searchEnterFun"
          >
            <el-button slot="append" icon="el-icon-search" @click="search('find')"></el-button>
          </el-input>
      </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"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="50"></el-table-column>
        <el-table-column type="index" width="50" label="序号"></el-table-column>
        <el-table-column prop="nickName" align="center" label="用户名称" sortable>
          <template slot-scope="scope">
            <span class="todo-subject" @click="operating(scope.row.id,'get')">{{scope.row.nickName}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="mailAddress" align="center" label="邮箱地址" sortable></el-table-column>
		<el-table-column
      	fixed="right"
      	label="操作"
      	width="300"
        align="left">
      	<template slot-scope="scope">
          <el-button @click="setDefault(scope.row.id)" size="small" v-if="scope.row.isDefault==0" icon="el-icon-info" plain>设为默认</el-button>
        	<el-button @click="operating(scope.row.id,'edit')" size="small" icon="el-icon-edit" plain>修改</el-button>
			    <el-button @click="testConnect(scope.row.id)" size="small" icon="el-icon-setting" plain>测试</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, 50, 100]"
      	:page-size="pagination.pageSize"
      	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 { Message } from 'element-ui';

export default {
	name: "mailSetting",
	data(){
		return {
      tableData:"",
      fullscreenLoading: true,
      multipleSelection: []
		}
  },
  computed: mapState({
    rows: state => state.mail.mailSettingRows,
    pagination: state => state.mail.mailSettingPagination,
    total: state => state.mail.mailSettingTotal
  }),
	methods: {
     //回车查询
    searchEnterFun: function(e) {
      var keyCode = window.event ? e.keyCode : e.which
      if (keyCode == 13) {
        this.search('find')
      }
    },
        rowClick(row, column, event){
            this.$refs.htTable.toggleRowSelection(row);
        },
    //Loading 加载中
    openFullScreen() {
      this.fullscreenLoading = true;
    },
    handleSizeChange: function (size) {//每页下拉显示数据
          this.$store.dispatch("mail/setMailSettingPaginationSize",size);
          this.search();
    },
    handleCurrentChange: function(currentPage){//点击第几页
          this.$store.dispatch("mail/setMailSettingPaginationPageNum",currentPage);
          this.search();
    },
    search(str) {
      this.openFullScreen();
      if(str=='find'){
          this.$store.dispatch("mail/setMailSettingPaginationPageNum",1);
        }
        let querys = []; //查询条件
        let queryFilter = {};
        let pageBean = {"pageBean":this.pagination};
        if (this.tableData == "") {
          this.$store.dispatch("mail/getMailSettingByPagination",pageBean).then(()=>{
            this.fullscreenLoading = false;
          });
        }else if(this.tableData != "") {
          querys=[
            { property: "nickName", value: this.tableData, group: "main", operation: "LIKE", relation: "OR"},
            { property: "mailAddress", value: this.tableData, group: "main", operation: "LIKE", relation: "OR"}
          ];
          queryFilter = {"pageBean":this.pagination,querys};
          this.$store.dispatch("mail/getMailSettingByPagination",queryFilter).then(()=>{
              this.fullscreenLoading = false;
            });
        }
    },
    reset() {
      this.tableData="";
      this.search();
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    deleted() {
      if(this.multipleSelection==null || this.multipleSelection.length==0){
        this.$message.warning("请选择邮箱删除!");
        return false;
      }
      this.$confirm('此操作将删除该配置, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$store.dispatch("mail/deleteMaliSettingById",this.multipleSelection).then(()=>{
            this.search();
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
    },
	  operating(id,action) {
      if (action == "edit") {
        this.$router.push("/mail/settingEdit/" + id);
      }
      else if(action == "add"){
        this.$router.push("/mail/settingAdd");
      }
      else{
        this.$router.push("/mail/settingGet/" + id);
      }
    },
    setDefault(id) {
      this.$store.dispatch("mail/setMailSettingDefaultById", id).then(()=>{
        this.search();
      });

    },
    testConnect(id) {
      Message.info("测试连接可能需要点时间,请耐心等候下。");
      this.$store.dispatch("mail/testMailConnectById",id).then(()=>{
        this.search();
      });

    }

  },
  created() {
    let pageBean = {"pageBean":{"page":"1","pageSize":"10","showTotal":"true"}}; //初次加载默认pageBean
    this.$store.dispatch("mail/getMailSettingByPagination",pageBean).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;
}
.mail-setting-list__row{
  margin: 10px 0 0 20px;
  .search-input{
    margin-left: 10px;
  }
}

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

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

.el-header {
  border-bottom: 1.5px solid #ededed;
}
.i{
  margin-right:4px;
}
.todo-subject {
  cursor: pointer;
}

.todo-subject {
  color: $--theme-color;
}
</style>
