<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="app-box">
      <div class="conbox">客群特征总览</div>
      <div class="alllistbox">
        <div
          class="alllist"
          v-for="(item, index) in alllist"
          :key="index"
          @click="movePlace(index)"
          style="cursor: pointer"
        >
          <div class="alllist-text1">{{ item.name }}</div>
          <div class="alllist-text1">{{ item.num }}</div>
        </div>
      </div>
    </div>

    <!-- 下面 -->
    <div class="box-forhtml" v-for="(item, index) in objlist" :key="index">
      <div class="conbox">{{ item.name }}触达排名</div>
      <div class="box-forhtml-flex">
        <div class="left">
          <div class="Templatetable">
            <div class="table-tit">
              <div>排名</div>
              <div>画像语意词/触达次数</div>
              <div>触达占比</div>
              <div>沟通记录</div>
            </div>
            <div
              v-if="item.total == 0"
              style="
                width: 100%;
                line-height: 300px;
                text-align: center;
                color: #999999;
                font-size: 16px;
              "
            >
              暂无数据
            </div>
            <div
              class="table-cent"
              v-else
              v-for="(itcen, inde) in item.matchKeywords"
              :key="inde"
            >
              <div
                style="
                  display: flex;
                  align-items: center;
                  justify-content: center;
                "
              >
                <img
                  v-if="inde == 0"
                  style="width: 30px; height: 30px"
                  src="/img/ranking1.png"
                  alt=""
                />
                <img
                  v-else-if="inde == 1"
                  style="width: 30px; height: 30px"
                  src="/img/ranking2.png"
                  alt=""
                />
                <img
                  v-else-if="inde == 2"
                  style="width: 30px; height: 30px"
                  src="/img/ranking3.png"
                  alt=""
                />
                <div v-else class="indeclass">{{ inde + 1 }}</div>
              </div>
              <div v-if="index == 2">
                {{ itcen.name + "-" + itcen.endName + "㎡" }}({{ itcen.total }})
              </div>
              <div v-else-if="index == 3">
                {{ itcen.name + "-" + itcen.endName + "万" }}({{ itcen.total }})
              </div>
              <div v-else>{{ itcen.name }}({{ itcen.total }})</div>
              <div>{{ itcen.proportion }}%</div>
              <div
                style="color: #2671e2; cursor: pointer"
                @click="Toview(item, inde)"
              >
                查看
              </div>
            </div>
          </div>
        </div>
        <div class="right">
          <div
            :id="'ids' + item.id"
            class="container"
            style="width: 400px; height: 330px; text-align: center"
          >
            <img
              v-if="item.total == 0"
              style="width: 260px; height: 260px"
              src="/img/Elementcircle.png"
              alt=""
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      alllist: [],
      namelist: [],
      numlist: [],
      objlist: [
        {
          children: null,
          endName: "",
          id: 5,
          isInterval: 1,
          keywordsId: null,
          level: 1,
          matchKeywords: [
            {
              carId: "",
              children: null,
              childrenName: "",
              endName: "",
              id: "",
              isInterval: null,
              keywordsId: 138,
              level: 3,
              matchName: "",
              name: "工作",
              orgCode: "",
              pid: 132,
              proportion: 75,
              selected: null,
              sort: null,
              total: 3,
              unit: "",
            },
            {
              carId: "",
              children: null,
              childrenName: "",
              endName: "",
              id: "",
              isInterval: null,
              keywordsId: 123,
              level: 3,
              matchName: "",
              name: "周末",
              orgCode: "",
              pid: 122,
              proportion: 25,
              selected: null,
              sort: null,
              total: 1,
            },
          ],
          name: "认知途径",
          orgCode: "031",
          pid: 0,
          sort: 5,
          total: 4,
          unit: "",
        },
      ],
      value:'',

      houseId: "",
      buildingoptions:[],
      TimetoAhoose: 2,
      customtime: [],
      fromobj: {
        starttime: "",
        endoftime: "",
      },
    };
  },
  mounted() {
    this.myChartinit();
    // this.zkhousePage()
  },
  methods: {
    Toview(){
      this.$router.push({ path: "/Statistics/Insightintothedetails", query: { flag: 1 } });
    },
    //获取楼盘
     zkhousePage() {
        let obj = {
          current: 1,
          size: 100,
        };
        this.$api.api.zkhousePage(obj).then((res) => {
          console.log(res)
          this.houseId=res.data.records[0].id;
          this.buildingoptions= res.data.records;
          this.getorgCode();
        });
    },
    //自定义时间
    confirmtime() {
      this.TimetoAhoose = 6;
        this.fromobj.starttime = this.customtime[0];
        this.fromobj.endoftime = this.customtime[1];
    },
    //切换时间
    tabtimetap(index) {
      this.TimetoAhoose = index;
      this.fromobj.starttime = "";
      this.fromobj.endoftime = "";
      this.customtime = [];
      this.getorgCode();
    },
    //初始化
			getorgCode(){
				this.namelist=[];
				this.numlist=[];
				this.objlist=[];
				var dateType='';
				if(this.TimetoAhoose==6){
					dateType='';
				}else {
					dateType=this.TimetoAhoose;
				}

        this.$api.http.findmatchdata({
          	dateType:dateType,
						houseId:this.houseId,
						statDateStart:this.fromobj.starttime,
						statDateEnd:this.fromobj.endoftime
        }).then((res) => {
          	if(data.data.res==1){
                this.objlist=data.data.obj.list;
                this.alllist=[{"name":'客户数量',"num":data.data.obj.total}]
                data.data.obj.list.forEach((item,index)=>{
                  this.alllist.push({
                    name:item.name,
                    num:item.total
                  })
                })
                // this.$nextTick(() => {
                // 	this.myChartinit()
                // })
					}
        });
			},




    myChartinit() {
      this.objlist.forEach((item, index) => {
        if (item.total != 0) {
          var id = "ids" + item.id;
          var myChart = echarts.init(document.getElementById(id));
          var objoptlis = [];
          item.matchKeywords.forEach((ice) => {
            objoptlis.push({ value: ice.total, name: ice.name });
          });
          var option = {
            color: [
              "#66AFF5",
              "#FABD2B",
              "#6F8EDC",
              "#FFCF8F",
              "#F98120",
              "#1CC99E",
              "#9474FB",
              "#657292",
              "#7A6A99",
              "#BF5D52",
              "#EE6666",
              "#77B7E4",
              "#E6A065",
              "#9D5139",
              "#C1AA88",
              "#F87F7A",
              "#F6CF74",
              "#7F5506",
              "#88BB9B",
              "#6E99AA",
              "#5789D0",
            ],
            tooltip: {
              trigger: "item",
            },
            graphic: [
              {
                type: "text",
                left: "center",
                top: "42%",
                style: {
                  text: item.total,
                  textAlign: "center",
                  fill: "#000",
                  width: 30,
                  height: 30,
                  fontSize: 24,
                  color: "#32363D",
                  fontFamily: "Microsoft YaHei",
                },
              },
              {
                type: "text",
                left: "center",
                top: "55%",
                style: {
                  text: "总触达次数",
                  textAlign: "center",
                  fill: "#000",
                  width: 30,
                  height: 30,
                  fontSize: 16,
                  color: "#666666",
                },
              },
            ],
            series: [
              {
                name: "",
                type: "pie",
                radius: ["48%", "70%"],
                avoidLabelOverlap: false,
                data: objoptlis,
              },
            ],
          };
          myChart.setOption(option);
        }
      });
    },
  },
};
</script>

<style scoped="scoped" lang="scss" >
.box-center {
  width: 100%;
  padding: 15px;
  min-width: 1200px;
  padding-bottom: 100px;
}
.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 {
  width: 100%;
  padding-bottom: 20px;
  background: #ffffff;
  box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.04);
  border-radius: 4px;
  padding-top: 20px;
  padding-left: 30px;
  padding-right: 30px;
  margin-top: 20px;
  .conbox {
    height: 18px;
    font-size: 18px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #32363d;
    line-height: 18px;
  }
  .alllistbox {
    width: 100%;
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    .alllist {
      width: 16.66%;
      border: 1px solid #e0e0e0;
      padding-bottom: 2px;
      padding-top: 4px;
    }
    .alllist-text1 {
      width: 100%;
      font-size: 16px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #333333;
      line-height: 26px;
      text-align: center;
    }
  }
}

.box-forhtml {
  width: 100%;
  height: 400px;
  background: #ffffff;
  box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.04);
  border-radius: 4px;
  padding-top: 20px;
  padding-left: 30px;
  padding-right: 30px;
  margin-top: 20px;
}
.box-forhtml-flex {
  width: 100%;
  display: flex;
  margin-top: 20px;
}
.box-forhtml-flex .left {
  width: 50%;
  height: 320px;
}
.box-forhtml-flex .right {
  width: 50%;
  height: 330px;
  display: flex;
  justify-content: center;
}
.Templatetable {
  width: 88%;
  height: 100%;
  margin: 0 auto;
  overflow-y: auto;
}
.table-tit {
  width: 100%;
  height: 20px;
  line-height: 20px;
  display: flex;
}
.table-tit > div:nth-of-type(1) {
  width: 10%;
  text-align: center;
  font-size: 16px;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #606775;
}
.table-tit > div:nth-of-type(2) {
  width: 40%;
  text-align: center;
  font-size: 16px;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #606775;
}
.table-tit > div:nth-of-type(3) {
  width: 25%;
  text-align: center;
  font-size: 16px;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #606775;
}
.table-tit > div:nth-of-type(4) {
  width: 25%;
  text-align: center;
  font-size: 16px;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #606775;
}

.table-cent {
  width: 100%;
  height: 20px;
  line-height: 20px;
  display: flex;
  margin-top: 18px;
}
.table-cent > div:nth-of-type(1) {
  width: 10%;
  text-align: center;
  font-size: 14px;
  font-family: PingFangSC-Semibold, PingFang SC;
  color: #32363d;
}
.table-cent > div:nth-of-type(2) {
  width: 40%;
  text-align: center;
  font-size: 14px;
  font-family: PingFangSC-Semibold, PingFang SC;
  color: #32363d;
}
.table-cent > div:nth-of-type(3) {
  width: 25%;
  text-align: center;
  font-size: 14px;
  font-family: PingFangSC-Semibold, PingFang SC;
  color: #32363d;
}
.table-cent > div:nth-of-type(4) {
  width: 25%;
  text-align: center;
  font-size: 14px;
  font-family: PingFangSC-Semibold, PingFang SC;
  color: #32363d;
}
.indeclass {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #ecf1ff;
  color: #ffffff;
  text-align: center;
  line-height: 20px;
  font-size: 14px;
}
</style>
