<script setup>
import { ref,computed } from 'vue';
import { useRoute } from 'vue-router'
import { dataMainInterface,customInterence } from '@/api/api.js';
import mPage from '@/components/mPage.vue';

const route = useRoute()

const tableColumns =[
  {
    label: '客户名称',
    key: 'CompanyName',
    minwidthsty: '180px',
  },
  {
    label: '客户类型',
    key: 'CompanyType',
    widthsty: '80px',
  },
  {
    label: '所属行业',
    key: 'IndustryName',
  },
  {
    label: '客户地址',
    key: 'City',
    widthsty: '110px',
  },
  {
    label: '所属销售',
    key: 'SellerName',
  },
  {
    label: '分配销售',
    key: 'ShareSeller',
  },
  {
    label: '客户状态',
    key: 'Status',
    // widthsty: '180px',
  },
  {
    label: '累计阅读次数',
    key: 'viewTotal',
  },
  {
    label: '累计路演次数',
    key: 'RoadShowTotal',
  },
  {
    label: '最近一次阅读时间',
    key: 'LastViewTime',
    widthsty: '200px',
  },
  {
    label: '服务期限',
    key: 'EndDate',
    minwidthsty: '180px',
  },
  {
    label: '到期天数',
    key: 'ExpireDay',
    widthsty: '110px'
  }
]

const title = route.query.title||'';
const ids = decodeURIComponent(route.query.ids)
const showMore = computed(() =>{
  const AdminName = localStorage.getItem('AdminName')
  return AdminName==='ydlou'
})
const tableColumnsComputed = computed(() =>{
  if(title.includes('正式')){
    return tableColumns
  }else{
    return tableColumns.filter(item => item.label!='分配销售')
  }
})


const total = ref(0)
const page_no = ref(1)
const pageSize = ref(10)
const sort_obj = ref({
  param: '',
  type: ''
})
const tableData = ref([])
function getTableData() {
  const { param, type } = sort_obj.value;

  dataMainInterface.newcustomList({
    PageSize: pageSize.value,
    CurrentIndex: page_no.value,
    SortParam: param,
    SortType: type,
    CompanyIds: ids
  }).then(res => {
    const { Ret,Data } = res;
    if(Ret !== 200) return

    total.value = res.Data.Paging.Totals;
    tableData.value = Data.List || [];
  })
}
getTableData()

function sortChangeHandle({ prop,order }) {
  page_no.value = 1;

  const typeMap = {
    'RoadShowTotal': 'roadShowTotal',
    'LastViewTime': 'viewTime',
    'ExpireDay': 'expireDay',
  }

  sort_obj.value = {
    type: order === 'ascending' ? 'asc' : order === 'descending' ? 'desc' : '',
    param: typeMap[prop] || prop
  }
  getTableData();
}

/* 切换页码 */
function handleCurrentChange(page) {
  page_no.value = page;
  getTableData();
}


/* 获取客户套餐详情 */
const showMoreText = ref('加载中...')
function getCustomDetail(row,column){
  showMoreText.value = '加载中...'
  if(column.label!=='客户类型') return
  if(!showMore.value) return 
  customInterence.lookauth({
    CompanyId:row.CompanyId
  }).then(res=>{
    if(res.Ret!==200) return 
    const ficcList = res.Data.List||[]
    const raiList = res.Data.ListRai||[]
    let ficcStr = formatStr(ficcList)
    let raiStr = formatStr(raiList)
    //console.log('text',ficcStr+raiStr)
    showMoreText.value = ficcStr+raiStr
  })
}

function formatStr(list){
  let showText = ''
  list.forEach(item=>{
    const listName = item.ClassifyName
    let itemNames = []
    if(item.Items&&item.Items.length){
      item.Items.forEach(i=>{
        if(i.Status&&i.Status!=='关闭'){
          itemNames.push(`${i.PermissionName}${i.PermissionTypeName?'('+i.PermissionTypeName+')':''}`)
        }
      })
    }
    if(itemNames.length){
      showText+=`${listName}：${itemNames.join('、')}<br/>`
    }
  })
  return showText
}


</script>
<template>
  <div class="region-custom-detail">
    <span class="title">{{title}}</span>
    <div class="list">
        <el-table
            :data="tableData"
            @sort-change="sortChangeHandle"
            border
            class="table-cont"
            @cell-mouse-enter="getCustomDetail"
        >
            <el-table-column
                v-for="item in tableColumnsComputed"
                :key="item.label"
                :label="item.label"
                :width="item.widthsty"
                :min-width="item.minwidthsty"
                :prop="item.key"
                align="center"
                :sortable="['viewTotal','RoadShowTotal','LastViewTime','ExpireDay'].includes(item.key) ? 'custom' : false"
            >
                <template #default="{row}">

                    <span v-if="item.key === 'CompanyName'" class="customName">
                        {{row.CompanyName}}
                    </span>

                    <span v-else-if="item.key === 'CompanyType'">
                        <template v-if="!showMore">
                          <span :style="row.IsSuspend===1?'color:#bbb':''">{{row.CompanyType}}</span> 
                          <span v-if="row.FiccPackageType"  class="ficc-package">{{row.FiccPackageType == 1 ? '大套餐': '小套餐'}}</span>
                        </template>
                        <template v-else>
                          <el-tooltip class="item" effect="dark" :visible-arrow="false"  placement="right">
                            <div>
                              <span :style="row.IsSuspend===1?'color:#bbb':''">{{row.CompanyType}}</span> 
                              <span v-if="row.FiccPackageType"  class="ficc-package">{{row.FiccPackageType == 1 ? '大套餐': '小套餐'}}</span>
                            </div>
                            <template #content>
                              <div v-html="showMoreText"></div>
                            </template>
                          </el-tooltip>
                        </template>
                    </span>

                    <span v-else-if="item.key === 'City'">
                        {{`${row.Province}/${row.City}`}}
                    </span>

                    <span v-else-if="item.key === 'Status'">
                        {{row.Status}}
                    </span>

                    <span v-else-if="item.key === 'viewTotal'">
                        {{row.AllViewTotal}}
                    </span>

                    <span v-else-if="item.key === 'LastViewTime'">
                        {{
                            row.FiccLastViewTime 
                            ? `ficc： ${row.FiccLastViewTime}` 
                            :row.RaiLastViewTime?
                            `权益： ${row.RaiLastViewTime}`:'--'
                        }}
                    </span>

                    <span v-else-if="item.key === 'EndDate'">
                        <!-- 正常的时间显示 -->
                        <template v-if="row.StartDate.indexOf('/')==-1">
                            <!-- <template v-if="act_status=='流失'">
                                创建时间：{{row.CreatedTime}}
                            </template>
                            <template v-else-if="row.Status == '永续'">
                                永久
                            </template>
                            <template v-else-if="act_status == '冻结'">
                                {{row.FreezeStartDate}}~{{row.FreezeEndDate}}
                            </template> -->
                            <template>
                                {{row.StartDate}}~{{row.EndDate}}
                            </template>
                        </template>
                        <!-- 公用客户的时间显示 -->
                        <template v-else>
                            {{row.StartDate.substr(0,10)}}~{{row.EndDate.substr(0,10)}}/{{row.StartDate.substr(11)}}~{{row.EndDate.substr(11)}}
                        </template>
                    </span>

                    <span v-else>{{ row[item.key]}}</span>
                </template>
            </el-table-column>
            <el-table-column
                :prop="title.includes('正式') ? 'formalTime' : 'createTime'"
                :label="title.includes('正式') ? '转正时间' : '创建时间'"
                sortable="custom"
                align="center" 
                min-width="120"
            >
                <template #default="scope">
                    <span>
                        <template v-if="title.includes('正式')">
                            {{scope.row.FormalTime}}
                        </template>
                        <template v-else>
                            {{scope.row.CreatedTime}}
                        </template>
                    </span> 
                </template>
            </el-table-column>
            <template #empty>
              <div style="lineHeight:44px;margin:60px 0;color:#999;">
                  <img src="~@/assets/img/cus_m/nodata.png" alt="" style="display:block;width:160px;height:128px;margin: auto;">
                  <span>暂无数据</span>
              </div>
            </template>
        </el-table>
        <div class="bottom">
            <m-page
                :total="total"
                :page_no="page_no"
                @handleCurrentChange="handleCurrentChange"
            />
        </div>
    </div>
  </div>
</template>
<style scoped lang="scss">
.region-custom-detail{
  padding:30px;
	background: #fff;
	border: 1px solid #ECECEC;
	border-radius: 4px;
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
    min-height: 70vh;
    .title{
        padding: 10px 24px;
        display: inline-block;
        background: #e8f3ff;
        color: #2d8cf0;
        font-size: 14px;
        border-radius: 4px;
        margin-bottom: 30px;
    }
    .table-cont {
		margin-top: 20px;
		margin-bottom: 20px;
	}
	.bottom {
		height: 40px;
	}
}
</style>