<template>
   <div>
    <Row>
      <Col span="4" style="padding:0 8px">
        <div class="top-search">区域列表</div>
        <bcTree tree-type="common" url="api/v1/rbac/organization/tree" @onClick="onCurrentParentChange"></bcTree>
      </Col>
      <Col span="20" style="padding:0 16px;border-left:1px solid #e8e8e8">
          <Row class="top-search" type="flex">
            <Col span="13" order="1">
              <!--高级检索-->
              <bc-senior ref="senior" keyValue2 :pageName="$options.name" :fieldList="fieldList"
                       :commonList="commonList" @seniorFind="reloadData" :item.sync="searchForm"></bc-senior>
            </Col>
            <Col span="11" order="2" style="display:flex;justify-content: flex-end;">
              <div style="margin-right: 10px">
                <bc-table-ex :dataColumns.sync='dataColumns' :columnsShow.sync="columnsShow" firstColumn="selection"
                             :pageKey="this.$options.name"
                             layout ex></bc-table-ex>
              </div>
              <div style="margin-right: 10px">
                <bc-export-excel :dataColumns="columnsShow" :selectedData="selectedData" :tableData="tableData"
                                 :excelName="'organizationExcel'"
                                 :searchForm="searchForm" @export-data="exportData"
                                 :getData="this.getList"></bc-export-excel>
              </div>
              <div style="margin-right: 10px">
                <Button @click="showUpload" type="primary">批量导入</Button>
                <bc-upload :show.sync="uploadOrganization" :import-url="importUrl"></bc-upload>
              </div>
              <div >
                <Button @click="organizationAdd" type="primary">添加</Button>
              </div>
            </Col>
          </Row>
          <Table ref="tables" searchable search-place="top" :data="tableData" :columns="columnsShow" size="small"
                 :loading="loading" @on-sort-change="sortChange" @on-selection-change="selectedChange" height="600"
                 highlight-row @on-current-change="onCurrentChange" style="min-height: 550px;margin-top: 10px;" border>
            <template slot="actions" slot-scope="{ row }">
              <Button type="primary" size="small" @click="organizationView(row)" ghost style="margin-right: 5px">查看
              </Button>
              <Button type="primary" size="small" @click="organizationEdit($event,row)" ghost style="margin-right: 5px">
                修改
              </Button>
              <Poptip confirm transfer size="small"
                      placement="bottom"
                      width="180"
                      title="你确定要删除吗?"
                      @on-ok="organizationDelete(row)">
                <Button type="primary" size="small" ghost>删除</Button>
              </Poptip>
            </template>
          </Table>
          <bcPage ref="organization-list-page" @reload-data="reloadData" :dataCount="dataCount" size="small"
                  :pageSize.sync="pageSize"></bcPage>
          <organizationEdit ref="organizationEdit" :show.sync="showModal" :value="modalParams"
                            @reload-data="reloadData"></organizationEdit>
      </Col>
    </Row>
  </div>

</template>

<script>
  import { getOrganizationPage, getOrganizationList, deleteOrganization } from '../../../../api/rbac/organization-api'
  import organizationEdit from './organization-modal.vue'

  let $this
  export default {
    name: 'organizationPage',
    components: {
      organizationEdit,
    },
    data () {
      return {
        split1: 0.2,
        importUrl: '',
        uploadOrganization: false,
        searchForm: {},
        showModal: false,
        modalParams: {},
        nowOrganization: {},
        nowParent: {},
        dataCount: 0,
        pageSize: 10,
        columnsShow: [],
        dataColumns: [
          { title: '机构编码', key: 'code', sortable: true, show: true },
          { title: '机构名称', key: 'name', sortable: true, show: true },
          { title: '机构级别', key: 'level', sortable: true, show: true },
          { title: '负责人姓名', key: 'principalName', sortable: true, show: true },
          { title: '传真', key: 'fax', sortable: true, show: true },
          { title: '联系人', key: 'contactPersonId', sortable: true, show: true },
          { title: '联系人名称', key: 'contactPersonName', sortable: true, show: true },
          { title: '联系电话', key: 'contactPhone', sortable: true, show: true },
          { title: '联系地址', key: 'address', sortable: true, show: true },
          { title: '状态', key: '',render: (h, params) => h('span', params.row.state==1?'正常':'禁用'), sortable: true, show: true },
          { title: '备注', key: 'remark', sortable: true, show: true },
          { title: '操作', key: 'action', width: 200, align: 'center', slot: 'actions', show: true }
        ],
        tableData: [],
        selectedData: [],
        loading: false,
        sortParams: [], //[{title: 姓名, orderStr: 降序, sortKey: name, order: -}]
        getList: getOrganizationList,
        commonList: [
          /*{id: 1, label: '常用固化查询条件1', findItem: [{field: 'fieldName', judge: 'eq', value: 'fieldValue'}]},
          {id: 2, label: '常用固化查询条件2', findItem: [
                  {field: 'fieldName1', judge: 'eq', value: 'fieldValue2'},
                  {field: 'fieldName2', judge: 'eq', value: 'fieldValue2'},
                  ]},*/

        ],//固化常用列表
        fieldList: [//用户可以自行选择查询的字段列表及配置
          {
            label: '机构名称',
            field: 'level',
            flags: ['='],
            fieldType: 'select',
            selectList: [
              {name: '总公司',value: '1' },{name: '子公司',value: '2' },
              {name: '部门',value: '3' },{name: '小组',value: '4' },
            ]
          },
          /*{
            label: '身份证',
            field: 'idCard',
            flags: ['=', 'like', 'isNull', 'isNotNull'],
            fieldType: 'input'
          },*/
        ]
      }
    },
    methods: {
      showUpload () {
        this.uploadOrganization = true
      },
      organizationView (row) {
        this.showModal = true
        this.modalParams = { title: '查看', flag: 'view', bean: row }
      },
      organizationAdd () {
        this.showModal = true
        this.modalParams = {
          title: '添加', flag: 'add',
          bean: { parentId: this.nowParent.id, parentName: this.nowParent.name, state: 1 }
        }
      },
      organizationEdit (e, row) {
        e.stopPropagation()
        this.showModal = true
        this.modalParams = { title: '修改', flag: 'edit', bean: row }
      },
      organizationDelete (row) {
        deleteOrganization(row.id).then(data => {
          this.$Message.success('操作成功！')
          this.tableData.splice(row._index, 1)
        }).catch(err => {
          this.$Message.error('操作失败！')
          console.log(err)
        })
      },
      selectedChange (selection) {
        this.selectedData = selection
      },
      sortChange (column) {
        this.$refs.customSort.sortChange(column)
      },
      exportData (params) {
        this.$refs.tables.exportCsv(params)
      },
      reloadData (pageSize, pageNo) {
        //表格加载中效果
        this.loading = true
        //处理表单查询参数及分页
        if (!pageNo) {
          this.dataCount = 0
        }
        if (!pageSize) {
          pageSize = this.pageSize
        }
        let page_params = { 'pageSize': pageSize, 'pageNo': pageNo }
        let params = Object.assign({}, page_params, this.searchForm) // 这样不会改变原对象
        //加入上级参数
        if (this.nowParent) {//将上级的id存入查询条件
          params.fullPath__rlike = this.nowParent.fullPath
        }
        getOrganizationPage(params).then(res => {
          if (res.data.result.totalSize) {
            this.dataCount = parseInt(res.data.result.totalSize)
          }
          if (res.data.result.datas && res.data.result.datas.length > 0) {
            this.tableData = res.data.result.datas
            this.tableData[0]._highlight = true
            this.nowOrganization = this.tableData[0]
          } else {
            this.tableData = []
          }
          this.loading = false
        }).catch(err => {
          this.tableData = []
          this.$Message.error('查询失败！')
          console.log(err)
        })
      },
      onCurrentChange (currentRow, oldCurrentRow) {
        this.nowOrganization = currentRow
      },
      onCurrentParentChange (event, treeId, treeNode) {
        this.nowParent = treeNode
        this.reloadData()
      },
    },
    mounted () {
      this.reloadData()
      $this = this
    }
  }
</script>

<style>
  .demo-split {
    height: 400px;
    border: 1px solid #dcdee2;
  }

  .demo-split-pane {
    padding: 10px;
  }
</style>
