<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:value="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="totalListCount >= 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="新增分组"
        v-model:visible="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:value="ruleForm.newLabelName"
              placeholder="请填写分组名称，最多15个字符"
              maxlength="15"
              @input="handleNewLabelNameChange"
            >
            </el-input>
            <div class="err-text">{{ addNewLabelTips }}</div>
          </el-form-item>
        </el-form>
        <template v-slot:footer>
          <span class="dialog-footer">
            <el-button @click="handleClose">取 消</el-button>
            <el-button type="primary" @click="submitForm">确 定</el-button>
          </span>
        </template>
      </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: data.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>
