<template>
  <div class="app-container">
    <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:agency:add']"
          >新增</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="info"
          plain
          icon="el-icon-upload2"
          size="mini"
          @click="handleImport"
          v-hasPermi="['system:person:importStationPerson']"
          >导入</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          @click="handleUpdate"
          v-hasPermi="['system:agency: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:agency:remove']"
          >删除</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['system:agency:export']"
          >导出</el-button
        >
      </el-col> -->
      <right-toolbar
        :showSearch.sync="showSearch"
        @queryTable="getList"
      ></right-toolbar>
    </el-row>
    <el-row :gutter="20">
      <!--部门数据-->
      <el-col :span="5" :xs="24">
        <!-- <div class="head-container">
          <el-input
            v-model="deptName"
            placeholder="请输入部门名称"
            clearable
            size="small"
            prefix-icon="el-icon-search"
            style="margin-bottom: 20px"
          />
        </div> -->
        <div class="head-container">
          <el-tree
            :data="deptOptions"
            :props="defaultProps"
            :expand-on-click-node="true"
            :filter-node-method="filterNode"
            ref="tree"
            highlight-current
            node-key="id"
            @node-click="handleNodeClick"
            :render-content="renderContent"
          />
        </div>
      </el-col>
      <el-col :span="18" :xs="24">
        <el-descriptions title="机构信息">
          <el-descriptions-item label="机构名称">{{
            agencyList.agencyName
          }}</el-descriptions-item>
          <el-descriptions-item label="机构简介">{{
            agencyList.agencyRemark
          }}</el-descriptions-item>
          <el-descriptions-item label="机构状态">
            {{ agencyList.agencyStatus == "ON" ? "启用" : "" }}
            {{
              agencyList.agencyStatus == "OFF" ? "禁用" : ""
            }}</el-descriptions-item
          >
          <el-descriptions-item label="机构代码">{{
            agencyList.agencyCode
          }}</el-descriptions-item>
          <el-descriptions-item label="上级机构">
            {{ agencyList.parentAgencyName }}
          </el-descriptions-item>
          <el-descriptions-item label="节点类型">
            <!-- {{ agencyList.nodeType == "HEALTH_COMYISION" ? "卫健委" : "" }}
            {{
              agencyList.nodeType == "MEDICAL_INSURANCE_BUREAU" ? "医保局" : ""
            }}
            {{ agencyList.nodeType == "PBONVTNCE" ? "省份" : "" }}

            {{ agencyList.nodeType == "CHTNA" ? "中国" : "" }}

            {{ agencyList.nodeType == "WARD" ? "病区" : "" }}

            {{ agencyList.nodeType == "DEPARIMENT" ? "科室" : "" }}
            {{ agencyList.nodeType == "PHARNAGY" ? "药店" : "" }} -->
            {{ agencyList.nodeType == "CAMPUS" ? "院区" : "" }}
            {{
              agencyList.nodeType == "HOSPITAL" ? "医院" : ""
            }}</el-descriptions-item
          >
          <el-descriptions-item label="组织机构代码">{{
            agencyList.orgAgencyCode
          }}</el-descriptions-item>
          <el-descriptions-item label="卫生机构类别">{{
            agencyList.agencyCategoryName
          }}</el-descriptions-item>
          <el-descriptions-item label="机构分类管理类别">
            {{
              agencyList.agencyCategoryManageLevel ==
              "NON_PROFIT_MEDICAL_AGENCY"
                ? "非营利性医疗机构"
                : ""
            }}
            {{
              agencyList.agencyCategoryManageLevel ==
              "FOR_PROFIT_MEDICAL_AGENCY"
                ? "营利性医疗机构"
                : ""
            }}
            {{
              agencyList.agencyCategoryManageLevel == "OTHER_HEALTH_AGENCY"
                ? "其他卫生机构"
                : ""
            }}</el-descriptions-item
          >
          <el-descriptions-item label="行政区划" v-if="agencyList.provinceName"
            >{{ agencyList.provinceName }}-{{ agencyList.cityName }}-{{
              agencyList.regionName
            }}-{{ agencyList.streetName }}-{{ agencyList.communityName }}
          </el-descriptions-item>
          <el-descriptions-item label="行政区划" v-else> </el-descriptions-item>
        </el-descriptions>
        <!-- <div class="information">机构信息</div>
        <div style="width: 1000px; height: 200px">
          <div
            style="
              display: flex;
              justify-content: space-around;
              /* width: 1000px; */
              align-items: center;
              margin: 30px 0 30px 0;
            "
          >
            <div class="name">机构名称：{{ agencyList.agencyName }}</div>
            <div class="name">机构简介：{{ agencyList.agencyRemark }}</div>
            <div class="name">
              机构状态：
              {{ agencyList.agencyStatus == "ON" ? "启用" : "" }}
              {{ agencyList.agencyStatus == "OFF" ? "禁用" : "" }}
            </div>
          </div>
          <div
            style="
              display: flex;
              justify-content: space-around;
              width: 1000px;
              align-items: center;
              margin: 30px 0 30px 0;
            "
          >
            <div class="name">机构代码：{{ agencyList.agencyCode }}</div>
            <div class="name">上级机构：{{ agencyList.parentAgencyName }}</div>
            <div class="name">
              节点类型:

              {{ agencyList.nodeType == "HEALTH_COMYISION" ? "卫健委" : "" }}
              {{
                agencyList.nodeType == "MEDICAL_INSURANCE_BUREAU"
                  ? "医保局"
                  : ""
              }}
              {{ agencyList.nodeType == "PBONVTNCE" ? "省份" : "" }}

              {{ agencyList.nodeType == "CHTNA" ? "中国" : "" }}

              {{ agencyList.nodeType == "WARD" ? "病区" : "" }}

              {{ agencyList.nodeType == "DEPARIMENT" ? "科室" : "" }}
              {{ agencyList.nodeType == "PHARNAGY" ? "药店" : "" }}
              {{ agencyList.nodeType == "CANPUS" ? "院区" : "" }}
              {{ agencyList.nodeType == "HOSPITAL" ? "医院" : "" }}
            </div>
          </div>
          <div
            style="
              display: flex;
              justify-content: space-around;
              /* width: 1100px; */
              align-items: center;
              margin: 30px 0 30px 0;
            "
          >
            <div class="name">组织机构代码:{{ agencyList.orgAgencyCode }}</div>
            <div class="name">
              卫生机构类别:{{ agencyList.agencyCategoryName }}
            </div>
            <div class="name">
              机构分类管理类别:
              {{
                agencyList.agencyCategoryManageLevel ==
                "NON_PROFIT_MEDICAL_AGENCY"
                  ? "非营利性医疗机构"
                  : ""
              }}
              {{
                agencyList.agencyCategoryManageLevel ==
                "FOR_PROFIT_MEDICAL_AGENCY"
                  ? "营利性医疗机构"
                  : ""
              }}
              {{
                agencyList.agencyCategoryManageLevel == "OTHER_HEALTH_AGENCY"
                  ? "其他卫生机构"
                  : ""
              }}
            </div>
          </div>
          <div class="names">行政区划:{{ agencyList.areaName }}</div>
        </div> -->
      </el-col>
    </el-row>

    <!-- 添加或修改机构信息对话框 -->
    <el-dialog
      :title="title"
      :visible.sync="open"
      width="1000px"
      append-to-body
    >
      <el-form
        ref="form"
        :model="form"
        :rules="rules"
        label-width="130px"
        :inline="true"
      >
        <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.streetName"
            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-select
            v-model="form.communityCode"
            clearable
            placeholder="请选择社区"
            style="width: 129px; margin-left: 10px"
          >
            <el-option
              v-for="item in streetlists"
              :key="item.areaCode"
              :label="item.areaName"
              :value="item.areaCode"
              @click.native="clickstreetlist(item)"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="所属机构类别id" prop="agencyCategoryId">
          <el-input
            v-model="form.agencyCategoryId"
            placeholder="请输入所属机构类别id"
          />
        </el-form-item>
        <el-form-item label="所属机构类别名称" prop="agencyCategoryName">
          <el-input
            v-model="form.agencyCategoryName"
            placeholder="请输入所属机构类别名称"
          />
        </el-form-item>
        <el-form-item label="所属行政区域编码" prop="areaCode">
          <el-input
            v-model="form.areaCode"
            placeholder="请输入所属行政区域编码"
          />
        </el-form-item> -->
        <!-- <el-form-item label="所属行政区域名称" prop="areaName">
          <el-input
            v-model="form.areaName"
            placeholder="请输入所属行政区域名称"
          />
        </el-form-item> -->
        <el-form-item label="机构名称" prop="agencyName">
          <el-input
            v-model="form.agencyName"
            maxlength="100"
            placeholder="请输入机构名称"
          />
        </el-form-item>

        <el-form-item label="机构简称" prop="agencyAbbreviation">
          <el-input
            maxlength="100"
            v-model="form.agencyAbbreviation"
            placeholder="请输入机构简称"
          />
        </el-form-item>
        <el-form-item label="机构代码" prop="agencyCode" v-if="disabled">
          <el-input
            :disabled="disabled"
            maxlength="20"
            v-model="form.agencyCode"
            style="width: 205px"
            onKeyUp="value=value.replace(/[\W]/g,'')"
            placeholder="请输入机构代码"
          />
        </el-form-item>
        <el-form-item label="上级机构" prop="parentAgencyName">
          <el-cascader
            :props="{ checkStrictly: true }"
            :options="treeOptions"
            @change="change($event)"
            style="width: 205px"
            v-model="form.parentId"
            :show-all-levels="false"
            :placeholder="form.parentAgencyName ? form.parentAgencyName : ''"
            clearable
            ref="cascader"
            :key="isResouceShow"
          ></el-cascader>
        </el-form-item>

        <el-form-item label="卫生机构类别" prop="agencyCategoryId">
          <el-cascader
            :props="{ checkStrictly: true }"
            :options="treeOptionsagencyCategoryId"
            @change="changeagencyCategoryId($event)"
            style="width: 205px"
            :placeholder="
              form.agencyCategoryName ? form.agencyCategoryName : ''
            "
            v-model="form.agencyCategoryId"
            :show-all-levels="false"
            ref="cascader"
            :key="isResouceShows"
            clearable
          ></el-cascader>
        </el-form-item>
        <el-form-item label="节点类型" prop="nodeType">
          <el-select
            v-model="form.nodeType"
            placeholder="请选择"
            style="width: 205px"
            clearable
          >
            <el-option
              v-for="item in nodeTypeoptions"
              :key="item.dictValue"
              :label="item.dictLabel"
              :value="item.dictValue"
            >
            </el-option>
          </el-select>
          <!-- <el-input
            v-model="form.nodeType"
            placeholder="请输入节点类型"
          /> -->
        </el-form-item>
        <el-form-item label="组织机构编码" prop="orgAgencyCode">
          <el-input
            maxlength="30"
            onKeyUp="value=value.replace(/[\W]/g,'')"
            v-model="form.orgAgencyCode"
            placeholder="请输入组织机构编码"
            style="width: 205px"
          />
        </el-form-item>
        <el-form-item label="机构分类管理类别" prop="agencyCategoryManageLevel">
          <el-select
            v-model="form.agencyCategoryManageLevel"
            placeholder="请选择"
            style="width: 205px"
            clearable
          >
            <el-option
              v-for="item in options"
              :key="item.dictValue"
              :label="item.dictLabel"
              :value="item.dictValue"
            >
            </el-option>
          </el-select>
          <!-- <el-input
            v-model="form.agencyCategoryManageLevel"
            placeholder="请输入机构分类管理类别，非营利性医疗机构：NON_PROFIT_MEDICAL_AGENCY，营利性医疗机构：FOR_PROFIT_MEDICAL_AGENCY，其他卫生机构：OTHER_HEALTH_AGENCY"
          /> -->
        </el-form-item>
        <el-form-item label="机构联系人" prop="agencyContacts">
          <el-input
            maxlength="20"
            v-model="form.agencyContacts"
            placeholder="请输入机构联系人"
          />
        </el-form-item>
        <el-form-item label="机构联系电话" prop="agencyPhone">
          <el-input
            onkeyup="value=value.replace(/[^\-?\d.]/g,'')"
            maxlength="11"
            v-model="form.agencyPhone"
            placeholder="请输入机构联系电话"
          />
        </el-form-item>
        <el-form-item label="机构详细地址" prop="agencyAddress">
          <el-input
            maxlength="200"
            v-model="form.agencyAddress"
            placeholder="请输入机构详细地址"
          />
        </el-form-item>
        <el-form-item label="机构概述" prop="agencyRemark">
          <el-input
            v-model="form.agencyRemark"
            maxlength="100"
            placeholder="请输入机构概述"
          />
        </el-form-item>
        <el-form-item label="机构排序" prop="agencySort">
          <el-input-number
            v-model="form.agencySort"
            controls-position="right"
            :min="0"
            :max="99999"
            placeholder="请输入机构排序"
            style="width: 208px"
          />
        </el-form-item>
        <el-form-item label="机构状态" prop="agencyStatus">
          <!-- <el-form-item label="是否并发" prop="concurrent"> -->
          <el-radio-group v-model="form.agencyStatus" size="small">
            <el-radio label="ON">启用</el-radio>
            <el-radio label="OFF">禁用</el-radio>
          </el-radio-group>
          <!-- </el-form-item> -->
          <!-- <el-radio v-model="form.agencyStatus" label="ON">启用</el-radio>
          <el-radio v-model="form.agencyStatus" label="OFF">禁用</el-radio> -->
        </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 {
  listAgency,
  getAgency,
  delAgency,
  addAgency,
  updateAgency,
  agencyList,
  agencyCategoryList,
  getSecondaryLevelInfo,
  getFirstLevelInfo,
  getAgencytype,
} from "@/api/system/agency";
import { getToken } from "@/utils/auth";

import { treeselect } from "@/api/system/dept";
export default {
  name: "Agency",
  data() {
    return {
      disabled: true,
      arealist: [],
      citylist: [],
      arealists: [],
      streetlist: [],
      streetlists: [],
      provincelist: [],
      isResouceShow: 1,
      isResouceShows: 1,
      // treeOption: {
      //   lazy: true,

      //   checkStrictly: true, // 是否可选择任意一级
      //   // lazyLoad: this.lazyLoad,
      // },
      // 用户导入参数
      upload: {
        // 是否显示弹出层（用户导入）
        open: false,
        // 弹出层标题（用户导入）
        title: "",
        // 是否禁用上传
        isUploading: false,
        // 设置上传的请求头部
        headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
        url:
          process.env.VUE_APP_BASE_API +
          "/system/agency/insertAgencyImportList",
      },
      // 遮罩层
      loading: true,
      // 部门树选项
      deptOptions: undefined,
      radio: "",
      activeName: "first",
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 机构信息表格数据
      agencyList: [],
      // 弹出层标题
      title: "",
      nodeTypeoptions: [
        // {
        //   value: "HEALTH_COMYISION",
        //   label: "卫健委",
        // },
        // {
        //   value: "MEDICAL_INSURANCE_BUREAU",
        //   label: "医保局",
        // },
        // {
        //   value: "HOSPITAL",
        //   label: "医院",
        // },
        // {
        //   value: "CANPUS",
        //   label: "院区",
        // },
        // {
        //   value: "PHARNAGY",
        //   label: "药店",
        // },
        // {
        //   value: "DEPARIMENT",
        //   label: "科室",
        // },
        // {
        //   value: "WARD",
        //   label: "病区",
        // },
        // {
        //   value: "CHTNA",
        //   label: "中国",
        // },
        // {
        //   value: "PBONVTNCE",
        //   label: "省份",
        // },
      ],
      agencyCategoryManageLeveloptions: [
        {
          value: "1",
          label: "省份",
        },
      ],

      options: [
        // {
        //   value: "NON_PROFIT_MEDICAL_AGENCY",
        //   label: "非营利性医疗机构",
        // },
        // {
        //   value: "FOR_PROFIT_MEDICAL_AGENCY",
        //   label: "营利性医疗机构",
        // },
        // {
        //   value: "OTHER_HEALTH_AGENCY",
        //   label: "其他卫生机构",
        // },
      ],
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        parentId: null,
        agencyCategoryId: null,
        agencyCategoryName: null,
        areaCode: null,
        areaName: null,
        agencyName: null,
        agencyCode: null,
        agencyAbbreviation: null,
        agencyStatus: null,
        nodeType: null,
        orgAgencyCode: null,
        agencyCategoryManageLevel: null,
        agencyContacts: null,
        agencyPhone: null,
        agencyAddress: null,
        agencyRemark: null,
        agencySort: undefined,
      },
      // 表单参数
      form: {},
      id: "",
      defaultProps: {
        children: "children",
        label: "label",
      },
      // 表单校验
      rules: {
        agencyName: [
          { required: true, message: "机构名称不能为空", trigger: "blur" },
        ],
        // areaCode: [
        //   { required: true, message: "行政区划不能为空", trigger: "blur" },
        // ],
        agencyPhone: [
          {
            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            message: "请输入正确的手机号码",
            trigger: "blur",
          },
        ],
      },
      treeOptionsagencyCategoryId: [],
      treeOptions: [],
    };
  },
  // 默认选中第一行
  watch: {
    deptOptions: {
      handler(val) {
        if (val) {
          this.$nextTick(() => {
            document.querySelector(".el-tree-node__content").click();
          });
        }
      },
      immediate: true,
    },
  },
  created() {
    this.getaddress();
    // this.getTreeselect();
    this.gettreelistitem();
    this.gettreelist();
    this.info();
    this.infolist();
  },
  methods: {
    // 节点类型
    info() {
      var dictType = "agency_node_type";
      getAgencytype(dictType).then((res) => {
        this.nodeTypeoptions = res.data;
      });
    },
    // 上级机构
    infolist() {
      var dictType = "agency_category_manage_level";
      getAgencytype(dictType).then((res) => {
        this.options = res.data;
      });
    },
    // 删除机构
    renderContent(h, { node, data, store }) {
      return (
        <span class="custom-tree-node">
          <span>{node.label}</span>
          <span>
            {/* <el-button size="mini" type="text" on-click={ () => this.append(data) }>Append</el-button> */}
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              on-click={() => this.remove(node, data)}
            ></el-button>
          </span>
        </span>
      );
    },
    remove(node, data) {
      console.log(node, data, "111");
      const parent = node.parent;
      const children = parent.data.children || parent.data;
      const index = children.findIndex((d) => d.id === data.id);
      const ids = data.id;
      const label = node.data.label;
      this.$modal
        .confirm('是否确认删除机构名称为"' + label + '"的数据项')
        .then(function () {
          return delAgency(ids);
        })
        .then(() => {
          // this.getList();
          this.$modal.msgSuccess("删除成功");
          // children.splice(index, 1);
          this.gettreelist();
        })
        .catch(() => {});
    },
    // 机构树
    gettreelist() {
      agencyList().then((res) => {
        // 接口请求
        this.deptOptions = res.data;

        this.treeOptions = res.data.map((item) => {
          return { value: item.id, ...item };
        });
        // this.treeOption = {
        //   lazy: true,
        //   checkStrictly: true,
        //   lazyLoad: this.lazyLoad,
        // };
        // console.log(res.data, "58", this.treeOptions);
      });
    },
    // 卫生机构类别
    gettreelistitem() {
      agencyCategoryList().then((res) => {
        // 接口请求
        this.treeOptionsagencyCategoryId = res.data.map((item) => {
          return { value: item.id, ...item };
        });
        // this.treeOption = {
        //   lazy: true,
        //   checkStrictly: true,
        //   lazyLoad: this.lazyLoad,
        // };
        // console.log(res.data, "58", this.treeOptions);
      });
    },

    //点击街道
    clickstreet(item) {
      // this.form.areaCode=item.areaCode
      console.log(item, "jiedao");

      this.form.communityCode = "";
      this.form.communityName = "";

      getSecondaryLevelInfo(item.id).then((res) => {
        if (res.data.length == 0) {
          this.form.areaCode = item.areaCode;
        } else {
          this.streetlists = res.data;
        }
      });
    },
    // 点击社区
    clickstreetlist(item) {
      console.log(item, "555555");
      this.form.areaCode = item.areaCode;
      // this.form.communityCode = item.areaName;
    },
    //点击区县城
    clickarea(item) {
      this.form.areaName = "";
      this.form.streetCode = "";
      this.form.streetName = "";
      this.form.streetCode = "";

      this.form.communityCode = "";
      this.form.communityName = "";

      getSecondaryLevelInfo(item.id).then((res) => {
        console.log(item, "qu");
        if (res.data.length == 0) {
          this.form.areaCode = item.areaCode;
        } else {
          this.streetlist = res.data;
        }
        // if (res.data) {
        //   this.streetlist = res.data;
        // } else {
        //   this.form.areaCode = item.areaCode;
        // }
      });
    },
    //点击市
    clickcity(item) {
      this.form.regionName = "";
      this.form.areaName = "";
      this.form.streetCode = "";
      this.form.streetName = "";
      this.form.communityCode = "";
      this.form.communityName = "";
      // console.log(this.form.cityName,'this.form.cityNames')
      // console.log(item, "shi");
      // this.form.areaCode=item.areaCode
      getSecondaryLevelInfo(item.id).then((res) => {
        if (res.data.length == 0) {
          this.form.areaCode = item.areaCode;
        } else {
          this.arealist = res.data;
        }
      });
    },
    /** 获取省列表 */
    getaddress() {
      getFirstLevelInfo().then((res) => {
        this.provincelist = res.data;
      });
    },
    //点击省
    province(item) {
      console.log(item, "sheng");

      // this.form.areaCode=item.areaCode

      this.form.cityName = "";
      // this.form.streeName = "";
      // this.form.communityCode =''
      this.form.streetCode = "";
      this.form.streetName = "";
      this.form.areaName = "";
      this.form.communityName = "";
      this.form.communityCode = "";

      this.form.regionName = "";
      // this.form.areaCode = "";
      // this.form.streetCode = "";
      getSecondaryLevelInfo(item.id).then((res) => {
        this.citylist = res.data;
      });
    },
    /** 导入按钮操作 */
    handleImport() {
      this.upload.open = true;
      this.upload.title = "机构导入";
    },
    /** 下载模板操作 */
    importTemplate() {
      this.download(
        "/system/importDownload/downloadTemplate?fileType=agency",
        {},
        `机构导入模板.xlsx`
      );
    },

    // 提交上传文件
    submitFileForm() {
      this.$refs.upload.submit();
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      this.upload.open = false;
      this.upload.isUploading = false;
      this.$refs.upload.clearFiles();
      this.$alert(
        "<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" +
          response.msg +
          "</div>",
        "导入结果",
        { dangerouslyUseHTMLString: true }
      );
      this.getList();
      this.gettreelist();
    },
    // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true;
    },
    change(e) {
      console.log(e, "78");
      // console.log(this.$refs.cascader)
      // this.form.parentId = e;
      if (e) {
        this.form.parentId = e[e.length - 1];
      }
    },
    changeagencyCategoryId(e) {
      if (e) {
        this.form.agencyCategoryId = e[e.length - 1];
      }
    },
    // // 节点单击事件
    // handleNodeClick(data) {
    //   console.log(data,'5')
    //   // this.loading = true;
    //   // this.queryParams.parentId = data.id;
    //   // this.queryParams.parentName = data.goodsCategoryName;
    //   // if (data.id != 0) {
    //   //   this.form.parentId = data.id;
    //   //   this.form.parentName = data.goodsCategoryName;
    //   // } else {
    //   //   this.form.parentId = 0;
    //   //   this.form.parentName = "";
    //   // }
    //   // // this.categoryLevel = data.categoryLevel;
    //   // this.queryParams.pageNum = 1;
    //   // this.getList();
    //   // getStationCategoryList(data.id).then(res => {
    //   //   res.data.forEach(e => {
    //   //     e.children = [
    //   //       {
    //   //         goodsCategoryName: ""
    //   //       }
    //   //     ];
    //   //   });
    //   //   this.loading = false;
    //   //   data.children = res.data;
    //   // });
    // },
    /** 查询部门下拉树结构 */
    getTreeselect() {
      agencyList().then((response) => {
        this.deptOptions = response.data;
      });
    },

    // 筛选节点
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    // 节点单击事件
    handleNodeClick(data) {
      console.log(data, "5");
      this.id = data.id;
      this.getList();
    },
    /** 查询机构信息列表 */
    getList() {
      this.loading = true;
      listAgency(this.id).then((response) => {
        this.agencyList = response.data;
        // this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      ++this.isResouceShow;
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        cityName: null,
        regionName: null,
        provinceName: null,
        streetCode: null,
        id: null,
        parentId: null,
        communityCode: null,
        agencyCategoryId: null,
        agencyCategoryName: null,
        areaCode: null,
        areaName: null,
        agencyName: null,
        agencyCode: null,
        agencyAbbreviation: null,
        agencyStatus: "0",
        nodeType: null,
        orgAgencyCode: null,
        agencyCategoryManageLevel: null,
        agencyContacts: null,
        agencyPhone: null,
        agencyAddress: null,
        agencyRemark: null,
        agencySort: undefined,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.disabled = false;
      this.title = "添加机构信息";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      this.disabled = true;

      console.log(this.id);
      if (this.id == "") {
        this.$message.error("请先选择机构");
      } else {
        // const id = row.id || this.ids;
        getAgency(this.id).then((response) => {
          console.log(response.data, "response.data.parentId");
          this.form = response.data;
          this.form.communityCode = response.data.communityName;
          this.form.parentAgencyName = response.data.parentAgencyName;
          // this.form.parentId=response.data.parentId

          this.open = true;
          this.title = "修改机构信息";
          console.log(this.form, "oooo");
        });
      }
    },

    /** 提交按钮 */
    submitForm() {
      if (this.form.areaCode && !this.form.streetName) {
        this.$message.error("行政区划请至少选择到街道");
      } else {
        console.log(this.form);
        this.$refs["form"].validate((valid) => {
          if (valid) {
            if (this.form.id != null) {
              updateAgency(this.form).then((response) => {
                this.$modal.msgSuccess("修改成功");
                this.open = false;
                ++this.isResouceShow;
                this.gettreelist();
              });
            } else {
              addAgency(this.form).then((response) => {
                this.$modal.msgSuccess("新增成功");
                this.open = false;
                ++this.isResouceShow;
                this.gettreelist();
              });
            }
          }
        });
      }
      // if(this.form.cityName){
      //   this.form.areaCode=this.form.cityName
      // }
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal
        .confirm('是否确认删除机构信息编号为"' + ids + '"的数据项？')
        .then(function () {
          return delAgency(ids);
        })
        .then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download(
        "system/agency/export",
        {
          ...this.queryParams,
        },
        `agency_${new Date().getTime()}.xlsx`
      );
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .el-cascader .el-input__inner::placeholder {
  color: #686a6d !important;
}
::v-deep .el-button--text {
  border-color: transparent;
  color: #1890ff;
  background: transparent;
  position: absolute !important;
  right: 10px !important;
}
::v-deep.el-descriptions-item__container {
  display: -webkit-box;
  padding: 15px !important;
  display: -ms-flexbox;
  display: flex;
}

.el-col-4 {
  // width: 18%;
  height: 600px;
  overflow: scroll;
}

.el-cascader .el-input input::-webkit-input-placeholder {
  color: #686a6d;
}

.custom-tree-node {
  // flex: 1;
  // display: flex;
  // align-items: center;
  // justify-content: space-between;
  // font-size: 14px;
  // padding-right: 28px;
}
</style>
