<template>
  <div>
    <Row>
      <Col span="4" style="padding:0 8px">
        <div class="top-search">区域列表</div>
        <bcTree tree-type="common" url="api/v1/base/area/tree?areaIds=0" @onClick="onCurrentAreaChange" :height="670"></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;">
                <bc-table-ex style="margin-right:10px" :dataColumns.sync='dataColumns' :columnsShow.sync="columnsShow" firstColumn="selection"
                             :pageKey="this.$options.name"
                             layout ex></bc-table-ex>
             
                <bc-export-excel style="margin-right:10px" :dataColumns="columnsShow" :selectedData="selectedData" :tableData="tableData"
                                 :excelName="'companyExcel'"
                                 :searchForm="searchForm" @export-data="exportData"
                                 :getData="this.getList"></bc-export-excel>
             
                <Button style="margin-right:10px" @click="showUpload" type="primary">批量导入</Button>
                <bc-upload :show.sync="uploadCompany" :import-url="importUrl"></bc-upload>
                <Button @click="companyAdd" type="primary">添加</Button>
              
            </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="companyView(row)" ghost style="margin-right: 5px">查看</Button>
              <Button type="primary" size="small" @click="companyEdit($event,row)" ghost style="margin-right: 5px">修改
              </Button>
              <Poptip confirm transfer size="small"
                      placement="bottom"
                      width="180"
                      title="你确定要删除吗?"
                      @on-ok="companyDelete(row)">
                <Button type="primary" size="small" ghost>删除</Button>
              </Poptip>
            </template>
          </Table>
          <bcPage ref="company-list-page" @reload-data="reloadData" :dataCount="dataCount" size="small"
                  :pageSize.sync="pageSize"></bcPage>
          <companyEdit ref="companyEdit" :show.sync="showModal" :value="modalParams"
                       @reload-data="reloadData"></companyEdit>
      </Col>
    </Row>

  </div>
</template>

<script>
  import { getCompanyPage, getCompanyList, deleteCompany } from '../../../../api/base/company-api'
  import companyEdit from './company-modal.vue'

  let $this
  export default {
    name: 'companyPage',
    components: {
      companyEdit,
    },
    data () {
      return {
        split1: 0.2,
        importUrl: '',
        uploadCompany: false,
        searchForm: {},
        showModal: false,
        modalParams: {},
        nowArea:{},
        nowCompany: {},
        dataCount: 0,
        pageSize: 10,
        columnsShow: [],
        dataColumns: [
          { title: '单位名称', key: 'companyName', sortable: true, show: true },
          { title: '单位类型', key: 'companyTypeStr', sortable: true, show: true },
          { title: '单位编码', key: 'companyCode', sortable: true, show: true },
          /*{ title: '上级单位id', key: 'parentId', sortable: true, show: true },*/
          { title: '上级单位名称', key: 'parentName', sortable: true, show: true ,width:160},
          /*{ title: '所属区域id', key: 'areaId', sortable: true, show: true },*/
          { title: '所属区域名称', key: 'areaName', sortable: true, show: true,width:160 },
          { title: '邮政编码', key: 'zipCode', sortable: true, show: true },
          { title: '单位简称', key: 'shortName', sortable: true, show: true },
          { title: '单位地址', key: 'address', sortable: true, show: true },
          { title: '单位类别', key: 'categoryStr', sortable: true, show: true },
          { title: '所属序列', key: 'sequenceStr', sortable: true, show: true },
          { title: '单位层次', key: 'areaLevelStr', sortable: true, show: true },
          { title: '单位级别', key: 'orgLevelStr', sortable: true, show: true },
          { title: '信用代码', key: 'creditCode', sortable: true, show: true },
          { title: '单位性质', key: 'natureStr', sortable: true, show: true },
          { title: '主管部门', key: 'supervisorCompany', sortable: true, show: true },
          { title: '管理方式', key: 'managementStyleStr', sortable: true, show: true },
          { title: '主体岗位', key: 'mainPost', sortable: true, show: true },
          { title: '经费形式', key: 'fundingStyleStr', sortable: true, show: true },
          { title: '所属系统', key: 'systemTypeStr', sortable: true, show: true },
          { title: '所属子系统', key: 'systemSubTypeStr', sortable: true, show: true },
          { title: '法人代表', key: 'legalPerson', sortable: true, show: true },
          { title: '批准成立文号', key: 'establishmentApprovalNumber', sortable: true, show: true },
          { title: '批准成立时间', key: 'establishmentApprovalTime', sortable: true, show: true },
          /*{ title: '状态  1--正常 0--无效', key: 'state', sortable: true, show: true },*/
          { title: '备注', key: 'remark', sortable: true, show: true },
          { title: '操作', key: 'action', width: 200, align: 'center',fixed: 'right', slot: 'actions', show: true }
        ],
        tableData: [],
        selectedData: [],
        loading: false,
        sortParams: [], //[{title: 姓名, orderStr: 降序, sortKey: name, order: -}]
        getList: getCompanyList,
        commonList: [
          {id: 1, label: '人社局', findItem: [{field: 'companyType', judge: 'eq', value: '1'}]},
          {id: 2, label: '组织部', findItem: [{field: 'companyType', judge: 'eq', value: '2'}]},
          /*{id: 2, label: '常用固化查询条件2', findItem: [
                  {field: 'fieldName1', judge: 'eq', value: 'fieldValue2'},
                  {field: 'fieldName2', judge: 'eq', value: 'fieldValue2'},
                  ]},*/

        ],//固化常用列表
        fieldList: [//用户可以自行选择查询的字段列表及配置
          {
            label: '单位类型',
            field: 'companyType',
            flags: ['='],
            fieldType: 'select',
            selectList: this.companyTypes
          },
          {
            label: '所属序列',
            field: 'sequence',
            flags: ['='],
            fieldType: 'select',
            selectList: this.sequences
          },{
            label: '单位类别',
            field: 'category',
            flags: ['='],
            fieldType: 'select',
            selectList: this.categorys
          },
        ]
      }
    },
    methods: {
      showUpload () {
        this.uploadCompany = true
      },
      companyView (row) {
        this.showModal = true
        this.modalParams = { title: '查看', flag: 'view', bean: row }
      },
      companyAdd () {
        this.showModal = true
        this.modalParams = { title: '添加', flag: 'add',
          bean: {
            areaId: this.nowArea.id, areaName: this.nowArea.areaName,
            zipCode: this.nowArea.zipCode, areaCode: this.nowArea.areaCode,
          }
        }
      },
      companyEdit (e, row) {
        e.stopPropagation()
        this.showModal = true
        this.modalParams = { title: '修改', flag: 'edit', bean: row }
      },
      companyDelete (row) {
        deleteCompany(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.nowArea.areaCode) {//将字典组别的id存入查询条件
          params.areaCode__rlike = this.nowArea.areaCode
        }
        getCompanyPage(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.nowCompany = this.tableData[0]
          } else {
            this.tableData = []
          }
          this.loading = false
        }).catch(err => {
          this.tableData = []
          this.$Message.error('查询失败！')
          console.log(err)
        })
      },
      onCurrentChange (currentRow, oldCurrentRow) {
        this.nowCompany = currentRow
      },
      onCurrentAreaChange (event, treeId, treeNode) {
        this.nowArea = treeNode
        this.reloadData()
      },
    },
    created () {
    },
    mounted () {
      this.reloadData()
      $this = this
      //初始化字典
      this.$dictUtil.getDict("company_type",data=>{if(data && data.length>0){this.fieldList[0].selectList = data}});
      this.$dictUtil.getDict("unit_category",data=>{if(data && data.length>0){this.fieldList[1].selectList = data}});
      this.$dictUtil.getDict("sequence",data=>{if(data && data.length>0){this.fieldList[2].selectList = data}});

    }
  }
</script>

<style>
.top-search{
  margin-top:30px;
  margin-bottom: 20px;
  font-size:16px
}
</style>
