<template>
  <div>
    <el-dialog
    title="客户选择"
    width="1000px"
	height="1000px"
    :close-on-click-modal="false"
    :append-to-body="true"
	draggable
     class="clientDialog"
    v-model="visible">
        <el-form size="default" :inline="true" ref="searchForm" :model="searchForm" @keyup.enter.native="refreshList()" @submit.native.prevent>
            <el-form-item prop="name" >
              <el-input size="default" v-model="searchForm.name" placeholder="客户姓名" clearable></el-input>
            </el-form-item>
            <el-form-item prop="uscCode" >
              <el-input size="default" v-model="searchForm.uscCode" placeholder="统一社会信用代码" clearable></el-input>
            </el-form-item>
            <el-form-item prop="areaId" >
              <SelectTree
                ref="area"
                :props="{
                        value: 'id',             // ID字段名
                        label: 'name',         // 显示名称
                        children: 'children'    // 子级字段名
                      }"
                placeholder="请选择所在区域"
                size="default"
                url="/system-server/sys/area/treeData"
                :value="searchForm.areaId"
                :clearable="true"
                :accordion="true"
                @getValue="(value) => {searchForm.areaId=value}"/>
            </el-form-item>
            <el-form-item prop="companyType" >
              <el-select size="default" v-model="searchForm.companyType" placeholder="请选择客户性质"  style="width: 100%;">
                <el-option
                  v-for="item in $dictUtils.getDictList('customer_nature')"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item prop="companyIndustry" >
              <el-select size="default" v-model="searchForm.companyIndustry" placeholder="请选择所在行业"  style="width: 100%;">
                <el-option
                  v-for="item in $dictUtils.getDictList('industry')"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item>
              <el-button size="default" type="primary" @click="refreshList()" icon="el-icon-search">查询</el-button>
              <el-button size="default" @click="resetSearch()" icon="el-icon-refresh-right">重置</el-button>
            </el-form-item>
          </el-form>

        <vxe-table
			border="inner"
			auto-resize
			resizable
			:loading="loading"
			size="small"
			ref="clientTable"
			show-header-overflow
			show-overflow
			:menu-config="{}"
			:row-config="{isCurrent: true}"
			:radio-config="{trigger: 'row'}"
			:data="dataList">
		  <vxe-column type="radio" width="50px"></vxe-column>
          <vxe-column min-width="200px" title="客户姓名" field="name" align="center"></vxe-column>
          <vxe-column min-width="200px" title="统一社会信用代码" field="uscCode" align="center"></vxe-column>
          <vxe-column min-width="120px" title="客户性质" field="companyType" align="center">
            <template #default="scope">
              {{ $dictUtils.getDictLabel("customer_nature", scope.row.companyType, '-') }}
            </template>
          </vxe-column>
          <vxe-column min-width="120px" title="所在行业" field="companyIndustry" align="center">
            <template #default="scope">
              {{ $dictUtils.getDictLabel("industry", scope.row.companyIndustry, '-') }}
            </template>
          </vxe-column>
			<vxe-column min-width="120px" title="归属区域" field="areaName" align="center"></vxe-column>
        </vxe-table>
		<vxe-pager
			background
			size="small"
			:current-page="tablePage.currentPage"
			:page-size="tablePage.pageSize"
			:total="tablePage.total"
			:page-sizes="[10, 20, 100, 1000, {label: '全量数据', value: 1000000}]"
			:layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']"
			@page-change="currentChangeHandle">
		</vxe-pager>
		<template #footer>
			<span class="dialog-footer">
			  <el-button size="default" @click="visible = false" icon="el-icon-circle-close">关闭</el-button>
			  <el-button size="default" type="primary" icon="el-icon-circle-check" @click="doSubmit()">确定</el-button>
			</span>
		</template>

    </el-dialog>

  </div>
</template>

<script>
  import SelectTree from '@/components/treeSelect/treeSelect.vue'
  export default {
    data () {
      return {
        searchForm: {
          name: '',
          areaId: '',
          uscCode: '',
          companyType: '',
          companyIndustry: ''
        },
		  tablePage: {
			  total: 0,
			  currentPage: 1,
			  pageSize: 10,
			  orders: []
		  },
        dataList: [],
        loading: false,
        visible: false
      }
    },
    components: {
      SelectTree
    },
    methods: {
      init () {
		this.visible = true
		this.refreshList()
      },
      // 获取数据列表
      refreshList () {
        this.loading = true
        this.$http({
          url: '/finance-server/workClientInfo/workClientInfo/componentList',
          method: 'get',
          params: {
			  'current': this.tablePage.currentPage,
			  'size': this.tablePage.pageSize,
			  'orders': this.tablePage.orders,
			  ...this.searchForm
		  }
        }).then((data) => {
          this.dataList = data.records
          this.tablePage.total = data.total
          this.tablePage.currentPage = data.current
          this.loading = false
        })
      },
      doSubmit () {
		  let row = this.$refs.clientTable.getRadioRecord()
		  if (this.commonJS.isEmpty(row)) {
			  this.$message.error('请选择一条数据')
			  return
		  }
		  this.close()
		  this.$emit('doSubmit', [row])
      },
		// 当前页
		currentChangeHandle ({currentPage, pageSize}) {
			this.tablePage.currentPage = currentPage
			this.tablePage.pageSize = pageSize
			this.refreshList()
		},
		resetSearch () {
			this.$refs.searchForm.resetFields()
			this.refreshList()
		},
		close () {
			this.$refs.searchForm.resetFields()
			this.visible = false
		}
    }
  }
</script>
<style lang="scss">
.org {
  height: 100%;
  .el-card__header {
    padding: 10px;
  }
  .el-card__body {
    padding: 10px;
    max-height: 520px;
    overflow: auto;
  }
}
.clientDialog{
  .el-dialog__body {
    padding: 0px 0px 0px 10px;
    color: #606266;
    font-size: 14px;
    word-break: break-all;
    height: 1300px;
  }
  .el-main {
    padding: 20px 20px 5px 20px;
    .el-pagination{
      margin-top: 5px;
    }
  }
}
</style>
