<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"
              @input="handleNewLabelNameChange"
              >
            </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)
          let hasNoLabel = 0;  // 是否存在未分组
          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){
                hasNoLabel = 1;
                break;
              }
            }
            if( hasNoLabel == 1 ){
              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;
      },
      handleNewLabelNameChange() {
        if(this.isAddLabelError == true){
          this.isAddLabelError = false;
          this.addNewLabelTips = '';
        }
      },
      submitForm() {
        let params = {
          labelName: this.ruleForm.newLabelName,
        };
        if(!params.labelName){
          this.isAddLabelError = true;
          this.addNewLabelTips = '请输入分组名称';
          return;
        }
        // 请求新增
        createNewLabel(params).then(data => {
          // 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>
  @import "../../../style/patient-manager/labels-manager/labels-list.less";
</style>

<style lang="less">
  @import "../../../style/patient-manager/labels-manager/labels-list-wrap.less";
</style>


