<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>
    <div class="app-titel">
      <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 style="margin-left: 26px" class="div-lab">
        <div class="label">员工</div>
        <el-select v-model="value" placeholder="请选择" class="div-inp">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div style="margin-left: 26px" class="div-lab">
        <div class="label">对比</div>
        <el-select v-model="value" placeholder="请选择" class="div-inp">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
    </div>

    <div class="app-box-san">
      <div class="zuo">
        <div class="title">
          <div class="text1">接待量（TOP10）</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>
        <div
          style="overflow-y: auto; height: 350px; width: 94%;  margin: 0 auto"
        >
        <div id="echar" style="height:300px;"></div>
        </div>
      </div>
      <div class="zuo">
        <div class="title">
          <div class="text1">销讲能雷达图（TOP10）</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>
        <div
          style="overflow-y: auto; height: 350px; width: 94%; margin: 0 auto"
        >
        <div id="echar1" style="height:250px;"></div>
        </div>
      </div>
    </div>

    <!-- 表格 -->
    <div class="cen-tab">
      <div class="app-titel">
        <div class="toptimeqhuan">
          <div :class="{ tophove: tabFlag == 0 }" @click="tabFlagChange(0)">
            销讲统计
          </div>
          <div :class="{ tophove: tabFlag == 1 }" @click="tabFlagChange(1)">
            违禁统计
          </div>
        </div>
      </div>
      <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">
        </el-table-column>
        <el-table-column
          v-if="tabFlag == 1"
          prop="realityEquipmentCount"
          label="违禁次数"
          align="center"
        >
        </el-table-column>
        <el-table-column
          v-if="tabFlag == 1"
          prop="receivableEquipmentCount"
          label="违禁占比"
          align="center"
        >
        </el-table-column>
        <el-table-column
          v-if="tabFlag == 0"
          prop="realityEquipmentCount"
          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"> </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>
</template>

<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      houseId: "",
      buildingoptions: [],
      TimetoAhoose: 2,
      tabFlag: 1,
      customtime: [],
      tableData: [],
      currentPage4: 1,
      total: 20,
      options: [
        {
          value: "1",
          label: "排名",
        },
        {
          value: "2",
          label: "趋势",
        },
      ],
      echarList: {},
      value: "1",
      ceratelist: [
        { name: "还是得", avgZxl: 80 },
        { name: "大大奥德赛", avgZxl: 90 },
        { name: "沙发和", avgZxl: 20 },
        { name: "还是得", avgZxl: 10 },
        { name: "还客户家客户是得", avgZxl: 80 },
      ],
    };
  },
  mounted() {
    this.echarCreat();
    this.creatRadar();
  },
  methods: {
    echarCreat() {
      let myChart = echarts.init(document.getElementById("echar"));
      let option = {
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        legend: {
          data: ["line", "line1"],
        },
        series: [
          {
            data: [150, 230, 224, 218, 135, 147, 260],
            type: "line",
            name: "line",
          },
          {
            data: [10, 20, 24, 28, 13, 17, 20],
            type: "line",
            name: "line1",
          },
        ],
      };
       myChart.setOption(option);
    },
    creatRadar() {
      let myChart = echarts.init(document.getElementById("echar1"));
      let option = {
        legend: {
          data: ["Allocate", "Actua"],
        },
        radar: {
          // shape: 'circle',
          indicator: [
            { name: "Sales", max: 6500 },
            { name: "Administration", max: 16000 },
            { name: "Information Technology", max: 30000 },
            { name: "Customer Support", max: 38000 },
            { name: "Development", max: 52000 },
            { name: "Marketing", max: 25000 },
          ],
        },
        series: [
          {
            name: "Budget vs spending",
            type: "radar",
            data: [
              {
                value: [4200, 3000, 20000, 35000, 50000, 18000],
                name: "Allocate",
              },
              {
                value: [5000, 14000, 28000, 26000, 42000, 21000],
                name: "Actua",
              },
            ],
          },
        ],
      };
       myChart.setOption(option);
    },
    handleCurrentChange() {},
    handleSizeChange() {},
    //切换时间
    tabtimetap(index) {
      this.TimetoAhoose = index;
    },
    tabFlagChange(idx) {
      this.tabFlag = idx;
    },
  },
};
</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;
  }
}
.div-lab {
  display: flex;
  margin: 5px;
}
.div-inp {
  width: 200px;
}
.label {
  font-size: 14px;
  font-weight: 400;
  color: #32363d;
  line-height: 32px;
  margin-left: 15px;
  min-width: 40px;
}
</style>
