<template>
  <div class="label-list-wrap">
    <bread-crumb :curmbFirst="curmbFirst" :curmbSecond="curmbSecond" ></bread-crumb>
    <div class="component-content screenSet" id="screenSet">
      <p class="top-title">分组管理</p>
      <el-row :gutter="30" class="label-name-row">
        <el-col :span="6">
          <el-input v-model="labelName" placeholder="请输入分组名称" size="small"></el-input>
        </el-col>
        <el-col :span="6">
          <el-button type="primary" size="small" class="create-new-label" @click="getList">查询</el-button>
          <el-button type="default" size="small" class="create-new-label" @click="resetLabelName">重置</el-button>
        </el-col>
        <el-col :span="6" class="right">
          <el-button 
            type="primary" size="small" class="create-new-label" 
            :disabled="labelNameList.length >= 999"
            @click="createNewLabel"
            >
            新建分组
          </el-button>
        </el-col>
      </el-row>
      <p class="total-label">共：{{totalListCount}}个分组</p>
      <div class="label-list" v-if="labelNameList && labelNameList.length > 0">
        <el-tag class="each-label" @click="goToDetail(item)" v-for="(item, index) in labelNameList" :key="index">{{item.labelName}}({{item.labelPatientNums}}人)</el-tag>
      </div>
      <div class="table-empty" v-if="labelNameList && labelNameList.length < 1">
        <img class="empty-pic" src="../../../assets/image/no-content1.png">
        <p class="tips">未找到相似分组</p>
      </div>
      <el-dialog
        class="dialog-boxd"
        title="新增分组"
        :visible.sync="centerDialogVisible"
        width="400px"
        center
        :show-close='false'
        :close-on-click-modal="false"
        >
        <el-form>
          <el-form-item :class="addNewLabelClass">
            <el-input 
              type="textarea" 
              v-model="ruleForm.newLabelName" 
              placeholder="请填写分组名称，最多15个字符"
              maxlength="15"
              >
            </el-input>
            <div class="err-text">{{addNewLabelTips}}</div>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="handleClose">取 消</el-button>
          <el-button type="primary" @click="submitForm">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
  import BreadCrumb from "@/components/breadcrumb.vue";
  import * as commonUtil from "@/utils/utils";
  import { getLabelList, createNewLabel } from '@/utils/patients/patientsapi'

  export default {
    data(){
      return {
        curmbFirst: "居民管理",
        curmbSecond: "分组管理",
        labelName: '',
        labelNameList: [],
        totalListCount: 0,
        centerDialogVisible: false,
        ruleForm: {
          newLabelName: '', // 新建分组名
        },
        addNewLabelTips: '',
        isAddLabelError: false,
      }
    },
    components: {
      BreadCrumb,
    },
    created(){
      this.getList();
    },
    computed: {
      addNewLabelClass() {
        return this.isAddLabelError == true ? 'special-error-tips' : ''
      }
    },
    // 挂载到Dom完成时
    mounted() {
      commonUtil.resizeHeight();
    },    
    methods: {
      getList() {
        // 获取分组列表
        let params = {
          type: 1,
        };
        if(this.labelName){
          params.labelName = this.labelName;
        }
        // commonUtil.openLoading(this);
        getLabelList(params).then(data => {
          // commonUtil.closeLoading(this);
          // console.log('获取分组列表>> ', data)
          if(data.data && data.data.labelNameList){
            this.labelNameList = data.data.labelNameList;
            for(let i=0; i<this.labelNameList.length; i++){
              if(this.labelNameList[i].labelId == 0){
                this.totalListCount = this.labelNameList.length - 1;
              }else{
                this.totalListCount = this.labelNameList.length;
              }
            }
          }
        }).catch(err => {
          console.log('error: ', err)
        });
      },
      resetLabelName() {
        this.labelName = '';
        this.getList();
      },
      createNewLabel() {
        console.log('新增分组...');
        this.centerDialogVisible = true;
      },
      submitForm() {
        let params = {
          labelName: this.ruleForm.newLabelName,
        };
        if(!params.labelName){
          this.isAddLabelError = true;
          this.addNewLabelTips = '请输入分组名';
          return;
        }
        // 请求新增
        // commonUtil.openLoading(this);
        createNewLabel(params).then(data => {
          // commonUtil.closeLoading(this);
          console.log('新增分组>> ', data)
          if(data.code == '202520'){  // 分组名重复
            console.log('tips: ', data.message)
            this.isAddLabelError = true;
            this.addNewLabelTips = '该分组名称已被您使用，请重新输入';
            return;
          }
          if(data.code == '000000'){
            console.log('新增成功');
            this.$message({
              message: '新增分组成功',
              type: 'success'
            });
            this.handleClose();
            this.$router.push({
              path: '/patients-manage/labels-manage/labels-detail',
              query: {
                labelId: data.data.labelId,
                labelName: params.labelName
              }
            })
            callback();
          }else{
            this.$message({
              message: '接口返回失败，请重新再试',
              type: 'warning'
            });
            callback();
          }
        }).catch(err => {
          console.log('error: ', err)
        });
      },
      handleClose() {
        this.isAddLabelError = false;
        this.ruleForm.newLabelName = '';
        this.centerDialogVisible = false
      },
      goToDetail(item) {
        this.$router.push({
          path: '/patients-manage/labels-manage/labels-detail',
          query: {
            labelId: item.labelId,
            labelName: item.labelName,
          }
        })
      }
    }  
  }
</script>

<style lang="less" scoped>
  .label-list-wrap{
    .screenSet{
      background: #fff;
      padding: 30px;
      display: flex;
      flex-direction: column;
    }
    .top-title{
      font-size: 20px;
      padding-bottom: 20px;
      border-bottom: 1px solid #efefef;
    }
    .label-name-row{
      margin-top: 10px;
      .right{
        float: right;
        .create-new-label{
          float: right;
        }
      }
    }
    .total-label{
      font-size: 12px; padding: 30px 0 10px;
    }
    .label-list{
      width: 100%;
      height: 100%;
      background: #fff;
      border: 1px solid #efefef;
      border-radius: 4px;
      overflow: hidden;
      overflow-y: scroll; 
      padding: 20px 10px;
      .each-label{
        margin: 0 10px 10px 0;
        color: #449284;
        background: rgba(68,146,132, .1);
        border: 1px solid rgba(68,146,132, .2);
        &:hover{
          color: #fff;
          background: #449284;
          cursor: pointer;
        }
      }
      /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/  
      &::-webkit-scrollbar  
      {  
          width: 5px;  
          height: 5px;  
          background-color: #fff;  
      }  
      /*定义滚动条轨道 内阴影+圆角*/
      &::-webkit-scrollbar-track
      {
          // border-radius: 10px;
          // background-color: rgb(241, 239, 239);
          // background: #fff;
      }
      /*定义滑块 内阴影+圆角*/
      &::-webkit-scrollbar-thumb
      {
          border-radius: 10px;
          -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
          background-color: #bbb;
      }
    }
    .table-empty{
      width: 100%; 
      height: auto;
      text-align: center;
      .empty-pic{
        width: 100px;
        height: 100px;
        display: block;
        border: 0;
        margin: 0 auto;
      }
      .tips{
        font-size: 14px;
        color: #909399;
      }
    }
  }
</style>
<style lang="less">
  .label-list-wrap{
    .el-form-item{
      margin-bottom: 0;
      .el-textarea{
        position: relative;
      }
      .el-textarea__inner{
        outline: none !important;
        resize: none !important;
        height: 80px;
      }
      &.special-error-tips{
        .el-textarea__inner{
          border: 1px solid #F56C6C !important;
          outline: none;
          resize: none;
        }
        .err-text{
          display: block;
           position: absolute;
          left: 0;
          top: 80px;
        }
      }
      .err-text{
        display: none;
        color: #F56C6C;
        font-size: 12px;
        padding-top: 4px;
        line-height: 12px;
      }
    }
  }
  
</style>


