<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      v-show="showSearch"
      label-width="110px"
    >
      <el-form-item
        label="护理站名称"
        prop="nurseStationId"
        label-width="100px"
      >
        <el-button type="" class="stationbtn" @click="ParamsStation(true)">{{
          queryParams.nurseStationName
        }}</el-button>
      </el-form-item>
      <el-form-item label="护理项目编号" prop="nurseItemCode">
        <el-input
          v-model="queryParams.nurseItemCode"
          placeholder="请输入护理项目编号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="护理项目名称" prop="nurseItemName">
        <el-input
          v-model="queryParams.nurseItemName"
          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:stationItem: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:stationItem:edit']"
          >修改</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['system:stationItem:remove']"
          >删除</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="info"
          plain
          icon="el-icon-upload2"
          size="mini"
          @click="handleExport"
          v-hasPermi="['system:stationItem:importStationItem']"
          >导入</el-button
        >
      </el-col>
      <right-toolbar
        :showSearch.sync="showSearch"
        @queryTable="getList"
      ></right-toolbar>
    </el-row>
    <el-table
      v-loading="loading"
      :data="nurseItemList"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="护理时长" style="margin-left: 120px">
              <div
                v-for="(item, index) in props.row.nurseStationItemPrices"
                :key="index"
                style="display: block"
              >
                {{ item.serveDurationUnit }}
              </div>
            </el-form-item>
            <el-form-item label="价格(元)" style="margin-left: 30px">
              <div
                v-for="(item, index) in props.row.nurseStationItemPrices"
                :key="index"
                style="display: block"
              >
                {{ item.price }}
              </div>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column
        label="所属护理站"
        align="center"
        prop="nurseStationName"
      />
      <!-- <el-table-column label="护理类型" align="center" prop="nurseTypeName" /> -->
      <el-table-column
        label="护理项目编号"
        align="center"
        prop="nurseItemCode"
      />
      <el-table-column
        label="护理项目名称"
        align="center"
        prop="nurseItemName"
      />
      <el-table-column
        label="提前预约时长(h)"
        align="center"
        prop="advanceAppointDuration"
      />
      <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:stationItem:edit']"
            >修改</el-button
          >
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['system:stationItem:remove']"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <!-- 添加或修改护理站护理项目对话框 -->
    <el-dialog
      :title="title"
      :visible.sync="open"
      width="1120px"
      append-to-body
      :before-close="cancel"
    >
      <el-form
        ref="form"
        :model="form"
        :rules="rules"
        label-width="130px"
        :inline="true"
      >
        <el-form-item label="所属护理站" required v-if="addxg == 'add'">
          <template>
            <el-button
              type=""
              @click="nurseStationshowclick"
              style="
                width: 208px;
                text-align: left;
                height: 36px;
                color: #c0c4cc;
              "
              v-if="
                this.form.nurseStationItem.nurseStationName ==
                '请选择所属护理站'
              "
              >{{ form.nurseStationItem.nurseStationName }}</el-button
            >
            <el-button
              type=""
              @click="nurseStationshowclick"
              v-else
              style="
                width: 208px;
                text-align: left;
                height: 36px;
                padding-left: -10px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              "
              >{{ form.nurseStationItem.nurseStationName }}</el-button
            >
          </template>
        </el-form-item>
        <el-form-item label="所属护理站" required v-else>
          <template>
            <el-button
              type=""
              disabled
              style="
                width: 208px;
                text-align: left;
                height: 36px;
                padding-left: -10px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              "
              >{{ form.nurseStationItem.nurseStationName }}</el-button
            >
          </template>
        </el-form-item>
        <el-form-item
          label="护理项目名称"
          prop="nurseStationItem.nurseItemName"
        >
          <el-input
            v-model="form.nurseStationItem.nurseItemName"
            placeholder="请输入护理项目名称"
            maxlength="50"
          />
        </el-form-item>
        <el-form-item
          label="提前预约时长"
          prop="nurseStationItem.advanceAppointDuration"
        >
          <el-input
            v-model="form.nurseStationItem.advanceAppointDuration"
            placeholder="提前预约时长(单位小时)"
            oninput="if(value.indexOf('.')>0){value=value.slice(0,value.indexOf('.')+0)} if(value.length>5){value=value.slice(0,5)}"
            type="number"
            min="0"
          />
        </el-form-item>
        <el-form-item label="项目头像" prop="nurseStationItem.itemPictureUrl">
          <stationAcatar
            style="width: 208px"
            @imgUrl="imgUrl"
            :img="form.nurseStationItem.itemPictureUrl"
            :type="'itemPictureUrl'"
          />
        </el-form-item>
        <el-form-item label="排序" prop="nurseStationItem.sort">
          <el-input
            v-model="form.nurseStationItem.sort"
            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-form-item>
        <el-form-item
          label="项目内容简介"
          prop="nurseStationItem.nurseItemContent"
        >
          <el-input
            maxlength="300"
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 4 }"
            placeholder="请输入内容"
            style="width: 208px"
            v-model="form.nurseStationItem.nurseItemContent"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="项目时长和价格" required>
          <el-table
            ref="nurseStationItemPrices"
            :data="form.nurseStationItemPrices"
            style="margin-top: 20px; width: 900px"
          >
            <el-table-column
              property="serveDurationUnit"
              label="服务时长和单位"
              align="center"
            >
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.serveDurationUnit"
                  maxlength="6"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column property="price" label="价格" align="center">
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.price"
                  placeholder="小数点后两位(元)"
                  type="number"
                  min="0"
                  oninput="if(value.indexOf('.')>0){value=value.slice(0,value.indexOf('.')+3)} if(value.length>6){value=value.slice(0,6)}"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column property="description" label="描述" align="center">
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.description"
                  maxlength="300"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="text"
                  @click="addnurseStationItemPrices"
                  >新增</el-button
                >
                <el-button
                  size="mini"
                  type="text"
                  @click="delnurseStationItemPrices(scope.row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
        <el-form-item label="护理项目耗材">
          <el-button
            type="primary"
            size="small"
            plain
            @click="listStationConsumableinfo"
            >添加护理项目耗材</el-button
          >
          <el-table
            ref="singleTable"
            :data="form.nurseStationItemConsumables"
            style="margin-top: 20px; width: 900px"
          >
            <el-table-column
              property="nurseStationConsumableId"
              label="耗材包名称"
              align="center"
            >
              <template slot-scope="scope">
                {{ scope.row.consumableDetail }}
              </template>
            </el-table-column>

            <el-table-column
              property="consumableCount"
              label="耗材包数量"
              align="center"
            >
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.consumableCount"
                  placeholder="不可输入小数点"
                  min="0"
                  oninput="if(value.indexOf('.')>0){value=value.slice(0,value.indexOf('.')+0)} if(value.length>10){value=value.slice(0,10)}"
                  type="number"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column
              property="consumablePrice"
              label="耗材包单位"
              align="center"
            >
              <template slot-scope="scope">
                {{ scope.row.consumableUnit }}
              </template>
            </el-table-column>
            <el-table-column
              property="consumablePrice"
              label="耗材包单价"
              align="center"
            >
              <template slot-scope="scope">
                {{ scope.row.consumablePrice }}
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="text"
                  @click="delConsumable(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="nurseStationshow"
      width="1100px"
      append-to-body
      :before-close="clicknurseStationshow"
    >
      <el-form
        ref="form"
        :model="getListByUserquery"
        label-width="110px"
        :inline="true"
      >
        <el-form-item label="护理站编码" prop="nurseStationCode">
          <el-input
            v-model="getListByUserquery.nurseStationCode"
            placeholder="请输入护理站编码"
          />
        </el-form-item>
        <el-form-item label="护理站名称" prop="nurseStationName">
          <el-input
            v-model="getListByUserquery.nurseStationName"
            placeholder="请输入护理站名称"
          />
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="info"
            >搜索</el-button
          >
          <el-button icon="el-icon-refresh" size="mini" @click="stationcancel"
            >重置</el-button
          >
        </el-form-item>
      </el-form>
      <el-table
        v-loading="loading"
        :data="nurseStationlist"
        @cell-dblclick="choicestationid"
      >
        <el-table-column label="请选择" width="70" align="center">
          <template slot-scope="scope">
            <el-button
              type="primary"
              style="width: 15px; height: 15px"
              circle
              @click="choicestationid(scope.row)"
              v-if="stationid == scope.row.id"
            ></el-button>

            <el-button
              style="width: 15px; height: 15px"
              circle
              v-else
              @click="choicestationid(scope.row)"
            >
            </el-button>
          </template>
        </el-table-column>
        <el-table-column
          property="nurseStationCode"
          label="护理站编码"
          align="center"
        >
        </el-table-column>
        <el-table-column
          property="nurseStationName"
          label="护理站名称"
          align="center"
        >
        </el-table-column>
        <el-table-column property="phone" label="联系电话" align="center">
        </el-table-column>
        <el-table-column
          property="address"
          label="护理站地址"
          align="center"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
      </el-table>

      <pagination
        v-show="total4 > 0"
        :total="total4"
        :page.sync="getListByUserquery.pageNum"
        :limit.sync="getListByUserquery.pageSize"
        @pagination="info"
      />
    </el-dialog>
    <!-- 耗材弹框 -->
    <el-dialog
      title="添加护理项目耗材"
      :visible.sync="stationConsumableshow"
      width="1100px"
      append-to-body
      :before-close="clickstationConsumableshow"
    >
      <el-form
        ref="form"
        :model="StationConsumablequeryParams"
        label-width="110px"
        :inline="true"
      >
        <el-form-item label="耗材包名称" prop="nurseStationId">
          <el-input
            v-model="StationConsumablequeryParams.consumableDetail"
            placeholder="请输入耗材包名称"
          />
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="listStationConsumableinfo"
            >搜索</el-button
          >
          <el-button
            icon="el-icon-refresh"
            size="mini"
            @click="listStationConsumableinfocancel"
            >重置</el-button
          >
        </el-form-item>
      </el-form>
      <el-table
        v-loading="loading"
        :data="stationConsumableList"
        @cell-dblclick="cellchoiceConsumable"
      >
        <el-table-column label="请选择" width="70" align="center">
          <template slot-scope="scope">
            <el-button
              type="primary"
              style="width: 15px; height: 15px"
              circle
              @click="delConsumable(scope.row)"
              v-if="
                form.nurseStationItemConsumables.find(
                  (e) => e.id == scope.row.id
                )
              "
            ></el-button>
            <el-button
              style="width: 15px; height: 15px"
              circle
              v-else
              @click="choiceConsumable(scope.row)"
            ></el-button>
          </template>
        </el-table-column>
        <el-table-column
          label="护理站名称"
          align="center"
          prop="nurseStationName"
        />
        <el-table-column
          label="耗材包编号"
          align="center"
          prop="consumableCode"
        />
        <el-table-column
          label="耗材包名称"
          align="center"
          prop="consumableDetail"
        />
        <el-table-column
          label="耗材包单位"
          align="center"
          prop="consumableUnit"
        />
        <el-table-column
          label="耗材包价格"
          align="center"
          prop="consumablePrice"
        />
      </el-table>
      <el-button
        type="primary"
        size="mini"
        @click="clickstationConsumableshow"
        style="
          margin-top: 20px;
          margin-left: 85%;
          width: 100px;
          height: 40px;
          font-size: 15px;
        "
        >选择完成</el-button
      >
      <pagination
        v-show="total3 > 0"
        :total="total3"
        :page.sync="StationConsumablequeryParams.pageNum"
        :limit.sync="StationConsumablequeryParams.pageSize"
        @pagination="listStationConsumable"
      />
    </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 stationItemjs from "./stationItemjs";
export default stationItemjs;
</script>
<style lang="scss" scoped>
::v-deep .el-table__cell .el-form-item--medium .el-form-item__content {
  display: block;
}
// ::v-deep .el-form-item__label {
//   font-weight: 550;
// }
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.stationbtn {
  width: 208px;
  text-align: left;
  height: 32px;
  overflow: hidden;
  font-size: 14px;
}
</style>
