<template>
  <div class="contact-list-container">
    <div class="contact-search-zone">
      <el-input v-model="searchParams.Keywords" style="width: 360px;" placeholder="请输入联系人姓名/邮箱/手机号" @input="search">
        <i slot="prefix" class="el-input__icon el-icon-search"></i>
      </el-input>
    </div>
    <el-table :data="contactsList" border @sort-change="sortChange" max-height="630px">
      <el-table-column label="联系人姓名" align="center" prop="Name">
        <template slot-scope="{row}">
          <img 
            :src="$icons.card"
            alt="" 
            style="width:17px;cursor:pointer;marginRight:5px;"
            v-if="row.BusinessCardUrl"
            @click="reviewCard(row.BusinessCardUrl)"
          />
          <span>{{row.Name}}</span>
        </template>
      </el-table-column>
      <el-table-column label="注册公司" align="center" prop="RegisterCompanyName">
        <template slot-scope="{row}">
          {{row.RegisterCompanyName || '-'}}
        </template>
      </el-table-column>
      <el-table-column label="手机号" align="center" prop="Mobile">
        <template slot-scope="{row}">
          {{row.CountryCode}}-{{row.Mobile}}
        </template>
      </el-table-column>
      <el-table-column label="注册时间" align="center" prop="RegisterTime" sortable="custom">
        <template slot-scope="{row}">
          {{row.RegisterTime || '-'}}
        </template>
      </el-table-column>
      <el-table-column label="邮箱地址" align="center" prop="Email">
        <template slot-scope="{row}">
          {{row.Email}}
        </template>
      </el-table-column>
      <el-table-column label="累计点击量" align="center" sortable="custom" width="120"
      prop="ViewTotal">
        <template slot-scope="{row}">
          <span class="table-options" @click="clickTimesDetail(row)" v-if="row.ViewTotal!=0">{{row.ViewTotal}}</span>
          <span v-else>{{row.ViewTotal}}</span>
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center" prop="Enabled" v-if="type=='trial'">
        <template slot-scope="{row}">
          <span :class="{'hint':row.Enabled===0}">{{row.Enabled?'启用':'禁用'}}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="150" v-if="type=='trial'">
        <template slot-scope="{row}">
          <span class="table-options" style="margin-right: 12px;" @click="editContacts(row)">编辑</span>
          <span class="table-options" style="margin-right: 12px;" @click="changeStatus(row)">{{row.Enabled?'禁用':'启用'}}</span>
          <span class="table-options" @click="delContacts(row)" style="color:#D1433A;">删除</span>
        </template>
      </el-table-column>
    </el-table>
    <!-- 页数选择器 -->
    <m-page
      v-show="total!=0"
      style="float: none;text-align: right;margin-top: 20px;"
      :page_no="searchParams.CurrentIndex"
      :pageSize="searchParams.PageSize"
      :total="total"
      @handleCurrentChange="pageChange"/>
      
    <!-- 累计点击量详情弹窗 -->
    <click-number-detail :visible.sync="showClickTimesDia" 
    :name="clickTimesDetailItem.contactsName" type="contacts"
    :id="clickTimesDetailItem.contactsId"></click-number-detail>

    <!-- 添加/编辑联系人 -->
    <contact-save-en-dia :contactsSubmitForm="contactsSubmitForm" title="编辑联系人" :showAddDia.sync="showAddDia"
    :companyId="0" @updateList="getList"></contact-save-en-dia>

    <el-image-viewer 
        v-if="showViewer" 
        :on-close="()=>{this.showViewer = false}" 
        :url-list="[imgUrl]" />
  </div>
</template>

<script>
import clickNumberDetail from "../compontents/clickNumberDetailDia.vue"
import ContactSaveEnDia from './components/ContactSaveEnDia.vue';
import mPage from '@/components/mPage.vue';
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
import { customInterence } from '@/api/api.js'

  export default {
    name:'contactLimitList',
    components:{
      mPage,clickNumberDetail,ContactSaveEnDia,ElImageViewer
    },
    data() {
      return {
        // 列表类型 trial-临时权限 freeze-终止权限
        type:'',
        searchParams:{
          Keywords:'',
          SortType:"",
          SortParam:"",
          CurrentIndex:1,
          PageSize:10,
          ListParam:3
        },
        total:0,
        contactsList:[],
        // ------------------累计点击量弹窗
        showClickTimesDia:false,
        clickTimesDetailItem:{
          contactsName:"",
          contactsId:""
        },
        showAddDia:false,
        contactsSubmitForm:{},
        showViewer:false,
        imgUrl:''
      }
    },
    watch: {
      '$route.path'(oldVal,newval){
        if(oldVal=='/freezeContactListEn'||oldVal=='/trialContactListEn'){
          // 同一页面 重置参数，请求列表
          this.reset()
        }
      }
    },
    created(){
      this.type=this.$route.path=='/trialContactListEn'?'trial':'freeze'
      this.searchParams.ListParam=this.$route.path=='/trialContactListEn'?2:3
      this.getList()
    },
    methods:{
      reset(){
        this.type=this.$route.path=='/trialContactListEn'?'trial':'freeze'
        this.searchParams={
          Keywords:'',
          SortType:"",
          SortParam:"",
          CurrentIndex:1,
          PageSize:10,
          ListParam:this.$route.path=='/trialContactListEn'?2:3
        }
        this.total=0
        this.contactsList=[]
        this.getList()
      },
      getList(){
        customInterence.getContactsListEn(this.searchParams).then(res=>{
          if(res.Ret == 200){
            this.contactsList = res.Data.List || []
            this.total = res.Data.Paging.Totals
          }
        })
      },
      search(){
        this.searchParams.CurrentIndex=1
        this.getList()
      },
      pageChange(page_no){
        this.searchParams.CurrentIndex=page_no
        this.getList()
      },
      // 排序
      sortChange({order,prop}){
        if(!order){
          this.searchParams.SortType=''
          this.searchParams.SortParam=''
        }else{
          this.searchParams.SortType=order=="ascending"?'2':'1'
          this.searchParams.SortParam= prop=="RegisterTime"?'2':'1'
        }
        this.getList()
      },
      //累计点击量详情
      clickTimesDetail(row){
        this.clickTimesDetailItem.contactsName = row.Name
        this.clickTimesDetailItem.contactsId = row.Id
        this.showClickTimesDia=true
      },
      //启用禁用联系人
      changeStatus(row){
        customInterence.editEnabledEn({
          EmailId:row.Id,
          Enabled:row.Enabled===1?0:1
        }).then(res=>{
          if(res.Ret!==200) return 
          this.$message.success('操作成功')
          this.getList()
        })
      },
      // 编辑联系人
      editContacts(row){
        this.contactsSubmitForm=row
        this.dialogTitle="编辑联系人"
        this.showAddDia=true
      },
      // 删除客户
      delContacts(row){
        this.$confirm(`是否确认删除联系人<span style="color:#409EFF">${row.Name}</span>？`,"操作提示",
        {
          type:"warning",
          dangerouslyUseHTMLString:true,
          confirmButtonText: "确定",
          cancelButtonText: "取消",
        }).then(res=>{
          customInterence.delContactsEn({EmailId:row.Id}).then(res=>{
            if(res.Ret == 200){
              this.$message.success("删除联系人成功")
              this.getList()
            }
          })
        }).catch(() => {});
      },
      reviewCard(url){
        this.imgUrl = url
        this.showViewer = true
      }
    }
  }
</script>

<style lang="scss" scoped>
  .contact-list-container{
    min-height: calc(100vh - 110px);
    background-color: white;
    box-sizing: border-box;
    padding: 28px 28px 50px;
    .contact-search-zone{
      text-align: right;
      margin-bottom: 26px;
    }
    .table-options{
      cursor: pointer;
      font-size: 14px;
      color: #409EFF;
    }
    .hint{
      color: red;
    }
  }
</style>