<template>
  <div>
    <van-row gutter="20" style="padding-top: 10px">
      <van-col span="10"
        >剩余<span style="font-size: 20px; color: #1989fa">{{remainNum}}</span>套</van-col
      >
      <van-col span="14" style="padding-right: 15px">
        <span
          style="
            border-radius: 10px;
            border: #1989fa solid 1px;
            color: #1989fa;
            font-size: 18px;
            padding: 3px;
            float: right;
          "
          @click="routeToProject"
          >{{ projectname }}</span
        >
      </van-col>
    </van-row>

    <van-row style="margin-top: 15px" class="area">
      <van-col span="14">
        <van-row>
          <van-col span="24">
            <van-col span="12"
              ><van-image
                :src="require('@/assets/img/header.png')"
                style="margin-top: 30px"
            /></van-col>

            <van-col span="12">
              <p class="colorWhite" style="margin-top: 30px">{{ username }}</p>
              <p class="colorDark">
                {{ saleprompt.sMonth }}月目标 {{ saleprompt.planprice }}万元
              </p>
            </van-col>
          </van-col>

          <van-col span="24" class="colorDark">已成交（元）</van-col>
          <van-col span="24" class="colorWhite">{{
            saleprompt.totalprice
          }}</van-col>
        </van-row>
      </van-col>
      <van-col span="10">
        <van-circle
          v-model="currentRate"
          :rate="100"
          :speed="100"
          :text="text"
          color="#ffffff"
          style="margin-top: 30px"
        />
      </van-col>
      <van-col span="24" style="padding-bottom: 5px">
        <van-col span="8">
          <p class="colorDark">来电</p>
          <p class="colorDark">
            新/老 {{ vistitcount.callold }}/{{ vistitcount.callnew }}
          </p>
        </van-col>
        <van-col span="8">
          <p class="colorDark">来访</p>
          <p class="colorDark">
            新/老 {{ vistitcount.visitold }}/{{ vistitcount.visitnew }}
          </p>
        </van-col>
        <van-col span="8">
          <p class="colorDark">成交套数</p>
          <p class="colorDark">
            {{ vistitcount.salednum }}
          </p>
        </van-col>
      </van-col>
    </van-row>

    <van-grid :border="false" :column-num="4">
      <van-grid-item>
        <router-link to="/getoverduesummary">
          <van-image
            :src="require('@/assets/img/xing.jpg')"
            width="50"
            height="50"
          />
          <van-col span="24">逾期提醒</van-col>
        </router-link>
      </van-grid-item>
      <van-grid-item>
        <router-link to="/gettodaytodosummary">
          <van-image
            :src="require('@/assets/img/tel.jpg')"
            width="50"
            height="50"
          />
          <van-col span="24">催办</van-col>
        </router-link>
      </van-grid-item>
      <van-grid-item>
        <router-link to="/filterhouse">
          <van-image
            :src="require('@/assets/img/house.jpg')"
            width="50"
            height="50"
          />
          <van-col span="24">房源查询</van-col>
        </router-link>
      </van-grid-item>
      <van-grid-item>
        <router-link to="/getsabuildingselectlist">
          <van-image
            :src="require('@/assets/img/building.jpg')"
            width="50"
            height="50"
          />
          <van-col span="24">楼栋信息</van-col>
        </router-link>
      </van-grid-item>
    </van-grid>
    <van-grid :border="false" :column-num="4">
      <van-grid-item>
        <router-link to="/GetSaClientContactList">
          <van-image
            :src="require('@/assets/img/query.jpg')"
            width="50"
            height="50"
          />
          <van-col span="24">联系记录</van-col>
        </router-link>
      </van-grid-item>
      <van-grid-item>
        <router-link to="/getsaclientlist">
          <van-image
            :src="require('@/assets/img/search.png')"
            width="50"
            height="50"
          />
          <van-col span="24">辩客查询</van-col>
        </router-link>
      </van-grid-item>
      <van-grid-item>
        <router-link to="/getsaclientsummary">
          <van-image
            :src="require('@/assets/img/member1.png')"
            width="50"
            height="50"
          />
          <van-col span="24">会员管理</van-col>
        </router-link>
      </van-grid-item>
    </van-grid>
  </div>
</template>

<script>
import { SaReportToday,GetSaRoomList } from "@/common/api/loginApi.js";
import Decimal from "decimal.js";
export default {
  name: "login",
  data() {
    return {
      projectId: "", //公司信息
      projectname: "", //项目信息
      username: this.$store.state.data.userName,
      saleprompt: {}, //销售目标
      vistitcount: {}, //访问计数
      currentRate: 0, //当前进度
      remainNum:0,          //剩余套数
    };
  },
  created: function () {
    console.info("created");
    this.$util.persistLogin(this);
    console.info(this.$route.query);
    this.projectId = this.$store.state.projectId;
    this.projectname = this.$store.state.projectName;
    console.info('projectname',this.projectname);
    this.SaReportToday();
    this.GetSaRoomList();
  },
  computed: {
    text() {
      return Decimal(this.currentRate).toNumber().toFixed(0) + "%";
    },
  },
  methods: {
    SaReportToday: function () {
      //案场日报
      var that = this;
      var data = {
        userCode: that.$store.state.data.userCode,
        projectId: that.$store.state.projectId,
      };
      //console.info("data", data);
      SaReportToday(data).then((res) => {
        console.info("SaReportToday", res);
        if (!res.result) {
          that.$toast(res.msg);
          return;
        }
        that.saleprompt = res.data.saleprompt;
        that.vistitcount = res.data.vistitcount;
        that.currentRate = Decimal(that.saleprompt.complete).toNumber();
      });
    },
    GetSaRoomList:function () {
      //房源套数
      var that = this;
      let jsonQuery={rState:2};
      var data = {
        userCode: that.$store.state.data.userCode,
        projectId: that.$store.state.projectId,
        page:'',
        pageCount:'',
        jsonQuery:JSON.stringify(jsonQuery)
      };
      //console.info("data", data);
      GetSaRoomList(data).then((res) => {
        console.info("GetSaRoomList", res);
        if (!res.result) {
          that.$toast(res.msg);
          return;
        }
        that.remainNum=0;
        if(res.data!=null&&res.data.list!=null&&res.data.list.length>0){
          res.data.list.forEach(function(item,index,arr) {
             if(item.rState==2){
               that.remainNum++;
             }
          });
        }
      });
    },
    // 单选按钮点击事件
    routeToProject: function () {
      this.$router.push("/getproject");  
    },
    onClickLeft() {
      // this.$toast('返回')
      this.$router.go(-1);
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.bgGray {
  background-color: #cfcfcf;
  font-size: 15px;
  font-weight: 900;
  height: 30px;
  padding-top: 10px;
  padding-bottom: 10px;
  text-align: left;
  padding-left: 5px;
}

.height {
  height: 20px;
  font-size: 15px;
  padding-top: 10px;
  padding-bottom: 10px;
  border-bottom: #cfcfcf solid 1px;
  text-align: left;
  padding-left: 10px;
}
.area {
  width: 100%;
  height: 300px;
  border-radius: 15px;
  background-color: #1989fa;
  border: #1989fa solid 1px;
}
.colorWhite {
  color: #ffffff;
  font-size: 16px;
  font-weight: 500;
}
.colorDark {
  color: #ffeeee;
  font-size: 13px;
}
</style>
