<template>
  <div class="doctorBody">
    <!-- 顶部筛选 -->
    <div class="screening">
      <div class="screening-title flex-vertical-center-l">
        <img src="~@/assets/filters.png" alt />
      </div>
      <div class="screening-form flex-vertical-center-l flex-wrap">
        <div class="screening-item flex-vertical-center-l">
          <span>医共体名称：</span>
          <div class="input">
            <el-select
              size="mini"
              v-model="form.name"
              placeholder="请选择"
              @change="getMedSelect(form.name,0)"
            >
              <el-option
                :label="item.name"
                :value="item.pid"
                v-for="(item,index) in doctorBodyList"
                :key="index"
              ></el-option>
            </el-select>
          </div>
        </div>
        <div class="screening-item flex-vertical-center-l">
          <span>医疗机构名称：</span>
          <div class="input">
            <el-select size="mini" v-model="form.medName" placeholder="请选择">
              <el-option
                :label="item.name"
                :value="item.name"
                v-for="(item,index) in medSelectList"
                :key="index"
              ></el-option>
            </el-select>
          </div>
        </div>
        <el-button type="primary" size="mini" @click="search()">搜索</el-button>
        <el-button type="warning" size="mini" @click="clearFilter()">清空</el-button>
        <el-button type="primary" size="mini" @click="addData()" v-if="showAdd">新增</el-button>
      </div>
    </div>

    <!-- 表格 -->
    <div class="today-data">
      <!-- <div class="add flex-center" @click="addData()" v-if="showAdd">新增</div> -->
      <div class="today-table">
        <el-table :data="tableData" stripe style="width: 100%" border height="100%">
          <el-table-column prop="id" label="序号" width="50" align="center"></el-table-column>
          <el-table-column prop="organizationidSelsourceName" label="医共体名称" align="center"></el-table-column>
          <el-table-column prop="organizationCode" label="医共体ID" width="80" align="center"></el-table-column>

          <el-table-column prop="name" label="医疗机构名称" align="center"></el-table-column>
          <el-table-column
            prop="parentinstitutionSelsourceName"
            label="上级医疗机构"
            align="center"
            width="150"
          ></el-table-column>
          <el-table-column prop="adressdetail" label="医疗机构地址" align="center"></el-table-column>
          <el-table-column prop="state" label="状态" align="center" width="80">
            <template slot-scope="scope">
              <div
                v-if="scope.row.isable==1"
                class="flex-center enable"
                @click="changeState(scope)"
              >停用</div>
              <div
                v-if="scope.row.isable==0"
                class="flex-center disable"
                @click="changeState(scope)"
              >启用</div>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="150">
            <template slot-scope="scope">
              <div class="flex-center operation">
                <div class="flex-center" @click="editData(scope)" v-if="showEdit">编辑</div>
                <div class="flex-center bg-yellow" @click="deleteData(scope)" v-if="showDel">删除</div>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div class="flex-vertical-center-r" style="margin-top:20px;">
        <el-pagination
          background
          layout=" prev, pager, next, jumper, total"
          :total="total"
          :page-size="limit"
          @current-change="sizeC($event)"
        ></el-pagination>
      </div>
    </div>

    <popup
      distanceTop="5vh"
      :showDialog="showDialog"
      @cancle="showDialog=false"
      title="医疗机构"
      @confim="submit()"
    >
      <div class="flex-center" slot="body">
        <div class="form">
          <div class="form-item flex-plane-center-l">
            <div class="name flex-vertical-center-r">
              <span>*</span>
              <div>医共体名称：</div>
            </div>
            <div class="input">
              <el-select
                v-model="diaform.name"
                placeholder="请选择"
                @change="getMedSelect(diaform.name,1)"
              >
                <el-option
                  :label="item.name"
                  :value="item.pid"
                  v-for="(item,index) in doctorBodyList"
                  :key="index"
                ></el-option>
              </el-select>
            </div>
          </div>
          <div class="form-item flex-plane-center-l">
            <div class="name flex-vertical-center-r">
              <span></span>
              <div>医共体代码：</div>
            </div>
            <div class="input">
              <el-input v-model="diaform.code" placeholder="请输入"></el-input>
            </div>
          </div>
          <div class="form-item flex-plane-center-l">
            <div class="name flex-vertical-center-r">
              <span>*</span>
              <div>医疗机构代码：</div>
            </div>
            <div class="input">
              <el-input v-model="diaform.code1" placeholder="请输入"></el-input>
            </div>
          </div>
          <div class="form-item flex-plane-center-l">
            <div class="name flex-vertical-center-r">
              <span>*</span>
              <div>医疗机构名称：</div>
            </div>
            <div class="input">
              <el-input v-model="diaform.medName" placeholder="请输入"></el-input>
            </div>
          </div>
          <div class="form-item flex-plane-center-l">
            <div class="name flex-vertical-center-r">
              <span></span>
              <div>拼音码：</div>
            </div>
            <div class="input">
              <el-input v-model="diaform.pinyin" placeholder="请输入"></el-input>
            </div>
          </div>
          <div class="form-item flex-plane-center-l">
            <div class="name flex-vertical-center-r">
              <span></span>
              <div>五笔码：</div>
            </div>
            <div class="input">
              <el-input v-model="diaform.wubi" placeholder="请输入"></el-input>
            </div>
          </div>
          <div class="form-item flex-plane-center-l">
            <div class="name flex-vertical-center-r">
              <span>*</span>
              <div>医疗机构类别：</div>
            </div>
            <div class="input">
              <el-select v-model="diaform.medType" placeholder="请选择">
                <el-option label="医院" value="医院"></el-option>
                <el-option label="诊所" value="诊所"></el-option>
                <el-option label="乡镇卫生院" value="乡镇卫生院"></el-option>
                <el-option label="卫生服务站" value="卫生服务站"></el-option>
              </el-select>
            </div>
          </div>
          <div class="form-item flex-plane-center-l">
            <div class="name flex-vertical-center-r">
              <span></span>
              <div>上级医疗机构：</div>
            </div>
            <div class="input">
              <el-select v-model="diaform.fmed" placeholder="请选择">
                <el-option label="请选择" value></el-option>
                <el-option
                  :label="item.name"
                  :value="item.pid"
                  v-for="(item,index) in medSelectList1"
                  :key="index"
                ></el-option>
              </el-select>
            </div>
          </div>
          <div class="form-item flex-plane-center-l">
            <div class="name flex-vertical-center-r">
              <span>*</span>
              <div>地址：</div>
            </div>
            <div class="input1">
              <el-select v-model="diaform.province" placeholder="选择省" @change="proC($event)">
                <el-option
                  :label="item.name"
                  :value="item.code"
                  v-for="(item,index) in provinceList"
                  :key="index"
                ></el-option>
              </el-select>
            </div>
            <div class="input1">
              <el-select v-model="diaform.city" placeholder="选择市" @change="cityC($event)">
                <el-option
                  :label="item.name"
                  :value="item.code"
                  v-for="(item,index) in cityList"
                  :key="index"
                ></el-option>
              </el-select>
            </div>
            <div class="input1">
              <el-select v-model="diaform.area" placeholder="选择区">
                <el-option
                  :label="item.name"
                  :value="item.code"
                  v-for="(item,index) in areaList"
                  :key="index"
                ></el-option>
              </el-select>
            </div>
          </div>
          <div class="form-item flex-plane-center-l">
            <div class="name flex-vertical-center-r">
              <span></span>
              <div>详细地址：</div>
            </div>
            <div class="input">
              <el-input v-model="diaform.address" placeholder="请输入"></el-input>
            </div>
          </div>
        </div>
      </div>
    </popup>
  </div>
</template>
<script>
import {
  addMedinsituions,
  getDoctorBodySelect,
  getMedSelect,
  getMedlist,
  getMedDetail,
  editMedData,
  deleteMed,
  getMedBR
} from "@/api/system.js";
import { getProver, getArea } from "@/api/city.js";
import popup from "@/components/Propup.vue";
import { request } from "https";
export default {
  components: {
    popup
  },
  data() {
    return {
      showAdd: true,
      showEdit: true,
      showDel: true,
      showState: true,
      showDialog: false,
      form: {
        name: "", // 医共体名称,
        medName: "" // 医疗机构名称
      },
      diaform: {
        name: "",
        code: "",
        code1: "",
        medName: "",
        pinyin: "",
        wubi: "",
        medType: "",
        fmed: "",
        address: "",
        province: "",
        city: "",
        area: "",
        pid: ""
      },

      provinceList: [],
      cityList: [],
      areaList: [],
      tableData: [],

      type: "add", // 当前 弹窗 状态
      doctorBodyList: [], // 医共体查询器
      medSelectList: [], // 医疗机构查询器
      medSelectList1: [], // 医疗机构查询器

      total: 0,
      limit: 10,
      page: 1
    };
  },
  created() {
    this.getProver();
    this.getDoctorBodySelect();
    this.getMedlist();
    this.getMedSelect("", 0);
  },
  methods: {
    search() {
      this.page = 1;
      this.getMedlist();
    },
    clearFilter() {
      this.form = {
        name: "",
        medName: ""
      };
      this.getMedSelect("", 0);
      this.getMedlist();
    },

    // 修改状态
    changeState(scope) {
      if (!this.showState) return;
      let isable = scope.row.isable;
      this.$confirm("确定要修改当前状态吗", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.diaform.pid = scope.row.pid;
          this.getMedDetail(this.diaform.pid);
          setTimeout(() => {
            this.editMedData(scope.row.pid, isable == 0 ? 1 : 0);
          }, 500);
        })
        .catch(() => {});
    },
    sizeC(e) {
      console.log(e, "1");
      this.page = e;
      this.getMedlist();
    },

    // 保存数据
    submit() {
      if (this.diaform.name == "") {
        this.$message({
          type: "error",
          message: "请选择医共体名称",
          showClose: true
        });
        return;
      }
      if (this.diaform.code1 == "") {
        this.$message({
          type: "error",
          message: "请输入医疗机构代码",
          showClose: true
        });
        return;
      }
      if (this.diaform.medName == "") {
        this.$message({
          type: "error",
          message: "请输入医疗机构名称",
          showClose: true
        });
        return;
      }
      if (this.diaform.medType == "") {
        this.$message({
          type: "error",
          message: "请选择医疗机构类别",
          showClose: true
        });
        return;
      }
      if (this.diaform.area == "") {
        this.$message({
          type: "error",
          message: "请完善地址信息",
          showClose: true
        });
        return;
      }
      if (this.type == "add") {
        this.addMedinsituions();
      } else if (this.type == "edit") {
        this.editMedData(this.diaform.pid);
      }
    },
    // 修改省的数据
    proC(e) {
      // console.log(e)
      this.diaform.city = "";
      this.diaform.area = "";
      this.getArea(e, 1);
    },
    cityC(e) {
      this.diaform.area = "";
      this.getArea(e, 2);
    },
    // 添加数据 弹窗 打开
    addData() {
      this.type = "add";
      this.showDialog = true;
      this.diaform = {
        name: "",
        code: "",
        code1: "",
        medName: "",
        pinyin: "",
        wubi: "",
        medType: "",
        fmed: "",
        address: "",
        province: "",
        city: "",
        area: "",
        pid: ""
      };
    },
    // 编辑数据
    editData(scope) {
      console.log(scope, "scope");
      this.type = "edit";
      this.diaform.pid = scope.row.pid;
      // console.log(this.diaform, 'dia');
      this.showDialog = true;
      this.getMedDetail();
    },
    // 删除数据
    deleteData(scope) {
      this.$confirm("确定要删除当前数据吗", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.deleteMed(scope.row.pid);
        })
        .catch(() => {});
    },
    // 添加医疗机构数据
    async addMedinsituions() {
      let params = {
        adressdetail: this.diaform.address,
        city: this.diaform.city,
        code: this.diaform.code1,
        district: this.diaform.area,
        institutioncategory: this.diaform.medType,
        name: this.diaform.medName,
        organizationidSelsource: this.diaform.name,
        parentinstitutionSelsource: this.diaform.fmed,
        pinyincode: this.diaform.pinyin,
        province: this.diaform.province,
        wubicode: this.diaform.wubi,
        isable: 0
      };
      const loading = this.$loading({
        lock: true,
        text: "正在提交",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      let res = await addMedinsituions(params).catch(err => {
        loading.close();
      });

      if (res.ResultCode == 0) {
        loading.close();
        this.$message({
          type: "success",
          message: "保存成功",
          showClose: true
        });
        this.getMedlist();
        this.showDialog = false;
      }
    },
    // 获取 医共体列表
    async getMedlist(load = true) {
      if (!load) return;
      let params = {
        organizationidSelsource: this.form.name,
        name: this.form.medName,
        page: this.page,
        limit: this.limit
      };
      let res = await getMedlist(params);
      if (res.ResultCode == 0) {
        this.tableData = res.Data.Items;
        this.total = res.Data.TotalRecordCount;
        this.tableData.filter((item, index) => {
          if (this.page > 1) {
            if (index == 9) {
              return (item.id = this.page + String(0));
            }
            return (item.id = this.page - 1 + String(index + 1));
          } else {
            return (item.id = index + 1);
          }
        });

        this.showEdit = res.Data.ButtonRight.indexOf("edit") != -1;
        this.showDel = res.Data.ButtonRight.indexOf("del") != -1;
        this.showState = res.Data.ButtonRight.indexOf("setState") != -1;
      }
    },
    // 获取医共体选择器数据
    async getDoctorBodySelect() {
      let res = await getDoctorBodySelect();
      if (res.ResultCode == 0) {
        this.doctorBodyList = res.Data;
      }
    },
    // 获取省数据
    async getProver() {
      let res = await getProver();
      if (res.ResultCode == 0) {
        this.provinceList = res.Data;
      }
    },
    // 获取市数据
    async getArea(code, type) {
      let res = await getArea(code);
      if (res.ResultCode == 0) {
        if (type == 1) {
          this.cityList = res.Data;
        } else {
          this.areaList = res.Data;
        }
      }
    },
    // 获取医疗机构选择器
    async getMedSelect(id, type) {
      let params = {
        organizationId: id
      };
      let res = await getMedSelect(params);
      if (res.ResultCode == 0) {
        if (type == 0) {
          this.medSelectList = res.Data;
        } else {
          this.medSelectList1 = res.Data;

          this.doctorBodyList.forEach(item => {
            if (item.pid == id) {
              this.diaform.code = item.code;
            }
          });
        }
      }
    },
    // 获取医疗机构详情
    async getMedDetail() {
      let res = await getMedDetail(this.diaform.pid);
      if (res.ResultCode == 0) {
        this.diaform.name = res.Data.organizationidSelsource;
        this.diaform.code = res.Data.organizationCode;
        this.diaform.code1 = res.Data.code;
        this.diaform.medName = res.Data.name;
        this.diaform.pinyin = res.Data.pinyincode;
        this.diaform.wubi = res.Data.wubicode;
        this.diaform.medType = res.Data.institutioncategory;
        this.diaform.fmed = res.Data.parentinstitutionSelsource;
        this.diaform.address = res.Data.adressdetail;
        this.diaform.province = res.Data.province;
        this.diaform.city = res.Data.city;
        this.diaform.area = res.Data.district;
        // this.showDialog = true

        this.getMedSelect(res.Data.organizationidSelsource, 1);
        this.getArea(res.Data.province, 1);
        this.getArea(res.Data.city, 2);
      }
    },
    // 修改医疗机构数据
    async editMedData(id, isable = "") {
      let params = {
        adressdetail: this.diaform.address,
        city: this.diaform.city,
        code: this.diaform.code1,
        district: this.diaform.area,
        institutioncategory: this.diaform.medType,
        name: this.diaform.medName,
        organizationidSelsource: this.diaform.name,
        parentinstitutionSelsource: this.diaform.fmed,
        pinyincode: this.diaform.pinyin,
        province: this.diaform.province,
        wubicode: this.diaform.wubi,
        pid: id,
        isable: isable
      };
      const loading = this.$loading({
        lock: true,
        text: "正在提交",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      let res = await editMedData(params).catch(err => {
        loading.close();
      });
      if (res.ResultCode == 0) {
        loading.close();
        this.$message({
          type: "success",
          message: "修改成功",
          showClose: true
        });
        this.getMedlist();
        this.showDialog = false;
      }
    },
    // 删除 数据
    async deleteMed(id) {
      let arr = [];

      arr.push(id);
      const loading = this.$loading({
        lock: true,
        text: "正在删除...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      let res = await deleteMed({
        ids: arr.length == 1 ? arr[0] + "," : arr.join(",")
      }).catch(err => {
        loading.close();
      });
      if (res.ResultCode == 0) {
        loading.close();

        this.$message({
          showClose: true,
          message: "删除成功",
          type: "success"
        });

        this.getMedlist();
        this.showDialog = false;
      }
    },

    // 获取医疗机构按钮权限
    async getMedBR() {
      let res = await getMedBR();
      if (res.ResultCode == 0) {
        this.showAdd = res.Data.indexOf("add") != -1;
      }
    }
  }
};
</script>
<style lang="scss" scoped>
@import "../../style/common.scss";
@import "../../style/base.scss";

.doctorBody {
  .form-item {
    margin-bottom: 20px;

    span {
      font-size: 16px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #ff3a3a;
      display: inline-block;
      width: 8px;
    }

    .name {
      font-size: 16px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #333;
      width: 120px;
      text-align: right;
    }

    .input {
      width: 260px;
    }

    .input1 {
      width: 84px;
    }
  }
}

.today-data {
  margin-top: 5px;
  padding: 10px 10px;
  background: #ffffff;
  border-radius: 5px;
  height: 71vh;

  .add {
    width: 74px;
    height: 36px;
    background: #5386f6;
    border-radius: 4px;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #ffffff;
    cursor: pointer;
    margin-bottom: 20px;
  }

  .today-table {
    height: 89%;

    .enable,
    .disable {
      width: 60px;
      height: 24px;
      background: #ff6245;
      border-radius: 2px;
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #ffffff;
      cursor: pointer;
      margin: 0 auto;
    }

    .disable {
      background: #68a8ff !important;
    }

    .operation {
      div {
        width: 60px;
        height: 24px;
        background: #5386f6;
        border-radius: 2px;
        cursor: pointer;
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #ffffff;
      }

      .bg-yellow {
        background: #ffae45;
        margin-left: 15px;
      }

      .bg-default {
        width: 80px;
        margin-left: 15px;
      }
    }
  }
}

.table::v-deep .el-table .cell {
  text-align: center;
}

.input ::v-deep .el-select {
  width: 100%;
}

.input1::v-deep .el-select .el-input__inner {
  padding: 0 20px 0 10px;
}
</style>
<style lang="scss" scoped>
@media screen and (min-width: 1681px) and (max-width: 1920px) {
  .today-data {
    height: 82vh;
    padding: 10px;
    // background: red;

    .today-table {
      height: 94%;
    }
  }

  .today-table::v-deep .el-table td {
    padding: 18px 0;
  }

  .today-table::v-deep .el-table th {
    padding: 18px 0;
  }
}

@media screen and (min-width: 1601px) and (max-width: 1680px) {
  .today-data {
    height: 81vh;
    padding: 10px;
    // background: red;

    .today-table {
      height: 94%;
    }
  }

  .today-table::v-deep .el-table td {
    padding: 16px 0;
  }

  .today-table::v-deep .el-table th {
    padding: 20px 0;
  }
}

@media screen and (min-width: 1361px) and (max-width: 1600px) {
  .today-data {
    height: 73vh;
    padding: 10px;
    // background: red;

    .today-table {
      height: 92%;
    }
  }

  .today-table::v-deep .el-table td {
    padding: 10px 0;
  }

  .today-table::v-deep .el-table th {
    padding: 14px 0;
  }
}

@media screen and(min-width:1281px) and (max-width: 1360px) {
  .today-data {
    height: 73vh;
    padding: 5px;
    // background: red;

    .today-table {
      height: 92%;
    }
  }

  .today-table::v-deep .el-table td {
    padding: 5px 0;
  }

  .today-table::v-deep .el-table th {
    padding: 5px 0;
  }
}
</style>