<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">新增联系人</div>
            </div>
          </template>
          <el-table-column
            prop="date"
            label="姓名"
            width="113">
          </el-table-column>
          <el-table-column
            prop="name"
            label="操作"
            width="118">
            <template slot-scope="scope">
              <div class="edit">
                <img src="@/assets/images/project/edit.png">
                <span>编辑</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="name"
            label="角色"
            sortable
            width="146">
          </el-table-column>
          <el-table-column
            prop="address"
            label="公司/机关">
          </el-table-column>
          <el-table-column
            prop="name"
            label="职位"
            width="125">
          </el-table-column>
          <el-table-column
            prop="name"
            label="联系方式"
            width="175">
          </el-table-column>
          <el-table-column
            prop="name"
            label="内部维护人"
            width="146">
          </el-table-column>
        </el-table>
        <div class="bottems">
          <div class="btn btn_primary h28" @click="opennew"><div class="img img1"></div>新增联系人</div>
          <el-pagination
            background
            :page-size="20"
            :current-page="1"
            @current-change="handleCurrentChange"
            layout="prev, pager, next"
            :total="1000">
          </el-pagination>
        </div>
      </div>
      <el-dialog
        class="popups"
        :visible.sync="dialogVisible"
        width="464px">
        <div class="poptitle">
          <img src="@/assets/images/economies/icon.png">
          <span>重庆市轨道交通3号线二期工程4标段施工总承包</span>
        </div>
        <el-form class="popform" label-width="137px">
          <div class="row">
            <span class="left">联系人姓名：</span>
            <el-input type="text" placeholder="请输入"></el-input>
          </div>
          <div class="row">
            <span class="left">联系人角色：</span>
            <el-select  placeholder="请选择">
              <el-option label="cccc" value="11"></el-option>
              <el-option label="cccc" value="121"></el-option>
            </el-select>
          </div>
          <div class="row">
            <span class="left">联系人职位：</span>
            <el-input type="text" placeholder="请输入"></el-input>
          </div>
          <div class="row">
            <span class="left">联系人公司/机关：</span>
            <el-input type="text" placeholder="请输入"></el-input>
          </div>
          <div class="row">
            <span class="left">内部维护人：</span>
            <el-input type="text" placeholder="请输入"></el-input>
          </div>
          <div class="row">
            <span class="left">联系方式：</span>
            <el-input type="text" placeholder="请输入"></el-input>
          </div>
          <div class="popbot">
            <div class="btn btn_cancel h32" @click="cancel">返回</div>
            <div class="btn btn_primary h32">保存</div>
          </div>
        </el-form>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
  import "@/assets/styles/project.scss"
  export default {
    name: 'lxr',
    data(){
      return{
        dialogVisible:false,
        textarea:"",
        nowedit:-1,//当前正在编辑的文本
        tipslit:[],//项目标签
        tipsvalue:"",//标签填写内容
        tableData: [
          {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }
        ]
      }
    },
    methods:{
      //翻页
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      },
      cancel(){
        this.dialogVisible = false
      },
      //打开新建窗口
      opennew(){
        this.dialogVisible = true
      },
    }
  }
</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;
}
</style>
