<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:importData']"
          >导入</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"
    >
      <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-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="sort">
          <el-input
            v-model="form.sort"
            placeholder="排序不可输入小数点"
            type="number"
            min="0"
            oninput="if(value.indexOf('.')>0){value=value.slice(0,value.indexOf('.')+0)} if(value.length>8){value=value.slice(0,8)}"
          />
        </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="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
            :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"
                  placeholder="排序不可输入小数点"
                  type="number"
                  min="0"
                  oninput="if(value.indexOf('.')>0){value=value.slice(0,value.indexOf('.')+0)} if(value.length>10){value=value.slice(0,10)}"
                ></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="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>
  </div>
</template>

<script>
import stationjs from "./stationjs";
export default stationjs;
</script>
