<script>
import { defineComponent, } from 'vue'
export default defineComponent({
  //进入前是否清除参数
  beforeRouteEnter(to, from, next) {
    if(!['/editCustom','/turnCustom','/updateCustom','/pickCustom','/customDetail'].includes(from.path)) {
      sessionStorage.removeItem('customSearchBack')
    }
    
		next()
  }
})
</script>

<script setup>
import { ref,computed,reactive } from "vue";
import { customInterence } from '@/api/api.js'
import { useRouter,onBeforeRouteLeave, useRoute } from 'vue-router'
import { Search,MoreFilled } from '@element-plus/icons-vue'
import { ElMessageBox,ElMessage } from 'element-plus'
import _ from 'lodash'
import { useViewPermissionDia,useLookTrialDia,useCommunicaRecordDia,useChooseContractDia,useList,useAddTrialDia,useViewRemarkCustomDia,useCompleteInfoDia,useFreezeReasonDia } from "./hooks/customlistHook";
import mPage from '@/components/mPage.vue'
import permissionView from './components/premissionView.vue'
import Capplydia from './components/Capplydialog.vue'
import Contactdia from './components/Contactdialog.vue'
import Cauthlist from './components/CauthList.vue'
import CompleteInfo from './components/CompleteInfo.vue'
import ContractInfo from './components/ContractInfo.vue'
import PermissionDetail from './components/permissionDetail.vue'

onBeforeRouteLeave((to, form, next) => {
  let backData = {
    keyword:search_txt.value,
    page:pageinfo.page_no
  }
  sessionStorage.setItem('customSearchBack',JSON.stringify(backData))
  next()
})

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


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

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


const {
  isAddTrial,
  addTryId,
  addTrialHandle,
  closeAddTrial,
  authList
} = useAddTrialDia();//增开试用弹窗

const {
  lookRemarkTitle,
  lookRemarkList,
  lookRemarkTextarea,
  isRemarkLook,
  lookRemarkItem,
  lookRemarkDelete,
  closeRemark,
  lookRemarkHandle
} = useViewRemarkCustomDia();//查看备注弹窗


/* 获取表格数据 */
const search_txt = ref('')
const isShowloadding = ref(false)
const noResult = ref(false)
const	pageinfo = reactive({	// 分页信息
  total: 0,
  page_no: 1,
  page_size: 10
})
const tableData = ref([])
function getTableData() {
  isShowloadding.value = true;
  customInterence.searchList({
    KeyWord:search_txt.value,
    PageSize:pageinfo.page_size,
    CurrentIndex:pageinfo.page_no
  }).then(res => {
    if(res.Ret === 200) {
      tableData.value = res.Data?res.Data.List:[];
      pageinfo.total=res.Data && res.Data.Paging ? res.Data.Paging.Totals : 0
      tableData.value.forEach(item => {
        item.ApproveStatus = item.ApproveStatus=='待审批'?'待审批':''
      })
      noResult.value = res.Data.List.length ? false : true;
      isShowloadding.value = false
    }else {
      tableData.value = [];
      noResult.value = true;
      setTimeout(()=> {
        isShowloadding.value = false;
      },100)
    }
  })	
}

// 页码改变事件
function handleCurrentChange(page){
  pageinfo.page_no=page
  getTableData()
}


function init() {
  /* 返回保持上次的状态 */
  if(sessionStorage.getItem('customSearchBack')) {
    let backData = JSON.parse(sessionStorage.getItem('customSearchBack'));

    search_txt.value = backData.keyword;
    pageinfo.page_no=backData.page
    getTableData()
  }
  getSale();

  search_txt.value= $route.query.name ? $route.query.name:  $route.query.code?$route.query.code : ''
		if(search_txt.value){
			getTableData()
		}
}
init()


// 处理状态的数据
function transformedArray(row){
  return [
    {
      SigningStatus: row.CompanyStatusButton.FiccSigningStatus,
      Status: row.CompanyStatusButton.FiccStatus
    },
    {
      SigningStatus: row.CompanyStatusButton.RaiSigningStatus,
      Status: row.CompanyStatusButton.RaiStatus,
    }
  ];
}

//处理时长显示
function formateDuration(time,status){
  let timearr=time.split('/')
  let statusarr=status.split('/').map((item,index)=>{
    if(item=='冻结'){
      return `解冻天数:${timearr[index]?timearr[index]:'--'}`
    }else if(item=='流失'){
      return `流失天数:${timearr[index]?timearr[index]:'--'}`
    }else if(item=='永续'){
      return '永续'
    }else{
      return `剩余天数:${timearr[index]?timearr[index]:'--'}`
    }
  })

  return statusarr.join('/')
}	


const btnCommandList = {
  BtnAddAgreement: '补充协议',
  BtnApplyReceive: '申请领取',
  BtnDelay: '申请延期',
  BtnDelete: '删除',
  BtnDetail: '',
  BtnEdit: '编辑',
  BtnFreeze: '冻结',
  BtnModifySeller: '修改销售',
  BtnReceive: '领取客户',
  BtnReceiveOther: '领取',
  BtnSuspend: '启用/暂停',
  BtnThaw: '申请解冻',
  BtnTryOut: '增开试用',
  BtnTurnPositive: '申请转正',
  BtnUpdate: '续约申请',
  BtnView: '查看权限',
  BtnRemarkView: '备注',
  IsResearchShow:'研选详情'
}
// 按钮列表
function btnList(btnItem,part){
  const allBtnList=[]
  for (const key in btnItem) {
    btnItem[key]&&key!=='BtnClose' && allBtnList.push(key)
  }
  if(part==='front'){
    // 返回前三个按钮
    return allBtnList.slice(0,3)
  }else{
    // 返回三个后按钮
    return allBtnList.slice(3)
  }
}
// 用于返回按钮名称
function	btnName(btnItem,isSuspend){
  if(btnItem!=='BtnSuspend') return btnCommandList[btnItem]
  return isSuspend===1?'启用':'暂停'
}

/* 查看详情 */
function goDetail(item) {
  if(!item.BtnItem.BtnView) return
  $router.push({
    path:'/customDetail',
    query: {
      id:item.CompanyId
    }
  })
}

/* 操作 */
function itemclickHandle(query) {
  if(query.type == '申请转正') {
    applyTurn(query.data)
  }else if(query.type == '申请延期' || query.type == '申请解冻') {
    applyHandle(query.type,query.data)
  }else if(query.type == '申请领取') {
    if(RaiSellerRole.value && query.data.IsScrounge == 1){
      ElMessageBox.confirm('此客户存在长期且反复申请试用，但从未签约的情况，确定要领取吗？','申请领取',{
        type:'warning'
      }).then(() => {
        applyHandle('申请领取',query.data)
      }).catch(() => {});
    }else{
      applyHandle('申请领取',query.data)
    }
  }else if(query.type == '修改销售') {
    updateSale(query.data);
  }else if(query.type == '启用' || query.type == '暂停') {
    suspendHandle(query.data)
  }else if(query.type == '冻结') {
    freezHandle(query.data);
  }else if(query.type == '领取') {
    receiveOtherHandle(query.data);
  }else if(query.type == '增开试用') {
    addTrialHandle(query.data)
  }else if(query.type=='编辑'){
    editHandle(query.data)
  }else if(query.type=='删除'){
    delHandle(query.data)
  }else if(query.type=='查看权限'){
    lookHandle(query.data)
  }else if(query.type=='续约申请'){
    updateHandle(query.data)
  }else if(query.type=='补充协议'){
    addAgreement(query.data)
  }else if(query.type=='领取客户'){
    if(RaiSellerRole.value && query.data.IsScrounge == 1){
      ElMessageBox.confirm('此客户存在长期且反复申请试用，但从未签约的情况，确定要领取吗？','领取客户',{
        type:'warning'
      }).then(() => {
        receiveHandle(query.data)
      }).catch(() => {})
    }else{
      receiveHandle(query.data)
    }
  }else if(query.type=='备注'){
    lookRemarkHandle(query.data)
  }else if(query.type=='研选详情'){
    researchDetailHandle(query.data)
  }
}


const {
  completeForm,
  getCustomerDetail,
  closeCompleteInfo
} = useCompleteInfoDia();//补全信息弹窗
//关闭补全信息弹窗
function cancelCompleteInfo(refresh){
  // 刷新列表
  if(refresh){
    getTableData()
  }
  closeCompleteInfo()
}


const { 
  contractModel,
	applyTurn,
	updateHandle,
	addAgreement,
	handleContractModel,
	contractDialog,
  closeContractInfoDia
} = useChooseContractDia();//选择合同弹窗
function contractInfoDialogClose(e){
  closeContractInfoDia()
  if(e==='updateList'){
    getTableData();
  }
}



/* 申请延期 解冻 领取小弹窗 */
const isApply = ref(false)//申请弹窗
const applyForm = ref({})//客户信息
const applyTit = ref('')
const isShowclose = ref(false)//联系人弹窗时记录是否是领取流失客户
const isPickLoss = ref(false)//联系人弹窗时记录是否是领取流失客户
const	isPickSelf = ref(false)//是否为领取自己的流失客户
const regionType = ref("")
const isAddContact = ref(false) //添加联系人弹窗
const addCompanyId = ref('')//新增联系人的公司id
const diaform = ref({
  name:'',
  sex:1,
  telCode:'86',
  tel1:'',
  tel2:'',
  mail:'',
  post:'',
  desiger:'',
  depart:'',
  carte:'',
  Source:'pick_custom'
})
async function applyHandle(tit,item) {
  //判断是否需要补全信息
  let flag=await getCustomerDetail(item.CompanyId,0)
  if(flag) return
  applyTit.value = tit;
  applyForm.value = item;
  
  // 如果是申请领取（即领取自己流失客户）先添加联系人再进行申请操作
  if(tit=='申请领取'&& (item.SellerId !== SellerAdminId.value)){
    isPickLoss.value = true;
    isPickSelf.value = true
    regionType.value = item.RegionType;
    addCompanyId.value = item.CompanyId;
    diaform.value = {
      name:'',
      sex:1,
      telCode:'86',
      tel1:'',
      tel2:'',
      mail:'',
      post:'',
      desiger:'',
      depart:'',
      carte:'',
      Source:'pick_custom'
    },
    isAddContact.value = true;
  }else{
    isApply.value = true;
  }

  
}
/* 领取流失客户 */
async function receiveHandle(item) {
  //判断是否需要补全信息
  let flag = await getCustomerDetail(item.CompanyId,0)
  if(flag) return

  if(RaiSellerRole.value && item.IsScrounge == 1){
    // 已经弹过二次确认弹窗 避免再一次的弹窗
    isPickLoss.value = true;
    regionType.value = item.RegionType;
    addCompanyId.value = item.CompanyId;
    diaform.value.telCode='86'
    isAddContact.value = true;
    return 
  }
  
  ElMessageBox.confirm('是否确认领取该客户?','提示',{
    type:'warning'
  }).then(() => {

      isPickLoss.value = true;
      addCompanyId.value = item.CompanyId;
      regionType.value=item.RegionType
      diaform.value.telCode='86'
      isAddContact.value = true;
  }).catch(() => {});
}
/* 领取流失客户添加联系人后再领取 */
function cancelConcatdia(type) {
  isAddContact.value = false;
  isPickSelf.value=false
  if(type == 1) {
    customInterence.Pick({
      CompanyId:addCompanyId.value,
    }).then(res => {
      if(res.Ret === 200) {
        ElMessage.success(res.Msg);
        getTableData();
      }
    })
  }else {
    ElMessage.warning('领取失败')
  }
}
function cancelHandle(type) {
  isApply.value = false;
  applyForm.value = {}
  if(type == 1) {
    getTableData();
  }
}
// 领取自己的流失客户下一步申请操作
const contactFormData = ref({})
function addContactNext({formData}){
  contactFormData.value=formData
  isAddContact.value=false
  isApply.value=true
}


/* 修改销售操作 */
const isMove = ref(false)//修改销售
const moveform = ref({
  companyType:'',
  companyId:'',//客户id
  companyName:'',
  sale:'',//修改的销售
})
const moveRule = {
  sale:[
    { required: true, message: '所属销售不能为空', trigger: 'blur' },
  ]
}
const moveformRef = ref(null)
function updateSale(item) {
  moveform.value = {
    companyType:item.CompanyType,
    companyName:item.CompanyName,
    companyId:item.CompanyId,
    sale:''
  }
  handleModifysalesArr(item.SellerId)
  isMove.value = true;
}
/* 移动客户所属销售 */
function saveMove() {
  moveformRef.value.validate((valid) => {
    if (valid) {
      customInterence.moveSale({
        CompanyType:moveform.companyType,
        CompanyId:moveform.companyId,
        SellsId:Number(moveform.sale[1])||Number(moveform.sale[2])
      }).then(res => {
        if(res.Ret === 200) {
          ElMessage.success(res.Msg);
          getTableData();
          isMove.value = false;
        }
      })
    }
  })		
}
/* 取消移动客户 */
function cancelMove() {
  moveformRef.value.resetFields();
  isMove.value = false;
}

const salesArr = ref([])//修改销售时可选择的数据
// 处理修改销售数据 不可以修改到已存在销售
function handleModifysalesArr(id){
  const AllSalesArr = _.cloneDeep(modifysalesArrtem.value)
  salesArr.value=AllSalesArr.map(item=>{
    if(item.ChildrenList){
      item.ChildrenList=item.ChildrenList.filter(e=>{
        if(e.ChildrenList){
          e.ChildrenList = e.ChildrenList.filter(i=>{return i.AdminId!=id})
        }
        return  e.AdminId!=id
      })
    }
    return item
  })
}
const modifysalesArrtem = ref([])//从后台获取的修改销售的所有数据
/* 获取销售 */
function getSale() {
  customInterence.getSale({AllSeller:true}).then(res => {
    if(res.Ret === 200) {
      modifysalesArrtem.value = res.Data.List;
    }
  })
}



/* 冻结客户 */
const {
  isFreezeReason,
  freezeData,
  freezHandle,
  closeFreezeReason
} = useFreezeReasonDia();//冻结客户理由弹窗
async function  handleConfirmFreeze(){
  if(!freezeData.value.reason){
    ElMessage.error('请填写冻结理由')
    return
  }
  let res=await customInterence.Freez({
    CompanyId:Number(freezeData.value.CompanyId),
    CompanyType:freezeData.value.CompanyType,
    Remark:freezeData.value.reason
  })
  if(res.Ret===200){
    ElMessage.success('冻结成功');
    closeFreezeReason()
    getTableData();
  }
}


/* 领取权益/ficc客户 */
async function receiveOtherHandle(item) {
  //判断是否需要补全信息
  let flag=await getCustomerDetail(item.CompanyId,1)
  if(flag) return

  $router.push({
    path:'/pickCustom',
    query:{
      id:item.CompanyId
    }
  })
}


/* 删除 */
function delHandle(item) {
  ElMessageBox.confirm('删除后客户将不能查阅报告，确定删除吗?','提示',{
    type:'warning'
  }).then(() => {
    customInterence.customDel({
      CompanyId:item.CompanyId
    }).then(res => {
      if(res.Ret === 200) {
        ElMessage.success(res.Msg)

        getTableData();
      }
    })
  }).catch(() => {});
}


const isPermissionDetailShow = ref(false)// 权限详情 弹框
const	researchDetailId = ref(0)
function researchDetailHandle(item) {
  isPermissionDetailShow.value = true
  researchDetailId.value = item.CompanyId
}

</script>
<template>
  <div class="customSearch_container">
    <div class="customSearch_top">
      <el-input
        placeholder="客户名称/社会信用码/手机号码/邮箱"
        v-model="search_txt"
        style="max-width: 520px"
        @keyup.enter="getTableData"
        clearable
      >
        <template #prefix>
          <el-icon><Search /></el-icon>
        </template>
      </el-input>
      <el-button
        type="primary"
        @click="
          pageinfo.page_no = 1;
          getTableData();
        "
        style="margin-left: 20px"
        >客户检索</el-button
      >
    </div>
    <div class="customSearch_cont">
      <el-table
        ref="table"
        :data="tableData"
        v-loading="isShowloadding"
        element-loading-text="客户检索中..."
        border
      >
        <el-table-column prop="CompanyName" label="客户名称" align="center">
          <template #default="scope">
            <span
              class="mouse-enter"
              :style="
                scope.row.Status == '潜在' ? '' : 'color:#bbb;cursor:pointer;'
              "
              @click="goDetail(scope.row)"
              v-if="scope.row.IsSuspend === 1 || scope.row.Status == '潜在'"
            >
              {{ scope.row.CompanyName }}
            </span>
            <span
              v-else
              :class="scope.row.BtnItem.BtnView ? 'customName' : ''"
              :style="{
                color: scope.row.BtnItem.BtnView ? '#409EFF' : '#606266',
                cursor: scope.row.BtnItem.BtnView ? 'pointer' : 'text',
              }"
              @click="goDetail(scope.row)"
              >{{ scope.row.CompanyName }}</span
            >
            <el-tooltip
              content="此客户存在长期且反复申请试用，但从未签约的情况，请谨慎领取"
              placement="top"
              :open-delay="500"
              v-if="RaiSellerRole && scope.row.IsScrounge == 1"
            >
              <img
                width="16"
                style="cursor: pointer"
                src="@/assets/img/icons/warning_triangle_yellow.png"
              />
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="CreditCode" label="社会信用码" align="center">
          <template #default="scope">
            <span :style="scope.row.IsSuspend === 1 ? 'color:#bbb' : ''">{{
              scope.row.CreditCode
            }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="Status" label="客户状态" align="center">
          <template #default="scope">
            <p
              :style="
                scope.row.IsSuspend === 1
                  ? 'color:#bbb;margin:3px 0'
                  : 'margin:3px 0'
              "
              v-for="item in transformedArray(scope.row)"
              :key="item"
            >
              <template v-if="item.Status">
                {{ item.Status }}
                <br v-if="item.SigningStatus" />
                <el-tag
                  v-if="item.SigningStatus"
                  :type="item.SigningStatus === '已签约过' ? '' : 'warning'"
                  size="small"
                  >{{ item.SigningStatus }}</el-tag
                >
              </template>
            </p>
          </template>
        </el-table-column>
        <el-table-column prop="CompanyType" label="客户类型" align="center">
          <template #default="scope">
            <span :style="scope.row.IsSuspend === 1 ? 'color:#bbb' : ''">{{
              scope.row.CompanyType
            }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="SellerName" label="销售" align="center">
          <template #default="scope">
            <span :style="scope.row.IsSuspend === 1 ? 'color:#bbb' : ''">{{
              scope.row.SellerName || "--"
            }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="Duration" label="时长（天）" align="center">
          <template #default="scope">
            <span :style="scope.row.IsSuspend === 1 ? 'color:#bbb' : ''">{{
              formateDuration(scope.row.Duration,scope.row.Status)
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" min-width="120">
          <template
            #default="scope"
          >
            <!-- 新操作栏 -->
            <div style="color: #4099ef; font-size: 24px" v-if="!scope.row.ApproveStatus || scope.row.ApproveStatus === '待审批'">
              <span
                :class="item === 'BtnDelete' ? 'deletesty' : 'editsty'"
                style="margin: 0 5px"
                @click.stop="
                  itemclickHandle({
                    type: btnName(item, scope.row.IsSuspend),
                    data: scope.row,
                  })
                "
                v-for="(item, index) in btnList(scope.row.BtnItem, 'front')"
                :key="index"
                >{{ btnName(item, scope.row.IsSuspend) }}</span
              >
              <el-dropdown
                placement="bottom-start"
                @command="itemclickHandle"
                v-if="btnList(scope.row.BtnItem, 'back').length"
              >
                <span class="el-dropdown-link" style="margin:0 5px">
                  <el-icon><MoreFilled /></el-icon>
                </span>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item
                      :command="{
                        type: btnName(item, scope.row.IsSuspend),
                        data: scope.row,
                      }"
                      v-for="(item, index) in btnList(
                        scope.row.BtnItem,
                        'back'
                      )"
                      :key="index"
                    >
                      <span>{{ btnName(item, scope.row.IsSuspend) }}</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"
            v-if="noResult"
          >
            <img
              src="~@/assets/img/cus_m/nodata.png"
              alt=""
              style="display: block; width: 160px; height: 128px; margin: auto"
            />
            <span>暂无信息</span>
          </div>
          <div
            style="line-height: 44px; margin: 200px 0; color: #999"
            v-else
          ></div>
        </template>
      </el-table>
      <!-- 分页 -->
      <el-col :span="24" class="toolbar">
        <mPage
          :total="pageinfo.total"
          :page_no="pageinfo.page_no"
          :pageSize="pageinfo.page_size"
          @handleCurrentChange="handleCurrentChange"
        />
      </el-col>
    </div>

    <!-- 申请弹窗 -->
		<Capplydia 
		:isApply="isApply"
		:title="applyTit"
		:formdata="applyForm"
		:contactFormData="contactFormData"
		@cancelHandle="cancelHandle">
		</Capplydia>

    <!-- 查看权限弹窗 -->
    <permissionView
      :isLook="isLook"
      :lookTitle="lookTitle"
      :lookAuthList="lookAuthList"
      :lookAuthListEquity="lookAuthListEquity"
      @closeDia="closeDia"
    ></permissionView>

    <!-- 增开试用弹窗 -->
		<el-dialog
		v-model="isAddTrial"
		:close-on-click-modal="false"
		:modal-append-to-body='false'
		@close="closeAddTrial"
		width="800px"
		center>
      <template #header>
        <div style="display:flex;alignItems:center;">
          <span style="fontSize:16px;">增开试用</span>
        </div>
      </template>
			<Cauthlist
			:autharr="authList"
			:id="addTryId"
			@addOver="addTryOver"
			@close="closeAddTrial"/>
		</el-dialog>

    <!-- 移动客户弹窗 -->
		<el-dialog
		v-model="isMove"
		:close-on-click-modal="false"
		:modal-append-to-body='false'
		@close="cancelMove"
		center
		width="30%">
      <template #header>
        <div style="display:flex;align-items:center;">
          <img :src="$icons.edit" style="color:#fff;width:16px;height:16px;margin-right:5px;">
          <span style="fontSize:16px;">修改销售</span>
        </div>
      </template>

			<el-form :model="moveform" :rules="moveRule" ref="moveformRef" label-width="100px" style="marginTop:15px;">
				<el-form-item label="客户名称" prop="name">
					<span style="fontSize:16px;">{{moveform.companyName}}</span>
				</el-form-item>
				<el-form-item label="所属销售" prop="sale">
					<el-cascader
						v-model="moveform.sale"
						placeholder="请选择修改的销售"
						style="width: 70%"
						:options="salesArr"
						:props="{multiple: false,label:'RealName',children:'ChildrenList',value:'AdminId'}"
						:show-all-levels="false"
						clearable
						filterable>
					</el-cascader>
				</el-form-item>
			</el-form>	
			<div style="display:flex;justify-content:center;margin:75px 0 26px;">
				<el-button type="primary" style="width:80px;marginRight:24px;" @click="saveMove">保存</el-button>
				<el-button  style="width:80px;" @click="cancelMove">取消</el-button>
			</div>
		</el-dialog>

    <!-- 添加联系人弹窗 -->
		<Contactdia
		:id="addCompanyId"
		:title="'新增联系人'"
		:userForm="diaform"
		:needCard="true"
		:isShowclose="isShowclose"
		:isPickLoss="isPickLoss"
		:isPickSelf="isPickSelf"
		:regionType="regionType"
		:isAddContact="isAddContact"
		@cancel="cancelConcatdia"
		@addContactNext="addContactNext">
		</Contactdia>

    <!-- 冻结理由弹窗 -->
		<el-dialog
		v-model="isFreezeReason"
		:close-on-click-modal="false"
		:modal-append-to-body='false'
		@close="closeFreezeReason"
		width="800px"
		center>
      <template #header>
        <div style="display:flex;align-items:center;">
          <img src="@/assets/img/freeze-icon.png" alt="" width="16" style="margin-right:10px">
          <span style="font-size:16px;">冻结</span>
        </div>
      </template>
			<el-input
				type="textarea"
				:rows="6"
				placeholder="请输入冻结理由"
				v-model="freezeData.reason">
			</el-input>
			<div style="text-align:center;margin:30px 0;">
				<el-button type="primary" @click="handleConfirmFreeze">确定</el-button>
				<el-button type="primary" plain @click="closeFreezeReason">取消</el-button>
			</div>
		</el-dialog>

    <!-- 补全信息弹窗 -->
		<CompleteInfo
			:form="completeForm"
			@cancel="cancelCompleteInfo($event)"
		></CompleteInfo>

    <!-- 申请转正、续约申请、补充协议选择申请合同模式弹窗 -->
		<el-dialog
			v-model="contractModel.show"
			:modal-append-to-body='false'
			width="800px"
			class="self-dialog"
		>
			<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="isRemarkLook"
		:close-on-click-modal="false"
		:modal-append-to-body="true"
		:append-to-body="true"
		@close="closeDia"
		width="800px"
		draggable
		center>
      <template #header>
        <div style="display:flex;alignItems:center;">
          <img :src="$icons.auth" style="color:#fff;width:16px;height:16px;marginRight:5px;">
          <span style="fontSize:16px;">{{lookRemarkTitle}}</span>
        </div>
      </template>
			<template>
				<div v-if="(RoleIdentity == 'rai_seller' || RoleIdentity == 'ficc_seller') || (SellerAdminId == lookRemarkItem.SellerId)">
					<el-input
						type="textarea"
						:rows="3"
						placeholder="请输入文字"
						v-model="lookRemarkTextarea">
					</el-input>
					<div class="look-remark-commit" @click="lookRemarkAdd">保存</div>
				</div>
				<el-table
			:data="lookRemarkList"
			border
			max-height="300"
			style="width: 100%; margin-top: 20px;margin-bottom: 20px">
				<el-table-column label="备注内容"  key="Remark"  align="center">
					<template #default="scope">{{scope.row.Remark}}</template>
				</el-table-column>
				<el-table-column label="客户类型" align="center" key="ProductName" v-if="lookRemarkItem.IsShared && (RoleIdentity != 'rai_seller' && RoleIdentity != 'ficc_seller')">
					<template #default="scope">{{scope.row.ProductName}}</template>
				</el-table-column>
				<el-table-column label="创建时间"  key="CreateTime" align="center">
					<template #default="scope">{{scope.row.CreateTime}}</template>
				</el-table-column>
				<el-table-column label="操作" align="center">
					<template #default="{row}">
						<el-button type="text" size="small" style="color:red;" v-if="row.ButtonDel"
							@click="lookRemarkDelete(row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			</template>
			<div style="padding:20px 0;"></div>
		</el-dialog>

    <!-- 权限详情弹框 -->
		<permission-detail :isPermissionDetailShow="isPermissionDetailShow" :researchDetailId="researchDetailId" @close="isPermissionDetailShow=false"/>
    
  </div>
</template>
<style scoped lang="scss">
.customSearch_container {
	.customSearch_top {
		display: flex;
		// justify-content:flex-end;
		align-items: center;
		border: 1px solid #ECECEC;
		padding: 20px 30px;
		background: #fff;
		border-radius: 4px;
		box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
	}
	.customSearch_cont {
		min-height: calc(100vh - 320px);
		padding: 20px 30px 80px;
		background: #fff;
		margin-top: 20px;
		position: relative;
		border: 1px solid #ECECEC;
		border-radius: 4px;
		box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
	}
	.menu_lists {
		padding: 40px 18px;
		border-radius: 4px;
		.menu_item {
			display: flex;
			// align-items: center;
			margin-bottom: 30px;
			&:last-child {
				margin-bottom: 0;
			}
			.list_item {
				margin-right: 20px;
				margin-bottom: 10px;
				&:last-child {
					margin-right: 0;
				}
			}
		}
	}
	.look-remark-commit {
		width: 426px;
		height: 41px;
		background: #409EFF;
		margin:  30px auto;
		text-align: center;
		line-height: 41px;
		color: #fff;
		box-shadow: 0px 2px 6px 1px rgba(64, 158, 255, 0.05);
		border-radius: 4px 4px 4px 4px;
		cursor: pointer;
	
	}
	.mouse-enter {
		&:hover {
			text-decoration:underline;
		}
	}

  .look-remark-commit {
		width: 426px;
		height: 41px;
		background: #409EFF;
		margin:  30px auto;
		text-align: center;
		line-height: 41px;
		color: #fff;
		box-shadow: 0px 2px 6px 1px rgba(64, 158, 255, 0.05);
		border-radius: 4px 4px 4px 4px;
		cursor: pointer;
	
	}
  
  :deep(.el-dropdown) {
    vertical-align: middle;
  }
}
</style>

