<template>
  <div class="camerasMg">
    <el-row class="topBar">
      <el-col>
        <el-form :inline="true" :model="searchData">
          <el-form-item label>
            <el-input v-model="searchData.personalName" placeholder="请输姓名"></el-input>
          </el-form-item>
          <el-form-item label>
            <el-input v-model="searchData.expert" placeholder="请输专家类型"></el-input>
          </el-form-item>
          <el-form-item  label>
            <el-select v-model="searchData.deptId" placeholder="请选择单位部门" @change="seletChange" filterable>
              <el-option
                      v-for="item in deptsArr"
                      :key="item.id"
                      :label="item.fullName"
                      :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="searchFun()">
              <i class="el-icon-search"></i> 搜索
            </el-button>
            <el-button type="primary" @click="resetFun()">
              <i class="el-icon-refresh"></i> 重置
            </el-button>
          </el-form-item>
		  <el-form-item class="fr">
		    <!-- <el-button plain type="primary" @click="printBtn()">
		      <i class="el-icon-download"></i>打印
		    </el-button> -->
			<el-button plain type="primary" icon="el-icon-printer" v-print="'#printTest'">打印
			</el-button>
		  </el-form-item>
          <el-form-item class="fr">
            <el-button plain type="primary" @click="exportFun()">
              <i class="el-icon-download"></i>导出
            </el-button>
          </el-form-item>
          <el-form-item class="fr">
            <el-button plain type="primary" @click="addFun()">
              <i class="el-icon-plus"></i> 新增
            </el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>

    <el-table id="printTest" :data="tableData.pageData" stripe border style="width:100%;" :loading="false">
      <el-table-column width="50" type="index" label="序号"></el-table-column>
      <el-table-column prop="deptName" label="单位部门"></el-table-column>
      <el-table-column prop="personalName" label="姓名"></el-table-column>
      <el-table-column prop="sex" label="性别">
        <template slot-scope="scope">
          <font>{{scope.row.sex == 1 ? '男' : '女'}}</font>
        </template>
      </el-table-column>
      <el-table-column prop="expert" label="专家"></el-table-column>
      <el-table-column prop="mobilePhone" label="电话"></el-table-column>
      <el-table-column prop="phone" label="座机"></el-table-column>
      <el-table-column label="操作" width="300" align="center">
        <template slot-scope="scope">
          <el-button @click="detailFun(scope.row)" size="small">
            <i class="el-icon-edit-outline"></i> 详情
          </el-button>
          <el-button @click="editFun(scope.row)" size="small">
          	<i class="el-icon-edit-outline"></i> 编辑
          </el-button>
          <el-button type="danger" @click="delFun(scope.row)" size="small">
            <i class="el-icon-delete"></i> 删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      layout="total,sizes, prev, pager, next, jumper"
      :total="tableData.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="PAGE.page"
      :page-size="PAGE.size"
    ></el-pagination>
    <MembersMgEdit
      v-if="dialogVisible"
      :dialogVisible="dialogVisible"
      :id="formData.id"
      :title="dialogTit"
      @dialogFun="closeDialog"
      @refreshTableData="getTableData"
      :key="zjKey"
    ></MembersMgEdit>
  </div>
</template>
<script lang="ts">
  import {Component, Vue, Provide, Prop} from "vue-property-decorator";
import MembersMgEdit from "./MembersMgEdit.vue";
import METHOD from "@/utils/methods";
import Print from 'vue-print-nb'
Vue.use(Print)
@Component({
  components: { MembersMgEdit }
})
export default class MembersMg extends Vue {
  @Provide() tableData: Object = { pageData: [], total: 0 };
  @Provide() PAGE: any = { page: 1, size: 10 };
  @Provide() searchData: any = { personalName: "", expert:""};
  @Provide() loading: Boolean = false;

  //编辑组件
  @Provide() dialogVisible: Boolean = false;
  @Provide() dialogTit: String = "新增通讯录";
  @Provide() formData: Object = {};
  @Provide() zjKey: any = 0;

  @Provide() deptsArr: any = [];

  getTableData() {
    let that = this,
    params = Object.assign(that.PAGE, that.searchData);
    if(params.deptId != "" && params.deptId != undefined){
      params.deptId = params.deptId.toString();
    }
    (that as any).$axios.post("/addressBook/getAddressBookList", params).then((res: any) => {
      if( res ) that.tableData = res;
    })
  }
  //部门
  getDeptTreeData() {
    let that = this;
    (that as any).$axios
            .get(
                    `/dept/getSysDeptList?page=1&size=10000`
            )
            .then((res: any) => {
              that.deptsArr = res.pageData;
            });
  }
  seletChange(id: any) {
    let that = this,
            arr;
    arr = that.deptsArr.filter((ele: any) => id == ele.id);
    that.searchData.deptName = arr[0].fullName;
  }
  searchFun() {
    this.PAGE = { page: 1, size: 10 };
    this.getTableData();
  }
  resetFun() {
    this.PAGE = { page: 1, size: 10 };
    this.searchData = {};
    this.getTableData();
  }
  addFun() {
    this.zjKey++;
    this.dialogVisible = true;
    this.dialogTit = "新增";
  }
  detailFun(row: any){
    this.dialogTit = "详情";
    this.formData = Object.assign({}, row);
    this.zjKey++;
    this.dialogVisible = true;
  }
  editFun(row: any) {
    this.dialogTit = "编辑";
    this.formData = Object.assign({}, row);
    this.zjKey++;
    this.dialogVisible = true;
  }
  delFun(row: any) {
    let that = this as any;
    METHOD.deleteFun(that, `/addressBook/delAddressBookById/${row.id}`, function() {
      that.getTableData();
    });
  }
  exportFun(){
    let that = this;
    (that as any).$axios
    .get("/addressBook/exportAddressBook")
    .then((res: any) => {
      var json = eval( '(' + res + ')' );
      window.open("http://" + METHOD.GlobalUrl +"/ioc/iocfile/"+json.url);
    });
  }
  handleSizeChange(val: any) {
    this.PAGE.size = val;
    this.getTableData();
  }
  handleCurrentChange(val: any) {
    this.PAGE.page = val;
    this.getTableData();
  }
  closeDialog() {
    //关闭窗口
    this.dialogVisible = false;
    this.formData = {};
  }
  created() {
    this.getTableData();
    this.getDeptTreeData();
  }
}
</script>
