ncs_ui/src/views/customer/components/customerManager.vue

<template>

  <div>
    <ag-grid-layout
      toolbar
      :table-height="tableHeight"
      theme="ag-theme-alpine"
      :column-defs="columnDefs"
      :row-data="rowData"
      :locale-text="localeText"
      :grid-options="gridOptions"
      :default-col-def="defaultColDef"
      :animate-rows="true"
      :row-selection="rowSelection"
      :framework-components="frameworkComponents"
      @filterChanged="filterModifed"
      @sortChanged="gridSortChange"
    >
      <!--        @rowDoubleClicked="getList"-->
      <div slot="toolbar" class="inner-toolbar">
        <div class="toolbar-search">
          <en-table-search :placeholder="this.$t('action.keywords')" @search="handlerSearch" />
        </div>
        <div class="toolbar-btns">
          <el-button v-if="part_view" type="primary" size="mini" :disabled="!isEmptyFrame" @click="handleAdd">{{ this.$t('customerManage.customerAdd') }}</el-button>
          <el-button v-if="part_view" type="danger" size="mini" @click="batchDelete">{{ this.$t('action.deleteList') }}</el-button>
        </div>
      </div>
      <el-pagination
        v-if="pageData"
        slot="pagination"
        :current-page="pageData.page_no"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageData.page_size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageData.data_total"
        @size-change="handlePageSizeChange"
        @current-change="handlePageCurrentChange"
      />
    </ag-grid-layout>

    <!-- 用户信息 -->
    <el-dialog :visible.sync="customerFormVisible" :title="this.$t('customerManage.customerInfo')" class="customer-dialog" width="60%">
      <el-tabs v-model="activeName" type="border-card" tab-position="bottom" width="50%" @tab-click="handleClick">
        <el-tab-pane :label="this.$t('customerManage.baseInfo')" name="customerBaseInfo">
          <div>
            <el-form ref="editForm" :model="formmodel" :rules="rules" label-width="145px">
              <el-row>
                <el-col :span="12">
                  <el-form-item :label="this.$t('customerManage.named')" prop="named">
                    <el-input v-model="formmodel.named" clearable :placeholder="this.$t('customerManage.inputNamed')" :maxlength="20" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item :label="this.$t('customerManage.cardNo')">
                    <el-input v-model="formmodel.card_no" clearable :placeholder="this.$t('customerManage.inputCardNo')" :maxlength="20" />
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="12">
                  <el-form-item :label="this.$t('member.sex')" class="form-item-sex">
                    <el-radio v-model="formmodel.sex" :label="0">{{ this.$t('member.woman') }}</el-radio>
                    <el-radio v-model="formmodel.sex" :label="1">{{ this.$t('member.man') }}</el-radio>
<!--                    <el-radio v-model="formmodel.sex" :label="2">未知</el-radio>-->
                  </el-form-item>
                </el-col>

                <el-col :span="12">
                  <el-form-item :label="this.$t('customerManage.age')" prop="age">
                    <el-input v-model="formmodel.age" clearable :maxlength="4" :placeholder="this.$t('customerManage.inputAge')">
                      <el-select slot="append" v-model="formmodel.age_unit" :placeholder="this.$t('customerManage.choiceAgeUnit')">
                        <el-option :label="this.$t('customerManage.year')" :value="this.$t('customerManage.year')" />
                        <el-option :label="this.$t('customerManage.month')" :value="this.$t('customerManage.month')" />
                        <el-option :label="this.$t('customerManage.day')" :value="this.$t('customerManage.day')" />
                      </el-select>
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item :label="this.$t('member.mobile')" prop="mobile">
                    <el-input v-model="formmodel.mobile" clearable :placeholder="this.$t('member.inputMobile')" :maxlength="20" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item :label="this.$t('member.homeAddress')" prop="address">
                    <el-input v-model="formmodel.address" clearable :maxlength="20" :placeholder="this.$t('member.inputHomeAddress')" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item :label="this.$t('member.birthday')" prop="birthday">
                    <el-date-picker
                      v-model="formmodel.birthday"
                      type="date"
                      :editable="false"
                      value-format="timestamp"
                      :placeholder="this.$t('member.choiceBirthday')"
                      :picker-options="{ disabledDate(time) { return time.getTime() > Date.now() }}"
                      @change="birthdayChange"
                    />
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="12">
                  <el-form-item :label="this.$t('customerManage.inDate')" prop="in_date">
                    <el-date-picker
                      v-model="formmodel.in_date"
                      type="date"
                      :editable="false"
                      value-format="timestamp"
                      :default-value="new Date()"
                      :placeholder="this.$t('customerManage.choiceDate')"
                      :picker-options="{ disabledDate(time) { return time.getTime() > Date.now() }}"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item :label="this.$t('customerManage.outDate2')" prop="out_date">
                    <el-date-picker
                      v-model="formmodel.out_date"
                      type="date"
                      :editable="false"
                      value-format="timestamp"
                      :default-value="new Date()"
                      :placeholder="this.$t('customerManage.choiceDate')"
                      :picker-options="{ disabledDate(time) { return time.getTime() <= formmodel.in_date }}"
                    />
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="12">
                  <el-form-item :label="this.$t('customerManage.idType')">
                    <el-radio v-model="formmodel.id_type" label="身份证">{{ this.$t('customerManage.idCard') }}</el-radio>
                    <el-radio v-model="formmodel.id_type" label="护照">{{ this.$t('customerManage.passport') }}</el-radio>
                    <el-radio v-model="formmodel.id_type" label="军人证">{{ this.$t('customerManage.servicemanCard') }}</el-radio>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item :label="this.$t('customerManage.idNo')">
                    <el-input v-model="formmodel.id_no" clearable :placeholder="this.$t('customerManage.inputIdNo')" :maxlength="20" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>

                <el-col :span="16">
                  <el-row>
                    <el-col :span="12">
                      <el-form-item :label="this.$t('customerManage.nickname')" prop="nickname">
                        <el-input v-model="formmodel.nickname" clearable :placeholder="this.$t('customerManage.inputNickname')" :maxlength="20" />
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item :label="this.$t('customerManage.frame')" prop="frame_id">
                        <el-select v-model="formmodel.frame_id" :disabled="bedSelectabled"
                                   :placeholder="this.$t('customerManage.choiceFrame')">
                          <el-option v-for="(item,index) in emptyBeds" :key="index" :label="item.full_name" :value="item.id" />
                        </el-select>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-form-item :label="this.$t('customerManage.illnessDesc3')">
<!--                    <el-input-->
<!--                      v-model="formmodel.illness_desc"-->
<!--                      type="textarea"-->
<!--                      :autosize="{ minRows: 2, maxRows: 4}"-->
<!--                      :minlength="2"-->
<!--                      :maxlength="50"-->
<!--                      :placeholder="this.$t('customerManage.inputIllnessDesc')"-->
<!--                    />-->
                    <el-select v-model="formmodel.illness_desc" :placeholder="this.$t('customerManage.choiceIllnessDesc')" clearable>
                      <el-option v-for="(item, index) in Object.keys(childbirthTypeEnum)" :key="index" :label="childbirthTypeEnum[item]" :value="item" />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item :label="this.$t('member.face')">
                    <el-upload
                      class="avatar-uploader"
                      :action="`${uploadServer}/ncs/upload/uploadFile?scene=avatar`"
                      :show-file-list="false"
                      :on-success="uploaded"
                      :before-upload="handleShopLogoBefore"
                    >
                      <img v-if="imageUrl" :src="imageUrl" class="avatar">
                      <i v-else class="el-icon-plus avatar-uploader-icon" />
                    </el-upload>
                  </el-form-item>
                </el-col>
                <!--            <el-row>-->
                <!--              <el-col :span="8">-->
                <!--                <el-form-item :label="责任医生">-->
                <!--                  <el-select v-model="formmodel.doctor_id" :placeholder="请选择医生" @change="doctorChange(1)">-->
                <!--                    <el-option v-for="(item,index) in doctors" :key="index" :label="item.clerk_name" :value="item.clerk_id" />-->
                <!--                  </el-select>-->
                <!--                </el-form-item>-->
                <!--              </el-col>-->
                <!--              <el-col :span="8">-->
                <!--                <el-form-item :label="责任护士">-->
                <!--                  <el-select v-model="formmodel.nurse_id" :placeholder="请选择护士" @change="doctorChange(2)">-->
                <!--                    <el-option v-for="(item,index) in nurses" :key="index" :label="item.clerk_name" :value="item.clerk_id" />-->
                <!--                  </el-select>-->
                <!--                </el-form-item>-->
                <!--              </el-col>-->
                <!--              <el-col :span="8">-->
                <!--                <el-form-item :label="责任护工">-->
                <!--                  <el-select v-model="formmodel.worker_id" :placeholder="请选择护工" @change="doctorChange(3)">-->
                <!--                    <el-option v-for="(item,index) in workers" :key="index" :label="item.clerk_name" :value="item.clerk_id" />-->
                <!--                  </el-select>-->
                <!--                </el-form-item>-->
                <!--              </el-col>-->
                <!--            </el-row>-->

                <!--            <el-row v-if="nurseData.length > 0">-->
                <!--              <el-col v-for="(item, index) in nurseList" :key="index" :span="24 / nurseList.length">-->
                <!--                <el-form-item :label="item[0]">-->
                <!--                  <el-select v-model="nurseData[index].nurse_level" :placeholder="'请选择'+item[0]" @change="changeNurseData(index)">-->
                <!--                    <el-option v-for="(t,i) in item[1]" :key="i" :label="t.option_name" :value="t.id">-->
                <!--                      <span style="float: left">{{ t.option_name }}</span>-->
                <!--                      <span :style="'float: right; background-color: #'+t.color_rgb+';color: #'+t.color_rgb">颜色</span>-->
                <!--                    </el-option>-->
                <!--                  </el-select>-->
                <!--                </el-form-item>-->
                <!--              </el-col>-->
                <!--            </el-row>-->

              </el-row>

              <el-row>
                <el-col :span="24" :offset="8">
                  <vue-qr
                      v-if="formmodel.member_id && qrCode"
                      :text="qrCode"
                      :size="150"
                      :correctLevel="0"
                  ></vue-qr>
                </el-col>
              </el-row>

              <el-form-item>
                <el-button type="primary" :disabled="isDisabled" class="save" @click="handlerSubmit('editForm')">{{ this.$t('action.save') }}</el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-tab-pane>
        <el-tab-pane v-if="formmodel.id" :label="this.$t('customerManage.customerRelative')" name="customerRelative">
          <div style="height: 450px">
            <!--            <customer-relative :member-id="memberId" />-->
            <el-table
                :data="relativeData"
                height="250"
                border
                style="width: 100%"
            >
              <el-table-column
                  prop="named"
                  :label="this.$t('customerManage.customerRelativeTrueName')"
                  width="180"
              />
<!--              <el-table-column-->
<!--                  prop="sex"-->
<!--                  :label="this.$t('member.sex')"-->
<!--                  width="180"-->
<!--                  :formatter="formatterSex"-->
<!--              />-->
              <el-table-column
                  prop="relative_name"
                  :label="this.$t('customerManage.relativeName')"
                  width="180"
                  :formatter="formatterRelativeName"
              />
              <el-table-column
                  prop="mobile"
                  :label="this.$t('member.mobile')"
              />
              <el-table-column
                  :label="this.$t('action.handle')"
                  width="100"
              >
                <template slot-scope="scope">
                  <el-button type="danger" size="mini" @click="handlerDeleteRelative(scope.row.id)">{{ deleted }}</el-button>
                </template>
              </el-table-column>
            </el-table>

            <el-form ref="relativeForm" :model="relativeFormModel" :rules="relativeRules" label-width="120px" style="margin-top:20px">
              <el-row>
                <el-col :span="12">
                  <el-form-item :label="this.$t('customerManage.customerRelativeTrueName')" prop="true_name">
                    <el-input v-model="relativeFormModel.true_name" clearable :placeholder="this.$t('customerManage.inputCustomerRelativeTrueName')" :maxlength="20" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item :label="this.$t('customerManage.relativeName')" prop="relative_name">
<!--                    <el-input v-model="relativeFormModel.relative_name" clearable-->
<!--                              :placeholder="this.$t('customerManage.inputRelativeName')" :maxlength="20" />-->
                    <el-select v-model="relativeFormModel.relative_name" :placeholder="this.$t('customerManage.choiceRelativeName')" clearable  @change="relativeNameChange">
                      <el-option v-for="(item, index) in Object.keys(relativeNameTypeEnum)" :key="index" :label="relativeNameTypeEnum[item]" :value="item" />
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
<!--                <el-col :span="12">-->
<!--                  <el-form-item :label="this.$t('member.sex')" class="form-item-sex">-->
<!--                    <el-radio v-model="relativeFormModel.sex" :label="0">{{ this.$t('member.woman') }}</el-radio>-->
<!--                    <el-radio v-model="relativeFormModel.sex" :label="1">{{ this.$t('member.man') }}</el-radio>-->
<!--                    &lt;!&ndash;                    <el-radio v-model="relativeFormModel.sex" :label="2">未知</el-radio>&ndash;&gt;-->
<!--                  </el-form-item>-->
<!--                </el-col>-->
                <el-col :span="12">
                  <el-form-item :label="this.$t('member.mobile')" prop="mobile">
                    <el-input v-model="relativeFormModel.mobile" clearable :placeholder="this.$t('member.inputMobile')" :maxlength="20" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item v-if="isChild"
                      :label="this.$t('member.birthday2')" prop="birthday">
                    <el-date-picker
                        v-model="relativeFormModel.birthday"
                        type="date"
                        :editable="false"
                        value-format="timestamp"
                        :placeholder="this.$t('member.choiceBirthday2')"
                        :picker-options="{ disabledDate(time) { return time.getTime() > Date.now() }}"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-form-item>
                <el-button type="primary" @click="addRelative">{{ this.$t('action.add') }}</el-button>
              </el-form-item>
            </el-form>

          </div>

        </el-tab-pane>

        <el-tab-pane v-if="formmodel.id" :label="this.$t('customerManage.vital')" name="customer-vital-sign">
            <vital-sign-log :member-id="formmodel.member_id+''" :active-name="'vital_signs1'"/>
        </el-tab-pane>

        <el-tab-pane v-if="formmodel.id" :label="this.$t('customerManage.remark')" name="customerRemark">
          <div style="height: 450px;display: flex;flex-direction: column;">
            <div style="height: 350px;overflow-y: auto;box-sizing:border-box;box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);margin:5px -10px">
              <el-card v-for="(item, index) in remarks" :key="index" style="margin-bottom: 10px">
                <div>
                  <span style="margin-left: 20px;font-weight:bold">{{ customerRemarks }}</span><span style="line-height:1.5">{{ item.content }}</span>
                </div>
                <div style="margin: 10px">
                  <div style="float: left">
                    <span v-if="item.file_name">
                      <el-link :href="item.file_path" icon="el-icon-folder" type="success" target="_blank" :download="item.file_name">{{ item.file_name }}</el-link>
                    </span>
                  </div>
                  <div style="float: right">
                    <p>
                      <span style="font-weight:bold">{{ customerRemarkTime }}</span>{{ item.create_time | unixDateFilter }}
                      <span style="font-weight:bold;margin-left: 10px;">{{ customerRemarkName }}</span>{{ item.create_name }}
                    </p>
                  </div>
                </div>
              </el-card>

            </div>
            <div style="height: 100px;">
              <el-form ref="remarkForm" :model="remarkFormModel" :rules="remarkRules" label-width="100px" style="margin-right: 10px">
                <el-row>
                  <el-col :span="16">
                    <el-form-item :label="this.$t('action.content')" prop="content">
                      <el-input
                        v-model="remarkFormModel.content"
                        type="textarea"
                        :autosize="{ minRows: 2, maxRows: 6}"
                        :minlength="2"
                        :maxlength="300"
                        show-word-limit
                        :placeholder="this.$t('action.inputContent')"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item :label="this.$t('action.uploader')" style="margin-bottom: 0">
                      <el-upload
                        v-if="!attachFilePath"
                        class="attach-uploader"
                        :action="`${uploadServer}/ncs/upload/uploadFile?scene=attach`"
                        :show-file-list="false"
                        :on-success="attachUploaded"
                        :before-upload="handleAttachUploadBefore"
                      >
                        <i class="el-icon-plus attach-uploader-icon" />
                      </el-upload>
                      <span v-if="attachFilePath">{{ remarkFormModel.fileName }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-form-item>
                  <el-button type="primary" @click="addRemark">{{ this.$t('customerManage.addRemark') }}</el-button>
                </el-form-item>
              </el-form>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane v-if="formmodel.id && boolDevice" :label="this.$t('customerManage.footprint')" name="footprint">
          <my-map-html :map-url="mapUrl" style="width: 100%; height: 670px;"></my-map-html>
        </el-tab-pane>

        <el-tab-pane v-if="formmodel.id" :label="this.$t('customerManage.fee')" name="customer-fee-sign">
          <customer-fee :customer-id="formmodel.id" :active-name="'fee_signs1'"/>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
    <!-- 用户信息 -->
    <!-- 用户换床-->
    <el-dialog :visible.sync="changeBedFormVisible" :title="this.$t('customerManage.changeBed')">
      <el-form ref="changeBedForm" :model="changeBedFormModel" :rules="changeBedRules" label-width="120px">
        <el-row>
          <el-col :span="12">
            <el-form-item :label="this.$t('customerManage.named')" prop="named">
              <el-input v-model="changeBedFormModel.named" clearable :placeholder="this.$t('customerManage.inputNamed')" readonly :maxlength="20" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="this.$t('customerManage.cardNo')">
              <el-input v-model="changeBedFormModel.card_no" clearable :placeholder="this.$t('customerManage.inputCardNo')" readonly :maxlength="20" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item :label="this.$t('member.sex')" class="form-item-sex">
              <el-radio v-model="changeBedFormModel.sex" :label="0" disabled>{{ this.$t('member.woman') }}</el-radio>
              <el-radio v-model="changeBedFormModel.sex" :label="1" disabled>{{ this.$t('member.man') }}</el-radio>
              <el-radio v-model="changeBedFormModel.sex" :label="2" disabled>{{ this.$t('member.unknown') }}</el-radio>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item :label="this.$t('customerManage.age')" prop="age">
              <el-input v-model="changeBedFormModel.age" clearable :maxlength="4" readonly
                        :placeholder="this.$t('customerManage.inputAge')">
                <el-select slot="append" v-model="changeBedFormModel.age_unit" disabled
                           :placeholder="this.$t('customerManage.choiceAgeUnit')">
                  <el-option :label="this.$t('customerManage.year')" :value="this.$t('customerManage.year')" />
                  <el-option :label="this.$t('customerManage.month')" :value="this.$t('customerManage.month')" />
                  <el-option :label="this.$t('customerManage.day')" :value="this.$t('customerManage.day')" />
                </el-select>
              </el-input>
            </el-form-item>
          </el-col>

        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item :label="this.$t('customerManage.oldBed')" prop="current_bed">
              <el-input v-model="changeBedFormModel.current_bed" clearable readonly :maxlength="20" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="this.$t('customerManage.newBed')" prop="frame_id">
              <el-select v-model="changeBedFormModel.frame_id" clearable filterable :placeholder="this.$t('customerManage.choiceNewBed')">
                <el-option v-for="(item,index) in emptyBeds" :key="index" :label="item.full_name" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>

        </el-row>

        <el-form-item>
          <el-button type="primary" class="save" @click="handleChangeBedSubmit('changeBedForm')">{{ this.$t('action.yes') }}</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 用户换床-->

    <el-dialog :visible.sync="detailsVisible" :title="formmodel.named + this.$t('customerManage.message')" class="customer-dialog">
      <el-descriptions class="margin-top" :column="2" border  style="padding: 20px">
<!--        <template slot="extra">-->
<!--          <el-button type="primary" size="small">操作</el-button>-->
<!--        </template>-->
        <el-descriptions-item>
          <template slot="label"><i class="el-icon-user"></i>{{ this.$t('customerManage.named') }}</template>{{ formmodel.named }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"><i class="el-icon-user-solid"></i>{{ this.$t('customerManage.nickname') }}</template>{{ formmodel.nickname }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"><i class="el-icon-help"></i>{{ this.$t('customerManage.cardNo') }}</template>{{ formmodel.card_no }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"><i class="el-icon-smoking"></i>{{ this.$t('customerManage.frame') }}</template>{{ formmodel.full_name }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"><i class="el-icon-time"></i>{{ this.$t('customerManage.inDate') }}</template>{{ formatterDate({ data: { in_date: formmodel.in_date, out_date: formmodel.out_date } }) }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"><i class="el-icon-attract"></i>{{ this.$t('member.sex') }}</template>{{ formatterSex(formmodel) }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"><i class="el-icon-star-off"></i>{{ this.$t('customerManage.age') }}</template>{{formmodel.age}}{{formmodel.age_unit}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"><i class="el-icon-bank-card"></i>{{ this.$t('customerManage.id') }}</template>
          <span v-if="formmodel.id_no">{{ formmodel.id_type }}  {{ formmodel.id_no }}</span>
          <span v-else>{{ this.$t('customerManage.null') }}</span>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"><i class="el-icon-present"></i>{{ this.$t('member.birthday') }}</template>{{ unixDateFormatter2({ value: formmodel.birthday}) }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"><i class="el-icon-mobile-phone"></i>{{ this.$t('member.mobile') }}</template>{{ formmodel.mobile }}
        </el-descriptions-item>
        <el-descriptions-item :span="2">
          <template slot="label"><i class="el-icon-office-building"></i>{{ this.$t('member.homeAddress') }}</template>{{ formmodel.address }}
        </el-descriptions-item>
        <el-descriptions-item :span="3">
          <template slot="label"><i class="el-icon-document"></i>{{ this.$t('customerManage.illnessDesc') }}</template>{{ formmodel.illness_desc }}
        </el-descriptions-item>
      </el-descriptions>
    </el-dialog>
  </div>

</template>

<script>
// 月子中心版，没有责任医生，责任护士，责任护工选项 也没有护理项参数
import { AG_GRID_LOCALE_CN } from '@/utils/AgGridVueLocaleCn'
import ButtonCellRender from '@/components/AgGridCellRender/ButtonCellRender'
import ButtonCellRenderList from '@/components/AgGridCellRender/ButtonCellRenderList'
import ListFilter from '@/components/AgGridCustomFilter/ListFilter'
import RadioFilter from '@/components/AgGridCustomFilter/RadioFilter'
import * as API_Customer from '@/api/ncs_customer'
import { unix2Date, unixToDate } from '@/utils/Foundation'
import * as API_Frame from '@/api/ncs_hospitalFrame'
import * as RegExp from '@/utils/RegExp'
// import { serverUrl } from '@/utils/domain'
import * as API_Remark from '@/api/ncs_remark'
import * as API_User from '@/api/user'
import { FRAME_TYPE } from '@/utils/enum/FrameTypeEnum'
import vitalSignLog from '@/views/vital-sign/log'
import CustomerFee from '@/views/ncs_fee/index'
import vueQr from 'vue-qr'
import * as API_SystemConfig from '@/api/ncs_systemconfig'
import {RELATIVE_NAME_TYPE} from "@/utils/enum/RelativeNameTypeEnum";
import {CHILDBIRTH_TYPE} from "@/utils/enum/ChildbirthTypeEnum";
import * as shop_API from "@/api/ncs_shop";
import {getDevicesByUuid} from "@/api/initialize"
import myMapHtml from '@/views/customer/myMapHtml'
import {getRelativeList, removeRelative} from "@/api/ncs_relative";
const serverUrl = domain.serverUrl
export default {
  name: 'CustomerManager',
  components: { ButtonCellRenderList, ButtonCellRender, ListFilter, RadioFilter, vitalSignLog, vueQr, myMapHtml, CustomerFee },
  filters: {
    unixDateFilter(val) {
      return unixToDate(val)
    }
  },
  props: {
    frame: {
      type: Object,
      default: () => {}
    },
    part_view: { // 是否为科室视图
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      /** ag-grid参数 **/
      pageData: {}, // 翻页数据
      columnDefs: null,
      rowData: null,
      defaultColDef: null,
      gridOptions: null,
      gridApi: null,
      columnApi: null,
      localeText: AG_GRID_LOCALE_CN,
      filterState: null,
      rowSelection: null,
      frameworkComponents: null,
      isCloud: false,
      /** 列表参数 */
      params: {
        page_size: 20,
        page_no: 1,
        fixedCondition: this.part_view ? (Object.keys(this.frame).length === 0 ? 'part_id=' + this.$store.getters.partId
          : 'part_id=' + this.$store.getters.partId + ' and frame_id =' + this.formmodel.member_id)
          : (Object.keys(this.frame).length === 0 ? '1 = 1' : ' frame_id =' + this.formmodel.member_id)
      },
      customerFormVisible: false,
      activeName: 'customerBaseInfo',
      formmodel: {
        sex: 0,
        id_type: '身份证',
        age_unit: this.$t('customerManage.year'),
        in_date: (new Date()).valueOf(),
        mobile: ''
      },
      /** 上传接口 **/
      uploadServer: serverUrl,
      imageUrl: null,
      /** 是否禁用保存按钮 **/
      isDisabled: false,
      /** 备注 */
      remarks: [],
      customerRemarks: this.$t('customerManage.remarks'),
      customerRemarkTime: this.$t('customerManage.remarkTime'),
      customerRemarkName: this.$t('customerManage.remarkName'),
      deleted: this.$t('action.delete'),
      remarkParams: {
        page_size: 100,
        page_no: 1,
        sort: 'create_time',
        dir: 'desc',
        fixedCondition: this.part_view ? (Object.keys(this.frame).length === 0 ? 'part_id=' + this.$store.getters.partId
          : 'part_id=' + this.$store.getters.partId + ' and frame_id =' + this.formmodel.member_id)
          : (Object.keys(this.frame).length === 0 ? '1 = 1' : ' frame_id =' + this.formmodel.member_id)
      },
      remarkFormModel: {
        content: ''
      },
      remarkRules: {
        content: [{ required: true, message: this.$t('customerManage.inputRemarks'), trigger: 'blur' }]
      },
      attachFilePath: null,
      /** 亲属表单 **/
      relativeData: [],
      relativeFormModel: {
        sex: 0,
        true_name: null,
        relative_name: null,
        mobile: null
      },
      relativeParams: {
        page_size: 100,
        page_no: 1,
        sort: 'create_time',
        dir: 'desc',
        fixedCondition: this.part_view ? (Object.keys(this.frame).length === 0 ? 'part_id=' + this.$store.getters.partId
          : 'part_id=' + this.$store.getters.partId + ' and frame_id =' + this.formmodel.member_id)
          : (Object.keys(this.frame).length === 0 ? '1 = 1' : ' frame_id =' + this.formmodel.member_id)
      },
      relativeRules: {
        true_name: [{ required: true, message: this.$t('customerManage.inputRemarks'), trigger: 'blur' }],
        relative_name: [{ required: true, message: this.$t('customerManage.inputRelativeName'), trigger: 'blur' }],
        mobile: [
          { required: this.isCloud, message: this.$t('member.inputMobile'), trigger: 'blur',
            // validator: (rule, value, callback) => {
            //   // this.isCloud = false
            //   if (this.isCloud === false) {
            //     if (value === null || value === '') { // 手机号可为空
            //       callback()
            //     }
            //   // }
            //   // if (!RegExp.mobile.test(value)) {
            //   //   callback(new Error(this.$t('member.mobileInputMsg')))
            //   // } else {
            //     callback()
            //   }
            // }
          }
        ]
      },
      /** 换床 */
      changeBedFormVisible: false,
      changeBedFormModel: {

      },
      changeBedRules: {
        frame_id: [{ required: true, message: this.$t('customerManage.choiceFrame'), trigger: 'blur' }]
      },
      /** 空床位 **/
      emptyBeds: [],
      partFrames: [],
      /** frame 是否为空床位 */
      isEmptyFrame: true,
      rules: {
        named: [
          this.MixinRequired(this.$t('customerManage.inputNamed'))
        ],
        age: [
          { required: true, message: this.$t('customerManage.inputAge'), trigger: 'blur' }
          // { required: false, message: '请输入年龄', trigger: 'blur' }
        ],
        mobile: [
          this.MixinRequired(this.$t('member.inputMobile')),
          {
            validator: (rule, value, callback) => {
              // if (!RegExp.mobile.test(value)) {
              //   callback(new Error(this.$t('member.mobileInputMsg')))
              // } else {
                callback()

            }
          }
        ],
        // mobile: [
        //   { required: false, message: '请输入手机号码', trigger: 'blur' }
        // ],
        frame_id: [
          { required: Object.keys(this.frame).length === 0, message: this.$t('customerManage.choiceFrame'), trigger: 'blur' } // 没有传入frame 属性，必须选择床位
        ]
      },
      doctors: [],
      nurses: [],
      workers: [],
      nurseData: [],
      sexTransfer: [
        { key: this.$t('member.man'), value: 1, color: 'green' },
        { key: this.$t('member.woman'), value: 0, color: 'red' }
      ],
      customerStatusTransfer: [
        { key: this.$t('customerManage.customerStatusTrue'), value: 0, color: 'green' },
        { key: this.$t('customerManage.customerStatusFalse'), value: 1, color: 'red' }
      ],
      detailsVisible: false,
      qrCode: null,
      relativeNameTypeEnum: RELATIVE_NAME_TYPE.getValueList(),
      childbirthTypeEnum: CHILDBIRTH_TYPE.getValueList(),
      isChild: false,
      shop: {},
      boolDevice: false,
      mapUrl: null
    }
  },
  computed: {
    tableHeight() {
      return Object.keys(this.frame).length === 0 ? this.mainAreaHeight - 130 : this.mainAreaHeight - 174
    },
    /** 床位是否允许选择，如果已限定空间结构，则不可选 */
    bedSelectabled() { return Object.keys(this.frame).length > 0 }
  },
  watch: {
    frame(val, oldvalue) {
      if (val.type === FRAME_TYPE.HOSPITAL) { // 医院
        this.params.fixedCondition = 'part_id in (SELECT shop_id FROM ncs_shop WHERE parent_id = ' + this.frame.hospital_id + ')'
      } else if (val.type === FRAME_TYPE.PART) { // 科室
        this.params.fixedCondition = ' part_id =' + this.frame.part_id
      } else if (val.type === FRAME_TYPE.ROOM) { // 房间
        const ids = []
        this.frame.children.forEach(item => {
          ids.push(item.id)
        })
        if (ids.length > 0) {
          this.params.fixedCondition = ' frame_id in (' + ids + ')'
        } else {
          this.params.fixedCondition = ' frame_id = ' + this.frame.id
        }
      } else {
        this.params.fixedCondition = ' frame_id = ' + this.frame.id
      }
      this.getList()
      this.infoChanged()
    }
  },
  beforeMount() {
    const _this = this
    this.gridOptions = {
      onCellDoubleClicked: function (row) {
        _this.formmodel = {
          ...row.data
        }
        _this.detailsVisible = true
      }
    }
    this.columnDefs = [
      {
        headerName: '#',
        headerCheckboxSelection: true,
        headerCheckboxSelectionFilteredOnly: true,
        checkboxSelection: true,
        sortable: false, filter: false,
        width: 50,
        resizable: false,
        valueGetter: this.hashValueGetter
      },
      // { headerName: 'ID', field: 'id', sortable: true, filter: 'agNumberColumnFilter', width: 100 },
      { headerName: this.$t('customerManage.named'), field: 'named', sortable: true, filter: 'agTextColumnFilter', width: 160 },
      { headerName: this.$t('customerManage.nickname'), field: 'nickname', sortable: true, filter: 'agTextColumnFilter', width: 130 },
      { headerName: this.$t('customerManage.frame'), field: 'full_name', sortable: true, filter: 'agTextColumnFilter' },
      { headerName: this.$t('customerManage.customerStatus'), field: 'status', sortable: true, filterFramework: 'RadioFilter', width: 130,
        filterParams: {
          listData: this.customerStatusTransfer
        },
        cellRenderer: this.customerStatusRenderer },
      // lockPosition 锁定位置，会在第一列
      // lockPinned = true 不能拖动然后固定
      // resizeable 单元个大小是否可以调整
      { headerName: this.$t('member.sex'), field: 'sex', sortable: true, filterFramework: 'RadioFilter', width: 130,
        filterParams: {
          listData: this.sexTransfer
        },
        cellRenderer: this.sexRenderer },
      { headerName: this.$t('customerManage.age'), field: 'age', sortable: true, filter: 'agNumberColumnFilter', width: 130, valueFormatter: this.sexFormatter
      },
      { headerName: this.$t('member.birthday'), field: 'birthday', sortable: true, filter: 'agDateColumnFilter', width: 130, valueFormatter: this.unixDateFormatter2, filterParams: {
          comparator: (filterLocalDateAtMidnight, cellValue) => { // 所有数据都由服务器端过滤，此处只需返回0 即可
            const celldate = unixToDate(cellValue, 'yyyy-MM-dd 00:00:00')
            return (new Date(celldate).getTime() / 1000) - (filterLocalDateAtMidnight.getTime() / 1000)
          }
        }},
      { headerName: this.$t('customerManage.cardNo'), field: 'card_no', sortable: true, filter: 'agTextColumnFilter' },
      { headerName: this.$t('customerManage.idType'),
        field: 'id_type',
        sortable: true,
        filter: 'agTextColumnFilter',
        valueFormatter: this.idCardFormatter
      },
      { headerName: this.$t('customerManage.idNo'), field: 'id_no', sortable: true, filter: 'agNumberColumnFilter', valueFormatter: this.idNoFormatter },
      { headerName: this.$t('member.mobile'), field: 'mobile', sortable: true, filter: 'agTextColumnFilter' },
      { headerName: this.$t('member.homeAddress'), field: 'address', sortable: true, filter: 'agTextColumnFilter', width: 260 },

      { headerName: this.$t('customerManage.inDate'), field: 'in_date', sortable: true, filter: 'agDateColumnFilter', valueFormatter: this.formatterDate, filterParams: {
        comparator: (filterLocalDateAtMidnight, cellValue) => { // 所有数据都由服务器端过滤，此处只需返回0 即可
          const celldate = unixToDate(cellValue, 'yyyy-MM-dd 00:00:00')
          return (new Date(celldate).getTime() / 1000) - (filterLocalDateAtMidnight.getTime() / 1000)
        }
      }},
      // { headerName: '离开时间', field: 'out_date', sortable: true, filter: 'agDateColumnFilter', valueFormatter: this.unixDateFormatter, filterParams: {
      //   comparator: (filterLocalDateAtMidnight, cellValue) => { // 所有数据都由服务器端过滤，此处只需返回0 即可
      //     const celldate = unixToDate(cellValue, 'yyyy-MM-dd 00:00:00')
      //     return (new Date(celldate).getTime() / 1000) - (filterLocalDateAtMidnight.getTime() / 1000)
      //   }
      // }},
      { headerName: this.$t('action.handle'), field: 'id',
        cellRendererFramework: 'ButtonCellRenderList',
        cellRendererParams: param => {
          return {
            list: [
              {
                onClick: this.handleEdit,
                label: this.$t('action.edit'),
                buttonType: 'primary',
                buttonSize: 'mini'
              },
              {
                onClick: this.handleOut,
                label: this.$t('customerManage.outBed'),
                buttonType: 'warning',
                buttonSize: 'mini',
                disabled: param.data['status'] !== 0
              },
              {
                onClick: this.handleChangeBed,
                label: this.$t('customerManage.changeBed'),
                buttonType: 'success',
                buttonSize: 'mini',
                disabled: param.data['status'] !== 0
              },{
                onClick: this.deleteSingle,
                label: this.$t('action.delete'),
                buttonType: 'danger',
                buttonSize: 'mini',
                disabled: param.data['member_name'] === 'superadmin'
              }
          ]}
        },
        filter: false,
        pinned: 'right',
        lockPinned: true,
        minWidth: this.$i18n.locale === 'zh' ? 260 : 380,
        resizable: false,
        sortable: false },
      // { headerName: '退床', field: 'id',
      //   cellRendererFramework: 'ButtonCellRender',
      //   cellRendererParams: param => {
      //     return {
      //       onClick: this.handleOut,
      //       label: '退床',
      //       buttonType: 'warning',
      //       buttonSize: 'mini',
      //       disabled: param.data['status'] !== 0
      //     }
      //   },
      //   filter: false,
      //   pinned: 'right',
      //   lockPinned: true,
      //   width: 80,
      //   resizable: false,
      //   sortable: false },
      // { headerName: '换床', field: 'id',
      //   cellRendererFramework: 'ButtonCellRender',
      //   cellRendererParams: param => {
      //     return {
      //       onClick: this.handleChangeBed,
      //       label: '换床',
      //       buttonType: 'success',
      //       buttonSize: 'mini',
      //       disabled: param.data['status'] !== 0
      //     }
      //   },
      //   filter: false,
      //   pinned: 'right',
      //   lockPinned: true,
      //   width: 80,
      //   resizable: false,
      //   sortable: false },
      // { headerName: '删除', field: 'shop_id',
      //   cellRendererFramework: 'ButtonCellRender',
      //   cellRendererParams: param => {
      //     return {
      //       onClick: this.deleteSingle,
      //       label: '删除',
      //       buttonType: 'danger',
      //       buttonSize: 'mini',
      //       disabled: param.data['member_name'] === 'superadmin'
      //     }
      //   },
      //   pinned: 'right',
      //   lockPinned: true,
      //   width: 80,
      //   resizable: false,
      //   filter: false,
      //   sortable: false }
    ]
    this.defaultColDef = {
      // filter: 'agTextColumnFilter',
      sortable: true,
      resizable: true,
      // comparator: this.dateCustomComparator,
      filterParams: {
        debounceMs: 500,
        newRowsAction: 'keep',
        textCustomComparator: this.textCustomComparator
      }
    }
    this.rowSelection = 'multiple'
  },
  mounted() {
    window.onresize = this.windowResize()
    this.gridApi = this.gridOptions.api
    this.gridColumnApi = this.gridOptions.columnApi
    this.gridColumnApi.applyColumnState({
      state: [
        {
          colId: 'status',
          sort: 'asc'
        }
      ]
    })
    this.getShop(this.$store.getters.partId)
    this.getCloud()
  },
  methods: {
    windowResize() {
      this.$set(this, 'mainAreaHeight', Number(document.documentElement.clientHeight) - 84)
    },
    getEmptyBeds() {
      return new Promise((resolve, reject) => {
        if (this.shop.shop_type === "0" && this.shop.parent_id === -1) {
          API_Frame.getAllSickbed(this.$store.getters.partId).then(res => {
            this.emptyBeds = [...res]
            resolve()
          }).catch(err => {
            this.$message.error(this.$t('customerManage.getEmptyBed') + err.message)
            reject()
          })
        } else {
          API_Frame.getSickbedByPartId(this.$store.getters.partId).then(res => {
            this.emptyBeds = [...res]
            resolve()
          }).catch(err => {
            this.$message.error(this.$t('customerManage.getEmptyBed') + err.message)
            reject()
          })
        }
      })
    },
    /** 分页大小发生改变 */
    handlePageSizeChange(size) {
      this.params.page_size = size
      this.getList()
    },

    /** 分页页数发生改变 */
    handlePageCurrentChange(page) {
      this.params.page_no = page
      this.getList()
    },
    /** 加载列表数据 */
    getList() {
      const param = this.MixinClone(this.params)
      this.gridApi.showLoadingOverlay()
      API_Customer.getList(param).then(response => {
        this.rowData = [...response.data]
        this.pageData = {
          page_no: response.page_no,
          page_size: response.page_size,
          data_total: response.data_total
        }
        this.$nextTick(() => {
          const node = this.gridApi.getDisplayedRowAtIndex(0)
          if (node !== null && node !== undefined) {
            node.setSelected(true)
          }
        })
      })
    },
    /**
       * 过滤状态发生变化，发送到服务器检索数据
       */
    filterModifed(param) {
      var model = param.api.getFilterModel()
      this.params.filter = JSON.stringify(model)
      this.getList()
    },
    gridSortChange(param) {
      console.log('sortparam', param)
      const columnState = param.columnApi.getColumnState()
      // 排序状态
      const sortState = columnState.filter(function(s) {
        return s.sort != null
      }).map(function(s) {
        return {
          colId: s.colId,
          sort: s.sort,
          sortIndex: s.sortIndex
        }
      }).sort(function(a, b) {
        return a.sortIndex - b.sortIndex
      })
      if (sortState.length > 0) {
        if (sortState.length === 1) {
          this.params.sort = sortState[0].colId
          this.params.dir = sortState[0].sort
        } else {
          let sortstring = ''
          sortState.forEach(function(item) {
            sortstring += item.colId + ' ' + item.sort + ','
          })
          this.params.sort = sortstring.substring(0, sortstring.length - 1)
          this.params.dir = ' '
        }
      } else {
        delete this.params.sort
        delete this.params.dir
      }

      this.getList()
    },
    /** 处理搜索 */
    handlerSearch(keywords) {
      this.params.query = keywords
      this.getList()
    },
    /** 入住登记 **/
    handleAdd() {
      this.customerFormVisible = true
      this.activeName = 'customerBaseInfo'
      this.formmodel = {
        sex: 0,
        id_type: '身份证',
        age_unit: this.$t('customerManage.year'),
        in_date: (new Date()).valueOf(),
        out_date: (new Date()).valueOf(),
        mobile: '',
        part_id: this.part_view ? this.$store.getters.partId : this.frame.part_id
      }
      if (Object.keys(this.frame).length > 0) {
        this.$set(this.formmodel, 'frame_id', this.frame.id)
      }
    },
    /** 性别格式化 **/
    sexRenderer(params) {
      if (params.value === null || params.value === undefined) return ''
      const item = this.sexTransfer.filter(p => p.value === params.value)[0]
      if (item) {
        return '<span style="color:' + item.color + ';">' + item.key + '</span>'
      } else {
        return this.$t('member.unknown')
      }
    },
    /** 状态格式化 **/
    customerStatusRenderer(params) {
      if (params.value === null || params.value === undefined) return ''
      const item = this.customerStatusTransfer.filter(p => p.value === params.value)[0]
      if (item) {
        return '<span style="color:' + item.color + ';">' + item.key + '</span>'
      } else {
        return this.$t('member.unknown')
      }
    },
    /** 格式化时间函数 */
    unixDateFormatter(param) {
      if (!param.value) return ''
      return unix2Date(param.value * 1000)
    },
    unixDateFormatter2(param) {
      if (!param.value) return ''
      return unix2Date(param.value * 1000, 'yyyy-MM-dd')
    },
    sexFormatter(param) {
      return param.value + param.data.age_unit
    },
    /**
     * 身份证转换
     */
    idCardFormatter(param) {
      if (param.value === '身份证') {
        return this.$t('customerManage.idCard');
      } else if (param.value === '护照') {
        return this.$t('customerManage.passport');
      } else if (param.value === '军人证') {
        return this.$t('customerManage.servicemanCard');
      } else {
        return this.$t('customerManage.null');
      }
    },
    idNoFormatter(param) {
      if (param.value) {
        return param.data.id_type + '：' +  param.value
      } else {
        return this.$t('customerManage.noIdCard')
      }
    },
    formatterDate(param) {
      let date = unixToDate(param.data.in_date, 'yyyy-MM-dd')
      if (param.data.out_date) {
        date += this.$t('customerManage.to') + unixToDate(param.data.out_date, 'yyyy-MM-dd')
      } else {
        if (param.data.in_date) {
          date += this.$t('customerManage.today')
        }
      }
      return date
    },
    handleClick() {
      if (this.activeName === 'footprint') {
        this.$router.push({path:'/myMapHtml', query: {mapUrl: this.mapUrl}})
      }
    },
    /** 生日选择变化，修改年龄字段 */
    birthdayChange(val) {
      const ageObj = this.getAge(val)
      console.log('ageobj', ageObj)
      this.$set(this.formmodel, 'age_unit', ageObj.ageunit)
      this.$set(this.formmodel, 'age', ageObj.age)
      // this.formmodel.age_unit = ageObj.ageunit
      // this.formmodel.age = ageObj.age
    },
    getAge(birthday) {
      const birth = new Date(birthday)
      const birthYear = birth.getFullYear() // 出生年
      const birthMonth = birth.getMonth() + 1 // 出生月
      const birthDay = birth.getDate() // 出生日
      const nowYear = new Date().getFullYear() // 出生年
      const nowMonth = new Date().getMonth() + 1 // 出生月
      const nowDay = new Date().getDate() // 出生日

      if (nowYear === birthYear) { // 同年
        if (nowMonth === birthMonth) { // 同月
          return {
            age: nowDay - birthDay,
            ageunit: '天'
          }
        } else {
          return {
            age: nowMonth - birthMonth,
            ageunit: '月'
          }
        }
      } else { // 计算周岁
        const ageDiff = nowYear - birthYear // 年之差
        if (ageDiff > 0) {
          if (nowMonth === birthMonth) { // 同月
            const dayDiff = nowDay - birthDay// 日之差
            if (dayDiff < 0) {
              return {
                age: ageDiff - 1,
                ageunit: '岁'
              }
            } else {
              return {
                age: ageDiff,
                ageunit: '岁'
              }
            }
          } else {
            const monthDiff = nowMonth - birthMonth // 月之差
            if (monthDiff < 0) {
              return {
                age: ageDiff - 1,
                ageunit: '岁'
              }
            } else {
              return {
                age: ageDiff,
                ageunit: '岁'
              }
            }
          }
        }
      }
    },
    /** 上传成功后的钩子 更换图片 置空存储数组*/
    uploaded(response) {
      this.imageUrl = serverUrl + '/' + response
      this.formmodel.face = serverUrl + '/' + response
    },
    /** 图片上传之前的校验 */
    handleShopLogoBefore(file) {
      const isImg = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/gif'
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isImg) {
        this.$message.error(this.$t('member.faceImg'))
      }
      if (!isLt2M) {
        this.$message.error(this.$t('member.faceSize'))
      }
      return isImg && isLt2M
    },
    /** 入住登记 */
    handlerSubmit(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.isDisabled = true
          if (this.formmodel.in_date) {
            this.$set(this.formmodel, 'in_date', this.formmodel.in_date / 1000) // 将毫秒数转换成秒
          }
          if (this.formmodel.out_date) {
            this.$set(this.formmodel, 'out_date', this.formmodel.out_date / 1000) // 将毫秒数转换成秒
          }
          if (this.formmodel.birthday) {
            this.$set(this.formmodel, 'birthday', this.formmodel.birthday / 1000) // 将毫秒数转换成秒
          }
          if (!this.formmodel.id) {
            API_Customer.addAll(this.formmodel).then(res => {
              this.$message.success(this.$t('action.addSuccess'))
              this.customerFormVisible = false
              this.isDisabled = false
              this.getList()
              this.infoChanged()
              this.$emit('saved')
            }).catch(e => {
              this.isDisabled = false
            })
          } else {
            API_Customer.updateAll(this.formmodel).then(res => {
              this.$message.success(this.$t('action.editSuccess'))
              this.customerFormVisible = false
              this.isDisabled = false
              this.getList()
              this.$emit('saved')
            })
          }
        } else {
          this.$message.error(this.$t('action.fromError'))
          return false
        }
      })
    },

    /** 删除用户 **/
    deleteSingle(row) {
      this.handlerDelete(row.id)
    },
    /** 单条数据删除处理 */
    handlerDelete(ids) {
      const test = this.$t('member.deleteMember')
      this.$confirm(test, this.$t('action.waring'), {
        confirmButtonText: this.$t('action.yes'),
        cancelButtonText: this.$t('action.cancel'),
        type: 'warning'
      }).then(() => {
        API_Customer.remove(ids).then(
          response => {
            this.$emit('saved')
            this.getList()
            this.infoChanged()
          }
        ).catch(response => {
          this.$message({
            type: 'info',
            message: response.message
          })
        })
      }).catch(() => {
        this.$message.info(this.$t('action.cancelDelete'))
      })
    },

    handleEdit(row) {
      this.boolDevice = false
      this.relativeRules.mobile[0].required = this.isCloud
      this.formmodel = {
        ...row
      }
      if (row['face']) {
        this.imageUrl = row['face']
      } else {
        this.imageUrl = null
      }

      // 编辑时把当前用户床位加入到空床位，否则会显示一个床位Id号
      this.emptyBeds.push({ id: this.formmodel.frame_id, full_name: this.formmodel.full_name })
      if (this.formmodel.in_date) {
        this.$set(this.formmodel, 'in_date', this.formmodel.in_date * 1000)
      }
      if (this.formmodel.out_date) {
        this.$set(this.formmodel, 'out_date', this.formmodel.out_date * 1000)
      }
      if (this.formmodel.birthday) {
        this.$set(this.formmodel, 'birthday', this.formmodel.birthday * 1000)
      }
      this.customerFormVisible = true
      this.getQrCode()
      this.getRemarks()
      this.getRelatives()
      if (this.isCloud) {
        const _this = this
        getDevicesByUuid(row.uuid).then(res => {
          if (res) {
            _this.boolDevice = true
            _this.mapUrl = res
          }
        })
      }
    },
    /** 出院 退床 **/
    handleOut(row) {
      this.formmodel = {
        ...row,
        status: 1
      }
      this.$confirm(this.$t('customerManage.sureOutBed'), this.$t('action.waring'), {
        confirmButtonText: this.$t('action.yes'),
        cancelButtonText: this.$t('action.cancel'),
        type: 'warning'
      }).then(() => {
        API_Customer.updateAll(this.formmodel).then(res => {
          this.$message.success(this.$t('customerManage.outBedSuccess'))
          this.$emit('saved')
          this.getList()
          this.infoChanged()
        })
      }).catch(() => {
        this.$message.info(this.$t('action.cancelHandle'))
      })
    },
    /** 换床 **/
    handleChangeBed(row) {
      this.changeBedFormVisible = true
      this.changeBedFormModel = {
        ...row,
        current_bed: row.full_name,
        frame_id: null
      }
    },
    /** 提交换床 */
    handleChangeBedSubmit(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          API_Customer.updateAll(this.changeBedFormModel).then(res => {
            this.$message.success(this.$t('customerManage.changeBedSuccess'))
            this.$emit('saved')
            this.getList()
            this.infoChanged()
            this.changeBedFormVisible = false
          })
        } else {
          this.$message.error(this.$t('action.fromError'))
          return false
        }
      })
    },
    /** 获取用户备注 */
    getRemarks() {
      this.remarkParams.fixedCondition = 'part_id=' + this.$store.getters.partId + ' and type=1 and member_id =' + this.formmodel.member_id
      API_Remark.getRemarks(this.remarkParams).then(res => {
        this.remarks = [...res.data]
      })
    },
    /** 添加备注 */
    addRemark() {
      this.$refs['remarkForm'].validate(valid => {
        if (valid) {
          if (!this.filePath) {
            this.fileName = null
          }
          const data = {
            ...this.remarkFormModel,
            partId: this.$store.getters.partId,
            type: 1,
            memberId: this.formmodel.member_id,
            createName: this.$store.getters.userInfo.username
          }

          API_Remark.save(data).then(res => {
            this.$message.success(this.$t('action.addSuccess'))
            this.remarkFormModel = {}
            this.attachFilePath = null
            this.getRemarks()
          })
        } else {
          this.$message.error(this.$t('action.fromError'))
          return false
        }
      })
    },
    /** 附件上传成功 */
    attachUploaded(res) {
      this.attachFilePath = serverUrl + '/' + res
      this.remarkFormModel.filePath = serverUrl + '/' + res
    },
    /** 附件上传之前校验 */
    handleAttachUploadBefore(file) {
      return new Promise((resolve, reject) => {
        const filename = file.name
        this.remarkFormModel.fileName = filename
        const index = filename.lastIndexOf('.')
        const extension = filename.substring(index + 1)
        const isImg = extension === 'jpeg' || extension === 'png' || extension === 'jpg' || extension === 'txt' || extension === 'doc' || extension === 'docx' || extension === 'xls' || extension === 'xlsx'
        const isLt5M = file.size / 1024 / 1024 < 5
        if (!isImg) {
          this.$message.error(this.$t('action.uploaderImg'))
          reject()
        }
        if (!isLt5M) {
          this.$message.error(this.$t('action.uploaderSize'))
          reject()
        }
        resolve()
      })
    },
    /** 添加亲属 */
    addRelative() {
      this.$refs['relativeForm'].validate(valid => {
        if (valid) {
          this.relativeFormModel.relative_id = this.formmodel.member_id
          if (this.relativeFormModel.birthday) {
            this.$set(this.relativeFormModel, 'birthday', this.relativeFormModel.birthday / 1000) // 将毫秒数转换成秒
          }
          API_User.addRelative(this.relativeFormModel).then(res => {
            this.relativeFormModel = {
              sex: 0,
              true_name: null,
              relative_name: null,
              mobile: null
            }
            this.getRelatives()
          })
        }
      })
    },
    /** 拉取亲属列表 **/
    getRelatives() {
      this.relativeParams.fixedCondition = ' member_id=' + this.formmodel.member_id
      getRelativeList(this.relativeParams).then(res => {
        this.relativeData = res.data
      }).catch(() => {

      })
    },
    /** 单条数据删除处理 */
    handlerDeleteRelative(ids) {
      const test = this.$t('customerManage.sureDeleteRelative')
      this.$confirm(test, this.$t('action.waring'), {
        confirmButtonText: this.$t('action.yes'),
        cancelButtonText: this.$t('action.cancel'),
        type: 'warning'
      }).then(() => {
        removeRelative(ids).then(
          response => {
            this.getRelatives()
          }
        ).catch(response => {
          this.$message({
            type: 'info',
            message: response.message
          })
        })
      })
    },
    formatterSex(row) {
      if (row.sex === 1) {
        return this.$t('member.man')
      } else if (row.sex === 0) {
        return this.$t('member.woman')
      } else {
        return this.$t('member.unknown')
      }
    },
    formatterRelativeName(row) {
      return RELATIVE_NAME_TYPE.getDescFromValue(row.relative_name) ? RELATIVE_NAME_TYPE.getDescFromValue(row.relative_name) : row.relative_name
    },
    relativeNameChange(val) {

      if (val === RELATIVE_NAME_TYPE.CHILDREN || val === RELATIVE_NAME_TYPE.BOY || val === RELATIVE_NAME_TYPE.GIRL) {
        this.relativeRules.mobile[0].required = false
        this.relativeRules.mobile[0].validator = (rule, value, callback) => { callback() }
        this.isChild = true
        if (val === RELATIVE_NAME_TYPE.BOY) {
          this.relativeFormModel.sex = 1
        } else if (val === RELATIVE_NAME_TYPE.GIRL) {
          this.relativeFormModel.sex = 0
        }
      }
      else if (val === RELATIVE_NAME_TYPE.HUSBAND || val === RELATIVE_NAME_TYPE.FATHER) {
        this.relativeRules.mobile[0].required = true
        this.isChild = false
        this.relativeFormModel.sex = 1
      }
      else if (val === RELATIVE_NAME_TYPE.WIFE || val === RELATIVE_NAME_TYPE.MOTHER) {
        this.relativeRules.mobile[0].required = true
        this.isChild = false
        this.relativeFormModel.sex = 0
      }
      else {
        this.relativeRules.mobile[0].required = true
        this.isChild = false
      }
    },
    /** 信息变化后操作，如床位状态改变，传入的空间结构变化了 **/
    infoChanged() {
      this.getEmptyBeds().then(() => {
        // 传入结构是否为空床位
        if (Object.keys(this.frame).length > 0) {
          this.isEmptyFrame = this.emptyBeds.filter(p => p.id === this.frame.id).length > 0
        }
      }).catch(() => {

      })
    },
    /** 批量数据删除处理(删除选中的行) */
    batchDelete: function() {
      const rows = this.gridApi.getSelectedRows()
      if (rows.length === 0) {
        this.$message({ type: 'info', message: this.$t('member.pleaseChoiceDelete') })
        return
      }
      const ids = []
      const uids = []
      rows.forEach(function(item) {
        ids.push(item.id)
        uids.push(item.member_id)
      })
      this.handlerDelete(ids.join(','))
      this.deleteMembers(uids) // 同时删除用户
    },
    async deleteMembers(ids) {
      API_User.remove(ids)
    },
    getQrCode(){
      API_User.getUnionId(this.formmodel.member_id).then(r => {
        this.qrCode = 'http://m.wdklian.com/care/apk/care.user?type=USER_LOGIN&uid=' +  r
      })
    },
    getCloud() {
      API_SystemConfig.cloud().then(r => {
        this.isCloud = r
      })
    },
    getShop(shopId) {
      shop_API.getShop(shopId).then(res => {
        this.shop = res;
        this.getEmptyBeds()
        this.getPartFrame(shopId)
      })
    },
    getFrame(frame_id) {
      return this.partFrames.filter(item => item.id === frame_id)
    },
    getPartFrame(partId) {
      if (this.shop.shop_type === "0" && this.shop.parent_id === -1) {
        API_Frame.getAllFrames(partId).then(res => {
          this.partFrames = [...res]
        })
      } else {
        API_Frame.getFramesPartId(partId).then(res => {
          this.partFrames = [...res]
        })
      }
    }
  }
}
</script>

   <style scoped type="text/scss">
                                 /deep/ .customer-dialog .el-dialog__body{
                                     padding: 1px;
                                 }

    .el-input-group__append .el-select {
       width: 60px;
   }
   /*/deep/ .el-input-group__append {*/
   /*    background-color: #fff;*/
   /*}*/
                                 /deep/ .avatar-uploader,/deep/ .attach-uploader{
                                     line-height: 0;
                                 }
                                 /deep/ .avatar-uploader .el-upload,/deep/.attach-uploader .el-upload {
                                     border: 1px dashed #d9d9d9;
                                     border-radius: 6px;
                                     cursor: pointer;
                                     position: static;
                                     overflow: hidden;
                                     display: inline-block;
                                 }
                                 .avatar-uploader .el-upload:hover {
                                     border-color: #409EFF;
                                 }
                                 .avatar-uploader-icon {
                                     font-size: 28px;
                                     color: #8c939d;
                                     width: 110px;
                                     height: 110px;
                                     line-height: 110px;
                                     text-align: center;
                                 }
                                 .avatar {
                                     width: 110px;
                                     height: 110px;
                                     display: block;
                                 }

                                 .attach-uploader-icon {
                                   font-size: 28px;
                                   color: #8c939d;
                                   width: 60px;
                                   height: 60px;
                                   line-height: 60px;
                                   text-align: center;
                                 }
                                 .attach {
                                   width: 60px;
                                   height: 60px;
                                   display: block;
                                 }
                                 .el-input .el-select {
                                   width: 120px;
                                 }
</style>