<template>
  <div>
    <el-card class="box-card noborder">
      <div class="cardtitles">基本信息</div>
      <div class="tables">
        <el-table
          :data="tableData"
          stripe border
          style="width: 100%"
          :default-sort = "{prop: 'date', order: 'descending'}"
        >
          <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="isDisabled == false">新增联系人</div>
            </div>
          </template>
          <el-table-column
            prop="name"
            label="姓名"
            width="113">
            <template slot-scope="scope">
              {{scope.row.name || '--'}}
            </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.role || '--'}}
            </template>
          </el-table-column>
          <el-table-column
            prop="office"
            label="关联企业">
            <template slot-scope="scope">
              {{scope.row.office || '--'}}
            </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="phone"
            label="联系方式"
            width="175">
            <template slot-scope="scope">
              {{scope.row.phone || '--'}}
            </template>
          </el-table-column>
          <el-table-column
            prop="accendant"
            label="内部维护人"
            width="146">
            <template slot-scope="scope">
              {{scope.row.accendant || '--'}}
            </template>
          </el-table-column>
        </el-table>
        <div class="bottems">
          <div class="btn btn_primary h28" @click="opennew" v-if="total>0 && isDisabled == 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>{{projectname}}</span>
        </div>
        <el-form class="popform" label-width="137px">
          <el-form-item label="联系人姓名：" class="row">
            <el-input type="text" v-model="queryParam.name" 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" v-model="queryParam.role" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="关联企业：" class="row">
            <el-input type="text" v-model="queryParam.office" 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="text" v-model="queryParam.phone" placeholder="请输入"></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>
    </el-card>
  </div>
</template>

<script>
  import "@/assets/styles/project.scss"
  import {getLXR,editLXR,addLXR} from '@/api/project/project'
  export default {
    name: 'lxr',
    props: {
      detailId: { //从企业详情跳转过来ID
        type: Number,
        default: 0
      },
      isDisabled:false,
    },
    data(){
      return{
        dialogVisible:false,
        isnew:true,//是否新增
        textarea:"",
        nowedit:-1,//当前正在编辑的文本
        tipslit:[],//项目标签
        tipsvalue:"",//标签填写内容
        tableData: [],
        searchParam:{
          pageNum:1,
          pageSize:20,
          businessId:this.detailId ? this.detailId : this.$route.query.id
        },
        id:this.detailId ? this.detailId : this.$route.query.id,
        total:0,
        projectname:this.$route.query.projectname,
        queryParam:[],
        isDisabled:this.isDisabled,
      }
    },
    created(){
      this.getList()
    },
    methods:{
      getDetail(item){
        if(this.isDisabled == true){
          return this.$message.warning("您无权限进行操作")
        }

        this.dialogVisible = true
        item.sex = item.sex.toString()
        this.queryParam = item
        this.isnew = false
      },
      getList(){
        getLXR(this.searchParam).then(result=>{
          this.tableData = result.code == 200?result.rows:[]
          this.total = result.code == 200?result.total:0
        })
      },
      save(){
        let param = JSON.parse(JSON.stringify(this.queryParam))
        param.sex = parseInt(param.sex)
        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 = {
          businessId:this.id,
          name:"",
          sex:"1",
          role:"",
          office:"",
          position:"",
          phone:"",
          // accendant:"",
        }
      },
    }
  }
</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%;
}
</style>
