<template>
  <el-dialog v-loading.fullscreen.lock="fullscreenLoading" :close-on-click-modal = "false"
             v-model="outerVisible" title="发起客户迁移" width="900">

    <div style="margin-bottom: 10px;
      border-bottom: 1px solid #99a9bf; /* 设置外边框划线 */">
      <el-form :model="sumbitFormData" label-width="auto" :rules="rules" @submit.prevent="sumbitForm"  ref="sumbitFormRef" style="max-width: 600px;">
        <el-form-item  label="目标门店：" prop="fromTenantId">
          <el-select v-model="sumbitFormData.fromTenantId"
                     placeholder="目标门店"
                     size="small"
                     style="width: 150px">
            <el-option
                v-for="(key,value) in fromTenantData"
                :key="key"
                :label="key"
                :value="value"
            />

          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <div style="border-left: 2px solid #5cabff; padding-left:10px;"><h1 style="font-weight: bold; font-size: 16px;">选择迁移客户</h1></div>

    <el-form class="list-search-container" :model="queryParams" ref="queryFormRef" :inline="true" label-width="70px">
      <el-form-item label="客户名称：" prop="companyName">
        <el-input v-model="queryParams.name" size="small"  placeholder="请输入客户名称" clearable style="width: 120px"
                  @keyup.enter="handleQuery" />
      </el-form-item>
      <el-form-item label="负责人：" prop="leader">
        <el-input v-model="queryParams.leaderName" size="small"  placeholder="请输入负责人" clearable style="width: 120px"
                  @keyup.enter="handleQuery" />
      </el-form-item>
      <el-form-item label="客户：" prop="adviserName">
        <el-input v-model="queryParams.adviserName" size="small"  placeholder="请输入客户" clearable style="width: 120px"
                  @keyup.enter="handleQuery" />
      </el-form-item>
      <div style="display: flex; margin-right: 46px; justify-content: flex-end">
        <el-button type="primary" icon="Search" @click="handleQuery" size="small">搜索</el-button>
        <el-button icon="Refresh" @click="resetQuery" size="small">重置</el-button>
      </div>
    </el-form>
      <div style="position: relative;">
        <el-table  @selection-change="selectable" :data="DataList" size="small" border height="90%">
            <el-table-column type="selection"  align="center"  width="45" />
            <el-table-column label="序号" type="index" width="55" align="center"/>
            <el-table-column label="客户名称" align="center" prop="name">
            </el-table-column>
            <el-table-column label="税号" align="center" prop="socialCreditCode">
            </el-table-column>
            <el-table-column label="年收入" align="center" prop="annualIncome">
            </el-table-column>
            <el-table-column label="纳税性质" align="center" prop="taxType">
            </el-table-column>
            <el-table-column label="负责人" align="center" prop="leaderName">
            </el-table-column>
            <el-table-column label="客服" align="center" prop="adviserName">
            </el-table-column>
        </el-table>
        <pagination style="height: 40px;" v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
                    v-model:limit="queryParams.pageSize" @pagination="getComList" />
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="outerVisible = false">关闭</el-button>
        <el-button type="primary" @click="sumbitForm">提交</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script lang="ts" setup>
import {ElButton} from "element-plus";
import {ref} from "@vue/reactivity";
import {computed, defineProps, getCurrentInstance, reactive, toRefs} from "vue";
import {
  listCompany,
  getTenantApi,
  saveMigrationComApi
} from "@/api/business/crm/company";
const { proxy } = getCurrentInstance();
const fullscreenLoading = ref(false);
const outerVisible = ref(false);
const fromTenantData = ref();
const sumbitFormRef = ref();
const queryFormRef = ref();
const DataList = ref();
const total = ref(0);
const loading = ref(false);
interface quertParmsEntity {
  pageNum: number,
  pageSize: number,
  orderByColumn: string,
  name?:string,
  endDateFilter?:Array<Date>,
  fromTenantName?:string,
  startDateFilter?:Array<Date>,
  migratStatus?:number,
  leaderName?:string,
  adviserName?:string
}
const queryParams = ref<quertParmsEntity>({
  pageNum: 1,
  pageSize: 10,
  orderByColumn: "create_time"
});
const props = defineProps({
  getList: {
    type: Function,
    default: () => { },
  },
});
const rules = computed(() => ({
  fromTenantId: [
    { required: true, message: "目标门店不能为空"},
  ],
}));
const sumbitFormData = reactive({
  fromTenantId: null,
  fromTenantComId:null
});
const onsumbit = () => {
  sumbitFormRef.value.sumbit();
}
const handleQuery = () => {
  queryParams.value.pageNum = 1;
}
const resetQuery = () => {
  proxy.$refs.queryFormRef.resetFields();
  handleQuery();
}
const openView = () =>{
  outerVisible.value = true;
  getComList();
}
const sumbitForm = () => {
 sumbitFormRef.value.validate((valid)=>{
   if(valid){

   }
 })
}
const selectable = (row: any) => {
  sumbitFormData.fromTenantComId = row.map((item) => item.id);
}

const getComList = () =>{
  fullscreenLoading.value = true;
  listCompany(queryParams.value).then((response:any) => {
    DataList.value = response.rows;
    total.value = response.total;
    fullscreenLoading.value = false;
  });
  getTenantApi().then((res:any)=>{
    fromTenantData.value = res.data.reduce((pre, cur) => {
      pre[cur.id] = cur.companyName;
      return pre
    }, {})
  })
}
defineExpose({
  openView,
});
</script>
<style scoped>
</style>