<template>
<div>
  <el-dialog :title="title" :close-on-click-modal="false" :modal-append-to-body="false"
  :visible.sync="show" width="725px" @closed="closeAddDia">
    <div style="padding: 10px 66px 35px 66px;">
      <el-form :model="submitForm" ref="addContactsForm" label-position="right" label-width="92px">
        <el-form-item label="联系人姓名" prop="Name"
        :rules="{required:true,message:'联系人姓名不能为空',trigger:'blur'}">
          <el-input v-model="submitForm.Name" style="width: 337px;"
          placeholder="请输入联系人姓名" size="medium"></el-input>
        </el-form-item>
        <el-form-item label="邮箱地址" prop="Email"
        :rules="[{required:true,message:'邮箱地址不能为空',trigger:'blur'},{type:'email',message:'邮箱地址格式不正确',trigger:'blur'}]">
          <el-input v-model="submitForm.Email" style="width: 337px;"
          placeholder="请输入邮箱地址" size="medium"></el-input>
        </el-form-item>
        <el-form-item 
          label="手机号" 
          prop="Phone"
        >
          <el-select 
            v-model="submitForm.TelCode" 
            placeholder="区号" 
            style="width:90px"
          >
            <el-option 
              v-for="item in telCodeArr" 
              :key="item.value" 
              :label="item.label" 
              :value="item.value"
            />
          </el-select>
          <el-input v-model="submitForm.Tel" placeholder="手机号" style="width: 245px" clearable />
        </el-form-item>
        <el-form-item label="个人名片" prop="carte" style="width: 100%">
          <input 
            type="file" 
            name="file" 
            @change="fileSelected" 
            id="fileCard" 
            class="true-file"
            style="display: none" 
          />
          <el-button type="primary" size="medium" @click.native="clickinput" v-if="!submitForm.carte">点击上传</el-button>
          <div class="img_item" v-if="submitForm.carte">
            <el-image 
              :src="submitForm.carte" alt="" 
              style="background: #aaa; width: 280px; height: 180px"
              :preview-src-list="submitForm.carte.split(',')" 
              id="img" 
            />
              <i class="el-icon-zoom-in" style="position: absolute; right: 20px; top: 20px; color: #fff" @click="preview"></i>
              <span style="position: absolute;right: 12px;bottom: 1px;color: #409eff;font-size: 16px;cursor: pointer;"
               @click.stop="clickinput">重新上传</span>
          </div>
        </el-form-item>
        <el-form-item label="状态" prop="Enabled">
        <el-radio-group v-model="submitForm.Enabled">
          <el-radio :label="1">启用</el-radio>
          <el-radio :label="0">禁用</el-radio>
        </el-radio-group>
      </el-form-item>
      </el-form>
      <div style="text-align: center;margin-top: 60px;">
        <el-button type="primary" size="medium" style="width: 120px;margin-right: 6px;" @click="submit">确定</el-button>
        <el-button size="medium" style="width: 120px;" @click="closeAddDia">取消</el-button>
      </div>
    </div>
   </el-dialog>
  <!-- 存在联系人的提示弹窗 -->
  <el-dialog title="提示" :close-on-click-modal="false" :modal-append-to-body="false"
  :visible.sync="showHintDia" v-dialogDrag width="920px">
    <div style="padding: 0 40px;">
      <p style="margin-bottom: 20px;">检测到系统中已存在以下联系人</p>
      <p style="margin-bottom: 10px;" v-if="contactSource">来源：{{ contactSource==1?'正式客户列表':contactSource==2?'临时权限列表':'终止权限列表' }}</p>
      <el-table :data="existContactList" border>
        <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="CompanyName">
          <template slot-scope="{row}">
            {{row.CompanyName ? row.CompanyName: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="CreateTime">
          <template slot-scope="{row}">
            {{row.CreateTime || '-'}}
          </template>
        </el-table-column>
        <el-table-column label="邮箱地址" align="center" prop="Email">
          <template slot-scope="{row}">
            {{row.Email}}
          </template>
        </el-table-column>
      </el-table>
      <div style="text-align: center;margin: 60px 0 40px;">
        <el-button @click="showHintDia=false" style="min-width: 120px;margin-right: 6px;">取消</el-button>
        <el-button type="primary" @click="moveContact" style="min-width: 120px;padding: 12px 10px;">移动至当前用户</el-button>
      </div>
    </div>
  </el-dialog>
</div>
  
</template>

<script>

import { customInterence } from '@/api/api.js'

  export default {
    name:'ContactSaveEnDia',
    props:{
      title:{
        type:String,
        default:'标题'
      },
      showAddDia:{
        type:Boolean,
        required:true
      },
      contactsSubmitForm:{
        type:Object,
        default:()=> {}
      },
      companyId:{
        type:Number,
        required:true
      }
    },
    computed:{
      show:{
        get(){
          if(this.showAddDia && this.contactsSubmitForm.Id){
            this.submitForm={
              Id:this.contactsSubmitForm.Id,
              Name:this.contactsSubmitForm.Name,
              Email:this.contactsSubmitForm.Email,
              TelCode:this.contactsSubmitForm.CountryCode,
              Tel:this.contactsSubmitForm.Mobile,
              carte:this.contactsSubmitForm.BusinessCardUrl,
              Enabled:this.contactsSubmitForm.Enabled
            }
          }
          return this.showAddDia
        },
        set(value){
          // console.log(value);
          this.$emit('update:showAddDia',false)
        }
      },
    },
    data() {
      return {
        submitForm:{
          Id:0,
          Name:"",
          Email:"",
          TelCode:'',
          Tel:'',
          carte:'',
          Enabled:1
        },
        telCodeArr: [
          { value: '86', label: '+86' },
          { value: '852', label: "+852" },
          { value: '886', label: '+886' },
          { value: '1', label: '+1' },
          { value: '65', label: '+65' },
          { value: '62', label: '+62' },
          { value:'081',label: '+081' },
          { value:'44',label: '+44' }
        ],
        // -----------------------添加联系人提示弹窗
        showHintDia:false,
        existContactList:[],
        contactSource:''
      }
    },
    methods:{
      // 关闭弹窗
      closeAddDia(){
        this.submitForm.Id=0
        this.submitForm.Name=""
        this.submitForm.Email=""
        this.submitForm.TelCode=''
        this.submitForm.Tel=''
        this.submitForm.carte=''
        this.submitForm.Enabled=1
        this.show=false
        setTimeout(()=>{
          this.$refs.addContactsForm.clearValidate()
        },10)
      },
            
      /* 预览 */
      preview() {
        $("#img").click();
      },
      clickinput() {
        //上传模拟点击
        // debugger
        $("#fileCard").click();
      },
      // 选择文件上传
      fileSelected() {
        //选择文件上传
        if (document.getElementById("fileCard").files[0]) {
          let hostfile = document.getElementById("fileCard").files[0];
          let size = Math.floor(hostfile.size / 1024 / 1024);
          if (size > 200) {
            this.$message.error("上传文件大小不能大于200M！");
            hostfile = {};
            return false;
          }
          if (
            hostfile.name.toLowerCase().includes(".png") ||
            hostfile.name.toLowerCase().includes(".jpg") ||
            hostfile.name.toLowerCase().includes(".jpeg")
          ) {
            let form = new FormData();
            form.append("file", hostfile); //hostfile.name
            this.uploadloading = true;
            customInterence.upload(form).then((res) => {
              if (res.Ret === 200) {
                // that.$message.success( '上传成功' );
                this.submitForm.carte = res.Data.ResourceUrl;
              }
              this.uploadloading = false;
              $("#fileCard").val("");
              hostfile = {};
            });
          } else {
            this.$message.error("上传文件格式不正确！");
          }
        }
      },
      // 提交表单
      submit(){
        this.$refs.addContactsForm.validate(valid=>{
          if(valid){
            // 保存
            const params={
              Id:this.submitForm.Id,
              CompanyId:this.companyId,
              Name:this.submitForm.Name,
              Email:this.submitForm.Email,
              CountryCode:this.submitForm.TelCode,
              Mobile:this.submitForm.Tel,
              BusinessCardUrl:this.submitForm.carte,
              Enabled:this.submitForm.Enabled
            }
            customInterence.contactsSaveEn(params).then(res=>{
              if(res.Ret == 200){
                if(this.submitForm.Id==0){
                  // 新增
                  this.$emit('updateList','refresh')
                }else{
                  this.$emit('updateList','update')
                }
                this.$message.success(`${this.title}成功`)
                this.closeAddDia()
              }else if(res.Ret == 1001){
                this.existContactList = res.Data?[res.Data]:[]
                this.contactSource = res.Data.Status
                this.showHintDia=true
              }
            })
          }
        })
      }, 
      // 移动联系人 
      moveContact(){
        if(!(this.existContactList && this.existContactList.length>0)){
          return 
        }
        customInterence.contactsMoveEn({EmailId:this.existContactList[0].Id,CompanyId:this.companyId}).then(res=>{
          if(res.Ret == 200){
            this.$message.success('移动成功')
            this.$emit('updateList','refresh')
            this.showHintDia=false
            this.closeAddDia()
          }
        })
      },
    },
    created(){
    }
  }
</script>

<style lang="scss" scoped>

</style>