<!--  -->
<template>
    <div class="performance">
        <SmallNav />
        <div class="performance-content boderAndRadius">
          <div class="performance-content-top">
            <div class="performance-content-top-left">
               <el-select size="small" v-model="form.value" placeholder="请选择">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
            </div>
            <div class="performance-content-top-right">
               <el-button size="small" plain>沟通管理</el-button>
               <el-button size="small" plain>管理</el-button>
            </div>
          </div>
          <div class="performance-content-center">
              <div class="performance-content-center-item" v-for="i in 10"></div>
          </div>
          <div class="performance-content-bottom">
              <el-table
                :data="tableData"
                :header-cell-style="{background:'#F5F7FA'}"
                border
                style="width: 100%">
                <el-table-column
                  prop="date"
                  label="日期"
                  align="center"
                  width="180">
                  <template slot-scope="scope">
                    <div>
                      <div v-for="(i,index) in scope.row.date" :key="index">{{i}}</div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="name"
                  label="姓名"
                  align="center"
                  width="180">
                </el-table-column>
                <el-table-column
                  prop="address"
                  align="center"
                  label="地址">
                </el-table-column>
              </el-table>
          </div>
          <div class="performance-content-jilu">
            ss
          </div>
        </div>
    </div>
</template>

<script>
import SmallNav from '@/components/kpi-layout/SmallNav'
export default {
  data () {
    return {
      form: {},
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],
      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 弄'
      }]
    }
  },
  components: {
    SmallNav
  },
  computed: {},
  beforeMount () {},
  mounted () {},
  methods: {},
  watch: {}

}

</script>

<style lang='less' scoped>
.performance{
  overflow: auto;
  &-content{
    padding: 28px;
    margin: 10px 0;
    // height: 700px;
    // overflow: auto;
    &-top{
      border-bottom: 1px solid @borderColor;
      padding-bottom: 20px;
      margin-bottom: 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    &-center{
      display: flex;
      flex-wrap: wrap;
      margin: 20px 0;
      &-item{
        width: 20%;
        height: 20px;
        background: #09f;
        position: relative;
      }
    }
    &-jilu{

    }
  }
}
</style>
