<template>
  <div class="box-center">
    <!-- 头 -->
    <div class="app-top" v-if="orgType != 2">
      <div class="app-titel" style="margin-left: 15px">
        <el-select
          v-model="houseTypes"
          @change="sysChange"
          style="width: 100px; margin-right: 10px"
          placeholder="请选择"
        >
          <el-option
            v-for="item in options2"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-select
          v-model="selValue"
          @change="selChange"
          style="width: 100px"
          placeholder="请选择"
        >
        <el-option label="全部" v-if="orgType == 0" value="-1"></el-option>
          <el-option label="代理商" v-if="orgType == 0" value="0"></el-option>
          <el-option label="公司" value="1"></el-option>
        </el-select>
        <div style="margin-left: 26px" v-if="selValue == 1">
          <el-select
            v-model="choicValue"
            @change="valuechange"
            placeholder="默认为全部"
            clearable
            filterable
          >
            <el-option
              v-for="item in houseList"
              :key="item.orgCode"
              :label="item.name"
              :value="item.orgCode"
            >
            </el-option>
          </el-select>
        </div>
        <div style="margin-left: 26px" v-if="selValue == 0">
          <el-select
            v-model="choicValue"
            @change="valuechange"
            clearable
            filterable
            placeholder="默认为全部"
          >
            <el-option
              v-for="item in houseList"
              :key="item.id"
              :label="item.agentName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </div>
      </div>
    </div>

    <div class="app-box-er">
      <div class="container1">
        <div class="grid-content">
          <div class="text1">服务期内楼盘数</div>
          <div class="text2">
            {{ firstTab.houseQofEnough || 0 }}
          </div>
        </div>
        <div class="grid-content">
          <div class="text1">过期楼盘数</div>
          <div class="text2">
            {{ firstTab.houseQofUnenough || 0 }}
          </div>
        </div>
        <div class="grid-content">
          <div class="text1">累计楼盘数</div>
          <div class="text2">
            {{ firstTab.houseQuantity || 0 }}
          </div>
        </div>
      </div>
      <!-- <div id="main"></div> -->
    </div>

    <div class="app-box-er">
      <div class="app-titel" style="margin-bottom: 10px">
        <div class="titel-text" style="text-indent: 0;min-width:64px;">楼盘趋势</div>
        <div class="toptimeqhuan">
          <div :class="{ tophove: dateType == 4 }" @click="tabtimetap(4)">
            近7天
          </div>
          <div :class="{ tophove: dateType == 5 }" @click="tabtimetap(5)">
            近15天
          </div>
          <div :class="{ tophove: dateType == 6 }" @click="tabtimetap(6)">
            近30天
          </div>
        </div>
        <div style="margin-left: 20px;">
          <el-date-picker
            @change="confirmtime"
            v-model="customtime"
            :clearable="false"
            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: 20px">
          <el-checkbox v-model="checked" @change="radioChange"
            >对比时间段</el-checkbox
          >
        </div>
        <div
          v-if="checked"
          style="
            margin-left: 20px;
            border: 1px solid #dcdfe6;
            min-width: 220px;
            height: 30px;
            border-radius: 4px;
            max-width: 360px;
            font-size: 13px;
            line-height: 30px;
            text-indent: 8px;
            cursor: pointer;
          "
          @click="show"
        >
          <!-- {{ selectTime1 ? "时段二： " : "请选择： " }}
          <span v-if="selectTime1">{{ selectTime + "-" + selectTime1 }}</span> -->
          <div style="display: flex">
            <div style="min-width: 60px">
              {{ selectTime1 ? "时段二： " : "请选择： " }}
            </div>
            <div v-if="selectTime1" style="display: flex">
              <!-- {{ selectTime+ "-" + selectTime1}} -->
              <div style="min-width: 120px; text-align: center">
                {{ selectTime }}
              </div>
              <span>-</span>
              <div
                style="min-width: 120px; text-align: center; margin-right: 32px"
              >
                {{ selectTime1 }}
              </div>
            </div>
          </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 class="container">
        <div
          class="grid-content"
          @click="secondChange('1')"
          style="height: auto; padding-bottom: 10px; cursor: pointer"
        >
          <div class="text1" :class="{ tophovese: secindex == 1 }">
            活跃楼盘数
          </div>
          <div class="text2" :class="{ tophovese: secindex == 1 }">
            {{ compare.activeHouseQuantity || 0 }}
          </div>
          <div class="text33" v-if="selectTime1">
            <div>
              对比时段:
              <span style="text-indent: 20px">{{
                compare1.activeHouseQuantity || 0
              }}</span>
            </div>
            <div
              :style="
                compare2.activeHouseQuantity >= 0
                  ? 'color:green;'
                  : 'color:red;'
              "
            >
              {{ compare2.activeHouseQuantity || 0 }}
            </div>
          </div>
        </div>
      </div>
      <div id="main"></div>
    </div>

    <div class="app-box-er" v-if="selectTime1">
      <template>
        <el-table :data="tableData" style="width: 100%" height="320">
          <el-table-column prop="time" label="时间" align="center">
          </el-table-column>
          <el-table-column prop="data1" label="时段一" align="center">
          </el-table-column>
          <el-table-column prop="data2" label="时段二" align="center">
          </el-table-column>
          <el-table-column prop="data3" label="变化" align="center">
            <template slot-scope="scope">
              <span
                :style="scope.row.data3 >= 0 ? 'color:green;' : 'color:red;'"
                >{{ scope.row.data3 }}</span
              >
            </template>
          </el-table-column>
        </el-table>
      </template>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { getStore, setStore } from "@/util/store";
export default {
  data() {
    return {
      pickerOptions: {
        disabledDate(time) {
          //根据当前日期 --- 禁止选中之后的日期
          // return time.getTime() > Date.now();
        },
      },
      firstTab: {},
      tableData: [],
      secondTab: {},
      thirdTab: {},
      selValue: localStorage.getItem("orgType") == 0 ? "0" : "1",
      checked: false,
      selectTime1: "", //对比时间
      selectTime: "", //对比时间
      choicValue:
        localStorage.getItem("orgType") == 2
          ? localStorage.getItem("orgCode")
          : "",
      orgType: localStorage.getItem("orgType"),
      houseList: [],
      secindex: "1",
      dateType: 4,
      compare: {},
      compare1: {},
      compare2: {},
      time: [],
      customtime: [],
      Confirmthecontrast: false,
      cardindex: "1",
      options: [
        {
          label: "代理商",
          value: "0",
        },
        {
          label: "公司",
          value: "1",
        },
      ],
      houseTypes: "0,1",
      options2: [
        {
          label: "正式数据",
          value: "0,1",
        },
        {
          label: "测试数据",
          value: "2,3",
        },
      ],
      operaFlag:true,
      info:{},
    };
  },
  mounted() {
    // 获取用户信息
    this.info = getStore({ name: "userInfo" });
    // 当他系统后台时
    if (localStorage.getItem("orgType") == 0 && this.info.userRoleType == 1) {
      console.log("有全部");
      // this.options.push({
      //   label: "全部",
      //   value: "-1",
      // });
      this.selValue = "-1";
      // this.operaFlag = false;
    } else {
      // this.operaFlag = true;
    }
    this.getList();
    this.tabtimetap(4);
  },
  methods: {
    sysChange() {
      this.choicValue=''
      if(this.orgType==0){
        this.selValue='0'
      }else{
        this.selValue='1'
      }
      this.getList();
      // this.houseDataAll();
      // this.houseTrends();
    },
    // 获取tab一
    houseDataAll() {
      this.$api.api
        .houseDataAll({
          // agentId: this.selValue == 0 ? this.choicValue : null,
          agentId:
            this.orgType == 0
              ? this.selValue == 0
                ? this.choicValue
                : null
              : localStorage.getItem("agentId"),
          orgCode: this.selValue == 1 ? this.choicValue : null,
          orgType: localStorage.getItem("orgType"),
          houseTypes: this.houseTypes,
          queryOrgType:this.selValue/1+1,
        })
        .then((res) => {
          this.firstTab = res.data;
        });
    },
    // 获取tab2
    houseTrends() {
      console.log(this.time);
      this.$api.api
        .houseTrends({
          startDate: this.dateType ? "" : this.customtime[0],
          endDate: this.dateType ? "" : this.customtime[1],
          contrastStartDate: this.selectTime,
          contrastEndDate: this.selectTime1,
          dateType: this.dateType,
          // agentId: this.selValue == 0 ? this.choicValue : null,
          agentId:
            this.orgType == 0
              ? this.selValue == 0
                ? this.choicValue
                : null
              : localStorage.getItem("agentId"),
          orgCode: this.selValue == 1 ? this.choicValue : null,
          orgType: localStorage.getItem("orgType"),
          houseTypes: this.houseTypes,
          queryOrgType:this.selValue/1+1,
        })
        .then((res) => {
          // 数据处理
          // 判断是否选择了对比
          this.compare = res.data.firstData;

          if (this.selectTime1) {
            console.log("4444");
            // 有对比
            this.compare1 = res.data.secondData;
            // 将得到的三者的数据进行组装为一个数组
            this.compare2 = res.data.thirdData;
          } else {
            this.compare1 = [];
            this.compare2 = [];
          }
          this.getChars(1);
        });
    },
    getChars(idx) {
      if (!this.selectTime1) {
        let Strname = [];
        let timeDate = [];
        let arr1 = [];
        // 判断是第几个然后对数据进行渲染
        // 先处理时间
        if (idx == 1) {
          Strname = ["活跃楼盘数"];
          this.compare.activeHouseQuantityList.map((item) => {
            timeDate.push(item.time.substring(5, 10));
            arr1.push(item.data);
          });
        } else if (idx == 2) {
          Strname = ["服务期内楼盘数"];
          this.compare.houseQofEnoughList.map((item) => {
            timeDate.push(item.time.substring(5, 10));
            arr1.push(item.data);
          });
        }
        let arr = [
          {
            name: Strname[0],
            data: arr1,
            type: "line",
            smooth: true,
          },
        ];
        this.SwitchCARDS(arr, "main", timeDate, Strname);
      } else {
        let Strname = ["时段一", "时段二"];
        let timeDate = [];
        // 判断是第几个然后对数据进行渲染
        // 先处理时间
        let arr1 = [];
        let arr2 = [];
        let arr3 = [];
        if (idx == 1) {
          this.compare.activeHouseQuantityList.map((item, idx) => {
            timeDate.push(
              item.time.substring(5, 10) +
                "VS" +
                this.compare1.activeHouseQuantityList[idx].time.substring(5, 10)
            );
            arr1.push(item.data);
          });
          this.compare1.activeHouseQuantityList.map((item) => {
            arr2.push(item.data);
          });
          this.compare2.contrastList2.map((item) => {
            arr3.push(item);
          });
        } else if (idx == 2) {
          this.compare.houseQofEnoughList.map((item, idx) => {
            timeDate.push(
              item.time.substring(5, 10) +
                "VS" +
                this.compare1.houseQofEnoughList[idx].time.substring(5, 10)
            );
            arr1.push(item.data);
          });
          this.compare1.houseQofEnoughList.map((item) => {
            arr2.push(item.data);
          });
          this.compare2.contrastList2.map((item) => {
            arr3.push(item);
          });
        }
        let arr = [
          {
            name: Strname[0],
            data: arr1,
            type: "line",
            smooth: true,
          },
          {
            name: Strname[1],
            data: arr2,
            type: "line",
            smooth: true,
          },
        ];
        this.SwitchCARDS(arr, "main", timeDate, Strname);
        let tableData = [];
        timeDate.map((item, idx) => {
          let obj = {
            time: item,
            data1: arr1[idx],
            data2: arr2[idx],
            data3: arr3[idx],
          };
          tableData.push(obj);
        });
        this.tableData = tableData;
      }
    },
    //时间tab切换
    tabtimetap(i) {
      this.dateType = i;
      this.checked = false;
      this.selectTime = "";
      this.selectTime1 = "";
      //给时间选择期赋值
      let num = 24 * 3600 * 1000;
      //	获取当前时间戳转换为日期格式
      if (this.dateType == 4) {
        num = 24 * 3600 * 1000 * 7;
      }
      if (this.dateType == 5) {
        num = 24 * 3600 * 1000 * 15;
      }
      if (this.dateType == 6) {
        num = 24 * 3600 * 1000 * 30;
      }
      this.customtime = [
        this.timestampToTime(new Date().getTime() - num),
        this.timestampToTime(new Date().getTime()-24 * 3600 * 1000),
      ];
      this.$set(this, "time", null);
      this.Confirmthecontrast = false;
      this.houseTrends();
    },
    show() {
      this.$refs.time.pickerVisible = true;
    },
    timeChange(e) {
      //	对数据进行处理
      //	当当前选择的为自定义时间时
      this.selectTime = "";
      this.selectTime1 = "";
      this.timeSelect(e);
    },
    timeSelect(e) {
      if (this.dateType == null) {
        this.selectTime = e;
        this.selectTime1 = this.timestampToTime(
          new Date(e).getTime() +
            new Date(this.customtime[1]).getTime() -
            new Date(this.customtime[0]).getTime()
        );
      } else {
        let num = 24 * 3600 * 1000;
        //	获取当前时间戳转换为日期格式
        if (this.dateType == 4) {
          num = 24 * 3600 * 1000 * 6;
        }
        if (this.dateType == 5) {
          num = 24 * 3600 * 1000 * 14;
        }
        if (this.dateType == 6) {
          num = 24 * 3600 * 1000 * 29;
        }
        this.selectTime = e;
        this.selectTime1 = this.timestampToTime(new Date(e).getTime() + num);
      }
      this.Confirmthecontrast = true;
      this.houseTrends();
    },
    getList() {
      // 当为楼盘选择时
      if (this.selValue == 1) {
        this.$api.api
          .findMyOrg({
            orgType: localStorage.getItem("orgType"),
            agentId: localStorage.getItem("agentId"),
          })
          .then((res) => {
            this.houseList = res.data;
            this.houseDataAll();
            this.houseTrends();
          });
      } else if (this.selValue == 0) {
        this.$api.api
          .findMyAgent({
            orgType: localStorage.getItem("orgType"),
          })
          .then((res) => {
            this.houseList = res.data;
            this.houseDataAll();
            this.houseTrends();
          });
      }else{
         this.houseDataAll();
         this.houseTrends();
      }
    },
    secondChange(i) {
      this.secindex = i;
      this.getChars(i);
    },
    confirmtime(e) {
      this.dateType = null;
      this.checked = false;
      this.selectTime = "";
      this.selectTime1 = "";
      this.$set(this, "time", null);
      if (!e) return;

      this.Confirmthecontrast = false;
      // this.trendtrendAnalysis()
      this.houseTrends();
    },
    selChange() {
      this.choicValue = "";
      this.dateType = 4;
      this.getList();
    },
    valuechange() {
      this.houseDataAll();
      this.houseTrends();
    },
    radioChange() {
      this.selectTime = "";
      this.selectTime1 = "";
      this.$set(this, "time", null);
      if (!this.checked) {
        this.houseTrends();
      }
    },
    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()) + " ";
      return yyyy + MM + dd;
    },
    //卡片下折线图
    SwitchCARDS(arr, str, timeDate, Strname) {
      console.log(arr);
      var chartDom = document.getElementById(str);
      echarts.init(chartDom).dispose();
      var myChart = echarts.init(chartDom);

      var option;

      option = {
          color: [
              "#6F8EDC",
              "#EE6666",
              "#F98120",
              "#1CC99E",
              "#9474FB",
              "#66AFF5",
              "#FABD2B",
              "#FFCF8F",
              "#657292",
              "#7A6A99",
              "#BF5D52",
              "#77B7E4",
              "#E6A065",
              "#9D5139",
              "#C1AA88",
              "#F87F7A",
              "#F6CF74",
              "#7F5506",
              "#88BB9B",
              "#6E99AA",
              "#5789D0",
            ],
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: Strname,
          bottom: "10",
        },
        grid: {
          left: 10,
          right: 10,

          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: timeDate,
          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: arr,
      };
      option && myChart.setOption(option);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
  },
};
</script>

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

.container {
  display: grid;
  grid-template-columns: repeat(6, 16%);
  grid-column-gap: 12px;
  grid-row-gap: 18px;
}
.container1 {
  display: grid;
  grid-template-columns: repeat(3, 30%);
  grid-column-gap: 50px;
  grid-row-gap: 18px;
}
// 进度条
.jinbox {
  width: 100%;
  height: 18px;
  line-height: 18px;
  display: flex;
  font-size: 16px;
  color: #2c3542;
  margin-top: 20px;
  .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: 20px;
  }
}

#main {
  width: 100%;
  height: 380px;
}
#echar2 {
  width: 100%;
  height: 380px;
}
#Brokenline1 {
  width: 100%;
  height: 350px;
}
#Brokenline2 {
  width: 100%;
  height: 350px;
}
#Pinspeak1 {
  width: 100%;
  height: 350px;
}
#Pinspeak2 {
  width: 100%;
  height: 350px;
}
.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;
      }
    }
  }
}

.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;
}
.grid-content {
  background: #ffffff;
  height: 90px;
  border: 1px solid #e0e0e0;
  .text1 {
    height: 16px;
    font-size: 16px;
    font-weight: 400;
    line-height: 16px;
    text-indent: 20px;
    margin-top: 20px;
  }
  .text2 {
    height: 32px;
    font-size: 32px;
    font-weight: normal;
    line-height: 32px;
    text-indent: 20px;
    margin-top: 10px;
  }
}

.tophove {
  color: #ffffff;
  background: #2671e2;
}
.tophovese {
  color: #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;
  }
}
.hejisan {
  width: 92%;
  margin: 0 auto;
  display: flex;
  margin-top: 15px;
  .text1-1 {
    color: #666666;
  }
  .text1-2 {
    color: #333333;
    margin-top: 10px;
  }
}
.app_titile {
  display: flex;
  justify-content: space-between;
}
.text33 {
  font-size: 12px;
  text-indent: 20px;
  line-height: 20px;
  display: flex;
  justify-content: space-between;
  margin-right: 20px;
}
</style>
