<template>
  <div class="box-center">
    <!-- 头 -->
    <div class="app-top">
      <div class="app-titel">
        <div class="titel-text">楼盘选择：</div>
        <div style="margin-left: 26px">
          <el-select 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="app-titel" style="margin-top: 10px">
        <div class="titel-text">接待时间</div>
        <div class="toptimeqhuan">
          <div :class="{ tophove: timeType == 4 }" @click="tabtimetap(4)">
            近7天
          </div>
          <div :class="{ tophove: timeType == 5 }" @click="tabtimetap(5)">
            近15天
          </div>
          <div :class="{ tophove: timeType == 6 }" @click="tabtimetap(6)">
            近30天
          </div>
        </div>
        <div style="margin-left: 26px">
          <el-date-picker
            @change="confirmtime"
            v-model="customtime"
            type="daterange"
            range-separator="-"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
          >
          </el-date-picker>
        </div>
        <div style="margin-left: 26px">
          <el-checkbox v-model="checked">对比时间段</el-checkbox>
        </div>
        <div style="margin-left: 26px">
          <div v-if="checked">
            <div class="demonstration timeSel" @click="show">
              {{ selectTime1 ? "时段二： " : "请选择： "
              }}<span v-if="selectTime1">{{
                selectTime + "-" + selectTime1
              }}</span>
            </div>
            <el-date-picker
              style="opacity: 0"
              v-model="time"
              @change="timeChange"
              ref="time"
              type="date"
              placeholder="选择日期"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              :picker-options="pickerOptions"
            >
            </el-date-picker>
          </div>
        </div>
      </div>
    </div>
    <!-- //卡片 -->
    <div class="kapian-box">
      <div class="kayi">
        <div class="shang">
          <div class="zuo">
            <div class="text1">接待量</div>
            <div class="text2">2</div>
          </div>
          <div class="you">
            <img class="youimg" src="/img/waves1.png" alt="" />
          </div>
        </div>
        <div class="xia">
          <span class="span1">对比:78</span>
          <span class="span2">50%</span>
        </div>
      </div>
      <div class="kayi">
        <div class="shang">
          <div class="zuo">
            <div class="text1">录音时长</div>
            <div class="text2">2</div>
          </div>
          <div class="you">
            <img class="youimg" src="/img/waves2.png" alt="" />
          </div>
        </div>
        <div class="xia">
          <span class="span1">对比:78</span>
          <span class="span2">50%</span>
        </div>
      </div>
      <div class="kayi" style="margin: 0px">
        <div class="shang">
          <div class="zuo">
            <div class="text1">平均执行率</div>
            <div class="text2">2</div>
          </div>
          <div class="you">
            <img class="youimg" src="/img/waves3.png" alt="" />
          </div>
        </div>
        <div class="xia">
          <span class="span1">对比:78</span>
          <span class="span2">50%</span>
        </div>
      </div>
    </div>

    <!-- 图表 -->
    <div class="app-box-er">
      <div class="titletab">
        <div :class="{ claindex: aliasclass == 1 }">项目</div>
        <div :class="{ claindex: aliasclass == 2 }">团队</div>
        <div :class="{ claindex: aliasclass == 3 }">顾问</div>
        <div :class="{ claindex: aliasclass == 4 }">销讲一级</div>
        <div :class="{ claindex: aliasclass == 5 }">销讲二级</div>
      </div>
      <div
        style="
          display: flex;
          justify-content: center;
          align-items: center;
          margin-top: 26px;
        "
      >
        <el-select v-model="value" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-select
          v-model="value"
          placeholder="请选择"
          style="margin-left: 15px"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div id="main"></div>
    </div>

    <!-- 表格 -->
    <div class="app-box-san">
      <div class="santitle">对比报表</div>
      <div class="santab">
        <el-table :data="tableData" height="400" border style="width: 100%">
          <el-table-column prop="date" label="时间" align="center">
          </el-table-column>
          <el-table-column prop="name" label="时段1" align="center">
          </el-table-column>
          <el-table-column prop="address" label="时段2" align="center">
          </el-table-column>
          <el-table-column prop="address" label="变化" align="center">
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      timeType: 4,
      time: "",
      customtime: [],
      page: {
        pageNum: 1,
        pageSize: 6,
        openTime: "",
        closeTime: "",
        houseName: "",
        accountName: "",
        imei: "",
        total: "",
        recording: "",
      },
      pickerOptions: {
        disabledDate(time) {
          //根据当前日期 --- 禁止选中之后的日期
          return time.getTime() > Date.now();
        },
      },
      selectTime1: "",
      selectTime: "",
      aliasclass: 1,
      fromobj: {
        starttime: "",
        endoftime: "",
      },
      houseId: "",
      options: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
      ],
      value: "",
      checked: false,
      value1: "99999999999999",
      tableData: [
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-08",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-06",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-07",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
      ],
    };
  },
  mounted() {
    this.SwitchCARDS();
  },
  methods: {
    tabtimetap(i) {
      this.timeType = i;
      // this.getTableList()
      this.checked = false;
      this.selectTime = "";
      this.selectTime1 = "";
      //给时间选择器赋值
      let num = 24 * 3600 * 1000;
      //	获取当前时间戳转换为日期格式
      if (this.timeType == 4) {
        num = 24 * 3600 * 1000 * 6;
      }
      if (this.timeType == 5) {
        num = 24 * 3600 * 1000 * 14;
      }
      if (this.timeType == 6) {
        num = 24 * 3600 * 1000 * 29;
      }

      this.customtime = [
        this.timestampToTime(new Date().getTime() - num),
        this.timestampToTime(new Date().getTime()),
      ];
      this.$set(this, "time", null);
      // this.getTableList();
      // this.getdetail();
    },
    show() {
      this.$refs.time.pickerVisible = true;
    },
    timeChange(e) {
      // console.log(e)
      // this.selectTime=e
      //	对数据进行处理
      //	当当前选择的为自定义时间时
      this.selectTime = "";
      this.selectTime1 = "";
      this.timeSelect(e);
      // this.getdetail();
      // this.getcompare();
    },
    timeSelect(e) {
      console.log(this.$refs.time);
      if (this.timeType == -1) {
        //	将两者的时间戳相减，然后在在选择的自定义时间的时间戳想加
        // 	console.log(e,this.page.openTime,this.page.closeTime)
        // console.log(new Date(e).getTime(),new Date(this.page.openTime).getTime(),new Date(this.page.closeTime).getTime(),'时间戳')
        // console.log(this.timestampToTime(new Date(e).getTime()+new Date(this.page.closeTime).getTime()-new Date(this.page.openTime).getTime()))
        this.selectTime = e;
        this.selectTime1 = this.timestampToTime(
          new Date(e).getTime() +
            new Date(this.page.closeTime).getTime() -
            new Date(this.page.openTime).getTime()
        );
      } else {
        //	获取今天昨天近一周
        //	获取一天的时间戳
        let num = 24 * 3600 * 1000;
        //	获取当前时间戳转换为日期格式
        if (this.timeType == 4) {
          num = 24 * 3600 * 1000 * 6;
        }
        if (this.timeType == 5) {
          num = 24 * 3600 * 1000 * 14;
        }
        if (this.timeType == 6) {
          num = 24 * 3600 * 1000 * 29;
        }
        // 	console.log(-this.timeType*num)
        // 	this.selectTime=this.timestampToTime(new Date().getTime()-this.timeType*num)
        this.selectTime = e;
        this.selectTime1 = this.timestampToTime(new Date(e).getTime() + num);
      }
    },
    confirmtime(e) {
      this.timeType = "-1";
      // if(this.customtime==''){ }else{
      // 	const d = new Date(this.customtime[0])
      // 	this.page.openTime = d.getFullYear() + '-' + this.Zeropadding((d.getMonth() + 1)) + '-' + this.Zeropadding(d.getDate())
      // 	const c = new Date(this.customtime[1])
      // 	this.page.closeTime = c.getFullYear() + '-' + this.Zeropadding((c.getMonth() + 1)) + '-' + this.Zeropadding(c.getDate())
      // }
      this.checked = false;
      this.selectTime = "";
      this.selectTime1 = "";
      this.$set(this, "time", null);
      console.log(e);
      if (!e) return;
      this.page.openTime = this.customtime[0];
      this.page.closeTime = this.customtime[1];
      // this.getTableList()
      // this.getdetail()
    },
    timestampToTime(timestamp) {
      var date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      // var  date = new Date(timestamp * 1000);//时间戳为10位需*1000，时间戳为13位的话不需乘1000

      var yyyy = date.getFullYear() + "-";

      var MM =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";

      // var dd = date.getDate() + ' ';
      var dd =
        (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " ";

      // var HH = date.getHours() + ':';
      // var HH = (date.getHours() < 10 ? '0'+(date.getHours()) : date.getHours()) + ':';
      //
      // // var mm = date.getMinutes() + ':';
      // var mm = (date.getMinutes() < 10 ? '0'+(date.getMinutes()) : date.getMinutes()) + ':';
      //
      // // var ss = date.getSeconds();
      // var ss = (date.getSeconds() < 10 ? '0'+(date.getSeconds()) : date.getSeconds());

      // return yyyy+MM+dd+HH+mm+ss;
      return yyyy + MM + dd;
    },
    SwitchCARDS() {
      var chartDom = document.getElementById("main");
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["来访人数/个"],
          bottom: "10",
        },
        grid: {
          left: 10,
          right: 10,

          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
          axisLabel: {
            //重点在这一块，其余可以忽略
            textStyle: {
              color: "#212121", //更改坐标轴文字颜色
            },
          },
          axisLine: {
            lineStyle: {
              type: "solid",
              color: "#DDE1EE", //x线的颜色
              width: "1", //坐标线的宽度
            },
          },
        },
        yAxis: {
          type: "value",
          splitNumber: 4,
          axisLabel: {
            //重点在这一块，其余可以忽略
            textStyle: {
              color: "#212121", //更改坐标轴文字颜色
            },
          },
          axisLine: {
            lineStyle: {
              ype: "solid",
              color: "#DDE1EE", //x线的颜色
              width: "1", //坐标线的宽度
            },
          },
          splitLine: {
            lineStyle: {
              type: "dashed", // y轴分割线类型
            },
          },
          axisTick: {
            //y轴刻度线
            show: false,
          },
        },
        series: [
          {
            name: "来访人数/个",
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: "line",
            smooth: true,
          },
        ],
      };

      option && myChart.setOption(option);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
  },
};
</script>

<style scoped="scoped" lang="scss" >
.box-center {
  width: 100%;
  padding: 15px;
  min-width: 1200px;
  padding-bottom: 100px;
}

#main {
  width: 100%;
  height: 380px;
}

.app-box-san {
  width: 100%;
  background: #ffffff;
  box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.04);
  border-radius: 4px;
  margin-top: 15px;
  padding-bottom: 15px;
  .santitle {
    width: 100%;
    height: 50px;
    line-height: 50px;
    border-bottom: 1px solid #e0e0e0;
    font-size: 16px;
    color: #333333;
    font-weight: 500;
    text-indent: 15px;
  }
  .santab {
    width: 100%;
    height: 400px;
    padding: 15px;
  }
}
.app-box-er {
  width: 100%;
  background: #ffffff;
  box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.04);
  border-radius: 4px;
  margin-top: 15px;
  padding: 15px;
  .titletab {
    width: 100%;
    height: 42px;
    display: flex;
    // border: 1px solid red;
  }
  .titletab div {
    width: 130px;
    height: 42px;
    line-height: 42px;
    text-align: center;
    border: 1px solid #e0e0e0;
    font-size: 14px;
  }
  .claindex {
    background: #2671e2;
    color: #ffffff;
    border: none;
  }
}

.kapian-box {
  width: 100%;
  height: 144px;
  margin-top: 15px;
  display: flex;
  .kayi {
    flex: 1;
    margin-right: 15px;
    height: 144px;
    background: #ffffff;
    border-radius: 4px;
    .shang {
      width: 100%;
      display: flex;
      .zuo {
        flex: 1;
        .text1 {
          font-size: 16px;
          font-weight: 400;
          color: #666666;
          margin-left: 30px;
          margin-top: 24px;
        }
        .text2 {
          font-size: 32px;
          font-weight: normal;
          color: #32363d;
          margin-left: 30px;
          margin-top: 18px;
        }
      }
      .you {
        flex: 2;
        display: flex;
        align-items: center;
        .youimg {
          width: 90%;
          height: 60px;
        }
      }
    }
    .xia {
      width: 100%;
      font-size: 14px;
      text-indent: 30px;
      margin-top: 10px;
      .span1 {
        color: #333333;
        font-weight: 400;
      }
      .span2 {
        color: #e6273a;
        font-weight: 400;
        margin-left: 16px;
      }
    }
  }
}

.tophove {
  color: #ffffff;
  background: #2671e2;
}
.app-top {
  width: 100%;
  background: #ffffff;
  box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.04);
  border-radius: 4px;
  padding-top: 15px;
  padding-bottom: 15px;
}
.app-titel {
  width: 100%;
  display: flex;
  align-items: center;
  .titel-text {
    height: 100%;
    font-size: 16px;
    font-weight: 600;
    color: #32363d;
    text-indent: 30px;
  }
  .toptimeqhuan {
    width: 190px;
    height: 32px;
    background: #ffffff;
    border-radius: 4px;
    border: 1px solid #e0e0e0;
    display: flex;
    align-items: center;
    overflow: hidden;
    margin-left: 20px;
    cursor: pointer;
  }
  .toptimeqhuan div {
    flex: 1;
    text-align: center;
    line-height: 32px;
    font-size: 14px;
  }
}
.timeSel {
  margin-top: 8px;
  margin-left: 20px;
  border: 1px solid #ccc;
  padding: 0 5px;
  cursor: pointer;
  color: #606266;
}
</style>
