<template>
  <div class="customer-panorama">
    <title-bar :title="title" @clickLeft="onClick">
      <van-icon slot="left" name="cross" size="24" />
    </title-bar>
    <div style="display: flex;height: calc(100vh - 60px)">
      <div class="client">
        <div class="client-top">
          <div class="client-avatar"><img style="margin-left: 1px; margin-right: 16px" src="../../assets/svg/title.svg" alt="" /></div>
          <div>{{ cus_name }}</div>
        </div>
        <div v-if="list.length > 0" class="client-central">
          <div class="client-central-label-1">
            <div v-for="(item, index) in list" :key="index" :style="{ color: item.color, background: item.backgroudColor }">{{ item.tag_name }}</div>
          </div>
<!--          <div>标签二</div>-->
<!--          <div class="client-central-label-2">-->
<!--            <div>白名单</div>-->
<!--            <div>IT</div>-->
<!--            <div>金融</div>-->
<!--            <div>小微企业</div>-->
<!--          </div>-->
        </div>
        <div class="client-bottom">
<!--          <div @click="historical_label" class="historical-label">历史标签信息 ></div>-->
          <div class="details">
            <table-single-view :keyValue="keyValueSingle" :data="dataBasic"></table-single-view>
<!--            <div>法定代表人： {{ legal_name }}</div>-->
<!--            <div>注册资本：<span v-if="REG_CAP_CUR != ''">{{ REG_CAP_CUR }}万元人民币</span></div>-->
<!--            <div>成立日期：{{ nreg_start_date }}</div>-->
<!--            <div>电话： <a :href="'tel:' + phone" style="line-height: 20px">{{ phone }}</a></div>-->
<!--            <div>营业状态： 开业</div>-->
<!--            <div>企业类型： 其他有限企业责任公司</div>-->
<!--            <div>经营范围：智能手机、智能硬件、</div>-->
<!--            <div>地址：{{ address }}</div>-->
          </div>
          <div class="time-axis">
            <div>
              <div @click="getCompanyInfo"><img src="../../assets/svg/time-axis-2.svg" alt="" /><img src="../../assets/svg/time-axis-1.svg" alt="" /></div>
              <div>企业时光轴</div>
            </div>
            <div>
              <div @click="getCompanyMarket"><img src="../../assets/svg/time-axis-2.svg" alt="" /><img src="../../assets/svg/time-axis-1.svg" alt="" /></div>
              <div>营销时光轴</div>
            </div>
          </div>
          <div class="time-axis">
            <button @click="navigation" class="navigation"><img style="margin-right: 10px" src="../../assets/svg/blue-navigation-logo.svg" alt="" />导航</button>
            <button @click="navigation" class="client-medical-examination">客户体检</button>
          </div>
        </div>
      </div>
      <div class="customer-information v-scroller">
        <div class="customer-information-card">
          <div>基本信息</div>
          <div class="customer-information-card-list">
            <div v-for="item in jbxx" :key="item.key" @click="data_details(item)" class="customer-information-content-card">
              <div class="card-icon" style="background-color: #558fff">
                <span class="icon iconfont iconstyle" :class="item.iconcls"></span>
              </div>
              <div>
                {{ item.text }}
                <div class="datanum" v-if="item.infoNum != ''">{{ item.infoNum }}</div>
              </div>
            </div>
          </div>
        </div>

        <div class="customer-information-card">
          <div>关系图谱</div>
          <div class="customer-information-card-list">
            <div v-for="item in gxtp" :key="item.key" @click="data_details(item)" class="customer-information-content-card">
              <svg class="icon icon-color" aria-hidden="true">
                <use :xlink:href="'#' + item.iconcls"></use>
              </svg>
              <div>
                {{ item.text }}
                <div class="datanum" v-if="item.infoNum != ''">{{ item.infoNum }}</div>
              </div>
            </div>
          </div>
        </div>

        <div class="customer-information-card">
          <div>业务信息</div>
          <div class="customer-information-card-list">
            <div v-for="item in ywxx" :key="item.key" @click="data_details(item)" class="customer-information-content-card">
              <div class="card-icon" style="background-color: #00c6ff">
                <span class="icon iconfont iconstyle" :class="item.iconcls"></span>
              </div>
              <div>
                {{ item.text }}
                <div class="datanum" v-if="item.infoNum != ''">{{ item.infoNum }}</div>
              </div>
            </div>
          </div>
        </div>

        <div class="customer-information-card">
          <div>风险信息</div>
          <div class="customer-information-card-list">
            <div v-for="item in fxxx" :key="item.key" @click="data_details(item)" class="customer-information-content-card">
              <div class="card-icon" style="background-color: #00cac6">
                <span class="icon iconfont iconstyle" :class="item.iconcls"></span>
              </div>
              <div>
                {{ item.text }}
                <div class="datanum" v-if="item.infoNum != ''"><div>{{ item.infoNum }}</div></div>
              </div>
            </div>
          </div>
          <div class="customer-information-card">
            <div>初筛</div>
            <div class="customer-information-card-list">
              <div v-for="item in cs" :key="item.key" @click="data_details(item)" class="customer-information-content-card">
                <div class="card-icon" style="background-color: #c280ff">
                  <span class="icon iconfont iconstyle" :class="item.iconcls"></span>
                </div>
                <div>
                  {{ item.text }}
                  <div class="datanum" v-if="item.infoNum != ''">{{ item.infoNum }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import TitleBar from "@/components/general/TitleBar.vue";
import { NativeUI } from "@/public/ts/NativeUI";
import nettyApi from "@/constants/api/ms-netty/netty.api.ts";
import Public from '@/public/ts/Public';
import IF from "@/public/factory/InterFaceFactory";
import { forTime } from '@/public/ts/date.util';
import TableSingleView from "@/public/TableSingleView.vue";
import { getText } from '@/stores';
/**
 * @Description 客户全景视图
 * @Author JiangTao
 * @Date 2021-10-23 下午 06:36
 */
@Component({
  name: "CompanyDetails",
  components: { TitleBar, TableSingleView },
})
export default class CompanyDetails extends Vue {
  title = "客户全景视图"; // 页面标题
  cus_name: string = "";
  legal_name: string = "";
  reg_cap_amt: string = "";
  nreg_start_date : string = "";
  phone: string = "";
  address: string = "";
  REG_CAP_CUR: string = "";
  YQXX_num: any = 0; //舆情信息数量
  list: any[] = [];
  keyValueSingle = {
    REPR_NAME: "法定代表人",
    REG_CAP: "注册资本",
    EST_DATE: "成立日期",
    REPR_PHONE: "电话",
    PT_STATE: "营业状态",
    ENT_TYPE: "企业类型",
    BUSI_SCOPE: "经营范围",
    OP_LOCAL: "地址",
  };
  dataBasic = {};
  jbxx = [
    {
      infoNum: 0,
      text: "基本信息",
      key: "Overview",
      path: "Overview",
      iconcls: "icon-a-jibenxinxi18x20ziyuan8",
    },
    {
      infoNum: 0,
      text: "财务信息",
      key: "FinancialInformation",
      path: "FinancialInformation",
      iconcls: "icon-a-caiwuxinxi18x20ziyuan14",
    },
    {
      infoNum: 0,
      text: "公司章程",
      key: "CompanyPolicy",
      path: "CompanyPolicy",
      iconcls: "icon-a-gongsizhangcheng20x20ziyuan12",
    },
    {
      infoNum: 0,
      text: "年报信息",
      key: "AnnualReport",
      path: "AnnualReport",
      iconcls: "icon-a-nianbaoxinxi18x20ziyuan13",
    },
    {
      infoNum: 0,
      text: "评级情况",
      key: "CustomerRatings",
      path: "CustomerRatings",
      iconcls: "icon-a-pingjiqingkuang20x18ziyuan34",
    },
    {
      infoNum: 0,
      text: "综合收益率",
      key: "CustomerContribution",
      path: "CustomerContribution",
      iconcls: "icon-a-zongheshouyishuai20x20ziyuan35",
    },
    {
      infoNum: 0,
      text: "股权及动产抵押",
      key: "EquityPledgeAndMovablePropertyPledge",
      path: "EquityPledgeAndMovablePropertyPledge",
      iconcls: "icon-a-guquanjidongchanzhiya18x20ziyuan9",
    },
    {
      infoNum: 0,
      text: "股票信息",
      key: "StockInformation",
      path: "StockInformation",
      iconcls: "icon-a-gupiaoxinxi20x20ziyuan10",
    },
  ];
  gxtp = [
    {
      infoNum: 0,
      text: "企业图谱",
      key: "EnterpriseMap",
      path: "EnterpriseMap",
      iconcls: "icon-a-qiyetupu20x20ziyuan16",
    },
    {
      infoNum: 0,
      text: "关联方认定图",
      key: "RelatedParty",
      path: "RelatedParty",
      iconcls: "icon-a-guanlianfang20x20ziyuan17",
    },
    {
      infoNum: 0,
      text: "集团图谱",
      key: "FroupAndEconomicDependenceInformation",
      path: "FroupAndEconomicDependenceInformation",
      iconcls: "icon-a-jituanguanxi28x28ziyuan18",
    },
  ];
  sgz = [
    {
      infoNum: 0,
      text: "企业时光轴",
      key: "QYSGZ",
      path: "QYSGZView",
      iconcls: "iconshesuxinxixpx",
    },
    {
      infoNum: 0,
      text: "营销时光轴",
      key: "YXSGZ",
      path: "YXSGZView",
      iconcls: "iconshesuxinxixpx",
    },
  ];
  ywxx = [
    {
      infoNum: 0,
      text: "授信视图",
      key: "UnifiedCustomerCreditView",
      path: "UnifiedCustomerCreditView",
      iconcls: "icon-a-shouxinshitu18x20ziyuan38",
    },
    {
      infoNum: 0,
      text: "担保视图",
      key: "GuaranteeView",
      path: "GuaranteeView",
      iconcls: "icon-a-danbaoshitu28x28ziyuan22",
    },
    {
      infoNum: 0,
      text: "项目信息",
      key: "ProjectInfo",
      path: "ProjectInfo",
      iconcls: "icon-a-xiangmuxinxi18x20ziyuan11",
    },
    {
      infoNum: 0,
      text: "企业存量业务查询",
      key: "ApplicationStatus",
      path: "ApplicationStatus",
      iconcls: "icon-a-zaituyewu20x20ziyuan36",
    },
    {
      infoNum: 0,
      text: "高管存量业务查询",
      key: "CreditStatusOfClientExecutives",
      path: "CreditStatusOfClientExecutives",
      iconcls: "icon-a-gaoguanshouxin18x20ziyuan39",
    },
  ];
  fxxx = [
    {
      infoNum: 0,
      text: "舆情信息",
      key: "PublicOpinionInformation",
      path: "PublicOpinionInformation",
      iconcls: "icon-a-yuqingxinxi20x18ziyuan23",
    },
    {
      infoNum: 0,
      text: "风险预警信号",
      key: "RiskWarning",
      path: "RiskWarning",
      iconcls: "icon-ziyuan",
    },
    {
      infoNum: 0,
      text: "工商-历史变更",
      key: "LSBG",
      path: "LSBGView",
      iconcls: "icon-lishijilu",
    },
    {
      infoNum: 0,
      text: "工商-异常经营名录",
      key: "JYFX",
      path: "YCJYMLView",
      iconcls: "icon-a-jingyingfengxian18x20ziyuan24",
    },
    {
      infoNum: 0,
      text: "工商-处罚信息",
      key: "CFXX",
      path: "CFXXList",
      iconcls: "icon-a-chufaxinxi18x20ziyuan25",
    },
    {
      infoNum: 0,
      text: "工商-清算",
      key: "QSXX",
      path: "ClearInformation",
      iconcls: "icon-a-qingsuanxinxi18x20ziyuan26",
    },
    {
      infoNum: 0,
      text: "裁判文书",
      key: "Judgment",
      path: "Judgment",
      iconcls: "icon-a-caipanwenshu18x20ziyuan27",
    },
    {
      infoNum: 0,
      text: "法院公告",
      key: "FYGG",
      path: "FYGGList",
      iconcls: "icon-a-fayuangonggao18x20ziyuan28",
    },
    {
      infoNum: 0,
      text: "被执行人",
      key: "ExecutedPerson",
      path: "ExecutedPerson",
      iconcls: "icon-a-beizhihangren20x20ziyuan29",
    },
    {
      infoNum: 0,
      text: "开庭公告",
      key: "CourtAnnouncement",
      path: "CourtAnnouncement",
      iconcls: "icon-a-kaitinggonggao18x20ziyuan30",
    },
    {
      infoNum: 0,
      text: "案件流程",
      key: "CaseProcess",
      path: "CaseProcess",
      iconcls: "icon-a-anjianliucheng20x20ziyuan31",
    },
    {
      infoNum: 0,
      text: "曝光台",
      key: "ExposureTable",
      path: "ExposureTable",
      iconcls: "icon-a-puguangtai20x18ziyuan32",
    },
    {
      infoNum: 0,
      text: "司法查冻扣",
      key: "JudicialDeduction",
      path: "JudicialDeduction",
      iconcls: "icon-a-sifachadongkou20x18ziyuan33",
    },
  ];
  cs = [
    {
      infoNum: 0,
      text: "初筛历史",
      key: "CustomerPreliminaryScreeningHistory",
      path: "CustomerPreliminaryScreeningHistory",
      iconcls: "icon-a-chushailishi20x20ziyuan37",
    },
  ];

  mounted() {
    console.log(this.$store.getters.getCusInfo);
    this.cus_name = this.$store.getters.getCusInfo.cus_name;
    this.selectAll();
  }
  selectAll() {
    Promise.all([
      this.selectYQXX().then(() => {
        this.selectJBXX();
      }),
      this.getCusInfoGS(),
      // this.getRrisk(),
      this.getCustInfo()
    ]).then(() => {
      NativeUI.closeWaiting();
    });
  }
  /**
   * @Description 查询舆情信息数量
   * @Author JiangTao
   * @Date 2022-01-05 下午 05:48
   */
  selectYQXX(pageNo = 1) {
    this.YQXX_num = '0';
    let param = {
      entName: this.$store.getters.getCusInfo.cus_name,
      beginDate: '',
      endDate: '',
      sentiment: '0',
      sortOrder: '1',
      pageIndex: pageNo,
      pageSize: '',
      ProdId: Public.getProdId(),
      SvrCode: Public.getSvrCode(nettyApi.TRADE_CODE.selectYQXX),
      ClientNo: this.$store.getters.getCusInfo.cus_id,
      tc: nettyApi.TRADE_CODE.selectYQXX
    };
    return IF.transferDataInter(nettyApi.commonRq, param).then((res: any) => {
      if (res.rc == "1") {
        this.YQXX_num = res.totalCount;
      } else {
        if (res.ret_code != '4999999') {
          NativeUI.toast(res.msg);
        }
      }
    });
  }
  /**
   * @Description 查询数据数量
   * @Author JiangTao
   * @Date 2022-01-05 下午 05:47
   */
  selectJBXX() {
    var param = {
      pname: this.$store.getters.getCusInfo.cus_name,
      tc: nettyApi.TRADE_CODE.selectJBXX
    };
    NativeUI.showWaiting('正在查询...');
    return IF.transferDataInter(nettyApi.commonRq, param).then((res: any) => {
      if (res.rc == "1") {
        this.$set(this.fxxx, 0, { ...this.fxxx[0], infoNum: this.YQXX_num != "0" ? Number(this.YQXX_num) : 0 });
        this.$set(this.fxxx, 6, { ...this.fxxx[6], infoNum: res.cpwsCount != "0" ? Number(res.cpwsCount) : 0 });
        this.$set(this.fxxx, 7, { ...this.fxxx[7], infoNum: res.fyggCount != "0" ? Number(res.fyggCount) : 0 });
        this.$set(this.fxxx, 8, { ...this.fxxx[8], infoNum: res.zxggCount != "0" ? Number(res.zxggCount) : 0 });
        this.$set(this.fxxx, 9, { ...this.fxxx[9], infoNum: res.ktggCount != "0" ? Number(res.ktggCount) : 0 });
        this.$set(this.fxxx, 10, { ...this.fxxx[10], infoNum: res.ajlcCount != "0" ? Number(res.ajlcCount) : 0 });
        this.$set(this.fxxx, 11, { ...this.fxxx[11], infoNum: res.bgtCount != "0" ? Number(res.bgtCount) : 0 });
        this.$set(this.fxxx, 12, { ...this.fxxx[12], infoNum: res.sifacdkCount != "0" ? Number(res.sifacdkCount) : 0 });
      } else {
        if (res.ret_code != '4999999') {
          NativeUI.toast(res.msg);
        }
      }
    });
  }
  /**
   * @Description 获取工商客户详情
   * @Author JiangTao
   * @Date 2022-01-05 下午 05:14
   */
  getCusInfoGS() {
    let param = {
      CUST_FULL_NAME: this.$store.getters.getCusInfo.cus_name,
      CERT_ARRAY_INFO: [
        {
          CERT_TYPE: Public.getGScode(this.$store.getters.getCusInfo.cert_type),
          CERT_NO: this.$store.getters.getCusInfo.cert_code
        }
      ],
      GS_QUERY_OPTION_ARRAY: [
        {
          GS_QUERY_OPTION_LIST: "1"
        }
      ],
      ProdId: Public.getProdId(),
      SvrCode: Public.getSvrCode(nettyApi.TRADE_CODE.selectGSXXCX),
      ClientNo: this.$store.getters.getCusInfo.cus_id,
      tc: nettyApi.TRADE_CODE.selectGSXXCX
    };
    NativeUI.showWaiting("正在查询...");
    return IF.transferDataInter(nettyApi.commonRq, param).then((res: any) => {
      console.log(res);
      NativeUI.closeWaiting();
      if (res.rc == "1") {
        this.dataBasic = res;
        // this.legal_name = res.REPR_NAME;
        // this.reg_cap_amt = res.REG_CAP;
        (this.dataBasic as any).EST_DATE = forTime((this.dataBasic as any).EST_DATE);
        (this.dataBasic as any).ENT_TYPE = getText((this.dataBasic as any).ENT_TYPE, "ENTTYPE");
        (this.dataBasic as any).PT_STATE = getText((this.dataBasic as any).PT_STATE, "ENTSTATUS");
        // this.phone = res.REPR_PHONE;
        // this.address = res.OP_LOCAL;
        // this.REG_CAP_CUR = getText(res.REG_CAP_CUR, "CURRENCY");
        // if (this.REG_CAP_CUR == "人民币") {
        //   this.REG_CAP_CUR = "";
        // }
      } else {
        if (res.ret_code != '4999999') {
          NativeUI.toast(res.msg);
        }
      }
    });
  }
  /**
   * @Description 获取客户标签
   * @Author JiangTao
   * @Date 2022-01-05 下午 05:14
   */
  getCustInfo() {
    this.list = [];
    var param = {
      tc: nettyApi.TRADE_CODE.selectKHXQ,
      cus_id: this.$store.getters.getCusInfo.cus_id,
      cus_name: this.$store.getters.getCusInfo.cus_name,
      cert_type: this.$store.getters.getCusInfo.cert_type,
      cert_code: this.$store.getters.getCusInfo.cert_code
    };
    NativeUI.showWaiting('正在查询...');
    return IF.transferDataInter(nettyApi.commonRq, param).then((res: any) => {
      console.log(param);
      console.log(res);
      if (res.rc == "1") {
        if (res.cusTagIColl && res.cusTagIColl.length > 0) {
          for (let i = 0; i < res.cusTagIColl.length; i++) {
            if (res.cusTagIColl[i].tag_color == "red") {
              res.cusTagIColl[i].backgroudColor = "#FFDEDE";
              res.cusTagIColl[i].color = "#FF0000";
            } else if (res.cusTagIColl[i].tag_color == "dodgerblue") {
              res.cusTagIColl[i].backgroudColor = "#E7F9FF";
              res.cusTagIColl[i].color = "#0596FF";
            } else if (res.cusTagIColl[i].tag_color == "green") {
              res.cusTagIColl[i].backgroudColor = "#E1FFF3";
              res.cusTagIColl[i].color = "#00C54F";
            } else if (res.cusTagIColl[i].tag_color == "orange") {
              res.cusTagIColl[i].backgroudColor = "#FFE4D9";
              res.cusTagIColl[i].color = "#FF4003";
            } else if (res.cusTagIColl[i].tag_color == "yellow") {
              res.cusTagIColl[i].backgroudColor = "#FFF9E4";
              res.cusTagIColl[i].color = "#FFB800";
            }
            this.list.push(res.cusTagIColl[i]);
          }
          console.log(this.list);
        }
      } else {
        NativeUI.toast(res.msg);
      }
    });
  }

  data_details(item: any) {
    this.$router.push({
      path: item.path,
    });
  }
  onClick() {
    this.$router.go(-1);
  }

  navigation() {
    console.log("navigation");
  }

  getCompanyInfo() {
    this.$router.push({
      path: "/customer-mgt/timeLine/customer-info/time-line/company-timeline",
    });
  }

  getCompanyMarket() {
    this.$router.push({
      path: "/customer-mgt/timeLine/customer-info/time-line/enterprise-timeline",
    });
  }

  //风险信息
  risk_information() {
    console.log("risk_information");
    this.$router.push({
      path: "/customer-mgt/customer-info/business-information/risk-information",
      query: {
        warn: "risk_information",
      },
    });
  }

  //集团及经济依存信息
  froup_and_economic_dependence_information() {
    this.$router.push({
      path: "/customer-mgt/customer-info/relationship-graph/froup-and-economic-dependence-information",
      query: {
        warn: "froup_and_economic_dependence_information",
      },
    });
  }

  //客户经营信息
  customer_management_information() {
    this.$router.push({
      path: "/customer-mgt/customer-info/business-application-status/customer-management-information",
      query: {
        warn: "customer_management_information",
      },
    });
  }
  //财务信息
  financial_information() {
    this.$router.push({
      path: "/customer-mgt/customer-info/business-application-status/financial-information",
      query: {
        warn: "financial_information",
      },
    });
  }
  //历史标签信息
  historical_label() {
    this.$router.push({
      path: "/customer-mgt/customer-info/history-information/customer-tagHistory",
      query: {
        warn: "historical_label",
      },
    });
  }
}
</script>

<style scoped>
.customer-panorama {
  width: 100%;
}
.client {
  width: 25%;
  height: 100%;
  padding-left: 15px;
  padding-top: 15px;
  padding-bottom: 10px;
}
.client-avatar {
  width: 60px;
  height: 60px;
  background-color: rgba(208, 241, 255, 1);
  border-radius: 4px;
  display: inline-block;
  padding: 5.2%;
  background-image: url("../../assets/svg/blue-circle.svg");
  background-position: center;
  background-repeat: no-repeat;
}
.client-avatar img {
  width: 100%;
}
.client-top {
  width: 100%;
  height: 65px;
  display: flex;
}
.client-top > div:nth-child(2) {
  width: 75%;
  font-size: 20px;
  color: #333333;
  font-family: "Arial Normal", "Arial";
  font-weight: bold;
  padding-left: 4%;
}

.client-central {
  width: 100%;
  height: 10%;
  overflow-y: auto;
  padding: 5px 0px;
}
.client-central > div:nth-child(1) {
  color: #02a4ec;
  font-size: 13px;
  margin-bottom: 1.5%;
  margin-left: 1%;
}
.client-central > div:nth-child(3) {
  color: #c280ff;
  font-size: 13px;
  margin-bottom: 1.5%;
  margin-left: 1%;
}
.client-central-label-1 {
  display: flex;
  flex-wrap:wrap;
  justify-content: flex-start;
}
.client-central-label-1 div {
  width: auto;
  text-align: center;
  font-size: 12px;
  line-height: 21px;
  padding: 3px 5px 0 5px;
  margin-right: 3%;
  margin-bottom: 5px;
  border-radius: 3px;
}
.client-central-label-2 div {
  color: #c280ff;
  background-color: #f9f1ff;
}
.client-central-label-2 > div:nth-child(1) {
  background-color: white;
  color: black;
  border: 1px solid rgba(170, 170, 170, 1);
}
.client-bottom {
  width: 93%;
  height: 95%;
  padding-right: 3%;
  margin: 0 auto;
}
.client-bottom > div:nth-child(3) {
  height: 15%;
}
.historical-label {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10%;
  color: #02a4ec;
}
.customer-information div {
  line-height: 30px;
  font-family: "Arial Normal", "Arial";
}
.time-axis {
  display: flex;
  height: 8%;
  width: 100%;
  align-items: center;
  justify-content: space-around;
  flex-wrap: nowrap;
  margin: 2% 0;
}
.time-axis > div > div:nth-child(1) {
  width: 25px;
  margin: 0 auto;
}
.navigation {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40%;
  height: 35px;
  margin: 10px auto;
  background-color: white;
  color: #02a4ec;
  border: 1px solid #02a4ec;
  font-size: 14px;
  border-radius: 34px;
  text-align: center;
  padding: 5px 0;
}
.client-medical-examination {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40%;
  height: 35px;
  margin: 10px auto;
  background-color: white;
  color: #999999;
  border: 1px solid rgba(153, 153, 153, 1);
  font-size: 14px;
  border-radius: 34px;
  text-align: center;
  padding: 5px 0;
}
.client-label ul li {
  list-style-type: disc;
  padding-left: -5px;
  display: inline-block;
  padding-right: 35px;
  margin-left: 10px;
  color: #02a4ec;
}
.client-info ul li {
  font-size: 14px;
  line-height: 30px;
}
.details > * {
  font-family: "Arial Normal", "Arial";
  margin: 2% 0;
}
.details {
  height: 60%;
  overflow-y: auto;
}
.customer-information {
  width: 75%;
  height: calc(100vh - 60px);
  background-color: #f2f2f2;
  padding: 1% 3% 1% 1.5%;
  border-left: 1px solid #e8e8e8;
  overflow-y: auto;
}
.customer-information-card > div:nth-child(1) {
  font-size: 18px;
  color: #333333;
  font-weight: bold;
  padding-top: 2%;
  padding-left: 2px;
  margin-bottom: 10px;
  font-family: "微软雅黑 Bold", "微软雅黑 Regular", "微软雅黑";
}
.customer-information-content {
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: rgba(255, 255, 255, 1);
  border: 2px solid rgba(254, 235, 237, 1);
  border-radius: 10px;
  padding: 2%;
}
h3 {
  font-weight: bold;
  margin-bottom: 0;
}
.customer-information-content > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.customer-information-content > div > div:nth-child(2) {
  font-size: 16px;
  color: #00000099;
}
.customer-information-card-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
  justify-content: space-between;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}
.customer-information-content-card {
  width: 100%;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background-color: rgba(255, 255, 255, 1);
  padding-left: 15%;
  border-radius: 7px;
  box-shadow: 0 0 6px #dedede;
}
.customer-information-content-card > div:nth-child(2) {
  width: auto;
  max-width: 70px;
  font-size: 16px;
  margin-left: 10%;
  padding: 0;
  line-height: 22px;
  position: relative;
}
.information-surface-title-content div {
  width: 25%;
  margin: 1.4% 0;
  padding-right: 5%;
  font-size: 114.3%;
}
.information-surface-title-content div a {
  display: flex;
  align-items: flex-start;
}
.card-icon {
  width: 40px;
  height: 40px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.iconstyle {
  height: 30px;
  font-size: 20px !important;
  color: white !important;
}
.datanum {
  width: auto;
  min-width: 25px;
  height: 25px;
  display: flex;
  align-content: center;
  justify-items: center;
  text-align: center;
  position: absolute;
  top: -13px;
  left: 90%;
  background-color: #fd5065;
  border-radius: 15px;
  font-size: 16px;
  padding-left: 5px;
  padding-right: 5px;
  color: white;
}
.datanum div {
  width: auto;
  margin: 0 auto;
  line-height: 26px !important;
}
.icon-color {
  width: 40px;
  height: 40px;
}
::v-deep .ValueCls {
  grid-template-columns: 1.7fr 3fr;
}
</style>
