<template>
  <ifbp-page>
    <ifbp-breadcrumb name="员工信息"></ifbp-breadcrumb>
    <!--search-->
    <ifbp-button-area id="search-container">
        <el-button type="primary" class="fl" @click="addUserBtn">新增</el-button>
        <el-button type="text" @click="showSearch" class="fr" :class="[ 'staff-search-button', { active: !this.isHide } ]">
          高级搜索
          <i class="el-icon-arrow-down" v-if="this.isHide"></i>
          <i class="el-icon-arrow-up" v-if="!this.isHide"></i>
        </el-button>
    </ifbp-button-area>

    <div id="advanced-search" :class="{hide: isHide}">
      <el-row>
        <el-col :span="2"><span class="search-label">编码:</span></el-col>
        <el-col :span="3">
          <el-input type="text" v-model="code" placeholder="请输入编码"></el-input>
        </el-col>
        <el-col :span="2"><span class="search-label"> 姓名:</span></el-col>
        <el-col :span="3">
          <el-input type="text" v-model="name" placeholder="请输入姓名"></el-input>
        </el-col>
        <el-col :span="2"><span class="search-label"> 手机:</span></el-col>
        <el-col :span="3">
          <el-input type="text" v-model="mobile" placeholder="请输入手机号码"></el-input>
        </el-col>
        <el-col :span="2"><span class="search-label"> 启用状态:</span></el-col>
        <el-col :span="4">
          <el-select id="s-state" v-model="enablestate">
            <el-option
              v-for="item in search_options"
              :label="item.label"
              :value="item.value">

            </el-option>
          </el-select>
        </el-col>
        <div class="fr">
          <el-button @click="search">搜索</el-button>
        </div>
      </el-row>
    </div>

    <!-- 用户信息列表 -->
    <ifbp-main-area>
      <!--list-->
      <ifbp-template ref="staffTableRef"
                    tpl-id="staffTableId"
                    :tpl-data="staffTableData"
                    show-type="table"
                    :funnode="funnode"
                    :nexuskey="nexuskey"
                    :tpl-reset-fun="staffTableResetFun"
                    :methods="staffMethods"
                    @delete-table-click="deleteTableRow"
                    @power-table-click="stateTableRow"
                    @row-click="handleRowClick">
      </ifbp-template>
      <!--pagination-->
      <input type="text" id="s" style="visibility: hidden">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalElements">
      </el-pagination>
    </ifbp-main-area>
    <el-dialog
        title="提示"
        v-model="delDialogVisible"
        :modal="true"
        size="tiny">
        <span>确认删除该用户？删除后无法恢复。</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="delDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="deleteClick">确 定</el-button>
        </span>
    </el-dialog>
  </ifbp-page>
</template>
<script>
//  import list from './editList';
// import template from '../../../../ifbp-element/packages/ifbp-template/src/template.vue';
  // import json from './test.json';
  export default {
//  components: {
//   'ifbp-template': template
//  },
    data(){
      var vm = this;
      return {
        isHide: true,
        loading: false,
        staffTableData: {
          psndoc_t: [],
        },
        funnode:'YGGL',
        nexuskey:'STAFF_INFO',
        staffTableResetFun($node) {
            //获取table,此id为ui模板上面的表格Id
            let $table = $node.find("el-table");
            //定义操作
            let operateArr = [
                {
                    icon: 'power',
                    title: '启用/停用'
                },
                {
                    title: "删除",
                    icon: "delete"
                }
            ];
            //获取操作按钮html片段
            let operateHtml = this.getTableOperateHtml(operateArr);
            $table.append(operateHtml);
            // 为头像添加图片
            let avatarDom = $('el-table-column[prop="avatar"]', $table);
            if(avatarDom.length) {
              avatarDom.html(
                '<template scope="scope"><img style="width: 24px; height: 32px; display: block; margin: 1px;"' +
                  `:src="'/ifbp-app-bd/bd/psn/psndoc/avatarImgDownLoad?avatar='+scope.row.avatar">` +
                "</img></template>"
              );
            };
            // 为员工编码添加hover的模拟事件
            let codeDom = $('el-table-column[prop="code"]',$table);
            if(codeDom.length){
              codeDom.html(
                '<template scope="scope"><a @mouseover="showOver" @mouseout="hideOut" @click="editTableRow(scope)">{{scope.row.code}}</a></template>'
              );
            }
            return $node[0].outerHTML;
        },
        staffMethods:{
          showOver(scope){
            // scope.target.style.cursor = 'pointer';
            // scope.target.style.textDecoration = 'underline';
          },
          hideOut(scope){
            // scope.target.style.cursor = 'default';
            // scope.target.style.textDecoration = 'none';        
          },
          editTableRow(scope){
            vm.$router.push('/staff/detail/' + scope.row.id);
          }
        },
        size: 10,
        currentPage: 1,
        totalElements: 0,
        code: '',
        name: '',
        mobile: '',
        enablestate: '',
        search_options: [{
          label: '全部',
          value: ''
        },{
          label: '未启用',
          value: 1
        },{
          label: '已启用',
          value: 2
        },{
          label: '已停用',
          value: 3
        }],
        isEdit: false,
        delDialogVisible: false,
        delId:'',
      };
    },
    created(){
      /**
       *   获取列表
       **/
      this.request();
      //隐藏组织结构
      // if(document.getElementById("organization_page")){
      //   document.getElementById("organization_page").style.display = "none";
      // }

    },
    mounted(){
      document.getElementById('s').remove();
    },
    methods: {

      /**
       *   获取列表请求
       **/
      request(n, s) {
        var extraParams = this.getExtraParam();
        this.loading = true;
        var url;
        var search = '&search_code=' + this.code + '&search_name=' + this.name + '&search_mobile=' + this.mobile + '&search_enablestate=' + this.enablestate + extraParams;
        if(n===undefined){
          url = '/ifbp-app-bd/bd/psn/psndoc/pageList?pn=1&ps=10&sortColumn=' + search;
        } else {
          url = '/ifbp-app-bd/bd/psn/psndoc/pageList?pn='+ n +'&ps=' + s + search;
        }
        this.$http({
          url: url,
          method: 'get',
          dataType: 'json'
        }).then((res) => {
          if(res.data.success === true){
              this.loading = false;
              this.totalElements = res.data.data.totalElements ;       // 总条数
              this.size = res.data.data.size;                          // 每页的条数
              this.$nextTick(() => {
                if(this.$refs.staffTableRef) {
                  this.$refs.staffTableRef.setTableData(res.data.data.content);
                } else {
                  this.$set(this.staffTableData, 'uitemplateTableData', res.data.data.content);
                }
              });
          }
        }).catch(() => {
          this.$message({
            message: '列表获取失败',
            type: 'error'
          });
          // this.$refs.staffTableRef.setTableData(json.data.content);
        });
      },
      handleSizeChange(val) {
        this.request(1, val);
      },
      handleCurrentChange(val) {
        this.request(val, this.size);
      },
      getExtraParam() {
        var paramStr = window.location.href.split('?')[1];
        var extraStr;
        var params = {};
        var tmp;
        if (paramStr) {
          paramStr.split('&').forEach((singleParam) => {
            tmp = singleParam.split('=');
            params[tmp[0]] = tmp[1];
          });
          if(params.search_pk_dept){
            extraStr = params.search_pk_org ? '&search_pk_org=' + params.search_pk_org : '&search_pk_dept=' + params.search_pk_dept;
          } else {
            extraStr = params.search_pk_org ? '&search_pk_org=' + params.search_pk_org : '&search_pk_dept=';
          }
          if (!extraStr) {
            extraStr = '';
          }
        } else {
          extraStr = '';
        }
        return extraStr;
      },
      /**
       *  一些控制页面状态的方法
       *  都在按钮上绑着
       **/

      // 高级搜索
      showSearch() {
        this.isHide = !this.isHide;
      },
      search() {
        this.request();
      },
      // 跳转到添加用户页面
      addUserBtn() {
        // location.hash = '/staff/add';
        this.$router.push('/staff/add');
        this.isEdit = true;
      },
      handleRowClick(){
        // this.$router.push('/staff/detail/' + scope.id)
      },
      editTableRow(scope){
        // location.hash = '/staff/detail/' + scope.row.id;
        this.$router.push('/staff/detail/' + scope.row.id)
      },
      deleteTableRow(scope) {
        this.delDialogVisible = true;
        this.delId = scope.row.id;
      },
      /**
       *  启用状态修改
       *  2（启用），3(停用)
       * */
      stateTableRow(scope) {
        var state = scope.row.enablestate === "2"?3:2;
        this.$http({
          url: '/ifbp-app-bd/bd/psn/psndoc/optUserState/' + scope.row.id + '?state=' + state ,
          method: 'get'
        }).then((res) => {
          if (res.data.success === true) {
            if (state === 2){
              this.$message({
                message: '启用成功',
                type: 'success'
              });
            } else {
              this.$message({
                message: '停用成功',
                type: 'warning'
              });
            }
            this.request();
          } else {
            this.$message({
              message: res.data.error.errorMessage,
              type: 'error'
            });
          }
        }).catch(() => {
          this.$message({
            message: 'Network error',
            type: 'error'
          });
        });

      },
      deleteClick() {
        this.$http({
          url: '/ifbp-app-bd/bd/psn/psndoc/' + this.delId,
          method: 'delete'
        }).then((res) => {
          if (res.data.success === true) {
            this.$message({
              message: '删除成功',
              type: 'success'
            });
            this.delDialogVisible = false;
            this.request();
          } else {
            this.$message({
              message: res.data.error.errorMessage,
              type: 'error'
            });
          }
        }).catch(() => {
          this.$message({
            message: 'Network error',
            type: 'error'
          });
        });
      },
      backInfo() {
        this.$router.push("/appArea");
      },
    }
  };

</script>
