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

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

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

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

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

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

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

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

                        <span v-else>{{ row[item.key]}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    :prop="title.includes('正式') ? 'formalTime' : 'createTime'"
                    :label="title.includes('正式') ? '转正时间' : '创建时间'"
                    sortable="custom"
                    align="center" 
                    min-width="120"
                >
                    <template slot-scope="scope">
                        <span>
                            <template v-if="title.includes('正式')">
                                {{scope.row.FormalTime|formatTime}}
                            </template>
                            <template v-else>
                                {{scope.row.CreatedTime|formatTime}}
                            </template>
                        </span> 
                    </template>
                </el-table-column>
                <div slot="empty" 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>
            </el-table>
            <div class="bottom">
                <m-page
                    :total="total"
                    :page_no="page_no"
                    @handleCurrentChange="handleCurrentChange"
                />
            </div>
        </div>
    </div>
</template>

<script>
import { dataMainInterface,customInterence } from '@/api/api.js';
import mPage from '@/components/mPage.vue';
export default {
    components: { mPage },
    data() {
      return {
        title:this.$route.query.title||'',
        ids:decodeURIComponent(this.$route.query.ids),
        tableData:[],
        tableColumns:[
          {
            label: '客户名称',
            key: 'CompanyName',
            minwidthsty: '180px',
          },
          {
            label: '客户类型',
            key: 'CompanyType',
            widthsty: '80px',
          },
          {
            label: '所属行业',
            key: 'IndustryName',
          },
          {
            label: '客户地址',
            key: 'City',
            widthsty: '110px',
          },
          {
            label: '所属销售',
            key: 'SellerName',
          },
          {
            label: '分配销售',
            key: 'ShareSeller',
          },
          {
            label: '客户状态',
            key: 'Status',
            // widthsty: '180px',
          },
          {
            label: '累计阅读次数',
            key: 'viewTotal',
          },
          {
            label: '累计路演次数',
            key: 'RoadShowTotal',
          },
          {
            label: '最近一次阅读时间',
            key: 'LastViewTime',
            widthsty: '200px',
          },
          {
            label: '服务期限',
            key: 'EndDate',
            minwidthsty: '180px',
          },
          {
            label: '到期天数',
            key: 'ExpireDay',
            widthsty: '110px'
          }
        ],
        sort_obj: {
          param: '',
          type: ''
        },//排序字段
        total: 0,
        page_no: 1,
        pageSize: 10,
        showMoreText:'加载中...'
      } 
    },
    computed:{
      showMore(){
        const AdminName = localStorage.getItem('AdminName')
        return AdminName==='ydlou'
      },
      tableColumnsComputed(){
        if(this.title.includes('正式')){
          return this.tableColumns
        }else{
          return this.tableColumns.filter(item => item.label!='分配销售')
        }
      }
    },
    methods: {
        /* 排序变化时 */
		sortChangeHandle({ prop,order }) {
			console.log(prop,order)
			this.page_no = 1;

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

			this.sort_obj = {
				type: order === 'ascending' ? 'asc' : order === 'descending' ? 'desc' : '',
				param: typeMap[prop] || prop
			}
			this.getTableData();
		},
        /* 切换页码 */
		handleCurrentChange(page) {
			this.page_no = page;
			this.getTableData();
		},
        /* 获取数据	 */
		getTableData() {

			const { param, type } = this.sort_obj;

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

				this.total = res.Data.Paging.Totals;
				this.tableData = Data.List || [];
			})
		},
    /* 获取客户套餐详情 */
    getCustomDetail(row,column){
      this.showMoreText = '加载中...'
      if(column.label!=='客户类型') return
      if(!this.showMore) return 
      customInterence.lookauth({
        CompanyId:row.CompanyId
      }).then(res=>{
        if(res.Ret!==200) return 
        const ficcList = res.Data.List||[]
        const raiList = res.Data.ListRai||[]
        let ficcStr = this.formatStr(ficcList)
        let raiStr = this.formatStr(raiList)
        //console.log('text',ficcStr+raiStr)
        this.showMoreText = ficcStr+raiStr
      })
    },
    formatStr(list){
      let showText = ''
      list.forEach(item=>{
        const listName = item.ClassifyName
        let itemNames = []
        if(item.Items&&item.Items.length){
          item.Items.forEach(i=>{
            if(i.Status&&i.Status!=='关闭'){
              itemNames.push(`${i.PermissionName}${i.PermissionTypeName?'('+i.PermissionTypeName+')':''}`)
            }
          })
        }
        if(itemNames.length){
          showText+=`${listName}：${itemNames.join('、')}<br/>`
        }
      })
      return showText
    }  
    },
    mounted() {
        this.getTableData()
    }
}
</script>

<style lang="scss" scoped>
.region-custom-detail{
    padding:30px;
	background: #fff;
	border: 1px solid #ECECEC;
	border-radius: 4px;
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
    min-height: 70vh;
    .title{
        padding: 10px 24px;
        display: inline-block;
        background: #e8f3ff;
        color: #2d8cf0;
        font-size: 14px;
        border-radius: 4px;
        margin-bottom: 30px;
    }
    .table-cont {
		margin-top: 20px;
		margin-bottom: 20px;
	}
	.bottom {
		height: 40px;
	}
}
</style>