<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="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;">
              
                <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="'areaExcel'"
                                 :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="uploadArea" :import-url="importUrl" ></bc-upload>
             
                <Button @click="areaAdd" 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="margin-top: 10px;">
            <template #actions slot-scope="{ row }">
              <Button type="primary" size="small" @click="areaView(row)" ghost style="margin-right: 5px">查看</Button>
              <Button type="primary" size="small" @click="areaEdit($event,row)" ghost style="margin-right: 5px">修改
              </Button>
              <Poptip confirm transfer size="small"
                      placement="bottom"
                      width="180"
                      title="你确定要删除吗?"
                      @on-ok="areaDelete(row)">
                <Button type="primary" size="small" ghost>删除</Button>
              </Poptip>
            </template>
          </Table>
          <bcPage ref="area-list-page" @reload-data="reloadData" :dataCount="dataCount" size="small" :pageSize.sync="pageSize" ></bcPage>
          <areaEdit ref="areaEdit"  :show.sync="showModal" :value="modalParams" @reload-data="reloadData"></areaEdit>
      </Col>
    </Row>

  </div>
</template>

<script>
import { getAreaPage,getAreaList,deleteArea } from '../../../../api/base/area-api'
import areaEdit from './area-modal.vue'
let $this;
export default {
  name: 'areaPage',
  components: {
    areaEdit,
  },
  data () {
    return {
      split1: 0.2,
      importUrl: '',
      uploadArea:false,
      searchForm:{},
      showModal: false,
      modalParams: {},
      nowArea:{},
      nowParent: {},
      dataCount:0,
      pageSize:10,
      columnsShow: [],
      dataColumns: [
              { title: '父区域', key: 'parentName', sortable: true, show: true },
              { title: '详细名称', key: 'fullPathName', sortable: true, show: true },
              { title: '区划代码', key: 'areaCode', sortable: true, show: true },
              { title: '区域名称', key: 'areaName', sortable: true, show: true },
              { title: '居委会', key: 'abName', sortable: true, show: true },
              { title: '拼音', key: 'pinYin', sortable: true, show: true,width:120 },
              { title: '首字母缩写', key: 'abpy', sortable: true, show: true },
              { title: '区域级别', key: 'areaLevel', sortable: true, show: true },
              { title: '区域级别', key: 'areaLevelStr', 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: getAreaList,
      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: 'name',
          flags: ['=', 'like', 'isNull', 'isNotNull'],
          fieldType: 'input'
        },s
        {
          label: '身份证',
          field: 'idCard',
          flags: ['=', 'like', 'isNull', 'isNotNull'],
          fieldType: 'input'
        },*/
      ]
    }
  },
  methods: {
    showUpload(){
      this.uploadArea=true;
    },
    areaView (row) {
      this.showModal = true;
      this.modalParams = {title:'查看',flag:'view',bean:row};
    },
    areaAdd () {
      this.showModal = true;
      this.modalParams = {
        title: '添加', flag: 'add',
        bean: { parentId: this.nowParent.id, parentName: this.nowParent.areaName}
      }
    },
    areaEdit (e, row) {
      e.stopPropagation();
      this.showModal = true;
      this.modalParams = {title:'修改',flag:'edit',bean:row};
    },
    areaDelete (row) {
      deleteArea(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.fullPath) {//将字典组别的id存入查询条件
        params.fullPath__rlike = this.nowParent.fullPath+','
      }
      getAreaPage(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.nowArea = this.tableData[0];
        } else {
            this.tableData = [];
        }
        this.loading = false;
      }).catch(err => {
        this.tableData = [];
        this.$Message.error('查询失败！')
        console.log(err)
      })
    },
    onCurrentChange (currentRow,oldCurrentRow) {
      this.nowArea = currentRow;
    },
    onCurrentParentChange (event, treeId, treeNode) {
      this.nowParent = treeNode
      this.reloadData()
    },
  },
  mounted () {
    this.reloadData();
    $this = this;
  }
}
</script>

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