<template>
  <el-container class="fullheight">
    <h3 class="flow_table_title">邮件联系人列表</h3>
    <el-row class="mail-list__row">
        <el-button
          type="primary"
          @click="openDialog()"
          size="small"
          icon="el-icon-plus"
          >新增</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
        class="search-input"
          size="small"
          style="width:380px"
          clearable
          placeholder="请输入关键词 联系人名称/邮箱地址"
          prefix-icon="el-icon-search"
          v-model="tableData"
          @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="linkName"
          label="联系人名称"
          align="center"
          sortable
        >
          <template slot-scope="scope">
            <span
              class="todo-subject"
              @click="operating(scope.row.id, 'get')"
              >{{ scope.row.linkName }}</span
            >
          </template>
        </el-table-column>
        <el-table-column
          prop="mailId"
          label="邮箱地址"
          width="360"
          align="center"
          sortable
        ></el-table-column>
        <el-table-column
          prop="phone"
          label="联系人电话"
          align="center"
          sortable
        ></el-table-column>
        <el-table-column fixed="right" label="操作" width="140" align="center">
          <template slot-scope="scope">
            <el-button
              @click="operating(scope.row.id, 'edit')"
              size="small"
              icon="el-icon-edit"
              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-dialog
      title="添加邮箱联系人"
      v-if="dialogFormVisible"
      :visible.sync="dialogFormVisible"
      destroy-on-close
      width="600px"
      id="dialogs"
    >
      <el-form
        :model="data"
        status-icon
        ref="data"
        label-width="120px"
        class="demo-ruleForm"
        :rules="rules"
      >
        <el-form-item label="联系人名称：" prop="linkName">
          <el-input v-model="data.linkName" maxlength="15"></el-input>
        </el-form-item>
        <el-form-item label="邮箱地址：" prop="mailId">
          <el-input v-model="data.mailId" maxlength="30"></el-input>
        </el-form-item>
        <el-form-item label="联系人电话：" prop="phone">
          <el-input v-model="data.phone"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm('data')" size="small"
          >确 定</el-button
        >
        <el-button @click="cancel()" size="small">取 消</el-button>
      </div>
    </el-dialog>
  </el-container>
</template>

<script>
import {mapState, mapActions} from 'vuex'

export default {
  name: 'mailLinkmanList',
  data() {
    var checkName = (rule, value, callback) => {
      var pattern = new RegExp(
        "[`~!@#$%^&*()=|{}':;',\\[\\].<>《》/?~！@#￥……&*（）——|{}【】‘；：”“'。，、？ ]"
      )
      if (value == '') {
        callback(new Error('请输入联系人名称'))
      } else if (pattern.test(value)) {
        callback(new Error('联系人名称包含特殊字符，请重新输入'))
      } else {
        callback()
      }
    }
    var checkphone = (rule, value, callback) => {
      const reg = /^1[3|4|5|7|8][0-9]\d{8}$/
      if (value == '') {
        callback(new Error('请输入手机号'))
      } else if (!reg.test(value)) {
        callback(new Error('请输入正确的手机号!'))
      } else {
        callback()
      }
    }
    return {
      tableData: '',
      dialogFormVisible: false,
      fullscreenLoading: true,
      multipleSelection: [],
      formLabelWidth: '80px',
      data: {
        linkName: '',
        mailId: '',
        phone: ''
      },
      rules: {
        mailId: [
          {required: true, message: '请输入邮箱地址', trigger: 'blur'},
          {
            type: 'email',
            message: '请输入正确的邮箱地址',
            trigger: 'blur,change'
          }
        ],
        linkName: [{required: true, validator: checkName, trigger: 'blur'}],
        phone: [{required: true, validator: checkphone, trigger: 'blur'}]
      }
    }
  },
  computed: mapState({
    rows: state => state.mail.mailLinkmanRows,
    pagination: state => state.mail.mailLinkmanPagination,
    total: state => state.mail.mailLinkmanTotal,
    tree: state => state.mail.tree
  }),
  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/setMailLinkmanPaginationSize', size)
      this.search()
    },
    handleCurrentChange: function(currentPage) {
      //点击第几页
      this.$store.dispatch('mail/setMailLinkmanPaginationPageNum', currentPage)
      this.search()
    },
    search(str) {
      this.openFullScreen()
      if (str == 'find') {
        this.$store.dispatch('mail/setMailLinkmanPaginationPageNum', 1)
      }
      let querys = [] //查询条件
      let queryFilter = {}
      let pageBean = {pageBean: this.pagination}
      if (this.tableData == '') {
        this.$store
          .dispatch('mail/getMailLinkmanByPagination', pageBean)
          .then(() => {
            this.fullscreenLoading = false
          })
      } else if (this.tableData != '') {
        querys = [
          {
            property: 'linkName',
            value: this.tableData,
            group: 'main',
            operation: 'LIKE',
            relation: 'OR'
          },
          {
            property: 'mailId',
            value: this.tableData,
            group: 'main',
            operation: 'LIKE',
            relation: 'OR'
          }
        ]
        queryFilter = {pageBean: this.pagination, querys}
        this.$store
          .dispatch('mail/getMailLinkmanByPagination', queryFilter)
          .then(() => {
            this.fullscreenLoading = false
          })
      }
    },
    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/deleteMaliLinkmanById', this.multipleSelection)
            .then(() => {
              this.search()
            })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    operating(id, action) {
      if (action == 'add') {
        this.$router.push('/mail/linkmanAdd')
      } else if (action == 'edit') {
        this.$router.push('/mail/linkmanEdit/' + id)
      } else {
        this.$router.push('/mail/linkmanGet/' + id)
      }
    },
    submitForm(data) {
      this.$refs[data].validate(valid => {
        if (valid) {
          this.$store.dispatch('mail/saveMailLinkman', this.data).then(() => {
            this.data = {
              linkName: '',
              mailId: '',
              phone: ''
            }
            this.dialogFormVisible = false
            this.search()
          })
        } else {
          this.$message.warning('您输入表单信息有误，请重新填写!')
          return false
        }
      })
    },
    openDialog() {
      this.data = {
        linkName: '',
        mailId: '',
        phone: ''
      }
      this.dialogFormVisible = true
    },
    cancel() {
      this.data = {}
      this.dialogFormVisible = false
    }
  },
  created() {
    let pageBean = {pageBean: {page: '1', pageSize: '10', showTotal: 'true'}} //初次加载默认pageBean
    this.$store
      .dispatch('mail/getMailLinkmanByPagination', pageBean)
      .then(() => {
        this.fullscreenLoading = false
      })
  }
}
</script>

<style lang="scss" scoped>
@import '@/assets/css/element-variables.scss';
.mail-list__row{
  margin: 10px 0 0 20px;
  .search-input{
    margin-left: 10px;
  }
}

.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;
}
.todo-subject {
  cursor: pointer;
}

.todo-subject {
  color: $--theme-color;
}

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

.el-header {
  border-bottom: 1.5px solid #ededed;
}
.dialog-footer {
  margin-top: 10px;
}
</style>
