<template>
  <div class="app-container">
    <el-form
      :model="getListByUserquery"
      ref="queryForm"
      size="small"
      :inline="true"
      v-show="showSearch"
      label-width="100px"
    >
      <el-form-item label="护理站编号" prop="nurseStationCode">
        <el-input
          v-model="getListByUserquery.nurseStationCode"
          placeholder="请输入护理站编号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="护理站名称" prop="nurseStationName">
        <el-input
          v-model="getListByUserquery.nurseStationName"
          placeholder="请输入护理站名称"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['system:station:add']"
        >新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['system:station:edit']"
        >修改</el-button>
      </el-col>

      <el-col :span="1.5">
        <el-button
          type="info"
          plain
          icon="el-icon-upload2"
          size="mini"
          @click="handledata"
          v-hasPermi="['system:station:importStationInfo']"
        >导入</el-button>
      </el-col>

      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>
    <el-table
      v-loading="loading"
      :data="nurseStationlist"
      @selection-change="handleSelectionChange"
      :element-loading-text="loadingtext"
    >
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="护理站编号" align="center" prop="nurseStationCode" width="150" />
      <el-table-column
        label="护理站名称"
        align="center"
        prop="nurseStationName"
        :show-overflow-tooltip="true"
      />
      <el-table-column label="所属区域" align="center" prop="area">
        <template slot-scope="scope">
          <span>
            {{
            scope.row.areaName !== "null-null-null-null"
            ? scope.row.areaName
            : ""
            }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="护理站地址" align="center" prop="address" :show-overflow-tooltip="true" />
      <el-table-column label="护理站经度" align="center" prop="longitude" />
      <el-table-column label="护理站纬度" align="center" prop="latitude" />
      <el-table-column label="联系电话" align="center" prop="phone" />
      <el-table-column label="负责人" align="center" prop="dutyPerson" />
      <el-table-column label="负责人电话" align="center" prop="dutyPhone" />
      <el-table-column label="创建时间" align="center" prop="createTime" />
      <el-table-column label="创建人" align="center" prop="createBy" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-loading"
            @click="GenerateQRcode(scope.row)"
          >生成二维码</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['system:station:edit']"
          >修改</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['system:station:remove']"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total2 > 0"
      :total="total2"
      :page.sync="getListByUserquery.pageNum"
      :limit.sync="getListByUserquery.pageSize"
      @pagination="info"
    />
    <!-- 新增修改护理站信息对话框 -->
    <el-dialog
      :title="title"
      :visible.sync="open"
      width="800px"
      append-to-body
      :before-close="cancel"
    >
      <el-form :inline="true" ref="form" :model="form" :rules="rules" label-width="120px">
        <el-form-item label="所属区域" prop="areaCode">
          <el-select v-model="form.provinceName" clearable placeholder="请选择省" style="width: 129px">
            <el-option
              v-for="item in provincelist"
              :key="item.areaCode"
              :label="item.areaName"
              :value="item.areaCode"
              @click.native="province(item)"
            ></el-option>
          </el-select>
          <el-select
            v-model="form.cityName"
            clearable
            placeholder="请选择市"
            style="width: 129px; margin-left: 10px"
          >
            <el-option
              v-for="item in citylist"
              :key="item.areaCode"
              :label="item.areaName"
              :value="item.areaCode"
              @click.native="clickcity(item)"
            ></el-option>
          </el-select>
          <el-select
            v-model="form.regionName"
            clearable
            placeholder="请选择区"
            style="width: 129px; margin-left: 10px"
          >
            <el-option
              v-for="item in arealist"
              :key="item.areaCode"
              :label="item.areaName"
              :value="item.areaCode"
              @click.native="clickarea(item)"
            ></el-option>
          </el-select>
          <el-select
            v-model="form.streetCode"
            clearable
            placeholder="请选择街道"
            style="width: 129px; margin-left: 10px"
          >
            <el-option
              v-for="item in streetlist"
              :key="item.areaCode"
              :label="item.areaName"
              :value="item.areaCode"
              @click.native="clickstreet(item)"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="护理站名称" prop="nurseStationName">
          <el-input v-model="form.nurseStationName" placeholder="请输入护理站名称" maxlength="40" />
        </el-form-item>
        <el-form-item label="护理站地址" prop="address">
          <el-input v-model="form.address" placeholder="请输入护理站地址" maxlength="80" />
        </el-form-item>
        <el-form-item label="护理站经度" prop="longitude">
          <el-input
            v-model="form.longitude"
            placeholder="请输入护理站经度"
            type="number"
            oninput=" if(value.length>10){value=value.slice(0,20)}"
          />
        </el-form-item>
        <el-form-item label="护理站纬度" prop="latitude">
          <el-input
            v-model="form.latitude"
            placeholder="请输入护理站纬度"
            type="number"
            oninput=" if(value.length>10){value=value.slice(0,20)}"
          />
        </el-form-item>
        <el-form-item label="联系电话" prop="phone">
          <el-input v-model="form.phone" placeholder="请输入联系电话" maxlength="11" />
        </el-form-item>
        <el-form-item label="护理机构分类" prop="classifyNameList">
          <template>
            <el-button
              @click="clickinnerVisible()"
              type
              style="
                width: 208px;
                text-align: left;
                height: 36px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                color: #c0c4cc;
                margin-top: -10px;
              "
              v-if="form.classifyNameList == '请选择护理站所属机构分类'"
            >{{ form.classifyNameList }}</el-button>
            <el-button
              @click="clickinnerVisible()"
              type
              style="
                width: 208px;
                text-align: left;
                height: 36px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                margin-top: -10px;
              "
              v-else
            >{{ form.classifyNameList }}</el-button>
          </template>
        </el-form-item>
        <el-form-item label="负责人" prop="dutyPerson">
          <el-input v-model="form.dutyPerson" placeholder="请输入负责人" maxlength="20" />
        </el-form-item>
        <el-form-item label="负责人电话" prop="dutyPhone">
          <el-input v-model="form.dutyPhone" placeholder="请输入负责人联系电话" maxlength="11" />
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-input
            placeholder="请输入排序"
            v-model="form.sort"
            oninput="value=value.replace(/[^\d]/g,'')"
            maxlength="5"
          />
        </el-form-item>
        <el-form-item label="营业概述" prop="openingHoursDescribe">
          <el-input
            style="width: 208px"
            v-model="form.openingHoursDescribe"
            placeholder="请输入护理站营业概述"
            maxlength="150"
          />
        </el-form-item>
        <el-form-item label="上午营业时间">
          <el-time-select
            style="width: 208px"
            placeholder="上午营业开始时间"
            v-model="form.morningOpenStartTime"
            :picker-options="{
              start: '07:00',
              step: '00:30',
              end: '14:00',
            }"
          ></el-time-select>
          <el-time-select
            style="width: 208px; margin-left: 10px"
            placeholder="上午营业结束时间"
            v-model="form.morningOpenEndTime"
            :picker-options="{
              start: '08:00',
              step: '00:30',
              end: '14:30',
            }"
          ></el-time-select>
        </el-form-item>
        <el-form-item label="下午营业时间">
          <el-time-select
            style="width: 208px"
            placeholder="下午营业开始时间"
            v-model="form.afternoonOpenStartTime"
            :picker-options="{
              start: '12:00',
              step: '00:30',
              end: '18:00',
            }"
          ></el-time-select>
          <el-time-select
            style="width: 208px; margin-left: 10px"
            placeholder="下午营业结束时间"
            v-model="form.afternoonOpenEndTime"
            :picker-options="{
              start: '13:00',
              step: '00:30',
              end: '20:00',
            }"
          ></el-time-select>
        </el-form-item>
        <el-form-item label="护理站总概述" prop="nurseStationDescription">
          <el-input
            style="width: 540px"
            v-model="form.nurseStationDescription"
            placeholder="请输入护理站信息总概述"
            type="textarea"
            maxlength="150"
          />
        </el-form-item>
        <el-form-item label="护理站简介" prop="agencyIntroduce">
          <editor
            @imgs="imgs"
            :min-height="62"
            style="width: 90%; margin: 0 auto"
            v-model="form.agencyIntroduce"
          ></editor>
        </el-form-item>
        <el-form-item label="护理站头像" prop="stationPictureUrl" required style="margin-left: 10%">
          <stationAcatar
            @imgUrl="imgUrl"
            :img="form.stationPictureUrl"
            :type="'stationPictureUrl'"
          />
        </el-form-item>
        <el-form-item label="护理站简介头像" prop="stationIntroducePcitureUrl" style="margin-left: 10%">
          <stationAcatar
            @imgUrl="imgUrl2"
            :img="form.stationIntroducePcitureUrl"
            :type="'stationIntroducePcitureUrl'"
          />
        </el-form-item>
        <el-form-item label="护理站标签信息" required label-width="130px" style="margin-left: 0px">
          <el-table
            ref="looknurseStationLabel"
            :data="looknurseStationLabel"
            style="margin-top: 50px"
          >
            <el-table-column label="标签名称" width="190" align="center">
              <template slot-scope="scope">
                <el-input v-model="scope.row.labelDescription" maxlength="40"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="排序" width="200" align="center">
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.labelSort"
                  oninput="value=value.replace(/[^\d]/g,'')"
                  maxlength="5"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="120">
              <template slot-scope="scope">
                <el-button size="mini" type="text" @click="addnurseStationLabelList">新增</el-button>
                <el-button
                  size="mini"
                  type="text"
                  @click="delnurseStationLabelList(scope.$index, scope.row)"
                >删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 护理分类 -->
    <el-dialog
      title="选择护理机构分类"
      :visible.sync="Classifyshow"
      width="1100px"
      append-to-body
      :before-close="cancelClassifyshow"
    >
      <el-form :model="classifyquery" label-width="150px" :inline="true">
        <el-form-item label="护理机构分类编码" prop="classifyCode">
          <el-input v-model="classifyquery.classifyCode" placeholder="请输入护理机构分类编码" />
        </el-form-item>
        <el-form-item label="护理机构分类名称" prop="classifyName">
          <el-input v-model="classifyquery.classifyName" placeholder="请输入护理机构分类名称" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="classifylistInfo">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="classifylistcancel">重置</el-button>
        </el-form-item>
      </el-form>
      <el-table v-loading="loading" :data="classifylist" @cell-dblclick="setCheckedData">
        <el-table-column label="请选择" width="70" align="center">
          <template slot-scope="scope">
            <el-button
              type="primary"
              style="width: 15px; height: 15px"
              circle
              @click="setCheckedData(scope.row)"
              v-if="checkedDataList.find((e) => e == scope.row.id)"
            ></el-button>

            <el-button
              style="width: 15px; height: 15px"
              circle
              v-else
              @click="setCheckedData(scope.row)"
            ></el-button>
          </template>
        </el-table-column>
        <el-table-column property="classifyCode" label="护理项目分类编码" align="center"></el-table-column>
        <el-table-column property="classifyName" label="护理项目分类名称" align="center"></el-table-column>
      </el-table>
      <pagination
        v-show="classifytotal > 0"
        :total="classifytotal"
        :page.sync="classifyquery.pageNum"
        :limit.sync="classifyquery.pageSize"
        @pagination="classifylistInfo"
      />
      <el-button
        type="primary"
        size="mini"
        @click="choiceclassify"
        style="
          margin-top: 30px;
          margin-left: 85%;
          width: 100px;
          height: 50px;
          font-size: 15px;
        "
      >选择完成</el-button>
    </el-dialog>
    <!-- //导入 -->
    <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
      <el-upload
        ref="upload"
        :limit="1"
        accept=".xlsx, .xls"
        :headers="upload.headers"
        :action="upload.url"
        :disabled="upload.isUploading"
        :on-progress="handleFileUploadProgress"
        :on-success="handleFileSuccess"
        :auto-upload="false"
        drag
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">
          将文件拖到此处，或
          <em>点击上传</em>
        </div>
        <div class="el-upload__tip text-center" slot="tip">
          <span>仅允许导入xls、xlsx格式文件。</span>
          <el-link
            type="primary"
            :underline="false"
            style="font-size: 12px; vertical-align: baseline"
            @click="importTemplate"
          >下载模板</el-link>
        </div>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFileForm">确 定</el-button>
        <el-button @click="upload.open = false">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 邀请二维码 -->
    <el-dialog title="机构二维码" :visible.sync="nurseStationFriendsshow" width="500px" append-to-body>
      <div>
        <el-form :inline="true" ref="form" :model="nurseStationFriendslist" label-width="130px">
          <el-form-item label="机构名称" prop="nurseStationName">
            <div class="text">{{nurseStationFriendslist.nurseStationName}}</div>
          </el-form-item>
          <el-form-item label="机构地址" prop="nurseStationName">
            <div class="text texts">{{nurseStationFriendslist.address}}</div>
          </el-form-item>
        </el-form>
        <img style="width:400px;margin-left:25px" :src="nurseStationFriendslist.img" alt />
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="nurseStationFriendsshow=false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import stationjs from "./stationjs";
export default stationjs;
</script>
<style>
.text {
  width: 300px;
  height: 40px;
  line-height: 40px;
  padding-left: 15px;
  font-size: 14px;
  border-radius: 4px;
  padding: 0 15px;
  color: black;
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  text-align: justify;
}
.texts {
  line-height: 20px;
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  text-align: justify;
}
</style>