<script setup>
import { reactive, ref, toRefs } from "vue";
import {locationOptions} from "./location"
import { customInterence } from '@/api/api.js'


const tableColumns = [
  {
      label:'客户名称',
      key:'CompanyName'
  },{
      label:'类型',
      key:'CompanyType'
  },{
      label:'所属行业',
      key:'IndustryName'
  },{
      label:'客户地址',
      key:'City'
  },{
      label:'原销售',
      key:'SellerName'
  },{
      label:'分配销售',
      key:'ShareSeller'
  },{
      label:'状态',
      key:'Status'
  }
]
const filterState = reactive({
  searchCitys:[],
  provinceValue:'',
  cityValue:'',
  searchText:'',
  pageNo: 1,
  pageSize: 10
})

const tableData = ref([])
const tableLoading = ref(false)
const total = ref(0)
function getTableList(){
    tableLoading.value=true
    customInterence.getCustomCityList({
        PageSize:filterState.pageSize,
        CurrentIndex:filterState.pageNo,
        Keyword:filterState.searchText,
        Province:filterState.provinceValue,
        City:filterState.cityValue
    }).then(res=>{
        if(res.Ret!==200) return
        tableData.value = res.Data.List
        total.value = res.Data.Paging.Totals
    })
    
}
getTableList()

function currentChange(page){
    filterState.pageNo=page
    getTableList()
}


function handleChangeLocation(){
    const provinceArr = []
    const cityArr = []
    filterState.searchCitys.forEach(item=>{
        // 省
        provinceArr.push(item[0])
        // 市
        cityArr.push(item[1])
    })
//provinceArr需要去重
    filterState.provinceValue = [...new Set(provinceArr)].join(',')
    filterState.cityValue = cityArr.join(',')
    filterState.page_no = 1;
    getTableList();
}

const { 
  searchCitys,
  provinceValue,
  cityValue,
  searchText,
  pageNo,
  pageSize 
} = toRefs(filterState)

</script>
<template>
  <div class="custom-city-list-wrap">
    <div class="select-box box-wrap">
      <el-cascader
        v-model="searchCitys"
        :props="{
          multiple: true,
          value: 'name',
          children: 'city',
          label: 'name',
        }"
        :options="locationOptions"
        clearable
        collapse-tags
        placeholder="请选择客户地址"
        @change="handleChangeLocation"
      >
      </el-cascader>
      <el-input
        placeholder="客户名称/原销售/分配销售"
        prefix-icon="el-icon-search"
        v-model="searchText"
        clearable
        @input="getTableList"
      ></el-input>
    </div>
    <div class="table-box box-wrap">
      <el-table :data="tableData" border>
        <el-table-column
          v-for="item in tableColumns"
          :key="item.key"
          :label="item.label"
          align="center"
        >
          <template #default="{ row }">
            {{ row[item.key] }}
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        layout="prev,pager,next,total"
        background
        :current-page="pageNo"
        @current-change="currentChange"
        :page-size="pageSize"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>
<style scoped lang="scss">
.custom-city-list-wrap{
    .box-wrap{
        padding:30px;
        background-color: #fff;
        border-radius: 4px;
    }
    .select-box{
        display: flex;
        justify-content: space-between;
        .el-input{
            width:400px;
        }
    }
    .table-box{
        margin-top: 30px;
        .el-pagination{
            margin-top: 30px;
            justify-content: flex-end;
        }
    }
}
</style>
