<script setup>
import { reactive, ref,toRefs } from 'vue'
import { Search } from '@element-plus/icons-vue'
import { overseasCustomInterence } from '@/api/modules/overseasCustom.js'
import { useRouter } from 'vue-router'
import DatePicker from 'vue-datepicker-next';
import mPage from '@/components/mPage.vue'

const $router = useRouter()

const filterObj = reactive({
  sales: [],
  researchers: [],
  date:[],
  searchWord: '',
  status:[],
  sortParams: {
    SortField: '',
    SortDesc: 1,
  },
})

const statusOptions = [
  { label: '正式', val: '正式' },
  { label: '试用', val: '试用' },
  { label: '关闭', val: '关闭' },
]

//获取销售列表
const salesOptions = ref([])
async function getSellerList() {
  const res = await overseasCustomInterence.getOverseasRoadShowUsers({AdminType:'seller'})

  if (res.Ret === 200) {
    salesOptions.value = res.Data || [];
  }
}
getSellerList()

//获取研究员列表
const researchersOptions = ref([])
async function getResearchersList() {
  // 发送请求
  const res = await overseasCustomInterence.getOverseasRoadShowUsers({AdminType:'researcher'});
  if (res.Ret === 200) {
    researchersOptions.value = res.Data || [];
  }
}
getResearchersList()


const tabeLoading = ref(false)
const tableData = ref([])
const total = ref(0)
const currentIndex = ref(1)
const pageSize = ref(10)
const columns = [
  {  label: "客户名称",key: 'CompanyName',minWidth:200 },
  {  label: "状态",key: 'CompanyStatus' },
  {  label: "路演日期",key: 'StartDate',sortable:true },
  {  label: "路演形式",key: 'RoadshowType' },
  {  label: "路演平台/路演城市",key: 'RoadshowPlatform' },
  {  label: "研究员",key: 'ResearcherName' },
  {  label: "对接销售",key: 'SellerName' },
]
async function getTableData() {
  tabeLoading.value = true;
  let params = {
    ResearcherId: filterObj.researchers.join(','),
    SellerId: filterObj.sales.join(','),
    StartDate: filterObj.date[0]||'',
    EndDate: filterObj.date[1]||'',
    CompanyStatus: filterObj.status.join(','),
    CurrentIndex: currentIndex.value,
    PageSize: pageSize.value,
    Keyword: filterObj.searchWord,
    ...filterObj.sortParams
  }
  const res = await overseasCustomInterence.getOverseasRoadShowList(params)

  tabeLoading.value = false;

  if(res.Ret!==200) return

  tableData.value = res.Data.List || [];

  total.value = res.Data.Paging.Totals;
}
getTableData()

function pageChange(page) {
  currentIndex.value = page;
  getTableData()
}

function handleSortChange({prop,order}) {
  filterObj.sortParams = {
    SortField: order?prop:'',
    SortDesc: order==='ascending'?2:1
  }

  pageChange(1)
}

function toCustomDetail(data) {
  const path = data.Source===1?'/detailCustomEn':'/customDetail'
  const query = {
      ...data.Source===1?{
        companyId:data.CompanyId - 10000000
      }:{
          id:data.CompanyId
      },
      from:'overseas'
  }
  const href = $router.resolve({path,query}).href
  window.open(href,"_blank")
}

const {sales,researchers,date,searchWord,status} = toRefs(filterObj)
</script>
<template>
  <div class="overseas-custom-roadshow-box">
    <div class="top-wrapper">
      <div class="left-select">
        <el-cascader
            v-model="sales"
            :options="salesOptions"
            :show-all-levels="false"
            :props="{
                expandTrigger: 'hover',
                children: 'ChildrenList',
                emitPath: false,
                label:'RealName',
                value:'AdminId',
                multiple:true
            }"
            collapse-tags
            filterable
            clearable
            placeholder="请选择销售"
            @change="pageChange(1)"
        />
        <el-cascader
            v-model="researchers"
            :options="researchersOptions"
            :show-all-levels="false"
            :props="{
                expandTrigger: 'hover',
                children: 'ResearcherList',
                emitPath: false,
                label:'RealName',
                value:'AdminId',
                multiple:true
            }"
            collapse-tags
            filterable
            clearable
            placeholder="请选择研究员"
            @change="pageChange(1)"
        />

        <el-select 
          v-model="status" 
          placeholder="请选择客户状态"
          @change="pageChange(1)"
          multiple 
          collapse-tags 
          clearable
        >
            <el-option
                v-for="item in statusOptions"
                :key="item.val"
                :label="item.label"
                :value="item.val"
            />
        </el-select>

        <date-picker 
						v-model:value="date" 
						type="date" 
						range
						value-type="format"
						placeholder="请选择路演日期" 
						@change="pageChange(1)" 
						style="width:200px;"
        />

      </div>
      <el-input 
          :prefix-icon="Search" 
          placeholder="客户名称" 
          style="width:317px;" clearable
          v-model="searchWord"
          @input="pageChange(1)"
      />
    </div>

    <div class="cont-wrapper">
      <el-table
        ref="tableRef"
        :data="tableData"
        :loading="tabeLoading"
        border
        @sort-change="handleSortChange"
      >
        <el-table-column 
            align="center"
            v-for="item in columns" :key="item.key"
            :prop="item.key" :label="item.label"
            :min-width="item.minWidth"
            :sortable="item.sortable?'custom':false"
        >
          <template #default="{row}">
              <!-- 客户名称 -->
              <div v-if="item.key==='CompanyName'" class="editor" @click="toCustomDetail(row)">{{row[item.key]}}</div>

              <span v-else>{{row[item.key]}}</span>
          </template>
        </el-table-column>
      </el-table>

       <!-- 页数选择器 -->
      <m-page
        :page_no="currentIndex"
        :pageSize="pageSize"
        :total="total"
        style="position: absolute;right: 50px;bottom: 50px;"
        @handleCurrentChange="pageChange"
      />
    </div>
  </div>
</template>
<style scoped lang="scss">
.overseas-custom-roadshow-box {
    height: calc(100vh - 110px);
    background-color: white;
    border: 1px solid #ECECEC;
    border-radius: 2px;
    box-sizing: border-box;
    padding: 20px 30px 30px 30px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);

    .top-wrapper {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      .left-select {
        display: flex;
        gap: 5px;
      }
    }
    .cont-wrapper {
      margin-top: 20px;
    }
    .editor{
        color:#409EFF;
        cursor: pointer;
        &:hover{
            text-decoration: underline;
        }
    }
}
</style>