<template>
  <div class="dashboard-editor-container">
    <div class="mtitle">
      <span style="font-size: 19px">欢迎使用岑溪人民医院随访系统</span>
      <iframe allowtransparency="true" frameborder="0" width="180" height="36" scrolling="no" style="padding-top: 10px" src="//tianqi.2345.com/plugin/widget/index.htm?s=3&z=2&t=0&v=0&d=2&bd=0&k=&f=#545555&ltf=#545555&htf=ffffff&q=1&e=1&a=1&c=72036&w=180&h=36&align=center"></iframe>
    </div>
    <div class="chart-wrapper" v-if="user.roleName == '医生'||user.roleName == '科室主任'">
      <!--个人形象-->
      <div class="pop" style="width: 65%">
        <div class="out">
          <div class="int">
            <div class="bos">
              <div class="lab">
                <div class="bsg"></div>
                <div class="tit">个人形象</div>
              </div>
              <div class="cards">
                <img :src="user.avatar" class="avatar" />
                <div class="con">
                  <div class="title">姓名：{{ user.nickName }}</div>
                  <div class="desc">角色：{{ user.roleName ? user.roleName : '无角色' }}</div>
                  <div class="desc">科室：{{ user.deptNameStr ? user.deptNameStr : '无科室' }}</div>
                  <el-button icon="el-icon-edit" type="primary" class="edit">
                    <router-link to="/user/profile">编辑我的形象</router-link>
                  </el-button>
                  <div class="ntc">只有医生才会在小程序上面展示个人形象</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!--数据统计-->
        <div class="out">
          <div class="int">
            <div class="bos">
              <div class="lab">
                <div class="bsg"></div>
                <div class="tit">数据统计</div>
              </div>
              <div class="yr">
                <div class="rout" style="padding-left: 0px">
                  <div class="rint" style="background-color: rgb(242 232 255)">
                    <div class="icon" style="color: #8642df">&#xe6b6;</div>
                    <div class="rcon">
                      <div class="rtt">患者数据</div>
                      <div class="rdesc">{{ data.count.visit || 0 }}</div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="yr">
                <div class="rout">
                  <div class="rint" style="background-color: rgb(255 245 229)">
                    <div class="icon" style="color: #fab22e">&#xe716;</div>
                    <div class="rcon">
                      <div class="rtt">复诊提醒</div>
                      <div class="rdesc">{{ data.count.up || 0 }}</div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="yr">
                <div class="rout">
                  <div class="rint" style="background-color: rgb(237 246 254)">
                    <div class="icon" style="color: #489afd">&#xe62f;</div>
                    <div class="rcon">
                      <div class="rtt">随访记录</div>
                      <div class="rdesc">{{ data.count.record || 0 }}</div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="yr">
                <div class="rout" style="padding-right: 0px">
                  <div class="rint" style="background-color: rgb(255 242 245)">
                    <div class="icon" style="color: #fa5376">&#xe69a;</div>
                    <div class="rcon">
                      <div class="rtt">知识库</div>
                      <div class="rdesc">{{ data.count.knowledge || 0 }}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!--快捷菜单-->
        <div class="out">
          <div class="int">
            <div class="bos">
              <div class="lab">
                <div class="bsg"></div>
                <div class="tit">快捷菜单</div>
              </div>
              <div class="yr" style="width: 20%" v-for="(item, index) in menu" :key="item.id" v-hasPermi="[item.hasPermi]">
                <router-link :to="item.url">
                  <div class="rout">
                    <div class="rint" style="text-align: center; cursor: pointer">
                      <span class="icon" :style="{ float: 'none', color: item.color }" v-html="item.icon">&#xe60d;</span>
                      <div class="ctt">{{ item.name }}</div>
                    </div>
                  </div>
                </router-link>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!--手机预览-->
      <div class="pop" style="width: 35%">
        <div class="out">
          <div class="int">
            <div class="bos">
              <div class="div-mc">
                <div class="guise-mobile">
                  <div class="guise-mobile-show" ref="scrollbar">
                    <div class="js">
                      <div class="head"><img :src="user.avatar" /></div>
                      <div class="name">{{ user.nickName }}</div>
                      <div class="introduce" v-html="user.introduce" v-if="user.introduce"></div>
                      <el-empty v-else description="暂无个人介绍" :image-size="80" v-else></el-empty>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue';
export default {
  name: 'Index',
  components: {},
  data() {
    return {
      user: this.$store.state.user,
      data: { count: {} },
      menu: [
        {
          icon: '&#xe6b6;',
          color: '#607D8B',
          name: '患者信息',
          url: '/visit',
          hasPermi: 'work:visit:list'
        },
        {
          icon: '&#xe716;',
          color: '#1890ff',
          name: '复诊提醒',
          url: '/follow/up',
          hasPermi: 'work:up:list'
        },
        {
          icon: '&#xe62f;',
          color: '#FF5722',
          name: '随访记录',
          url: '/follow/record',
          hasPermi: 'work:record:list'
        },
        {
          icon: '&#xe60b;',
          color: '#4CAF50',
          name: '随访模板',
          url: '/follow/template',
          hasPermi: 'work:template:list'
        },
        {
          icon: '&#xe69a;',
          color: '#3F51B5',
          name: '知识库',
          url: '/knowledge',
          hasPermi: 'work:knowledge:list'
        }
      ]
    };
  },
  computed: {
    user() {
      return this.$store.state.user;
    }
  },
  created() {
    this.getData();
  },
  methods: {
    getData() {
      this.ajax({ url: '/home/index' }).then((response) => {
        this.data = response.data;
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 15px 20px 0px 20px;
  .mtitle {
    margin-bottom: 20px;
    margin-top: -15px;
  }
  .chart-wrapper {
    margin-top: -15px;
    .pop {
      float: left;
      width: 33.33%;
      overflow: hidden;
      .out {
        margin: 16px 10px 10px 10px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        border-radius: 10px;
        .int {
          padding: 15px;
          background: #fff;
          overflow: hidden;
          border-radius: 10px;
        }
      }
    }
  }
  .bos {
    float: left;
    padding: 0px 10px 0px 10px;
    width: 100%;
    border: 0px;
    .yr {
      float: left;
      width: 25%;
      .rout {
        padding: 6px;
        .rint {
          padding: 10px;
          border-radius: 5px;
          overflow: hidden;
          .icon {
            float: left;
            font-size: 30px;
            background-color: white;
            border-radius: 50%;
            padding: 10px;
            width: 50px;
            height: 50px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
          }
          .rcon {
            float: left;
            padding-left: 12px;
            width: calc(100% - 55px);
            .rtt {
              font-size: 14px;
            }
            .rdesc {
              font-weight: bold;
              padding-top: 7px;
            }
          }
          .ctt {
            color: #393939;
            font-size: 15px;
            padding-top: 19px;
          }
        }
      }
    }
  }
}
</style>
