<script setup>
import { ref,computed, watch } from 'vue'
import { Search } from '@element-plus/icons-vue'
import { useRoute,useRouter,onBeforeRouteLeave } from 'vue-router'
import {customInterence} from '@/api/api.js'
import{customAllInterence} from '@/api/modules/crmApi.js'
import {locationOptions} from "./location"
import DatePicker from "vue-datepicker-next";
import { useViewPermissionDia,useList,useViewRoadShowDia,useLookTrialDia  } from "./hooks/customlistHook";
import TotalDayDialog from './components/TotalDayDialog.vue'
import AccumulativeFrequencyDlg from './components/accumulativeFrequencyDlg.vue'
import permissionView from './components/premissionView.vue'
import moment from 'moment'
import { ElMessage } from 'element-plus'

const $router = useRouter()
const $route = useRoute()

//导出客户
const exportUrlDl = computed(() => {
		let url = import.meta.env.VITE_APP_API_ROOT+'/custom/export';
		/* 处理品种结构 */
		let param_arr = [];
		let param_arr_red = []
		//已购权限
		if(variety.value.length) {
			param_arr = variety.value.map(item => {
				return item[1];
			})
		}
		//阅读权限
		if(variety_red.value.length){
				param_arr_red = variety_red.value.map(item => {
						return item[1]
				})
		}
		let param_token = localStorage.getItem('auth')||'';
		let param_variety = param_arr.join(',');
					let param_variety_red = param_arr_red.join(',')

		let param_saleArr = sales.value.length? sales.value.map(item=>{
				return item[item.length-1]
			}):[];
		let param_sale = param_saleArr.length ? param_saleArr.join(',') : ''
		let param_trade = trade.value?Number(trade.value):'';
		let param_package = setmealSelect.value ? Number(setmealSelect.value) : 0
		return `${url}?Status=${act_status.value}`+
              `&IsFullCompany=1`+
							`&CompanyType=${type.value}`+
							`&PackageType=${param_package}`+
							`&IndustryId=${param_trade}`+
							`&AdminId=${param_sale}`+
							`&Province=${provinceValue.value}`+
							`&City=${cityValue.value}`+
							`&ChartPermissionIds=${param_variety_red}`+
							`&ContractPermissionIds=${param_variety}`+
							`&StartDate=${start_date.value}`+
							`&EndDate=${end_date.value}`+
							`&CreateStartDate=${createdate.value.length ? createdate.value[0]:''}`+
							`&CreateEndDate=${createdate.value.length ? createdate.value[1]:''}`+
							`&KeyWord=${search_txt.value}&${param_token}`
})
//导出联系人
const exportUserDl = computed(() => {
	let url = import.meta.env.VITE_APP_API_ROOT+'/custom/user/export';
	/* 处理品种结构 */
	let param_arr = [];
	let param_arr_red = []
				//已购品种
	if(variety.value.length) {
		param_arr = variety.value.map(item => {
			return item[1];
		})
	}
	//阅读权限
	if(variety_red.value.length){
			param_arr_red = variety_red.value.map(item => {
					return item[1]
			})
	}
	let param_token = localStorage.getItem('auth')||'';
	let param_variety = param_arr.join(',');
	let param_variety_red = param_arr_red.join(',')

	let param_saleArr = sales.value.length? sales.value.map(item=>{
			return item[item.length-1]
		}):[];
	let param_sale = param_saleArr.length ? param_saleArr.join(',') : ''
	let param_trade = trade.value?Number(trade.value):'';
	let param_package = setmealSelect.value ? Number(setmealSelect.value) : 0
	return `${url}?Status=${act_status.value}`+
            `&IsFullCompany=1`+
						`&CompanyType=${type.value}`+
						`&Province=${provinceValue.value}`+
						`&City=${cityValue.value}`+
						`&PackageType=${param_package}`+
						`&IndustryId=${param_trade}`+
						`&AdminId=${param_sale}`+
						`&ChartPermissionIds=${param_variety_red}`+
						`&ContractPermissionIds=${param_variety}`+
						`&StartDate=${start_date.value}`+
						`&EndDate=${end_date.value}`+
						`&CreateStartDate=${createdate.value.length ? createdate.value[0]:''}`+
						`&CreateEndDate=${createdate.value.length ? createdate.value[1]:''}`+
						`&KeyWord=${search_txt.value}&${param_token}`
})


const typeArr = [{
    name: 'ficc'
}, {
    name: '权益'
}] //类型
const setmealArr = [{
    name: '大套餐',
    id: 1
}, {
    name: '小套餐',
    id: 2
}]
const trialTags = [ 
  {
    label: '推进',
    value: 2
  },
  {
    label: '跟踪',
    value: 3
  },
  {
    label: '预备',
    value: 4
  },
  {
    label: '未分类',
    value: 1
  },
]// 试用的标签状态
const	areaArr = [{name:'国内'},{name:'海外'}]

const { 
  suspendHandle,
  editHandle,
  Role,
  RaiSellerRole,
  RoleType,
  RoleIdentity,
  SellerAdminId,
} = useList();


const tabs =  ref([])
const act_status = ref('全部') //状态
const type = ref('') //类型
const setmealSelect = ref('') //套餐的选择
const trade = ref('')
const sales = ref('')
const variety = ref([]) //已购品种
const variety_red = ref([]) //阅读权限
const date = ref('')
const start_date = ref('') //开始日期
const end_date = ref('') //结束日期
const createdate = ref('') //创建日期
const tableData = ref([])
const isShowloadding = ref(false)
const search_txt = ref('')
const total = ref(1)
const page_no = ref(1)
const pageSize = ref(10)
const sort_type = ref('') //自定义排序方式
const sort_param = ref('') //自定义排序方式的哪一个
const valueLocation = ref([])
const provinceValue = ref('')
const cityValue = ref('')
const SortByTodo= ref(false)
const AddCompanyBtn= ref(false) //控制新增客户按钮是否显示
const act_trialTag = ref(0)//默认的标签状态
const trialTagArr = ref([])
const userTableRef = ref(null)
/* 获取表格 */
function getTableData() {
    isShowloadding.value = true;
    /* 处理品种结构 和 阅读权限 */
    let param_arr = [];
    let variety_red_arr = []
    if (variety.value.length) {
        param_arr = variety.value.map(item => {
            return item[1];
        })
    }
    if (variety_red.value.length) {
        variety_red_arr = variety_red.value.map(item => {
            return item[1];
        })
    }
    // 处理销售筛选
    let salesArr = []
    if (sales.value.length) {
        salesArr = sales.value.map(item => {
            return item[item.length - 1]
        })
    }

    let params = {
        SortParam: sort_param.value, //自定义排序字段
        SortType: sort_type.value, //排序方式
        PageSize: pageSize.value,
        CurrentIndex: page_no.value,
        Status: act_status.value,
        CompanyType: type.value,
        IndustryId: trade.value ? Number(trade.value) : '',
        AdminId: salesArr.join(','),
        ChartPermissionIds: variety_red_arr.join(','), //阅读权限
        ContractPermissionIds: param_arr.join(','), //已购权限
        StartDate: start_date.value,
        EndDate: end_date.value,
        CreateStartDate: createdate.value[0] ? createdate.value[0] : '',
        CreateEndDate: createdate.value[0] ? createdate.value[1] : '',
        KeyWord: search_txt.value,
        Province: provinceValue.value,
        City: cityValue.value,
        PackageType: setmealSelect.value ? Number(setmealSelect.value) : 0,
        SortByTodo: SortByTodo.value,
        TryStage: act_trialTag.value
    }
    customAllInterence.customList(params).then(res => {
        if (res.Ret === 200) {

            res.Data.List && res.Data.List.forEach(item => {
                item.StartDate = item.StartDate.replace(/-/g, '.');
                item.EndDate = item.EndDate.replace(/-/g, '.');
                item.FreezeStartDate = item.FreezeStartDate ? item.FreezeStartDate.replace(
                    /-/g, '.') : '';
                item.FreezeEndDate = item.FreezeEndDate ? item.FreezeEndDate.replace(/-/g,
                    '.') : '';
                item.LossTime = item.LossTime ? item.LossTime.replace(/-/g, '.') : '';
                item.ApproveStatus = item.ApproveStatus == '待审批' ? '待审批' : ''
            })
            tabs.value = res.Data.StatusCount;

            total.value = res.Data.Paging.Totals;

            trialTagArr.value = res.Data.TryStageCount ? res.Data.TryStageCount.sort((x, y) => x.TryStage - y.TryStage) : []
            if (trialTagArr.value.length) {
                const [x, y, ...res] = trialTagArr.value;
                trialTagArr.value = [x, ...res, y];
            }

            tableData.value = res.Data.List || [];
            AddCompanyBtn.value = res.Data.AddCompanyBtn
            isShowloadding.value = false;
        }
    })
}
getTableData()
 /* 页码改变 */
function handleCurrentChange(page) {
    page_no.value = page;
    getTableData();
}
/* 搜索客户 重置筛选条件 */
function searchHandle() {
    init();
    getTableData();
}
/* 重置 */
function init() {
    act_status.value = '全部';
    if (['admin','finance'].includes(Role.value)) {
        type.value = '';
    }
    trade.value = '';
    sales.value = '';
    variety.value = '';
    date.value = '';
    valueLocation.value = []
    provinceValue.value = ''
    cityValue.value = ''
    start_date.value = ''; //开始日期
    end_date.value = ''; //结束日期
    page_no.value = 1;
}
/* 选择类型时 */
function changeType() {
    trade.value = '';
    variety.value = []
    page_no.value = 1;
    getTableData()
}
/* 选择行业 */
function filterChange() {
    page_no.value = 1;
    getTableData();
}
/* 选择服务日期 */
function dateChange(e) {
    if (e[0]) {
        start_date.value = e[0];
        end_date.value = e[1];
    } else {
        start_date.value = '';
        end_date.value = '';
    }
    page_no.value = 1;
    getTableData();
}
/* 选择日期 */
function dateChange2(e) {
    // console.log(e[0]);
    if (!e[0]) {
        createdate.value = []
    }
    page_no.value = 1;
    getTableData();
}
/* 切换状态 表格重置 */
function changeStatus(item, index) {
    act_status.value = item.Status;
    act_trialTag.value = 0;
    userTableRef.value.clearSort()
    sort_type.value = '';
    sort_param.value = '';
    SortByTodo.value = false
    page_no.value = 1;
    getTableData()
    //重新获取销售信息
    getSale();
}
function handleChangeLocation() {
    const provinceArr = []
    const cityArr = []
    valueLocation.value.forEach(item => {
        // 省
        provinceArr.push(item[0])
        // 市
        cityArr.push(item[1])
    })
    //provinceArr需要去重
    provinceValue.value = [...new Set(provinceArr)].join(',')
    cityValue.value = cityArr.join(',')
    page_no.value = 1;
    getTableData();
}
function changeSort() {
    SortByTodo.value = !SortByTodo.value
    page_no.value = 1;
    //自定义排序规则互斥,把其他的排序设置成默认值
    sort_type.value = ''
    getTableData()
}
/* 到期天数排序发生变化 全局排序 */
function sortChangeHandle(item) {
    if (item.column.label === 'To-Do') {
        SortByTodo.value = !SortByTodo.value
        sort_type.value = ''
        sort_param.value = ''
    } else if (item.prop === 'Status') {
        SortByTodo.value = false
        sort_type.value = 'asc'
        sort_param.value = sort_param.value === 'tryStage' ? '' : 'tryStage'
    } else if (item.prop === 'deadline') {
        SortByTodo.value = false
        sort_type.value = 'asc'
        sort_param.value = sort_param.value === 'deadline' ? '' : 'deadline'
    } else {
        SortByTodo.value = false
        sort_type.value = item.order === 'ascending' ? 'asc' : item.order === 'descending' ? 'desc' : '';
        sort_param.value = item.column.label == '转正时间' ? 'formalTime' : item.column.label == '冻结时间' ?
            'freezeTime' : item.column.label == '流失时间' ? 'lossTime' : item.prop;
    }
    page_no.value = 1;
    getTableData();
}
	/* 切换标签状态 */
function changeTagStatus({ TryStage }) {
    act_trialTag.value = TryStage;
    userTableRef.value.clearSort()
    sort_type.value = '';
    sort_param.value = '';
    SortByTodo.value = false
    page_no.value = 1;
    getTableData()
}
	/* 改变客户的试用标签 */
function changeTrialHandle({ CompanyId },trialItem) {
  const { ProductId,TryStage } = trialItem;

  customInterence.setTrialTag({
    CompanyId,
    ProductId,
    TryStage
  }).then(res => {
    if(res.Ret !== 200) return
    ElMessage.success('设置成功');

    getTableData()
  })
}
       

const salesArr = ref([]) //销售
/* 获取销售 */
function getSale() {
    let status = 0;
    if (act_status.value == '流失') {
        status = 1;
    }
    customInterence.getSale({
        "Status": status
    }).then(res => {
        if (res.Ret === 200) {
            salesArr.value = res.Data.List;
        }
    })
}
getSale()



watch(() => type.value,
  () => {
      getIndustry();
      getVariety();
  }
)
const varietyArr = ref([])
 /* 获取品种信息 */
function getVariety() {
    customInterence.getvariety({
        CompanyType: type.value
    }).then(res => {

        if (res.Ret === 200) {
            varietyArr.value = res.Data.List;
        }
    })
}
const tradeArr = ref([]) //行业
/* 根据类型获取行业 */
function getIndustry() {
    customInterence.getindustry({
        Classify: type.value
    }).then(res => {
        if (res.Ret === 200) {
            tradeArr.value = res.Data.List || [];
        }
    })
}

/* 前往详情页 */
function goDetail(item) {
    const {
        href
    } = $router.resolve({
        path: '/customDetail',
        query: {
            id: item.CompanyId,
            IsFullCompany:1
        }
    });
    window.open(href, '_blank');
}


const { 
  isLook,
  lookTitle,
  lookAuthList,
  lookAuthListEquity,
  lookHandle,
  closeDia
} = useViewPermissionDia();//查看权限弹窗
 /* 下拉菜单操作 */
async function itemclickHandle(query) {
    if (query.type == '查看权限') {
        lookHandle(query.data)
    }
}


const { accumulativeFrequencyClick,accumulativeFrequencyDlg,accumulativeFrequencyItem,closeAccumulativeDlg } = useViewRoadShowDia();//路演详情弹窗


const { isTotalDayDialogShow,customItem,handleTotalDayClick,closeLookTrial } = useLookTrialDia();//查看累计试用天数弹窗





function initData() {
   /* 除admin账号 客户类型默认 */
  if (!['admin','finance'].includes(Role.value)) {
      type.value = RoleType.value;
  }
  variety.value = type.value == 'ficc' ? [[100, 1]] : []
}
initData()


</script>
<template>
  <!-- 全量客户列表 是customList的阉割版 -->
    <div class="customList_container" ref="cusContainer">
        <div class="customList_bot_top">
            <div>
                <a :href="exportUrlDl" download>
                    <el-button type="primary" plain style="width:100px;marginRight:10px;">导出客户</el-button>
                </a>
                <a :href="exportUserDl" download>
                    <el-button type="primary" plain style="width:110px;">导出联系人</el-button>
                </a>
            </div>
            <el-input placeholder="客户名称/社会信用码/手机号码/邮箱" v-model="search_txt" style="max-width:520px"
                @input="searchHandle" clearable>
                <template #prefix>
                  <el-icon><Search/></el-icon>
                </template>
            </el-input>
        </div>
        <div class="customList_bot">
            <div class="customList_top">
                <el-row :span="24">
                    <el-select v-model="type" placeholder="请选择客户类型"
                        style="width:200px;marginRight:10px;marginBottom:8px;" clearable
                        v-if="Role=='finance'||Role=='admin'" @change="changeType">
                        <el-option v-for="item in typeArr" :key="item" :label="item.name" :value="item.name">
                        </el-option>
                    </el-select>
                    <el-select v-model="trade" placeholder="请选择行业"
                        style="width:200px;marginRight:10px;marginBottom:8px;" clearable @change="filterChange">
                        <el-option v-for="item in tradeArr" :key="item.IndustryId" :label="item.IndustryName"
                            :value="item.IndustryId">
                        </el-option>
                    </el-select>
                    <el-cascader v-model="sales" placeholder="请选择销售"
                        style="width:200px;marginRight:10px;marginBottom:8px;" :options="salesArr"
                        :props="{
                          multiple: true,
                          label: 'RealName',
                          children: 'ChildrenList',
                          value: 'AdminId'
                        }" :show-all-levels="false" collapse-tags clearable filterable
                        @change="filterChange">
                    </el-cascader>
                    <el-select v-model="setmealSelect" placeholder="请选择套餐类型"
                        style="width:200px;marginRight:10px;marginBottom:8px;" clearable @change="filterChange">
                        <el-option v-for="item in setmealArr" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                    <el-cascader 
                      v-model="variety" 
                      placeholder="请选择已购品种"
                      style="width:200px;marginRight:10px;marginBottom:8px;" 
                      :options="varietyArr"
                      :props="{
                        multiple: true,
                        label: 'ClassifyName',
                        children: 'Items',
                        value: 'ChartPermissionId'
                      }" 
                      :show-all-levels="false" 
                      collapse-tags 
                      clearable 
                      filterable
                      @change="filterChange"
                    >
                    </el-cascader>
                    <el-cascader 
                      v-model="variety_red" 
                      placeholder="请选择阅读权限"
                      style="width:200px;marginRight:10px;marginBottom:8px;"
                      :options="varietyArr"
                      :props="{
                          multiple: true,
                          label: 'ClassifyName',
                          children: 'Items',
                          value: 'ChartPermissionId'
                        }" 
                        :show-all-levels="false" 
                        collapse-tags 
                        clearable 
                        filterable
                        @change="filterChange"
                    >
                    </el-cascader>
                    <el-cascader 
                      v-model="valueLocation" 
                      collapse-tags 
                      :props="{
                        multiple: true,
                        value: 'name',
                        children: 'city',
                        label: 'name'
                      }" 
                      clearable
                      :options="locationOptions" 
                      @change="handleChangeLocation" 
                      placeholder="请选择客户地址"
                      style="width:200px;marginRight:10px;marginBottom:8px;"
                    >
                    </el-cascader>
                    <date-picker v-model:value="date" type="date" range value-type="format" placeholder="服务日期"
                        @change="dateChange" style="width:200px;marginRight:10px;marginBottom:8px;">
                    </date-picker>
                    <date-picker v-model:value="createdate" type="date" range value-type="format" placeholder="创建时间"
                        @change="dateChange2" style="width:200px;marginRight:10px;marginBottom:8px;">
                    </date-picker>
                </el-row>
            </div>
            <ul class="tabs_cont">
                <li :class="['tab',{'act':act_status === item.Status}]" v-for="(item,index) in tabs" :key="index"
                    @click="changeStatus(item,index)">
                    {{item.Status+'('+item.Count+')'}}
                </li>
            </ul>
            <ul class="tabs_cont trial-ul" v-if="act_status === '试用'">
                <li :class="['trial-item',{'act':act_trialTag === item.TryStage}]" v-for="item in trialTagArr"
                    :key="item.TryStage" @click="changeTagStatus(item)">
                    {{item.TryStageStr+'('+item.Count+')'}}
                </li>
            </ul>
            <div class="bot_cont">
                <el-table ref="userTableRef" :data="tableData" v-loading="isShowloadding" element-loading-text="数据加载中..."
                    @sort-change="sortChangeHandle" border>
                    <el-table-column prop="CompanyName" label="客户名称" align="center" min-width="7.14%">
                        <template #default="scope" >
                          <div :class="{'isShared':scope.row.IsShared}">
                            <span v-if="scope.row.IsSuspend ===1 || scope.row.Status=='潜在'" @click="goDetail(scope.row)"
                                class="mouse-enter"
                                :class="{'color-red':act_status==='正式'&&scope.row.Status.includes('正式')&&scope.row.WeekViewActive===0}"
                                :style="scope.row.Status=='潜在'?'':'color:#bbb;cursor:pointer'">
                                {{scope.row.CompanyName}}
                            </span>
                            <span v-else style="color:#409EFF;cursor:pointer;" @click="goDetail(scope.row)"
                                class="customName"
                                :class="{'isShared':scope.row.IsShared,'color-red':act_status==='正式'&&scope.row.Status.includes('正式')&&scope.row.WeekViewActive===0}">{{scope.row.CompanyName}}</span>
                            <img width="15" src="../../../assets/img/icons/remark.png" alt=""
                                v-if="scope.row.RenewalReason||(scope.row.Status==='冻结'&&scope.row.FreezeReason)">
                          </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="DL" prop="deadline" align="center" min-width="5%" sortable="custom">
                        <template #header>
                            <div class="todolabel" :class="{sort:sort_param==='deadline'}"
                                style="display:inline-block;">
                                <span>DL</span>
                                <el-tooltip effect="dark" placement="top-start" content="未完成To Do任务的截止日期-当前日期">
                                    <i class="el-icon-info" />
                                </el-tooltip>
                            </div>
                        </template>
                        <template #default="{row}">
                            <span>{{row.Deadline||'--'}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="CompanyType" label="类型" align="center" min-width="4.14%">
                        <template #default="{row}">
                            <template v-if="row.CompanyType.indexOf('/')!==-1">
                                <span
                                    :style="row.IsSuspend===1?'color:#bbb':''">{{row.CompanyType.split('/')[0]}}</span><br />
                                <span v-if="row.FiccPackageType"
                                    class="ficc-package">{{row.FiccPackageType == 1 ? '大套餐': '小套餐'}}</span>
                                <br v-if="row.FiccPackageType" />
                                <span
                                    :style="row.IsSuspend===1?'color:#bbb':''">{{row.CompanyType.split('/')[1]}}</span>
                            </template>
                            <template v-else>
                                <span :style="row.IsSuspend===1?'color:#bbb':''">{{row.CompanyType}}</span>
                                <span v-if="row.FiccPackageType&&row.CompanyType.includes('ficc')"
                                    class="ficc-package">{{row.FiccPackageType == 1 ? '大套餐': '小套餐'}}</span>
                            </template>
                        </template>
                    </el-table-column>
                    <el-table-column prop="IndustryName" label="所属行业" min-width="6.14%" align="center">
                        <template #default="scope">
                            <div :style="scope.row.IsSuspend===1?'color:#bbb':''">
                                <p :style="scope.row.IsSuspend===1?'color:#bbb':''"
                                    v-for="item in scope.row.IndustryName.split('/')" :key="item">{{item}}</p>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="City" label="客户地址" min-width="6.14%" align="center">
                        <template #default="scope">
                            <span v-if="scope.row.Province && scope.row.City"
                                :style="scope.row.IsSuspend===1?'color:#bbb':''">{{scope.row.Province}}<br />{{scope.row.City}}</span>
                            <span v-else
                                :style="scope.row.IsSuspend===1?'color:#bbb':''">{{scope.row.RegionType}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="SellerName" label="销售" min-width="6.14%" align="center">
                        <template #default="scope">
                            <p :style="scope.row.IsSuspend===1?'color:#bbb':''"
                                v-for="item in scope.row.SellerName.split('/')" :key="item">{{item}}</p>
                        </template>
                    </el-table-column>
                    <el-table-column prop="Status" label="状态" min-width="7.14%" align="center" :sortable="act_status==='试用'&&act_trialTag===0?'custom':false" style="background:red">
                        <template #header>
                            <div class="todolabel" :class="{sort:sort_param==='tryStage'}"
                                style="display:inline-block;">
                                <span>状态</span>
                            </div>
                        </template>
                        <template #default="scope">
                            <p :style="scope.row.IsSuspend===1?'color:#bbb;margin:3px 0':'margin:3px 0'"
                                v-for="(item,index) in scope.row.Status.split('/')" :key="item">
                                {{ item }}
                                <template v-if="item === '试用' && scope.row.TryStageSlice">
                                    <el-select v-model="scope.row.TryStageSlice[index].TryStage"
                                        v-if="scope.row.Status === '试用/试用'"
                                        :disabled="!scope.row.TryStageSlice[index].HasPermission" size="small"
                                        style="width: 50px" placeholder=""
                                        @change="changeTrialHandle(scope.row,scope.row.TryStageSlice[index])">
                                        <el-option v-for="item in trialTags" :key="item.value" :label="item.label"
                                            :value="item.value">
                                        </el-option>
                                    </el-select>
                                    <el-select v-model="scope.row.TryStageSlice[0].TryStage"
                                        :disabled="!scope.row.TryStageSlice[0].HasPermission" v-else size="small"
                                        style="width: 50px" placeholder=""
                                        @change="changeTrialHandle(scope.row,scope.row.TryStageSlice[0])">
                                        <el-option v-for="item in trialTags" :key="item.value" :label="item.label"
                                            :value="item.value">
                                        </el-option>
                                    </el-select>
                                </template>
                            </p>
                        </template>
                    </el-table-column>
                    <el-table-column label="累计试用天数" align="center" min-width="5.14%" prop="tryOutDay" sortable="custom">
                        <template #default="{row}">
                            <el-tooltip :disabled="row.IsSuspend===1||(row.FiccTryOutDay+row.RaiTryOutDay===0)">
                              <template #content>
                                <div>
                                    <p v-if="row.FiccTryOutDay">FICC累计试用天数：{{row.FiccTryOutDay}}</p>
                                    <p v-if="row.RaiTryOutDay">权益累计试用天数：{{row.RaiTryOutDay}}</p>
                                </div>
                              </template>
                                <span :style="row.IsSuspend===1?'color:#bbb':'color:#409EFF;cursor:pointer;'"
                                    @click="handleTotalDayClick(row)">
                                    {{row.FiccTryOutDay+row.RaiTryOutDay}}
                                </span>
                            </el-tooltip>
                        </template>
                    </el-table-column>
                    <el-table-column label="阅读" align="center" min-width="5.14%" prop="viewTotal" sortable="custom">
                        <template #default="{row}">
                            <el-tooltip :disabled="row.IsSuspend===1 || (row.FiccView+row.RaiView)===0">
                              <template #content>
                                <div>
                                    <p v-if="row.FiccView">FICC报告阅读次数：{{row.FiccView}}</p>
                                    <p v-if="row.RaiView">权益报告阅读次数：{{row.RaiView}}</p>
                                </div>
                              </template>
                                <span :style="row.IsSuspend===1?'color:#bbb':'color:#409EFF;cursor:pointer;'">
                                    {{row.AllViewTotal}}
                                </span>
                            </el-tooltip>
                        </template>
                    </el-table-column>
                    <el-table-column label="路演" align="center" min-width="5.14%" prop="roadShowTotal" sortable="custom">
                        <template #default="scope">
                            <span :style="scope.row.IsSuspend===1?'color:#bbb':''"
                                @click="accumulativeFrequencyClick(scope)" class="editsty"
                                v-if="scope.row.RoadShowTotal > 0">{{scope.row.RoadShowTotal}}</span>
                            <span :style="scope.row.IsSuspend===1?'color:#bbb':''"
                                v-else>{{scope.row.RoadShowTotal}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="最近阅读" min-width="8.14%" align="center" prop="viewTime" sortable="custom">
                        <template #default="scope">
                            <p v-if="scope.row.FiccLastViewTime" :style="scope.row.IsSuspend===1?'color:#bbb':''">ficc：
                                {{moment(scope.row.FiccLastViewTime).format('YYYY.MM.DD')}}</p>
                            <p v-else-if="scope.row.RaiLastViewTime" :style="scope.row.IsSuspend===1?'color:#bbb':''">
                                权益： {{moment(scope.row.RaiLastViewTime).format('YYYY.MM.DD')}}</p>
                            <p v-else :style="scope.row.IsSuspend===1?'color:#bbb':''">--</p>
                        </template>
                    </el-table-column>
                    <el-table-column prop="EndDate" :label="act_status=='冻结'?'冻结期限':'服务期限'" align="center"
                        min-width="6.14%">
                        <template #default="scope">
                            <span :style="scope.row.IsSuspend===1?'color:#bbb':''">
                                <!-- 正常的时间显示 -->
                                <template v-if="scope.row.StartDate.indexOf('/')==-1">
                                    <template v-if="act_status=='流失'">
                                        创建时间：{{scope.row.CreatedTime}}
                                    </template>
                                    <template v-else-if="scope.row.Status == '永续'">
                                        永久
                                    </template>
                                    <template v-else-if="act_status == '冻结'">
                                        {{scope.row.FreezeStartDate}}~{{scope.row.FreezeEndDate}}
                                    </template>
                                    <template v-else>
                                        {{scope.row.StartDate}}~{{scope.row.EndDate}}
                                    </template>
                                </template>
                                <!-- 公用客户的时间显示 -->
                                <template v-else>
                                    {{scope.row.StartDate.substr(0,10)}}~{{scope.row.EndDate.substr(0,10)}}/{{scope.row.StartDate.substr(11)}}~{{scope.row.EndDate.substr(11)}}
                                </template>
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="expireDay" :label="act_status=='冻结'?'解冻':'到期'" align="center"
                        min-width="5.14%" sortable="custom">
                        <template #default="scope">
                            <span :style="scope.row.IsSuspend===1?'color:#bbb':''">
                                <template v-if="act_status=='冻结'">
                                    {{scope.row.FreezeExpireDays||'--'}}
                                </template>
                                <template v-else>
                                    {{scope.row.ExpireDay||'--'}}
                                </template>
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="createTime"
                        :label="act_status=='冻结'?'冻结时间':act_status=='正式'?'转正时间':act_status=='流失'?'流失时间':'创建时间'"
                        sortable="custom" align="center" min-width="6.14%">
                        <template #default="scope">
                            <span :style="scope.row.IsSuspend===1?'color:#bbb':''">
                                <template v-if="act_status=='冻结'">
                                    {{moment(scope.row.FreezeTime).format('YYYY.MM.DD')}}
                                </template>
                                <template v-else-if="act_status=='正式'">
                                    {{moment(scope.row.FormalTime).format('YYYY.MM.DD')}}
                                </template>
                                <template v-else-if="act_status=='流失'">

                                    {{scope.row.LossTime
                                        ?(`${scope.row.LossTime.split('/')[0].substr(0,10)}`)
                                        :''}}
                                    {{scope.row.LossTime&&scope.row.IsShared&&scope.row.LossTime.split('/')[1]
                                        ? `/${scope.row.LossTime.split('/')[1].substr(0,10)}`
                                        :''}}
                                </template>
                                <template v-else>
                                    {{moment(scope.row.CreatedTime).format('YYYY.MM.DD')}}
                                </template>
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" align="center" min-width="7.14%">
                        <template #default="scope" >
                            <div class="tool" style="display: flex;flex-direction: column;" v-if="!scope.row.ApproveStatus">
                                <span class="editsty" style="white-space: nowrap;"
                                    @click="itemclickHandle({type:'查看权限',data:scope.row})">
                                    查看权限
                                </span>
                            </div>
                        </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="toolbar fixedbar">
                    <el-pagination 
                      layout="prev,pager,next" 
                      background 
                      :current-page="page_no"
                      @current-change="handleCurrentChange" 
                      :page-size="pageSize"
                      :total="total" 
                      style="float:right;"
                    >
                    </el-pagination>
                </div>
            </div>
        </div>
        <!-- 查看权限弹窗 -->
        <permissionView 
          :isLook="isLook" 
          :lookTitle="lookTitle" 
          :lookAuthList="lookAuthList"
          :lookAuthListEquity="lookAuthListEquity" 
          @closeDia="closeDia"
        ></permissionView>

        <!-- 累计试用天数弹窗 -->
        <total-day-dialog 
          :isTotalDayDialogShow="isTotalDayDialogShow" 
          :customInfo="customItem" 
          @close="closeLookTrial"
        />
        <!-- 路演业阅读的弹框 -->
        <accumulative-frequency-dlg
          :accumulativeFrequencyDlg="accumulativeFrequencyDlg"
          :accumulativeFrequencyItem="accumulativeFrequencyItem"
          @close="closeAccumulativeDlg"
        />
    </div>
</template>
<style scoped lang="scss">
  .ficc-package {
        display: inline-block;
        font-size: 12px;
        padding: 0 5px;
        border-radius: 5px;
        color: #3994fb;
        background-color: #dcecfc;
  }

  .color-red {
      color: red !important;
  }

  .isShared::after {
      content: '共享';
      font-size: 12px;
      // padding: 0px 0px 0px 2px;
      width: 30px;
      color: #3994fb;
      background-color: #dcecfc;
      position: absolute;
      left: 0;
      bottom: 0;
      border-top-right-radius: 5px;
  }

  .customList_container {
      .mx-datepicker {
          width: 200px !important;
      }

      :deep(.el-checkbox__input.is-disabled.is-checked .el-checkbox__inner) {
          background-color: #409EFF !important;
          border-color: #409EFF;
      }

      :deep(.el-checkbox__input.is-disabled.is-indeterminate .el-checkbox__inner) {
          background-color: #409EFF !important;
          border-color: #409EFF;
      }

      .customList_bot_top {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 28px;
          padding: 20px 30px;
          background: #fff;
          border: 1px solid #ECECEC;
          border-radius: 4px;
          box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
      }

      .customList_bot {
          min-height: calc(100vh - 324px);
          padding: 20px 30px 80px;
          background: #fff;
          position: relative;
          border: 1px solid #ECECEC;
          border-radius: 4px;
          box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);

          .customList_top {
              padding: 20px 0 30px;
              background: #fff;

              .el-cascader__search-input {
                  min-width: 30px;
              }
          }

          .tabs_cont {
              display: flex;
              align-items: center;
              color: #333;
              margin-bottom: 30px;

              &.trial-ul {
                  padding: 0 30px;
              }

              .tab {
                  width: 129px;
                  height: 22px;
                  line-height: 22px;
                  text-align: center;
                  font-size: 14px;
                  border-right: 1px solid #707070;
                  cursor: pointer;
                  transition-delay: 0.05s;

                  &:hover {
                      color: #409EFF;
                  }

                  &.act {
                      // padding: 9px 24px;
                      height: 40px;
                      line-height: 40px;
                      background: #409EFF;
                      border-radius: 4px;
                      color: #fff;
                      border-color: #409EFF;
                      transform: scale(1.014);
                  }

                  &:last-child {
                      border: none;
                  }
              }

              .trial-item {
                  cursor: pointer;
                  margin-right: 30px;

                  &:hover {
                      color: #409EFF;
                  }

                  &.act {
                      color: #409EFF;
                      position: relative;

                      &::after {
                          content: "";
                          width: 100%;
                          height: 2px;
                          position: absolute;
                          bottom: -10px;
                          left: 50%;
                          transform: translateX(-50%);
                          background: #409EFF;
                      }
                  }
              }
          }

          .try_style {
              color: #BBBBBB;
          }

          .bot_cont {

              //padding-bottom: 20px;
              .fixedbar {
                  position: fixed;
                  right: 45px;
                  bottom: 20px;
                  background-color: transparent;
                  z-index: 2;
              }
          }
      }

      .mouse-enter {
          &:hover {
              text-decoration: underline;
          }
      }
  }

  :deep(.el-input--small) {
      .el-input__inner {
          height: 24px;
          line-height: 24px;
          color: #409EFF;
          background: #ECF5FF;
          border-color: #409EFF;
          text-align: center;
      }

      .el-input__suffix {
          right: -22px;
      }

      &.is-disabled {
          .el-input__inner {
              border-color: #E4E7ED;
          }

          .el-input__suffix {
              display: none;
          }
      }
  }
</style>