<template>
  <el-container>
    <el-container style="border-left:1px solid #E7EAEC">
      <el-main>
        <el-row>
          <el-col :span="6">
            <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"
                style="margin-left:3px;">{{$t('common.delete')}}</eip-popconfirm-button>
          </el-col>
          <el-col :span="18">
            <el-input
                size="small"
                style="width:380px"
                clearable
                placeholder="代理人，被代理人"
                prefix-icon="el-icon-search"
                v-model="tableData"
            ></el-input>
            <el-button style="margin-left: 20px" size="small" type="primary" icon="el-icon-search" @click="search('find')">查询</el-button>
            <el-button size="small" icon="el-icon-refresh" @click="reset">重置</el-button>
          </el-col>
        </el-row>
        <el-table
            :data="rows"
            stripe
            border
            style="width: 100%"
            header-cell-class-name="todo-header-row"
            row-class-name="todo-row"
            size="medium"
            v-loading="fullscreenLoading"
            @selection-change="handleChecked"
        >
          <el-table-column type="selection"   sortable width="50"></el-table-column>
          <el-table-column type="index" sortable width="50" label="序号"></el-table-column>
<!--          <el-table-column prop="userName"  label="被代理人"  align="center" ></el-table-column>-->
          <el-table-column prop="agentName"  label="代理人"  align="center" ></el-table-column>
          <el-table-column   label="是否启用"  align="center" >
            <template slot-scope="scope">
              <el-tag size="small"  type="success" v-if="scope.row.isUsable===1">启用</el-tag>
              <el-tag size="small" type="danger" v-if="scope.row.isUsable===0">禁用</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop=""  label="操作" align="center" width="200">
            <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, 30, 40]"
                         :page-size="10"
                         layout="total, sizes, prev, pager, next, jumper"
                         :total="total">
          </el-pagination>
        </el-row>
      </el-footer>
    </el-container>
  </el-container>
</template>

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

  export default {
    name:"agentList",
    components:{
      EipPopconfirmButton
    },
    data(){
      return {
        tableData:"",
        fullscreenLoading: true,
        checkBoxData: [],
      };
    },
    computed: mapState({
      rows: state => state.deputy.rows,
      pagination: state => state.deputy.pagination,
      total: state => state.deputy.total
    }),
    methods: {
      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("deputy/remove",ids.join(",")).then((res)=>{
            this.search();
          });
        }else{
          this.$message({
            message: '请选择要删除的数据',
            type: 'warning'
          });
        }
      },
      handleChecked(value){
        this.checkBoxData = value;
      }
      ,
      //Loading 加载中
      openFullScreen() {
        this.fullscreenLoading = true;
      },
      // 查询
      search(str) {
        this.openFullScreen();
        if(str=='find'){
          this.$store.dispatch("deputy/setPaginationPageNum",1);
        }
        let querys = []; //查询条件
        let queryFilter = {};
        let pageBean = {"pageBean":this.pagination};
        if (this.tableData == "") {
          this.$store.dispatch("deputy/getBpmDeputyList",pageBean).then(()=>{
            this.fullscreenLoading = false;
          });
        }else{
          querys = [{property: "user_name_", value: this.tableData, group: "main", operation: "LIKE", relation: "OR"}];
          querys.push({property: "agent_name_", value: this.tableData, group: "main", operation: "LIKE", relation: "OR"});
          queryFilter = {"pageBean":this.pagination,querys};
          this.$store.dispatch("deputy/getBpmDeputyList",queryFilter).then(()=>{
            this.fullscreenLoading = false;
          });
        }
      },
      //重置
      reset(){
        this.tableData ="";
        this.search("find");
      },
      operating(id,action) {
        var title = action == "edit" ? "编辑委托" : action == "add" ? "添加委托" : "查看委托";
        if (action == "add") {
          this.$router.push("/bpmDeputy/bpmDeputySetting");
        }
        else if(action == "edit"){
          this.$router.push("/bpmDeputy/bpmDeputySetting/" + id);
        }
      },
      handleSizeChange: function (size) {//每页下拉显示数据
        this.$store.dispatch("deputy/setPaginationSize",size);
        this.search();
      },
      handleCurrentChange: function(currentPage){//点击第几页
        this.$store.dispatch("deputy/setPaginationPageNum",currentPage);
        this.search();
      },
    },
    created() {
      let pagination={pageBean:{"page":1,"pageSize":10,"showTotal":true}};
      this.$store.dispatch("deputy/getBpmDeputyList",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;
  }

  .el-row {
    margin-bottom: 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>

