<script setup>
import { computed, reactive, ref, toRefs } from "vue";
import { useRouter } from 'vue-router';
import { customInterence } from "@/api/api.js";
import { ElMessage } from "element-plus";
import { Search } from '@element-plus/icons-vue';
import moment from 'moment';
import { useList,useViewPermissionDia,useViewRoadShowDia,useViewRemarkDia,useLookTrialDia,useCommunicaRecordDia } from "./hooks/customlistHook";
import AccumulativeFrequencyDlg from './components/accumulativeFrequencyDlg.vue'
import permissionView from './components/premissionView.vue'
import TotalDayDialog from './components/TotalDayDialog.vue'
import ShareListDialog from './components/shareListDialog.vue';
import CustomRemarkDialog from './components/customRemarkDialog.vue';
import ContractInfo from './components/ContractInfo.vue';
import CompleteInfo from './components/CompleteInfo.vue';
import Cauthlist from './components/CauthList.vue';

const router = useRouter()

const { btnCommandList, btnName, goDetail,defaultSalesProps,statusList } = useList(); //列表操作按钮

const { isLook,lookTitle,lookAuthList,lookAuthListEquity,lookHandle,closeDia } = useViewPermissionDia();//查看权限弹窗

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

const { customInfo,isRemarkLook,handleShowRemark,closeRemarkDia } = useViewRemarkDia();//查看备注弹窗

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

const { shareCustomInfo,isShareRecodeDialogShow,allowEdit,
handleShowShareRecode } = useCommunicaRecordDia();//服务记录弹窗

const adminId = localStorage.getItem('AdminId')
const isPWang = computed(() => {
  return adminId == 66;
});
const isYDLou = computed(() => {
  // 不同环境下 楼颖丹账号的adminId 不一样
  if (process.env.NODE_ENV == "development" || process.env.NODE_ENV == "test") {
    return adminId == 476;
  } else if (process.env.NODE_ENV == "production") {
    return adminId == 15;
  }
});
const Role = computed(() => {
  let role = localStorage.getItem("Role") || "";
  if (role == "admin" || isPWang.value || isYDLou.value) {
    // 只有王沛、楼颖丹和所有admin账号才有分配销售的权利
    return "thisAdmin";
  } else {
    return "thisSeller";
  }
});
const roleType = computed(() => {
  return localStorage.getItem("Role") || "";
});

/* 获取表格 */
const isShowloadding = ref();
const filterState = reactive({
  sort_type: "", //自定义排序方式
  sort_param: "", //自定义排序方式的哪一个
  sales: [],
  originalSales: [],
  page_no: 1,
  pageSize: 10,
  status: "",
  search_txt: "",
});
const total = ref(0);
const tableData = ref([]);
const IsShareGroup = ref(false); //是否为咨询组销售
function getTableData() {
  isShowloadding.value = true;
  // 处理销售筛选
  let salesArr = [];
  if (filterState.originalSales.length) {
    salesArr = filterState.originalSales.map((item) => {
      return item[item.length - 1];
    });
  }

  let params = {
    SortParam: filterState.sort_param, //自定义排序字段
    SortType: filterState.sort_type, //排序方式
    PageSize: filterState.pageSize,
    CurrentIndex: filterState.page_no,
    Keyword: filterState.search_txt,
    ListParam: filterState.status,
    SellerId: filterState.sales.join(","),
    OriginalSellerId: salesArr.join(","),
  };
  customInterence.getShareCustomList(params).then((res) => {
    if (res.Ret === 200) {
      total.value = res.Data.Paging.Totals || 0;
      tableData.value = res.Data.List || [];
      isShowloadding.value = false;
      IsShareGroup.value = res.Data.IsShareGroup || false;
      filterState.status = res.Data.Status;
    }
  });
}
getTableData()

/* 页码改变 */
function handleCurrentChange(page) {
  filterState.page_no = page;
  getTableData();
}

/* 到期天数排序发生变化 全局排序 */
function sortChangeHandle(item) {
  filterState.sort_type =
    item.order === "ascending"
      ? "asc"
      : item.order === "descending"
      ? "desc"
      : "";
  filterState.sort_param = item.prop;
  getTableData();
}

/* 获取可分配销售 */
const salesArr = ref([]);
function getSale() {
  customInterence.getShareSaleList().then((res) => {
    if (res.Ret === 200) {
      salesArr.value = res.Data || [];
      //无子级的组无法选择
      const filterNodes = (arr) => {
        arr.length &&
          arr.forEach((item) => {
            item.ChildrenList && filterNodes(item.ChildrenList);

            if (!Number(item.AdminId) && !item.ChildrenList) {
              item.disabled = true;
            }
          });
      };
      filterNodes(salesArr.value);
      console.log("salesArr", salesArr.value);
    }
  });
}
getSale()

/* 获取销售 */
const originalSalesArr = ref([]);
function getoriginalSale() {
  customInterence.getShareSale().then((res) => {
    if (res.Ret === 200) {
      originalSalesArr.value = res.Data.List || [];
    }
  });
}
getoriginalSale()


function getToolBtnList(data) {
  let toolList = [];
  const { BtnItem } = data;
  for (const i in btnCommandList) {
    if (BtnItem[i]) {
      toolList.push({ type: btnCommandList[i], code: i + "" });
    }
  }
  return toolList;
}

/* 操作-按钮 */
async function itemclickHandle(query) {
  if (query.type == "分配销售" || query.type == "修改销售") {
    assignedSellerFun(query.data);
  } else if (query.type == "查看权限") {
    lookHandle(query.data);
  } else if (query.type == "沟通记录") {
    handleShowShareRecode(query.data);
  } else if (query.type == "备注") {
    handleShowRemark(query.data);
  } else if (["续约申请", "补充协议"].includes(query.type)) {
    handleOpenContractChoose(query.type, query.data);
  } else if (query.type == "增开试用") {
    addTrialHandle(query.data);
  } else if (query.type == "设置共享" || query.type == "取消共享") {
    shareSetting(query.data);
  }
}

/* 分配销售 */
const assignedSellerShow = ref(false); //分配销售弹窗
const assignedSellerTitle = ref("分配销售");
const assignform = reactive({
  CompanyId: "",
  CompanyName: "",
  SellsId: "", //选择的销售
});
const assignformRef = ref(null);
function assignedSellerFun(row) {
  assignform.CompanyName = row.CompanyName;
  assignform.CompanyId = row.CompanyId;
  assignform.SellsId = row.ShareSellerId == 0 ? "" : row.ShareSellerId + "";
  //根据当前角色 获取salesArr
  //若是ficc角色 取咨询组销售(一级)
  //若是rai角色 去权益销售组(多级)
  assignedSellerShow.value = true;
}
function saveAssign() {
  assignformRef.validate((valid) => {
    if (valid) {
      if (!Number(assignform.SellsId)) {
        ElMessage.warning("请选择销售而不是分组!");
        return;
      }
      let param = {
        CompanyId: assignform.CompanyId,
        SellsId: assignform.SellsId,
      };
      customInterence.assignShareSeller(param).then((res) => {
        if (res.Ret == 200) {
          ElMessage.success(assignedSellerTitle.value + "成功");
          getTableData();
          assignedSellerShow.value = false;
        }
      });
    }
  });
}
/* 取消分配销售 */
function cancelAssign() {
  assignform.CompanyName = "";
  assignform.CompanyId = "";
  assignform.SellsId = "";

  assignformRef.value.resetFields();
  assignedSellerShow.value = false;
}

// 设置/取消 共享
function shareSetting(row) {
  customInterence
    .setCustomShare({
      CompanyId: row.CompanyId,
      IsShare: row.IsShare == 0 ? 1 : 0,
    })
    .then((res) => {
      if (res.Ret == 200) {
        ElMessage.success(row.IsShare == 0 ? "设置共享成功" : "取消共享成功");
        getTableData();
      }
    });
}

/* 增开试用 */
const isAddTrial = ref(false)
const authList = ref([])
const addTryId = ref(0)
//增加试用完成
function addTryOver(){
	isAddTrial.value = false;
	getTableData();
}
//增开试用
function addTrialHandle(item) {
	authList.value = [];
	customInterence.lookauth({
		CompanyId:item.CompanyId,
		LookType:1
	}).then(res => {
		if(res.Ret === 200) {
			let auth = [];
			// res.Data.List 有值为 ficc
			// res.Data.ListRai 有值为 权益
			res.Data.List ? res.Data.List.forEach(item=> {
				let obj = {
					checkAll:item.CheckList&&item.CheckList.length===item.Items.length?true:false,
					isIndeterminate:item.CheckList&&item.CheckList.length>0 && item.CheckList.length<item.Items.length,
					defaultAuth:item.CheckList,
					customType:'ficc',
					...item,
				}
				auth.push(obj)
			}):
			// 权益 RaiMerge 0不管 1合并 2拆分 所传入的数据结构不一样
			/**权益权限ID
			 * 科技-主观(20)-客观(37)
			 * 消费-主观(21)-客观(38)
			 * 医药-主观(22)-客观(39)
			 * 智造-主观(19)-客观(36)
			 * 策略(23)
			 * 专家(29)
			 * 固收(53)
			 * 调研(54)
			 * 路演服务(30)
			 * 研选订阅(31)
			 * 研选扣点包(52)
			 */
			res.Data.ListRai[0].RaiMerge==1?res.Data.ListRai.forEach(item=> { // 合并
				let checkedLen = item.Items.filter(it => item.CheckList && item.CheckList.includes(it.ChartPermissionId)).length
				let obj = {
					checkAll:checkedLen === item.Items.length,
					isIndeterminate:checkedLen > 0 && checkedLen < item.Items.length,
					defaultAuth:item.CheckList,
					...item,
				}
				auth.push(obj)
			}): res.Data.ListRai.forEach(item=> { // 拆分
				let obj = {
					defaultAuth:item.CheckList,
					customType:'权益',
					...item,
				}	
				// 组合所需的数据格式
				let subjectivityIds=item.Items.filter(it => it.PermissionType==1).map(it => it.ChartPermissionId)//主观的ids
				let subjectivityLength=subjectivityIds.length//有几个主观的id
				let subjectivityCheckedLen = item.CheckList.filter(id => subjectivityIds.includes(id)).length//选中的有几个主观的id
				let objectivityIds=item.Items.filter(it => it.PermissionType==2).map(it => it.ChartPermissionId)//客观的ids
				let objectivityCheckedLen = item.CheckList.filter(id => objectivityIds.includes(id)).length//有几个客观的id
				let objectivityLength=objectivityIds.length//选中的有几个客观的id
				let arr = [{PermissionTypeName:''},
									{PermissionTypeName:{
										value:'主观',
										isIndeterminate:subjectivityCheckedLen>0 && subjectivityCheckedLen<subjectivityLength,
										isCheckAll:subjectivityCheckedLen == subjectivityLength,
										isDisabled:subjectivityCheckedLen == subjectivityLength,
										ids:subjectivityIds
									}},
									{PermissionTypeName:{
										value:'客观',
										isIndeterminate:objectivityCheckedLen > 0 && objectivityCheckedLen < objectivityLength,
										isCheckAll:objectivityCheckedLen == objectivityLength,
										isDisabled:objectivityCheckedLen == objectivityLength,
										ids:objectivityIds
									}}]
				item.Items.map(cp =>{
					if(cp.PermissionType==0){
						// 没有主客观的权限
						arr[0][cp.PermissionName]={
							value:cp.PermissionName,
							width:cp.PermissionName=='研选扣点包'?'100px':'',
							merge:true
						}
						arr[1][cp.PermissionName]={
							value:cp.ChartPermissionId,
							isDisabled:item.CheckList.includes(cp.ChartPermissionId),
							merge:true
						}
						arr[2][cp.PermissionName]={
							value:cp.ChartPermissionId,
							isDisabled:item.CheckList.includes(cp.ChartPermissionId),
							merge:true
						}
					}else if(cp.PermissionType==1){
						// 找出对应的客观Id
						let objectivity = item.Items.find(it => it.PermissionName == cp.PermissionName && it.PermissionType==2)
						arr[0][cp.PermissionName]={
							value:cp.PermissionName,
							isIndeterminate:item.CheckList.filter(id => [cp.ChartPermissionId,objectivity?objectivity.ChartPermissionId:0].includes(id)).length ==1,
							isCheckAll:item.CheckList.filter(id => [cp.ChartPermissionId,objectivity?objectivity.ChartPermissionId:0].includes(id)).length == 2,
							isDisabled:item.CheckList.filter(id => [cp.ChartPermissionId,objectivity?objectivity.ChartPermissionId:0].includes(id)).length ==2,
							bothIds:[cp.ChartPermissionId,objectivity?objectivity.ChartPermissionId:0]
						}
						arr[1][cp.PermissionName]={
							value:cp.ChartPermissionId,
							isDisabled:item.CheckList.includes(cp.ChartPermissionId)
						}
					}else{
						// 分主客观的客观
						arr[2][cp.PermissionName]={
							value:cp.ChartPermissionId,
							isDisabled:item.CheckList.includes(cp.ChartPermissionId)
						}
					}
				})
				obj.dataList=arr
				auth.push(obj)
			})
			authList.value = auth;
		}
	})
	addTryId.value = item.CompanyId;
	isAddTrial.value = true;
}


//关闭合同信息弹窗
const contractDialog = ref({
	show:false,
	type:'',//类型 续约申请、补充协议
	cusdata:null,//客户信息（列表用户数据）
})//续约申请、补充协议 合同信息弹窗
const contractModel = ref({
	show:false,
	data:null,//客户信息（列表用户数据）
	type:'',//类型 续约申请、补充协议
})//续约申请、补充协议 选择合同类型弹窗 
const completeForm = ref({})
function contractInfoDialogClose(e){
	contractDialog.value={
		show:false,
		type:'',
		cusdata:null,
	}
	if(e==='updateList'){
		getTableData();
	}
}
//验证客户信息完整性
async function getCustomerDetail(id){
	let res=await customInterence.customDetail({
		CompanyId:id
	})
	if(res.Ret!=200) return

	let RoleType=localStorage.getItem('RoleType')
	let IndustryId='',Source=';'
	if(RoleType=='ficc'){
		IndustryId=res.Data.FiccItem.IndustryId
		Source=res.Data.FiccItem.Source
	}else if(RoleType=='权益'){
		IndustryId=res.Data.RaiItem.IndustryId
		Source=res.Data.RaiItem.Source
	}
	if((res.Data.Item.RegionType!='海外'&&!res.Data.Item.Province&&!res.Data.Item.City)||!res.Data.Item.CreditCode||!IndustryId||!Source){
		completeForm.value={
			nameDisable:res.Data.Item.CompanyName!='',
			CityDisable:res.Data.Item.City!='',
			CreditCodeDisable:res.Data.Item.CreditCode!='',
			IndustryIdDisable:IndustryId!=' ',
			SourceDisable:Source!='',		
			CompanyId:id,
			name:res.Data.Item.CompanyName,
			Province:res.Data.Item.Province,
			RegionType:res.Data.Item.RegionType,
			City:res.Data.Item.City,
			CreditCode:res.Data.Item.CreditCode,
			IndustryId:IndustryId?IndustryId:'',
			Source:Source,
			flag:false,//是否为跨部门
			show:true
		}
	}else{
		completeForm.value.show=false
	}
	return new Promise((resolve,reject)=>{
		resolve(completeForm.value.show)
	})
}
//关闭补全信息弹窗
function cancelCompleteInfo(refresh){
	// 刷新列表
	if(refresh){
		getTableData()
	}
	completeForm.value={
		show:false
	}
}
//打开合同选择弹窗
async function handleOpenContractChoose(type,data){
	
	let flag=await getCustomerDetail(data.CompanyId)
	if(flag) return
	contractModel.value = {
		type,data,show:true
	}
}
//选择标准/非标合同
function handleContractModel(model){
	if(model==='标准'){
		contractDialog.value.type = contractModel.value.type
		contractDialog.value.cusdata = contractModel.value.data
		contractDialog.value.show = true
	}else{
		sessionStorage.setItem('companyInfo',JSON.stringify(contractModel.value.data))
		const routeMap = {
			'续约申请':'/updateCustom',
			'补充协议':'/addAgreement'
		}
		const { href } = router.resolve({path:routeMap[contractModel.value.type],})||{href:''}
		href&&window.open(href, '_blank');
	}
	contractModel.value={
		type:'',data:null,show:false
	}
}


const {
  sales,
  originalSales,
  page_no,
  pageSize,
  status,
  search_txt,
} = toRefs(filterState)

</script>
<!-- 页面在客户列表上进行的二次修改，若后续有和客户列表相似的功能，请查看客户列表页面 -->
<template>
  <div
    class="customList_container"
    id="customList_container"
    ref="cusContainer"
  >
    <div class="customList_bot">
      <div class="customList_bot_search">
        <div style="margin-bottom: 8px" v-if="!IsShareGroup">
          <el-select
            v-model="status"
            placeholder="请选择状态"
            @change="getTableData"
            style="width: 214px; margin-right: 20px"
          >
            <el-option
              :label="item.label"
              :value="item.value"
              v-for="(item, index) in statusList"
              :key="index"
            ></el-option>
          </el-select>
          <el-cascader
            v-model="originalSales"
            placeholder="请选择原销售"
            style="width: 240px; margin-right: 10px;"
            :options="originalSalesArr"
            :props="defaultSalesProps"
            :show-all-levels="false"
            collapse-tags
            clearable
            filterable
            @change="getTableData"
            v-if="roleType !== 'ficc_seller'"
          />
          <!-- <el-select v-model="sales" placeholder="请选择分配销售" style="width: 214px; margin-right: 20px;" 
          clearable filterable multiple collapse-tags @change="getTableData">
            <el-option :label="item.RealName" :value="item.AdminId" v-for="item in salesArr" :key="item.AdminId" ></el-option>
          </el-select> -->
          <el-cascader
            v-model="sales"
            :options="salesArr"
            :show-all-levels="false"
            placeholder="请选择分配销售"
            :props="{
              multiple: true,
              emitPath: false,
              value: 'AdminId',
              label: 'RealName',
              children: 'ChildrenList',
            }"
            @change="getTableData"
          >
          </el-cascader>
        </div>
        <div v-else>
          <el-button type="primary" @click="$router.push('/customCityList')"
            >查看同城客户</el-button
          >
          <el-cascader
            v-model="originalSales"
            placeholder="请选择原销售"
            style="width: 200px; margin-right: 10px;"
            :options="originalSalesArr"
            :props="defaultSalesProps"
            :show-all-levels="false"
            collapse-tags
            clearable
            filterable
            @change="getTableData"
          />
        </div>
        <el-input
          placeholder="客户名称/社会信用码/手机号码/邮箱"
          v-model="search_txt"
          style="max-width: 531px; margin-bottom: 8px"
          @input="handleCurrentChange(1)"
          clearable
        >
					<template #prefix>
						<el-icon><Search /></el-icon>
					</template>
        </el-input>
      </div>
      <div class="bot_cont">
        <el-table
          ref="userTable"
          :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">
              <span
                v-if="scope.row.IsSuspend === 1 || scope.row.Status == '潜在'"
                @click="goDetail(scope.row)"
                class="mouse-enter"
                :class="{
                  'color-red':
                    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':
                    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)
                "
              />
            </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="ShareSeller"
            label="分配销售"
            min-width="6.14%"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="Status"
            label="状态"
            min-width="7.14%"
            align="center"
          >
            <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="mini"
                    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="mini"
                    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="'服务期限'"
            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">
                  {{ scope.row.StartDate }}~{{ scope.row.EndDate }}
                </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="'到期'"
            align="center"
            min-width="5.14%"
            sortable="custom"
          >
            <template #default="scope">
              <span :style="scope.row.IsSuspend === 1 ? 'color:#bbb' : ''">
                {{ scope.row.ExpireDay || "--" }}
              </span>
            </template>
          </el-table-column>
          <el-table-column
            prop="createTime"
            :label="'创建时间'"
            sortable="custom"
            align="center"
            min-width="6.14%"
          >
            <template #default="scope">
              <span :style="scope.row.IsSuspend === 1 ? 'color:#bbb' : ''">
                {{ moment(scope.row.CreatedTime).format("YYYY.MM.DD") }}
              </span>
            </template>
          </el-table-column>
          <el-table-column
            prop="lastServiceTime"
            :label="'最新服务时间'"
            sortable="custom"
            align="center"
            min-width="6.14%"
          >
            <template #default="scope">
              <span :style="scope.row.IsSuspend === 1 ? 'color:#bbb' : ''">
                {{
                  scope.row.LastServiceTime.substr(0, 10).replaceAll(
                    "-",
                    "."
                  ) || "--"
                }}
              </span>
            </template>
          </el-table-column>
          <el-table-column
            prop="serviceTimes"
            :label="'服务次数'"
            sortable="custom"
            align="center"
            min-width="6.14%"
          >
            <template #default="scope">
              <span
                :style="
                  scope.row.ServiceTimes > 0
                    ? 'color:#409eff;cursor: pointer;'
                    : ''
                "
                @click="handleShowShareRecode(scope.row, 'list')"
              >
                {{ scope.row.ServiceTimes }}
              </span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" min-width="7.14%">
            <template #default="scope">
              <div
                class="tool"
                style="
                  display: flex;
                  align-items: center;
                  justify-content: center;
                "
                v-if="scope.row.ApproveStatus != '待审批'"
              >
                <!-- <span class="editsty" style="white-space: nowrap;" @click="itemclickHandle({type:'查看权限',data:scope.row})">
									查看权限
								</span>
								<span @click="itemclickHandle({type:'分配销售',data:scope.row})" v-if="Role=='thisAdmin'" class="editsty"
									style="white-space: nowrap;">
									{{scope.row.ShareSellerId?'修改销售':'分配销售'}}
								</span>
								<span class="editsty" @click="itemclickHandle({type:'服务记录',data:scope.row})">
									服务记录
								</span>
								<span class="editsty" @click="itemclickHandle({type:'备注',data:scope.row})">
									备注
								</span> -->
                <div
                  class="font-tool"
                  style="display: flex; flex-direction: column"
                >
                  <span
                    class="editsty"
                    v-for="item in getToolBtnList(scope.row).slice(0, 3)"
                    :key="item.type"
                    @click="
                      itemclickHandle({ type: item.type, data: scope.row })
                    "
                  >
                    <!-- {{item.type==='分配销售'?scope.row.ShareSellerId?'修改销售':'分配销售':item.type}} -->
                    {{ btnName(item, scope.row) }}
                  </span>
                </div>
                <el-dropdown
                  size="medium"
                  placement="bottom-start"
                  @command="itemclickHandle"
                  style="height: 16px; margin-left: 5px"
                  v-if="getToolBtnList(scope.row).length > 3"
                >
                  <span class="el-dropdown-link">
                    <i class="el-icon-more el-icon--right"></i>
									</span>

									<template #dropdown>
										<el-dropdown-menu>
											<el-dropdown-item
												:command="{ type: item.type, data: scope.row }"
												v-for="item in getToolBtnList(scope.row).slice(3)"
												:key="item.type"
											>
												<span>{{ btnName(item, scope.row) }}</span>
											</el-dropdown-item>
										</el-dropdown-menu>
									</template>
                </el-dropdown>
              </div>
            </template>
          </el-table-column>
					<template #empty>
						<div
							style="line-height: 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,total"
            background
            :current-page="page_no"
            @current-change="handleCurrentChange"
            :page-size="pageSize"
            :total="total"
            style="float: right"
          >
          </el-pagination>
        </div>
      </div>
    </div>

    <!-- 修改销售弹窗 -->
    <el-dialog
      draggable
      v-model="assignedSellerShow"
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      :title="assignedSellerTitle"
      class="changeSaleDia"
      @close="cancelAssign"
      center
      width="444px"
    >
      <el-form
        :model="assignform"
        :rules="rule"
        ref="assignform"
        label-width="110px"
      >
        <el-form-item label="客户名称" prop="name">
          <span style="fontsize: 16px">{{ assignform.CompanyName }}</span>
        </el-form-item>
        <el-form-item label="分配销售" prop="SellsId">
          <el-cascader
            v-model="assignform.SellsId"
            :options="salesArr"
            :show-all-levels="false"
            placeholder="请选择分配销售"
            style="width: 240px"
            :props="{
              multiple: false,
              emitPath: false,
              value: 'AdminId',
              label: 'RealName',
              children: 'ChildrenList',
            }"
          >
          </el-cascader>
        </el-form-item>
      </el-form>
      <div style="display: flex; justify-content: center; margin: 60px 0 35px">
        <el-button
          type="primary"
          style="width: 80px; margin-right: 24px"
          @click="saveAssign"
          >保存</el-button
        >
        <el-button style="width: 80px" @click="cancelAssign">取消</el-button>
      </div>
    </el-dialog>
    <!-- 查看权限弹窗 -->
    <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"
    />
    <!-- 服务记录弹窗 -->
    <share-list-dialog
      :isShareRecodeDialogShow="isShareRecodeDialogShow"
      :customInfo="shareCustomInfo"
      :allowEdit="allowEdit"
      @close="
        () => {
          isShareRecodeDialogShow && getTableData();
          isShareRecodeDialogShow = false;
        }
      "
    />
    <!-- 备注弹窗 -->
    <custom-remark-dialog
      :isRemarkLook="isRemarkLook"
      :lookRemarkItem="customInfo"
      @close="closeRemarkDia"
    />
    <!-- 补全客户信息弹窗 -->
    <CompleteInfo
      :form="completeForm"
      @cancel="cancelCompleteInfo($event)"
    ></CompleteInfo>

    <!-- 合同  -->
    <el-dialog
      v-model="contractModel.show"
      :modal-append-to-body="false"
      width="800px"
      class="self-dialog"
      draggable
    >
      <div style="text-align: center; margin: 30px 0 100px 0">
        <img
          width="191"
          src="@/assets/img/cus_m/bzht.png"
          @click="handleContractModel('标准')"
          style="margin-right: 80px; cursor: pointer"
        />
        <img
          width="191"
          src="@/assets/img/cus_m/fbzht.png"
          @click="handleContractModel('非标准')"
          style="cursor: pointer"
        />
        <p
          style="
            font-size: 15px;
            color: #333;
            text-align: left;
            padding-left: 100px;
            margin-top: 30px;
          "
        >
          注：<br />
          系统生成合同请选择标准合同入口<br />
          非系统生成合同请选择非标准合同入口(包含已走完邮件流程的标准合同)
        </p>
      </div>
    </el-dialog>
    <!-- 合同信息 -->
    <ContractInfo
      :initData="contractDialog"
      @contractInfoDialogClose="contractInfoDialogClose"
    ></ContractInfo>

    <!-- 增开试用弹窗 -->
    <el-dialog
      v-model="isAddTrial"
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      @close="isAddTrial = false"
      width="800px"
      draggable
      center
    >
      <template #header>
        <div style="display: flex; alignitems: center">
          <span style="fontsize: 16px">增开试用（默认两个月）</span>
        </div>
      </template>
      <Cauthlist
        :autharr="authList"
        :id="addTryId"
        @addOver="addTryOver"
        @close="isAddTrial = false"
      />
    </el-dialog>
  </div>
</template>
<style lang="scss" scoped>
.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 {
  .customList_bot {
    min-height: calc(100vh - 324px);
    padding: 30px 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_bot_search {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      margin-bottom: 12px;
    }
    .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--mini) {
    .el-input__inner {
      padding: 0 6px !important;
      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;
      }
    }
  }

  :deep(.self-dialog) {
    .el-dialog__header {
      background-color: #fff !important;
      .el-dialog__close.el-icon.el-icon-close {
        color: #666;
      }
    }
  }
  :deep(.changeSaleDia) {
    .el-cascader .el-input {
      width: 100%;
    }
  }
}
</style>
