<template>
  <div class="box-center">
    <!-- 头 -->
    <div class="app-titel">
      <div class="titel-text">
        楼盘选择：
          <el-select v-model="houseId" placeholder="请选择">
          <el-option
            v-for="item in buildingoptions"
            :key="item.value"
            :label="item.propertyName"
            :value="item.id">
          </el-option>
        </el-select>
      </div>
      <div class="toptimeqhuan">
        <div :class="{ tophove: TimetoAhoose == 0 }" @click="tabtimetap(0)">
          今日
        </div>
        <div :class="{ tophove: TimetoAhoose == 1 }" @click="tabtimetap(1)">
          昨日
        </div>
        <div :class="{ tophove: TimetoAhoose == 2 }" @click="tabtimetap(2)">
          近一周
        </div>
      </div>
      <div style="margin-left: 26px">
        <el-date-picker
          v-model="customtime"
           @change="confirmtime()"
          type="daterange"
          range-separator="-"
          :default-time="['00:00:00', '23:59:59']"
            value-format="yyyy-MM-dd"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </div>
    </div>

       <!-- 表格 -->
    <div class="cen-tab">
        <el-table
          :data="tableData"
          stripe
          style="width: 100%">
          <el-table-column
            prop="batchId"
            label="批次号"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="name"
            label="设备号"
             align="center"
           >
            <template slot-scope="scope">
                <p>{{scope.row.deviceNoStart}}:{{scope.row.deviceNoEnd}}</p>
              </template>
          </el-table-column>
          <el-table-column
            prop="realityEquipmentCount"
            label="应收设备数量"
             align="center">
          </el-table-column>

          <el-table-column
            prop="receivableEquipmentCount"
            label="实收设备数量"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="acceptanceNum"
            label="已验收设备数量"
             align="center"
           >
          </el-table-column>
          <el-table-column
            prop="createTime"
            label="创建时间"
             align="center">
          </el-table-column>

          <el-table-column
            prop="remark"
            label="备注"
            align="center"
          >
          </el-table-column>
         <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <div style="color: #2671E2;" @click="clickbianji(scope.row)">修改</div>
            </template>
          </el-table-column>
        </el-table>
        <div style="display: flex;justify-content:flex-end;margin-top: 10px;">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage4"
              :page-sizes="[8, 16, 24, 32]"
              :page-size="4"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
            </el-pagination>
        </div>
    </div>

     <div class="app-box-san">
        <div class="zuo">
          <div class="title">
            <div class="text1">接待量（TOP10）</div>
            <div class="text2">
               <el-select style="width: 90%; margin: 0 auto;" v-model="value" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
             </div>
          </div>
         	<div class="hejisan">
            <div class="sanbox1" style="width: 35%;">
              <div class="text1-1">合计</div>
              <div class="text1-2">1</div>
            </div>
            <div  class="sanbox1" style="width: 40%;">
              <div class="text1-1">顾问</div>
              <div class="text1-2">1</div>
            </div>
            <div  class="sanbox1" style="width: 25%;">
              <div class="text1-1">人均接待量</div>
              <div class="text1-2">1</div>
            </div>
         </div>
         <div style="overflow-y:auto;height: 350px;width: 94%;margin: 0 auto;">
              <div  class="jinbox" v-for="(item,i) in ceratelist" :key='i'>
                  <div class="jinboxtit">{{item.name}}</div>
                  <div class="jinbox-box">
                      <div class="boxbaifenbi" :style="'width:'+(item.avgZxl)+'%;'"></div>
                  </div>
                  <div class="jinboxbott">{{item.avgZxl}}%</div>
              </div>
         </div>
        </div>
        <div class="you">
          <div class="title">
            <div class="text1">销讲执行率（TOP10）</div>
             <div class="text2">
               <el-select style="width: 90%; margin: 0 auto;" v-model="value" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
             </div>
          </div>
          	<div class="hejisan">
            <div class="sanbox1" style="width: 35%;">
              <div class="text1-1">合计</div>
              <div class="text1-2">1</div>
            </div>
            <div  class="sanbox1" style="width: 40%;">
              <div class="text1-1">顾问</div>
              <div class="text1-2">1</div>
            </div>
            <div  class="sanbox1" style="width: 25%;">
              <div class="text1-1">人均接待量</div>
              <div class="text1-2">1</div>
            </div>
         </div>
          <div style="overflow-y:auto;height: 350px;width: 94%;margin: 0 auto;">
              <div  class="jinbox" v-for="(item,i) in ceratelist" :key='i'>
                  <div class="jinboxtit">{{item.name}}</div>
                  <div class="jinbox-box">
                      <div class="boxbaifenbi" :style="'width:'+(item.avgZxl)+'%;'"></div>
                  </div>
                  <div class="jinboxbott">{{item.avgZxl}}%</div>
              </div>
         </div>
        </div>
    </div>

  </div>
</template>

<script>
export default {
  data() {
    return {
      houseId: "",
      buildingoptions:[],
      TimetoAhoose: 2,
      customtime: [],
      currentPage4:1,
      total:20,
      options: [{
          value: '1',
          label: '排名'
        }, {
          value: '2',
          label: '趋势'
        }],
      value:'1',
      ceratelist:[
            {name:'还是得',avgZxl:80},
             {name:'大大奥德赛',avgZxl:90},
              {name:'沙发和',avgZxl:20},
               {name:'还是得',avgZxl:10},
                {name:'还客户家客户是得',avgZxl:80},
      ],

    };
  },
  mounted() {

  },
  methods: {
    handleCurrentChange(){

    },
    handleSizeChange(){

    },
    //切换时间
    tabtimetap(index) {
      this.TimetoAhoose = index;

    },

  },
};
</script>

<style scoped="scoped" lang="scss" >
.box-center {
  width: 100%;
  padding: 15px;
  min-width: 1200px;
  padding-bottom: 100px;
}
.cen-tab{
  width: 100%;
  padding: 15px;
  background: #FFFFFF;
  margin-top: 15px;
}
.tophove {
  color: #ffffff;
  background: #2671e2;
}
.app-titel {
  width: 100%;
  height: 70px;
  background: #ffffff;
  box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.04);
  border-radius: 4px;
  display: flex;
  align-items: center;
  .titel-text {
    height: 100%;
    font-size: 18px;
    font-weight: 600;
    color: #32363d;
    line-height: 70px;
    margin-left: 30px;
  }
  .toptimeqhuan {
    width: 190px;
    height: 32px;
    background: #ffffff;
    border-radius: 4px;
    border: 1px solid #e0e0e0;
    display: flex;
    align-items: center;
    overflow: hidden;
    margin-left: 30px;
    cursor: pointer;
  }
  .toptimeqhuan div {
    flex: 1;
    text-align: center;
    line-height: 32px;
    font-size: 16px;
  }
}

.app-box-san{
  width: 100%;
  height: 400px;
  display: flex;
  margin-top: 15px;
  .zuo{
    flex: 1;
    height: 100%;
    margin-right: 15px;
    background: #FFFFFF;
    border-radius: 4px;
    .title{
      width: 100%;
      height: 55px;
      border-bottom: 1px solid #E0E0E0;
      display: flex;
      align-content: center;
      .text1{
          flex: 2;
          line-height: 55px;
          text-indent: 20px;
          font-weight: 500;
          font-size: 16px;
          color: #333333;
      }
      .text2{
        flex: 1;
        height: 55px;
        display: flex;
        align-items: center;
      }
    }
  }
  .you{
    height: 100%;
    flex: 1;
    background: #FFFFFF;
    border-radius: 4px;
    .title{
      width: 100%;
      height: 55px;
      border-bottom: 1px solid #E0E0E0;
      display: flex;
      align-content: center;
      .text1{
          flex: 2;
          line-height: 55px;
          text-indent: 20px;
          font-weight: 500;
          font-size: 16px;
          color: #333333;
      }
      .text2{
        flex: 1;
        height: 55px;
        display: flex;
        align-items: center;
      }
    }
  }
}

	.hejisan{
		width: 92%;
		margin: 0 auto;
		display: flex;
		padding-top: 10px;
		padding-bottom:10px;
		.text1-1{
			color: #666666;
		}
		.text1-2{
			color: #333333;
			margin-top: 10px;
		}
	}

// 进度条
 .jinbox {
      width: 100%;
      height: 18px;
      line-height: 18px;
      display: flex;
      font-size: 16px;
      color: #2C3542;
      margin-top: 10px;
      .jinboxtit {
            width: 14%;
            height: 18px;
            padding-right: 6px;
            white-space: nowrap;
            text-overflow:ellipsis;
            overflow: hidden;
        }
        .jinbox-box {
            width: 75%;
            height: 100%;
            border-radius: 8px;
            background: #F2F2F2;
        }
        .boxbaifenbi {
            height: 100%;
            background:#60D7A0;
            border-radius: 8px;
        }
        .boxbaifenbi2 {
            height: 100%;
            background: #5B8FF9;
        }
        .jinboxbott {
            width: 16%;
            text-indent: 50px;
        }
  }
</style>
