//账号列表
<template>
  <div class="app-container">
    <!-- 搜索区域 -->
    <el-form :inline="true" :model="page.data">
      <el-form-item class="margin-left">
        <el-button
          type="primary"
          icon="el-icon-plus"
          @click="addOrUpdate('添加账号')"
          >添加账号</el-button
        >
      </el-form-item>
      <el-form-item class="margin-left input">
        <el-select
          v-model="page.data.adminId"
          filterable
          clearable
          placeholder="请选择账号名称"
        >
          <el-option
            v-for="item in option"
            :key="item.adminId"
            :label="item.username"
            :value="item.adminId"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item class="margin-left input">
        <el-input
          v-model="page.data.manageName"
          placeholder="请输入姓名"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item class="margin-left input">
        <el-input
          v-model="page.data.managePhone"
          placeholder="请输入手机号"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item class="margin-left input" v-if="checkRole([1])">
        <el-select
          filterable
          clearable
          v-model="page.data.provinceCode"
          @change="chooseSearchProvince"
          placeholder="请选择省份"
        >
          <el-option
            v-for="item in province_list"
            :key="item.code"
            :label="item.name"
            :value="item.code"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item class="margin-left input" v-if="checkRole([2])">
        <el-select
          filterable
          clearable
          v-model="page.data.cityCode"
          @change="chooseSearchCity"
          placeholder="请选择城市"
        >
          <el-option
            v-for="item in city_list"
            :key="item.code"
            :label="item.name"
            :value="item.code"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item class="margin-left input" v-if="checkRole([2])">
        <el-select
          filterable
          clearable
          v-model="page.data.areaCode"
          placeholder="请选择区域"
        >
          <el-option
            v-for="item in area_list"
            :key="item.code"
            :label="item.name"
            :value="item.code"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item class="margin-left input" v-if="checkRole([2])">
        <el-select
          filterable
          clearable
          multiple
          v-model="page.data.managementDataTypeList"
          placeholder="可管理数据类型"
        >
          <el-option
            v-for="item in option1"
            :key="item.code"
            :label="item.desc"
            :value="item.code"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item class="margin-left input" v-if="checkRole([2])">
        <el-select
          filterable
          clearable
          v-model="page.data.archivesAuth"
          placeholder="档案查询"
        >
          <el-option label="启用" :value="true"> </el-option>
          <el-option label="停用" :value="false"> </el-option>
        </el-select>
      </el-form-item>
      <el-form-item class="margin-left input" v-if="checkRole([2])">
        <el-select
          filterable
          clearable
          v-model="page.data.behaviorArchivesAuth"
          placeholder="人员/车辆行为档案"
        >
          <el-option label="启用" :value="true"> </el-option>
          <el-option label="停用" :value="false"> </el-option>
        </el-select>
      </el-form-item>
      <el-form-item class="margin-left input" v-if="checkRole([2])">
        <el-select
          filterable
          clearable
          v-model="page.data.warningAuth"
          placeholder="人员/车辆预警"
        >
          <el-option label="启用" :value="true"> </el-option>
          <el-option label="停用" :value="false"> </el-option>
        </el-select>
      </el-form-item>
      <el-form-item class="margin-left input" v-if="checkRole([2])">
        <el-select
          filterable
          clearable
          v-model="page.data.functionAuth"
          placeholder="单功能板块"
        >
          <el-option label="启用" :value="true"> </el-option>
          <el-option label="停用" :value="false"> </el-option>
        </el-select>
      </el-form-item>
      <el-form-item class="margin-left input" v-if="checkRole([2])">
        <el-select
          filterable
          clearable
          v-model="page.data.cockpitAuth"
          placeholder="驾驶舱大屏"
        >
          <el-option label="启用" :value="true"> </el-option>
          <el-option label="停用" :value="false"> </el-option>
        </el-select>
      </el-form-item>
      <el-form-item class="margin-left">
        <el-button type="primary" @click="fetchData" icon="el-icon-search"
          >搜索</el-button
        >
      </el-form-item>
    </el-form>
    <!-- 主体表格 -->
    <el-table
      :data="tableData"
      v-loading="listLoading"
      border
      fit
      highlight-current-row
      class="table"
    >
      <el-table-column align="center" width="80" label="序号">
        <template slot-scope="scope">
          {{ indexMethod(scope.$index) }}
        </template>
      </el-table-column>
      <el-table-column align="center" prop="username" label="账号名称">
      </el-table-column>
      <el-table-column align="center" prop="manageName" label="负责人姓名">
      </el-table-column>
      <el-table-column align="center" prop="managePhone" label="负责人手机号">
      </el-table-column>
      <!-- <el-table-column label="省-市-区" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          {{ scope.row.provinceName | matchNull }}-{{
            scope.row.cityName | matchNull
          }}-{{ scope.row.areaName | matchNull }}
        </template>
      </el-table-column> -->
      <el-table-column
        label="单位详细地址详细地址"
        align="center"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          {{ scope.row.address | matchNull }}
        </template>
      </el-table-column>
      <el-table-column
        v-if="checkRole([1])"
        label="管理地域"
        align="center"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          {{ scope.row.adminAuthDto.provinceName }}
        </template>
      </el-table-column>
      <el-table-column
        v-if="checkRole([2])"
        label="管理地域"
        align="center"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          {{ scope.row.adminAuthDto.cityName
          }}{{
            scope.row.adminAuthDto.areaName
              ? scope.row.adminAuthDto.areaName
              : ""
          }}
        </template>
      </el-table-column>
      <el-table-column
        v-if="checkRole([2])"
        align="center"
        label="可管理数据类型"
      >
        <template v-slot="{ row }">
          {{ row.adminAuthDto.gateAuth ? "人员闸口通行数据、" : "" }}
          {{ row.adminAuthDto.portAuth ? "人员进出港数据、" : "" }}
          {{ row.adminAuthDto.captureAuth ? "人员摄像头抓拍数据、" : "" }}
          {{ row.adminAuthDto.vehicleAuth ? "车辆卡口通行数据" : "" }}
        </template>
      </el-table-column>
      <el-table-column
        v-if="checkRole([2])"
        align="center"
        prop="archivesAuth"
        label="档案查询"
      >
        <template v-slot="{ row }">
          <el-tag type="primary" v-if="row.adminAuthDto.archivesAuth"
            >启用</el-tag
          >
          <el-tag type="info" v-else>停用</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        v-if="checkRole([2])"
        align="center"
        prop="behaviorArchivesAuth"
        label="人员/车辆行为档案"
      >
        <template v-slot="{ row }">
          <el-tag type="primary" v-if="row.adminAuthDto.behaviorArchivesAuth"
            >启用</el-tag
          >
          <el-tag type="info" v-else>停用</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        v-if="checkRole([2])"
        align="center"
        prop="warningAuth"
        label="人员/车辆预警"
      >
        <template v-slot="{ row }">
          <el-tag type="primary" v-if="row.adminAuthDto.warningAuth == 1"
            >启用</el-tag
          >
          <el-tag type="info" v-else>停用</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        v-if="checkRole([2])"
        align="center"
        prop="functionAuth"
        label="单功能板块"
      >
        <template v-slot="{ row }">
          <el-tag type="primary" v-if="row.adminAuthDto.functionAuth"
            >启用</el-tag
          >
          <el-tag type="info" v-else>停用</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        v-if="checkRole([2])"
        align="center"
        prop="cockpitAuth"
        label="驾驶舱大屏"
      >
        <template v-slot="{ row }">
          <el-tag type="primary" v-if="row.adminAuthDto.cockpitAuth"
            >启用</el-tag
          >
          <el-tag type="info" v-else>停用</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="createTime" label="创建时间">
      </el-table-column>
      <el-table-column align="center" label="操作区" width="190">
        <template v-slot="{ row }">
          <el-button
            type="primary"
            size="small"
            @click="addOrUpdate('编辑账号', row)"
            >编辑</el-button
          >
          <el-button
            type="danger"
            size="small"
            @click="handleDelete(row.adminId)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!--分页栏-->
    <pagination
      :total="total"
      :page.sync="page.pageNum"
      :limit.sync="page.pageSize"
      @pagination="fetchData"
    />
    <!-- 添加/编辑账号 -->
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      width="1300px"
      :close-on-click-modal="false"
    >
      <el-form
        :model="addOrUpdateForm"
        :rules="rules"
        ref="formRef"
        label-position="left"
        label-width="150px"
      >
        <!-- 基本信息配置 -->
        <div class="item-layout">
          <span class="prompt">基本信息配置</span>
          <div class="display-config-layout">
            <el-form-item label="账号名称" prop="username">
              <el-input
                clearable
                v-model="addOrUpdateForm.username"
                placeholder="请输入账号名称"
              ></el-input>
            </el-form-item>
            <el-form-item label="账号密码" prop="password">
              <el-input
                clearable
                v-model="addOrUpdateForm.password"
                placeholder="请输入账号密码"
              ></el-input>
            </el-form-item>
            <el-form-item label="负责人姓名" prop="manageName">
              <el-input
                clearable
                v-model="addOrUpdateForm.manageName"
                placeholder="请输入负责人姓名"
              ></el-input>
            </el-form-item>
            <el-form-item label="负责人手机号" prop="managePhone">
              <el-input
                clearable
                v-model="addOrUpdateForm.managePhone"
                placeholder="请输入负责人手机号"
                maxlength="11"
                show-word-limit
              ></el-input>
            </el-form-item>
            <el-form-item
              label="单位详细地址"
              prop="address"
              class="company-address"
            >
              <el-input
                clearable
                v-model="addOrUpdateForm.address"
                placeholder="请输入单位详细地址"
              ></el-input>
            </el-form-item>
            <el-form-item
              v-if="checkRole([1])"
              label="管理地域"
              prop="adminAuthDto.provinceCode"
              class="company-address"
            >
              <el-select
                filterable
                clearable
                v-model="addOrUpdateForm.adminAuthDto.provinceCode"
                @change="chooseProvince"
                placeholder="请选择省份"
                class="area-item"
              >
                <el-option
                  v-for="item in province_list"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </div>
        </div>
        <!-- 组织架构信息配置 -->
        <div class="item-layout" v-if="checkRole([2])">
          <span class="prompt">组织架构信息配置</span>
          <div class="display-config-layout">
            <el-form-item label="账号级别" prop="type">
              <el-select
                filterable
                clearable
                v-model="addOrUpdateForm.type"
                placeholder="请选择账号级别"
                @change="chooseTypeList"
              >
                <el-option
                  v-for="item in type_list"
                  :key="item.code"
                  :label="item.desc"
                  :value="item.code"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="上级单位" prop="parentId">
              <el-select
                filterable
                clearable
                v-model="addOrUpdateForm.parentId"
                placeholder="请选择上级单位账号"
              >
                <el-option
                  v-for="item in adminList"
                  :key="item.adminId"
                  :label="item.username"
                  :value="item.adminId"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </div>
        </div>
        <!-- 权限信息配置 -->
        <div class="item-layout" v-if="checkRole([2])">
          <span class="prompt">权限信息配置</span>
          <div class="display-config-layout">
            <el-form-item label="管理地域" class="company-address">
              <!-- <el-select
                filterable
                clearable
                v-model="addOrUpdateForm.adminAuthDto.provinceCode"
                @change="chooseProvince"
                placeholder="请选择省份"
                class="area-item"
              >
                <el-option
                  v-for="item in province_list"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code"
                >
                </el-option>
              </el-select> -->
              <el-select
                filterable
                clearable
                v-model="addOrUpdateForm.adminAuthDto.cityCode"
                @change="chooseCity"
                placeholder="请选择城市"
                class="area-item"
              >
                <el-option
                  v-for="item in city_list"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code"
                >
                </el-option>
              </el-select>
              <el-select
                v-if="addOrUpdateForm.type == 4"
                filterable
                clearable
                v-model="addOrUpdateForm.adminAuthDto.areaCode"
                @change="chooseArea"
                placeholder="请选择区/县"
                class="area-item"
              >
                <el-option
                  v-for="item in area_list"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              label="可管理数据类型"
              prop="manageableData"
              class="company-address"
            >
              <el-checkbox-group v-model="addOrUpdateForm.manageableData">
                <template v-for="(item, index) in manageableDataArr">
                  <el-checkbox :key="index" :label="item.lable">{{
                    item.name
                  }}</el-checkbox>
                </template>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item label="档案查询" prop="adminAuthDto.archivesAuth">
              <el-radio-group
                v-model="addOrUpdateForm.adminAuthDto.archivesAuth"
              >
                <el-radio :label="false">停用</el-radio>
                <el-radio :label="true">启用</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item
              label="人员/车辆行为档案"
              prop="adminAuthDto.behaviorArchivesAuth"
            >
              <el-radio-group
                v-model="addOrUpdateForm.adminAuthDto.behaviorArchivesAuth"
              >
                <el-radio :label="false">停用</el-radio>
                <el-radio :label="true">启用</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="人员/车辆预警" prop="adminAuthDto.warningAuth">
              <el-radio-group
                v-model="addOrUpdateForm.adminAuthDto.warningAuth"
              >
                <el-radio :label="false">停用</el-radio>
                <el-radio :label="true">启用</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="单功能板块" prop="adminAuthDto.functionAuth">
              <el-radio-group
                v-model="addOrUpdateForm.adminAuthDto.functionAuth"
                @change="handleFunctionAuthChange"
              >
                <el-radio :label="false">停用</el-radio>
                <el-radio :label="true">启用</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item
              v-if="addOrUpdateForm.adminAuthDto.functionAuth"
              label="单功能拓展板块"
              prop="functionalData"
            >
              <el-checkbox-group v-model="addOrUpdateForm.functionalData">
                <template v-for="(item, index) in functionalDataArr">
                  <el-checkbox :key="index" :label="item.lable">{{
                    item.name
                  }}</el-checkbox>
                </template>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item label="驾驶舱大屏" prop="adminAuthDto.cockpitAuth">
              <el-radio-group
                v-model="addOrUpdateForm.adminAuthDto.cockpitAuth"
              >
                <el-radio :label="false">停用</el-radio>
                <el-radio :label="true">启用</el-radio>
              </el-radio-group>
            </el-form-item>
          </div>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from "@/components/Pagination";
import {
  getbelowList,
  doGetAdmins,
  getProvince,
  getCity,
  getArea,
  getManagementDataTypeList,
  doEditAdmin,
  getadminTypeList,
  getadminList,
  doDeleteAdmin,
} from "@/api/user";
import { checkRole } from "@/utils/checkRole";
export default {
  components: { Pagination },
  filters: {
    matchNull(str) {
      if (!str) {
        return "未填写";
      } else {
        return str;
      }
    },
  },
  data() {
    return {
      provinceCode: this.$store.getters.provinceCode, //省
      listLoading: false,
      dialogTitle: "",
      dialogVisible: false,
      total: 0,
      // 分页参数
      page: {
        data: {
          adminId: "",
          manageName: "",
          managePhone: "",
          provinceCode: "",
          cityCode: "",
          areaCode: "",
          managementDataTypeList: [], //可管理数据类型列表
          archivesAuth: "", //档案查询
          behaviorArchivesAuth: "", //人员/车辆行为档案
          warningAuth: "", //人员/车辆预警
          functionAuth: "", //单功能板块
          cockpitAuth: null, //驾驶舱大屏
        },
        pageNum: 1,
        pageSize: 10,
      },
      tableData: [],
      isEdit: false, //判断是否是编辑
      // 添加编辑账号
      addOrUpdateForm: {
        username: "", //账号名称
        password: "", //账号密码
        manageName: "",
        managePhone: "",
        address: "",
        adminAuthDto: {
          provinceCode: null,
          cityCode: "",
          areaCode: "",
          gateAuth: false,
          portAuth: false,
          captureAuth: false,
          vehicleAuth: false,
          archivesAuth: "",
          behaviorArchivesAuth: "",
          warningAuth: "",
          functionAuth: "",
          uavAuth: false,
          trafficLightsAuth: false,
          rainSnowAuth: false,
          cockpitAuth: "",
        },
        type: "",
        parentId: "",
        manageableData: [],
        functionalData: [],
      },
      manageableDataArr: [
        {
          name: "人员闸口通行数据",
          lable: "gateAuth",
        },
        {
          name: "人员进出港数据",
          lable: "portAuth",
        },
        {
          name: "人员摄像头抓拍数据",
          lable: "captureAuth",
        },
        {
          name: "车辆卡口通行数据",
          lable: "vehicleAuth",
        },
      ],
      functionalDataArr: [
        {
          name: "无人机反制",
          lable: "uavAuth",
        },
        {
          name: "红绿灯实时监控",
          lable: "trafficLightsAuth",
        },
        {
          name: "冰冻雨雪监控",
          lable: "rainSnowAuth",
        },
      ],
      //省市县列表
      province_list: [],
      city_list: [],
      area_list: [],
      option: [], //账号列表
      option1: [], //可管理数据类型列表
      type_list: [], // 账号级别
      adminList: [], //上级单位
      // 规则
      rules: {
        username: [
          { required: true, message: "请输入账号名称", trigger: "blur" },
        ],
        // password: [
        //   { required: true, message: "请输入账号密码", trigger: "blur" },
        // ],
        manageName: [
          { required: true, message: "请输入负责人姓名", trigger: "blur" },
        ],
        managePhone: [
          { required: true, message: "请输入负责人手机号", trigger: "blur" },
        ],
        address: [
          { required: true, message: "请输入详细地址", trigger: "blur" },
        ],
        type: [
          {
            required: true,
            message: "请选择请选择账号级别",
            trigger: "change",
          },
        ],
        parentId: [
          { required: true, message: "请选择上级单位账号", trigger: "blur" },
        ],
        "adminAuthDto.provinceCode": [
          { required: true, message: "请选择省", trigger: "change" },
        ],
        "adminAuthDto.cityCode": [
          { required: true, message: "请选择城市", trigger: "change" },
        ],
        "adminAuthDto.areaCode": [
          { required: true, message: "请选择地区", trigger: "change" },
        ],
        "adminAuthDto.archivesAuth": [
          { required: true, message: "请选择", trigger: "change" },
        ],
        "adminAuthDto.behaviorArchivesAuth": [
          { required: true, message: "请选择", trigger: "change" },
        ],
        "adminAuthDto.warningAuth": [
          { required: true, message: "请选择", trigger: "change" },
        ],
        "adminAuthDto.functionAuth": [
          { required: true, message: "请选择", trigger: "change" },
        ],
        "adminAuthDto.cockpitAuth": [
          { required: true, message: "请选择", trigger: "change" },
        ],
        // manageableData: [
        //  { required: true, message: "请选择", trigger: ["change", "blur"] },
        //  ],
        functionalData: [
          { required: true, message: "请选择", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    this.fetchData();
    this.getUserBelowList();
    this.getManagementDataList();
    if (checkRole([1])) {
      this.getProvince();
    }
    if (checkRole([2])) {
      this.getCity(this.provinceCode);
    }
    this.getadminTypeList();
  },
  methods: {
    // 获取列表数据
    checkRole,
    fetchData() {
      this.listLoading = true;
      doGetAdmins(this.page).then((res) => {
        this.tableData = res.data.records;
        // console.log(this.tableData, 2);
        this.total = res.data.total;
        this.listLoading = false;
      });
    },
    // 获取账号列表
    async getUserBelowList() {
      const res = await getbelowList();
      this.option = res.data;
    },
    async getManagementDataList() {
      const res = await getManagementDataTypeList();
      this.option1 = res.data;
    },
    async _getadminList(code) {
      const res = await getadminList({ code });
      this.adminList = res.data;
      // this.addOrUpdateForm.parentId = res.data[0].adminId;
    },
    async getadminTypeList() {
      const res = await getadminTypeList();
      this.type_list = res.data;
    },
    // 添加编辑账号
    addOrUpdate(dialogTitle, edit) {
      this.cloneFn();
      this.dialogVisible = true;
      this.dialogTitle = dialogTitle;
      this.$nextTick(() => {
        this.$refs.formRef.resetFields();
        if (edit) {
          // 修改
          // console.log(edit);
          if (checkRole([1])) {
            this.getProvince();
          } else {
            this.getCity(edit.adminAuthDto.provinceCode);
            this.getArea(edit.adminAuthDto.cityCode);
            this._getadminList(edit.type);
          }
          this.addOrUpdateForm.manageableData = this.manageableDataArr
            .filter((item) => {
              return edit.adminAuthDto[item.lable];
            })
            .map((item) => item.lable);

          this.addOrUpdateForm.functionalData = this.functionalDataArr
            .filter((item) => edit.adminAuthDto[item.lable])
            .map((item) => item.lable);
          // this.addOrUpdateForm = JSON.parse(JSON.stringify(edit));
          this.addOrUpdateForm = {
            ...this.addOrUpdateForm,
            ...JSON.parse(JSON.stringify(edit)),
          };
          this.isEdit = true;
        } else {
          // 添加
          if (checkRole([1])) {
            this.getProvince();
            // this._getadminList(2);
          }
          if (checkRole([2])) {
            this.getCity(this.provinceCode);
          }
          this.isEdit = false;
        }
      });
    },
    // 取消
    cloneFn() {
      this.$refs.formRef?.clearValidate(); // 清空表单校验
      this.addOrUpdateForm.manageableData = [];
      this.addOrUpdateForm.functionalData = [];
    },
    // 确认按钮
    submit() {
      this.$refs.formRef.validate(async (pass) => {
        if (!pass) {
          return false;
        }
        if (checkRole([1])) {
          this.addOrUpdateForm.adminAuthDto = {
            ...this.addOrUpdateForm.adminAuthDto,
            gateAuth: true,
            portAuth: true,
            captureAuth: true,
            vehicleAuth: true,
            archivesAuth: true,
            behaviorArchivesAuth: true,
            warningAuth: true,
            functionAuth: true,
            uavAuth: true,
            trafficLightsAuth: true,
            rainSnowAuth: true,
            cockpitAuth: true,
          };
          this.addOrUpdateForm.type = 2;
          this.addOrUpdateForm.parentId = 1;
        } else {
          this.addOrUpdateForm.adminAuthDto.gateAuth =
            this.addOrUpdateForm.manageableData.includes("gateAuth");
          this.addOrUpdateForm.adminAuthDto.portAuth =
            this.addOrUpdateForm.manageableData.includes("portAuth");
          this.addOrUpdateForm.adminAuthDto.captureAuth =
            this.addOrUpdateForm.manageableData.includes("captureAuth");
          this.addOrUpdateForm.adminAuthDto.vehicleAuth =
            this.addOrUpdateForm.manageableData.includes("vehicleAuth");
          this.addOrUpdateForm.adminAuthDto.uavAuth =
            this.addOrUpdateForm.functionalData.includes("uavAuth");
          this.addOrUpdateForm.adminAuthDto.trafficLightsAuth =
            this.addOrUpdateForm.functionalData.includes("trafficLightsAuth");
          this.addOrUpdateForm.adminAuthDto.rainSnowAuth =
            this.addOrUpdateForm.functionalData.includes("rainSnowAuth");
          this.addOrUpdateForm.adminAuthDto.provinceCode = this.provinceCode;
        }
        // return
        await doEditAdmin({
          ...this.addOrUpdateForm,
          adminId: this.isEdit ? this.addOrUpdateForm.adminId : undefined,
        });
        this.$message.success(`${this.dialogTitle}成功`);
        this.dialogVisible = false;
        this.fetchData();
      });
    },
    handleFunctionAuthChange(value) {
      this.addOrUpdateForm.functionalData = [];
    },
    // 删除账号
    handleDelete(id) {
      this.$confirm("确定要删除吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      }).then(() => {
        doDeleteAdmin(id).then((res) => {
          this.fetchData();
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        });
      });
    },
    // 省
    getProvince() {
      getProvince().then((res) => {
        // console.log(res.data, 3);
        this.province_list = res.data;
      });
    },
    // 市
    getCity(e) {
      getCity({ code: e }).then((res) => {
        this.city_list = res.data;
      });
    },
    // 区
    getArea(e) {
      getArea({ code: e }).then((res) => {
        // console.log(res);
        this.area_list = res.data;
      });
    },
    chooseTypeList(e) {
      this.addOrUpdateForm.parentId = null;
      if (e) {
        this._getadminList(e);
      }
    },
    // 选择省
    chooseProvince(e) {
      this.addOrUpdateForm.adminAuthDto.cityCode = null;
      this.city_list = [];
      this.addOrUpdateForm.adminAuthDto.areaCode = null;
      this.area_list = [];
      // console.log(e);
      if (e) {
        this.getCity(e);
      }
    },
    // 搜索选择省
    chooseSearchProvince(e) {
      this.page.data.cityCode = null;
      this.city_list = [];
      this.page.data.areaCode = null;
      //this.$set(this.addOrUpdateForm,'areaId','')
      this.area_list = [];
      // console.log(e);
      if (e) {
        this.getCity(e);
      }
    },
    // 选择市
    chooseCity(e) {
      this.addOrUpdateForm.adminAuthDto.areaCode = null;
      this.area_list = [];
      if (e) {
        this.getArea(e);
      }
    },
    // 选择市
    chooseSearchCity(e) {
      this.page.data.areaCode = null;
      this.area_list = [];
      if (e) {
        this.getArea(e);
      }
    },
    // 选择区/县
    chooseArea(e) {
      console.log(e);
      // console.log(this.addOrUpdateForm.areaId);
    },
    // 返回列表序号
    indexMethod(index) {
      return (this.page.pageNum - 1) * this.page.pageSize + index + 1;
    },
  },
};
</script>

<style scoped lang="scss">
.margin-left {
  margin: 10px 0 0 10px;
}
.input {
  width: 180px;
}
.flex {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.item-layout {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  width: 100%;
  margin-bottom: 15px;
  &:before {
    position: absolute;
    top: 1px;
    left: -10px;
    width: 3px;
    height: 16px;
    content: "";
    background-color: #409eff;
    border-radius: 3px;
  }
  .prompt {
    font-size: 16px;
    font-weight: 600;
    color: #333333;
  }
  .display-config-layout {
    display: flex;
    flex-wrap: wrap;
    padding-top: 12px;
    width: 100%;
    & > div {
      width: calc(50% - 60px);
      flex: none;
      margin-left: 0;
      margin-right: 0;
    }
    & > div:nth-child(odd) {
      margin-right: 120px;
    }
    .company-address {
      width: 100%;
    }
    .area-item {
      width: 27%;
      margin-right: 30px;
    }
  }
}
</style>
