<template>
  <div>
    <van-nav-bar
      @click-left="onClickLeft"
      @click-right="onClickRight"
      style="background-color: #1989fa"
    >
      <template #title>
        <van-col style="color: #ffffff">客户详情</van-col>
      </template>
      <template #left>
        <i
          class="fa fa-arrow-circle-left"
          aria-hidden="true"
          style="color: #ffffff; font-size: 18px"
        ></i>
      </template>
      <template #right>
        <van-icon name="replay" size="18" color="#ffffff" />
      </template>
    </van-nav-bar>
    <van-row class="header">
      <van-col span="14">
        <van-row>
          <van-col span="12">         
            <van-image
              :src="require('@/assets/img/header.png')"
              width="60"
              height="60"
              v-if="data2.Sex == 0"
            />
            <van-image
              :src="require('@/assets/img/male.jpg')"
              width="70"
              height="60"
              v-if="data2.Sex == 1"
            />
          </van-col>
          <van-col span="12">
            <van-col span="24" class="title1">{{ name }}</van-col>
            <van-col span="24" class="title2">{{ state }}</van-col>
          </van-col>
        </van-row>
      </van-col>
      <van-col span="10"></van-col>
    </van-row>
    <van-tabs v-model="activeName">
      <van-tab title="跟进记录" name="a" title-class="titleClass">
        <van-cell
          v-for="item in data2.Contacts"
          :key="item.ccId"
          :title="item.VisitDate"
          :value="item.VisitType"
          :to="'/getsaclientcontactinfo?id=' + item.ccId"
          value-class="value1"
        >
          <template #icon>
            <van-icon name="volume-o" color="#ff0000"></van-icon>
          </template>
        </van-cell>
      </van-tab>
      <van-tab title="详细资料" name="b" title-class="titleClass">
        <van-cell
          title="联系电话"
          :value="data2.Phone"
          value-class="infoValue"
          title-class="infoTitle"
        />
        <van-cell
          title="业务员"
          :value="data2.SalesManName"
          value-class="infoValue"
          title-class="infoTitle"
        />
        <van-cell
          title="国籍"
          :value="data2.Nationality"
          value-class="infoValue"
          title-class="infoTitle"
        />
        <van-cell
          title="证件类型"
          :value="data2.CredentialsType"
          value-class="infoValue"
          title-class="infoTitle"
        />
        <van-cell
          title="证件号"
          :value="data2.CredentialsId"
          value-class="infoValue"
          title-class="infoTitle"
        />
        <van-cell
          title="出生日期"
          :value="data2.Birth"
          value-class="infoValue"
          title-class="infoTitle"
        />
        <van-cell
          title="婚姻状况"
          :value="data2.Marry"
          value-class="infoValue"
          title-class="infoTitle"
        />
        <van-cell
          title="户籍"
          :value="data2.Household"
          value-class="infoValue"
          title-class="infoTitle"
        />
        <van-cell
          title="联系地址"
          :value="data2.Address"
          value-class="infoValue"
          title-class="infoTitle"
        />
        <van-cell
          title="邮编"
          :value="data2.Post"
          value-class="infoValue"
          title-class="infoTitle"
        />
        <van-cell
          title="传真"
          :value="data2.Fax"
          value-class="infoValue"
          title-class="infoTitle"
        />
        <van-cell
          title="电子邮件"
          :value="data2.Email"
          value-class="infoValue"
          title-class="infoTitle"
        />
        <van-cell
          title="认知途径"
          :value="data2.CognizeWay"
          value-class="infoValue"
          title-class="infoTitle"
        />
        <van-cell
          title="备注"
          :value="data2.Remark"
          value-class="infoValue"
          title-class="infoTitle"
          class="remarkClass"
        />
      </van-tab>
      <van-tab title="单据信息" name="c" title-class="titleClass">
        <van-row class="bgBlue">
          <van-col span="6">日期</van-col>
          <van-col span="6">类型</van-col>
          <van-col span="8">物业名称</van-col>
          <van-col span="4">状态</van-col>
        </van-row>
        <van-row
          v-for="item in data2.SaleBills"
          :key="item.BillId"
          class="bgBill"
        >
          <van-col span="6">{{ item.BillDate }}</van-col>
          <van-col span="6">{{ item.BillType }}</van-col>
          <van-col span="8">{{ item.RoomName }}</van-col>
          <van-col span="4">{{ item.BillState }}</van-col>
        </van-row>
      </van-tab>
    </van-tabs>

    <van-row class="bottom">
      <van-col span="12" class="bgGrey"   @click="editClientInfo">
        <van-icon name="edit" />{{ completion }}
      </van-col>
      <van-col span="12" class="bgRed" @click="AddSaClientContact">
        <van-icon name="add-o" />新增跟进
      </van-col>
    </van-row>
  </div>
</template>

<script>
import {
  GetSaClientContactList,
  GetSaClientInfo,
} from "@/common/api/loginApi.js";
import Decimal from "decimal.js";
export default {
  name: "login",
  data() {
    return {
      id: "",
      name: "",
      state: "",
      activeName: "a",

      data2: {}, //详细资料
    };
  },
  created: function () {
    console.info("created");
    //console.info(this.$util);
    this.$util.persistLogin(this);
    this.id = this.$route.query.id;
    this.name = this.$route.query.name;
    //this.state = this.$route.query.state;

    this.GetSaClientInfo();
  },
  computed: {
    //计算属性
    completion: function () {
      let sum = 14;
      let success = 0;
      if (this.data2 == null) {
        return 0;
      }
      if (!this.$util.isEmpty(this.data2.Phone)) {
        success++;
      }
      if (!this.$util.isEmpty(this.data2.SalesManName)) {
        success++;
      }
      if (!this.$util.isEmpty(this.data2.Nationality)) {
        success++;
      }
      if (!this.$util.isEmpty(this.data2.CredentialsType)) {
        success++;
      }
      if (!this.$util.isEmpty(this.data2.CredentialsId)) {
        success++;
      }
      if (!this.$util.isEmpty(this.data2.Birth)) {
        success++;
      }
      if (!this.$util.isEmpty(this.data2.Marry)) {
        success++;
      }
      if (!this.$util.isEmpty(this.data2.Household)) {
        success++;
      }
      if (!this.$util.isEmpty(this.data2.Address)) {
        success++;
      }
      if (!this.$util.isEmpty(this.data2.Post)) {
        success++;
      }
      if (!this.$util.isEmpty(this.data2.Fax)) {
        success++;
      }
      if (!this.$util.isEmpty(this.data2.Email)) {
        success++;
      }
      if (!this.$util.isEmpty(this.data2.CognizeWay)) {
        success++;
      }
      if (!this.$util.isEmpty(this.data2.Remark)) {
        success++;
      }
      console.info("compute success", success);
      //console.info("compute success", Decimal(success));
      let result = Decimal(success).div(Decimal(sum)).toFixed(1) * 100;
      console.info("compute", result);
      return "资料完善度" + result + "%";
    },
  },
  methods: {
    //获取客户信息
    GetSaClientInfo: function () {
      var that = this;
      var data = {
        userCode: that.$store.state.data.userCode,
        projectId: that.$store.state.projectId,
        clientId: that.id,
      };
      console.info("data", data);
      GetSaClientInfo(data).then((res) => {
        console.info("GetSaClientInfo", res);
        if (!res.result) {
          that.$toast(res.msg);
          return;
        }
        that.data2 = res.data;
        that.state=res.data.SaleState;
      });
    },
    AddSaClientContact: function () {
      //新增跟进按钮点击事件
      var that = this;
      this.$router.push({
        path: "/addsaclientcontact",
        query: { id: that.id, name: that.name },
      });
    },
    editClientInfo:function(){    //编辑客户信息
      var that = this;
      if(that.$store.state.data.userCode!=this.data2.SalesMan){
        this.$toast("非客户业务员，不能编辑客户资料");
        return;
      }
      this.$router.push({
        path: "/saclientmodify",
        query: { id: that.id, name: that.name },
      });
    },
    onClickLeft() {
      // this.$toast('返回')
      console.info("left");
      this.$router.go(-1);
    },
    onClickRight() {
      this.$router.go(0);
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.title1 {
  color: #000;
  font-size: 18px;
  font-weight: 900;
  text-align: left;
  height: 30px;
}
.title2 {
  color: #ff0000;
  text-align: left;
  font-size: 13px;
}
.infoTitle {
  color: #aaa;
  text-align: left;
}
.value1 {
  color: #ff0000;
  font-size: 13px;
}
.infoValue {
  color: #0606af;
}
.size {
  font-size: 16px;
}
.header {
  margin-top: 10px;
  height: 70px;
  border-bottom: #cfcfcf solid 3px;
}
.titleClass {
  border-bottom: #000 solid 1px;
}
.van-tab {
  color: #ff0000;
}
.redColor {
  color: #ff0000;
}
.bgBlue {
  background: #a0a0f7;
  height: 30px;
  margin-top: 5px;
  padding-top: 5px;
}
.bgBill {
  height: 30px;
  border-bottom: #aaa solid 1px;
  padding-top: 5px;
}
.bottom {
  /* left:0; */
  bottom: 0px;
  position: fixed;
  width: 100%;
}
.remarkClass{
  margin-bottom: 40px;
}
.bgGrey {
  background: #999999;
  height: 35px;
  justify-content: center;
  padding-top: 5px;
}
.bgRed {
  background: #ff0000;
  height: 35px;
  justify-content: center;
  color: #ffffff;
  font-weight: 900;
  padding-top: 5px;
}
</style>
