<template>
  <div>
    <el-card class="box-card noborder">
      <div class="cardtitles">联系人</div>

      <skeleton v-if="isSkeleton" style="padding: 16px"></skeleton>
      <div class="tables" v-else>

        <div class="empty" v-if="total==0">
          <img src="@/assets/images/project/empty.png">
          <div class="p1">暂无数据展示</div>
          <div class="p2" v-if="isDisabled==false">抱歉，你还未添加相关数据，快去添加吧</div>
          <div class="btn btn_primary h36 w102" @click="opennew" v-if="isDisableds == false">新增联系人</div>
        </div>
        <el-table class="fixed-table" v-else max-height="640"
          :data="tableData"
          stripe border
          style="width: 100%"
          :default-sort = "{prop: 'role', order: 'ascending'}"
        >
          <!--<template slot="empty">-->
            <!--<div class="empty">-->
              <!--<img src="@/assets/images/project/empty.png">-->
              <!--<div class="p1">暂无数据展示</div>-->
              <!--<div class="p2">抱歉，你还未添加相关数据，快去添加吧</div>-->
              <!--<div class="btn btn_primary h36 w102" @click="opennew" v-if="isDisableds == false">新增联系人</div>-->
            <!--</div>-->
          <!--</template>-->
          <el-table-column label="序号" width="60">
            <template slot-scope="scope">
              <span>{{(searchParam.pageNum - 1) *searchParam.pageSize + scope.$index + 1}}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="name"
            label="姓名"
            width="113">
            <template slot-scope="scope">
              <div :class="isDisabled==false?'wordprimary':''"><span @click="getDetail(scope.row)">{{scope.row.name || '--'}} </span><img v-if="isDisabled == false" @click="deltip(scope.row.id)" src="@/assets/images/delete.png"></div>
            </template>
          </el-table-column>
          <!--<el-table-column-->
            <!--prop="name"-->
            <!--label="操作"-->
            <!--width="118">-->
            <!--<template slot-scope="scope">-->
              <!--<div class="edit" @click="getDetail(scope.row)">-->
                <!--<img src="@/assets/images/project/edit.png">-->
                <!--<span>编辑</span>-->
              <!--</div>-->
            <!--</template>-->
          <!--</el-table-column>-->
          <el-table-column
            prop="role"
            label="联系人性别"
            sortable
            width="146">
            <template slot-scope="scope">
              {{scope.row.sex==0?'女':'男' || '--'}}
            </template>
          </el-table-column>
          <el-table-column
            prop="position"
            label="职位"
            width="125">
            <template slot-scope="scope">
              {{scope.row.position || '--'}}
            </template>
          </el-table-column>
          <el-table-column
            prop="role"
            label="联系人角色"
            sortable
            width="146">
            <template slot-scope="scope">
              {{scope.row.role || '--'}}
            </template>
          </el-table-column>
          <el-table-column
            prop="contactInformation"
            label="联系方式"
            width="175">
            <template slot-scope="scope">
              {{scope.row.contactInformation || '--'}}
            </template>
          </el-table-column>
          <el-table-column
            prop="companyName"
            label="关联企业">
            <template slot-scope="scope">
              <router-link :to="`/enterprise/${encodeStr(scope.row.companyId)}`" tag="a" class="a-link" v-if="scope.row.companyId&&scope.row.companyName" v-html="scope.row.companyName"></router-link>
              <div v-else v-html="scope.row.companyName  || '--'"></div>
            </template>
          </el-table-column>
          <el-table-column
            prop="updateBy"
            label="内部维护人"
            width="146">
            <template slot-scope="scope">
              {{scope.row.updateBy || '--'}}
            </template>
          </el-table-column>
          <el-table-column v-if="thistype == 'custom'"
            prop="projectName"
            label="来源"
            width="146">
            <template slot-scope="scope">
              <div v-if="scope.row.projectName && scope.row.businessId" class="wordprimary" @click="todetail(scope.row.businessId)">
                {{scope.row.projectName || '--'}}
              </div>
              <div v-else>自主填报</div>
            </template>
          </el-table-column>
        </el-table>
        <div class="bottems">
          <div class="btn btn_primary h28" @click="opennew" v-if="total>0 && isDisableds == false" ><div class="img img1" ></div>新增联系人</div>
          <el-pagination v-if="total>searchParam.pageSize"
            background
            :page-size="searchParam.pageSize"
            :current-page="searchParam.pageNum"
            @current-change="handleCurrentChange"
            layout="prev, pager, next"
            :total="total">
          </el-pagination>
        </div>
      </div>
      <el-dialog
        class="popups"
        :visible.sync="dialogVisible"
        width="464px">
        <div class="poptitle">
          <img src="@/assets/images/economies/icon.png">
          <span v-if="thistype == 'project'">{{projectname}}</span>
          <span v-if="thistype == 'custom'">{{companyName}}</span>
        </div>
        <el-form class="popform" :model="queryParam" ref="ruleForm" label-width="137px" :rules="rules" >
          <el-form-item label="联系人姓名：" class="row" prop="name">
            <el-input type="text" v-model="queryParam.name" :οnkeyup="queryParam.name=queryParam.name.replace(/^\s+|\s+$/g,'')" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="联系人性别：" class="row">
            <el-radio-group v-model="queryParam.sex">
              <el-radio label=1>男</el-radio>
              <el-radio label=0>女</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="联系方式：" class="row">
            <el-input type="text" maxlength="11" @input="inputphone"  v-model="queryParam.contactInformation" placeholder="请输入"></el-input>
          </el-form-item>
          <!--<el-form-item label="关联企业：" class="row" v-if="thistype == 'project'">-->
          <el-form-item label="关联企业：" class="row">
            <el-input type="text" v-model="queryParam.companyName" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="联系人角色：" class="row">
            <el-input type="text" v-model="queryParam.role" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="联系人职位：" class="row">
            <el-input type="text" v-model="queryParam.position" placeholder="请输入"></el-input>
          </el-form-item>
          <!--<el-form-item label="内部维护人：" class="row">-->
            <!--<el-input type="text" v-model="queryParam.accendant" placeholder="请输入"></el-input>-->
          <!--</el-form-item>-->
          <el-form-item label="备注：" class="row">
            <el-input
              type="textarea"
              maxlength="200"
              :rows="2"
              show-word-limit
              placeholder="请输入"
              v-model="queryParam.remark">
            </el-input>
          </el-form-item>
          <div class="popbot">
            <div class="btn btn_cancel h32" @click="cancel">返回</div>
            <div class="btn btn_primary h32" @click="save">保存</div>
          </div>
        </el-form>
      </el-dialog>

      <div class="delform" v-if="isdel">
        <div class="words">是否删除联系人</div>
        <div>
          <div class="btnsmall btn_primary h28" @click="deletes">确定</div>
          <div class="btnsmall btn_cancel h28" @click="isdel=false">取消</div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
  import "@/assets/styles/project.scss"
  import {getLXR,editLXR,addLXR,delLXR} from '@/api/project/project'
  import skeleton from './skeleton'
  import {encodeStr} from "@/assets/js/common.js"
  export default {
    components:{skeleton},
    name: 'lxr',
    props: {
      detailId: { //从项目详情跳转过来ID
        type: Number,
        default: 0
      },
      customerId:'',//客户列表跳转过来ID
      isDisabled:false,
      listtype:'',//project项目详情  custom客户列表
      customname:'',//企业名称
    },
    data(){
      return{
        encodeStr,
        isdel:false,
        thistype:this.listtype,
        rules:{
          name:[{ required: true, message: '请输入非空格字符！', trigger: 'blur' },],
        },
        dialogVisible:false,
        isnew:true,//是否新增
        textarea:"",
        nowedit:-1,//当前正在编辑的文本
        tipslit:[],//项目标签
        tipsvalue:"",//标签填写内容
        tableData: [],
        searchParam:{
          pageNum:1,
          pageSize:20,
        },
        total:0,
        projectname:this.$route.query.projectname,
        companyName:this.customname,
        queryParam:{
          name:'',
        },
        isDisableds:this.isDisabled,
        isSkeleton:true,
        delid:null,
      }
    },
    created(){

      if(this.thistype == 'project'){
        this.searchParam.businessId = this.detailId ? this.detailId : this.$route.query.id
      }
      if(this.thistype == 'custom'){
        this.searchParam.customerId = this.customerId ? this.customerId : null
      }
      this.getList()

    },
    methods:{
      inputphone(){
        this.queryParam.contactInformation=this.queryParam.contactInformation.replace(/\D/g,'')
      },
      todetail(id){
        this.$router.push({ path: '/project/projectList/detail', query: {id:id,tag:'xmsl'} });
      },
      deltip(id){
        this.delid = id
        this.isdel = true
      },
      deletes(){
        delLXR(this.delid).then(res=>{
          if(res.code == 200){
            this.$message.success('删除成功！')
            this.handleCurrentChange(1)
            this.isdel = false
          }
        })
      },
      getDetail(item){
        if(this.isDisableds == true){
          return this.$message.warning("您无权限进行操作")
        }

        this.dialogVisible = true
        item.sex = item.sex.toString()
        this.queryParam = JSON.parse(JSON.stringify(item))
        this.isnew = false
      },
      getList(){
        this.isSkeleton = true
        getLXR(this.searchParam).then(result=>{
          this.isSkeleton = false
          this.tableData = result.code == 200?result.rows:[]
          this.total = result.code == 200?result.total:0
          // console.log(this.tableData)
        })
      },
      save(){
        this.$refs['ruleForm'].validate((valid) => {
          if (valid) {
            let param = JSON.parse(JSON.stringify(this.queryParam))
            param.sex = parseInt(param.sex)
            if (!this.queryParam.contactInformation) {
              this.$message.error('请输入电话号码')
              return false
            }
            var regPartton = /1[3-9]+\d{9}/;
            var regPartton1 = /0\d{2,3}-\d{7,8}|\(?0\d{2,3}[)-]?\d{7,8}|\(?0\d{2,3}[)-]*\d{7,8}/;
            if (!regPartton.test(this.queryParam.contactInformation) && !regPartton1.test(this.queryParam.contactInformation)) {
              this.$message.error("请输入正确的电话");
              return false
            }
            if (this.isnew == false) {
              editLXR(param).then(result => {
                if (result.code == 200) {
                  this.$message.success('保存成功！')
                  this.getList()
                  this.dialogVisible = false
                }
              })
            }
            if (this.isnew == true) {
              addLXR(param).then(result => {
                if (result.code == 200) {
                  this.$message.success('新增成功！')
                  this.getList()
                  this.dialogVisible = false
                }
              })
            }
          }
        })
      },
      //翻页
      handleCurrentChange(val) {
        this.searchParam.pageNum = val
        this.getList()
      },
      cancel(){
        this.dialogVisible = false
      },
      //打开新建窗口
      opennew(){
        this.dialogVisible = true
        this.isnew = true
        this.queryParam = {
          name:"",
          sex:"1",
          role:"",
          position:"",
          contactInformation:"",
          remark:"",
          companyName:"",
          // accendant:"",
        }
        if(this.thistype == 'project'){
          this.queryParam.businessId = this.searchParam.businessId
          this.companyName = ""
          this.queryParam.companyName=this.$route.query.projectname
        }
        if(this.thistype == 'custom'){
          this.queryParam.customerId = this.searchParam.customerId
          this.queryParam.companyName=this.customname
        }
      },
    }
  }
</script>

<style lang="scss" scoped>
.w102{
  width: 102px;
}

.popups .popform .popbot{padding-right: 47px;}
.img.img1{
  margin-right: 8px;
  background: url('../../../../../src/assets/images/project/add_2.png')no-repeat center center;
  background-size: 100%;
}
  .wordprimary{
    img{
      display: none;
      height: 20px;
      position: absolute;
      margin-left: 10px;
    }
    &:hover{
      img{
        display: inline-block;
      }
    }
  }
.delform{
  position: fixed;
  left: 50%;
  top: 50%;
  margin-left: -100px;
  margin-top: -57px;
}
</style>
