<template>
  <div>
    <span>{{ isEdit ? '编辑账号' : '添加账号' }}</span><el-button
      type="primary"
      size="mini"
      style="margin-left: 20px"
      @click="cancel"
    >返回</el-button>
    <TagCard title="账号基本信息" style="margin-top: 20px;padding: 0 20px">
      <el-form
        ref="form"
        :rules="isEdit ? updateRules : rules"
        :model="form"
        label-position="left"
        label-width="120px"
        style="margin-top: 10px"
      >
        <el-row :gutter="40">
          <el-col :span="12">
            <el-form-item label="账号名" prop="name" required>
              <el-input v-model="form.name" placeholder="请输入账号名" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="登录密码" prop="password" :required="!isEdit">
              <el-input
                v-model.trim="form.password"
                show-password
                placeholder="请输入登录密码"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="40">
          <el-col :span="12">
            <el-form-item label="购买方公司名称" prop="purchaserId" required>
              <el-select
                v-model="form.purchaserId"
                class="filter-item"
                placeholder="请选择购买方公司"
                clearable
                style="width: 100%"
                filterable
              >
                <el-option
                  v-for="item in buyList"
                  :key="item.purchaserId"
                  :label="item.companyName"
                  :value="item.purchaserId"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </TagCard>
    <TagCard title="授权信息" style="padding: 0 20px" />
    <div class="auth-card" style="margin-bottom: 20px">
      <div style="height: 40px;line-height: 40px;display: flex;align-items: center">
        <span style="color: #333333;margin-right: 20px;font-weight: bold">HHFace权限配置</span><el-switch v-model="form.hhFaceSwitch" @change="switchHHFaceChange" />
      </div>
      <div :style="[{maxHeight: !form.hhFaceSwitch ? '0px' : '1260px',transition: 'max-height 0.6s linear'}]">
        <div style="height: 40px;line-height: 40px">
          <span class="secondary_head">使用配置</span><el-checkbox v-model="hhFaceEnumConfig.useInfo.checkAll" class="selectAll_item" :indeterminate="hhFaceEnumConfig.useInfo.isIndeterminate" @change="handleCheckAllChange('hhFaceEnumConfig.useInfo', $event)">全选</el-checkbox>
        </div>
        <el-checkbox-group v-model="hhFaceEnumConfig.useInfo.checkedIdList" style="padding: 0 10px;display: flex;flex-direction:row;flex-wrap: wrap" @change="handleCheckedChange('hhFaceEnumConfig.useInfo', $event)">
          <div v-for="dItem in hhFaceEnumConfig.useInfo.checkList" :key="dItem.code" style="display: flex;align-items: flex-start;padding: 5px">
            <el-checkbox :label="dItem.code">
              <span class="auth-checked-span">{{ dItem.desc }}</span>
            </el-checkbox>
          </div>
        </el-checkbox-group>
        <div style="height: 40px;line-height: 40px;">
          <span class="secondary_head">支付宝刷脸启动核点配置</span><el-checkbox v-model="hhFaceEnumConfig.alipayFaceInfo.checkAll" class="selectAll_item" :indeterminate="hhFaceEnumConfig.alipayFaceInfo.isIndeterminate" @change="handleCheckAllChange('hhFaceEnumConfig.alipayFaceInfo', $event)">全选</el-checkbox>
        </div>
        <el-checkbox-group v-model="hhFaceEnumConfig.alipayFaceInfo.checkedIdList" style="padding: 0 10px" @change="handleCheckedChange('hhFaceEnumConfig.alipayFaceInfo', $event)">
          <div v-for="dItem in (hhFaceEnumConfig.alipayFaceInfo.checkList||[]).filter(v=>['TENANT','USER_LIB'].includes(v.code))" :key="dItem.code" style="display: flex;align-items: flex-start;padding: 5px">
            <div style="width: 160px">
              <el-checkbox
                :label="dItem.code"
                @change="handleCheckChange('hhFaceEnumConfig.alipayFaceInfo',`${dItem.listField}Id`, $event)"
              >{{ dItem.desc }}</el-checkbox>
            </div>
            <el-select
              v-model="hhFaceEnumConfig.alipayFaceInfo[`${dItem.listField}Id`]"
              class="filter-item"
              :placeholder="'请选择' + dItem.desc"
              :field="`${dItem.listField}Id`"
              clearable
              multiple
              :disabled="hhFaceEnumConfig.alipayFaceInfo.checkedIdList.findIndex(v=>v==dItem.code) == -1"
              style="width: 100%"
              filterable
            >
              <el-option
                v-for="item in hhFaceEnumConfig.alipayFaceInfo[`${dItem.listField}List`]"
                :key="item.code"
                :label="item.label"
                :value="item.code"
              />
            </el-select>
          </div>
          <div style="display: flex;flex-direction:row;flex-wrap: wrap">
            <div v-for="dItem in (hhFaceEnumConfig.alipayFaceInfo.checkList||[]).filter(v=>!['TENANT','USER_LIB'].includes(v.code))" :key="dItem.code" style="display: flex;align-items: flex-start;padding: 5px;">
              <el-checkbox :label="dItem.code">
                <span class="auth-checked-span">{{ dItem.desc }}</span>
              </el-checkbox>
            </div>
          </div>
        </el-checkbox-group>
        <div style="height: 40px;line-height: 40px">
          <span class="secondary_head">采集配置</span><el-checkbox v-model="hhFaceEnumConfig.collectInfo.checkAll" class="selectAll_item" :indeterminate="hhFaceEnumConfig.collectInfo.isIndeterminate" @change="handleCheckAllChange('hhFaceEnumConfig.collectInfo', $event)">全选</el-checkbox>
        </div>
        <el-checkbox-group v-model="hhFaceEnumConfig.collectInfo.checkedIdList" style="padding: 0 10px;display: flex;flex-direction:row;flex-wrap: wrap" @change="handleCheckedChange('hhFaceEnumConfig.collectInfo', $event)">
          <div v-for="dItem in hhFaceEnumConfig.collectInfo.checkList" :key="dItem.code" style="display: flex;align-items: flex-start;padding: 5px">
            <el-checkbox :label="dItem.code">
              <span class="auth-checked-span">{{ dItem.desc }}</span>
            </el-checkbox>
          </div>
        </el-checkbox-group>
        <div style="height: 40px;line-height: 40px">
          <span class="secondary_head">三方接口接入配置</span><el-checkbox v-model="hhFaceEnumConfig.thirdInfo.checkAll" class="selectAll_item" :indeterminate="hhFaceEnumConfig.thirdInfo.isIndeterminate" @change="handleCheckAllChange('hhFaceEnumConfig.thirdInfo', $event)">全选</el-checkbox>
        </div>
        <el-checkbox-group v-model="hhFaceEnumConfig.thirdInfo.checkedIdList" style="padding: 0 10px;display: flex;flex-direction:row;flex-wrap: wrap" @change="handleCheckedChange('hhFaceEnumConfig.thirdInfo', $event)">
          <div v-for="dItem in hhFaceEnumConfig.thirdInfo.checkList" :key="dItem.code" style="display: flex;align-items: flex-start;padding: 5px">
            <el-checkbox :label="dItem.code">
              <span class="auth-checked-span">{{ dItem.desc }}</span>
            </el-checkbox>
          </div>
        </el-checkbox-group>
        <div style="height: 40px;line-height: 40px">
          <span class="secondary_head">结果页配置</span><el-checkbox v-model="hhFaceEnumConfig.resultInfo.checkAll" class="selectAll_item" :indeterminate="hhFaceEnumConfig.resultInfo.isIndeterminate" @change="handleCheckAllChange('hhFaceEnumConfig.resultInfo', $event)">全选</el-checkbox>
        </div>
        <el-checkbox-group v-model="hhFaceEnumConfig.resultInfo.checkedIdList" style="padding: 0 10px;display: flex;flex-direction:row;flex-wrap: wrap" @change="handleCheckedChange('hhFaceEnumConfig.resultInfo', $event)">
          <div v-for="dItem in hhFaceEnumConfig.resultInfo.checkList" :key="dItem.code" style="display: flex;align-items: flex-start;padding: 5px">
            <el-checkbox :label="dItem.code">
              <span class="auth-checked-span">{{ dItem.desc }}</span>
            </el-checkbox>
          </div>
        </el-checkbox-group>
        <div style="height: 40px;line-height: 40px">
          <span class="secondary_head">硬件模组配置</span><el-checkbox v-model="hhFaceEnumConfig.hardwareInfo.checkAll" class="selectAll_item" :indeterminate="hhFaceEnumConfig.hardwareInfo.isIndeterminate" @change="handleCheckAllChange('hhFaceEnumConfig.hardwareInfo', $event)">全选</el-checkbox>
        </div>
        <el-checkbox-group v-model="hhFaceEnumConfig.hardwareInfo.checkedIdList" style="padding: 0 10px;display: flex;flex-direction:row;flex-wrap: wrap" @change="handleCheckedChange('hhFaceEnumConfig.hardwareInfo', $event)">
          <div v-for="dItem in hhFaceEnumConfig.hardwareInfo.checkList" :key="dItem.code" style="display: flex;align-items: flex-start;padding: 5px">
            <el-checkbox :label="dItem.code">
              <span class="auth-checked-span">{{ dItem.desc }}</span>
            </el-checkbox>
          </div>
        </el-checkbox-group>
        <div style="height: 40px;line-height: 40px">
          <span class="secondary_head">推送配置</span><el-checkbox v-model="hhFaceEnumConfig.pushInfo.checkAll" class="selectAll_item" :indeterminate="hhFaceEnumConfig.pushInfo.isIndeterminate" @change="handleCheckAllChange('hhFaceEnumConfig.pushInfo', $event)">全选</el-checkbox>
        </div>
        <el-checkbox-group v-model="hhFaceEnumConfig.pushInfo.checkedIdList" style="padding: 0 10px;display: flex;flex-direction:row;flex-wrap: wrap" @change="handleCheckedChange('hhFaceEnumConfig.pushInfo', $event)">
          <div v-for="dItem in hhFaceEnumConfig.pushInfo.checkList" :key="dItem.code" style="display: flex;align-items: flex-start;padding: 5px">
            <el-checkbox :label="dItem.code">
              <span class="auth-checked-span">{{ dItem.desc }}</span>
            </el-checkbox>
          </div>
        </el-checkbox-group>
        <div style="height: 40px;line-height: 40px">
          <span class="secondary_head">功能配置</span><el-checkbox v-model="hhFaceEnumConfig.funcInfo.checkAll" class="selectAll_item" :indeterminate="hhFaceEnumConfig.funcInfo.isIndeterminate" @change="handleCheckAllChange('hhFaceEnumConfig.funcInfo', $event)">全选</el-checkbox>
        </div>
        <el-checkbox-group v-model="hhFaceEnumConfig.funcInfo.checkedIdList" style="padding: 0 10px;display: flex;flex-direction:row;flex-wrap: wrap" @change="handleCheckedChange('hhFaceEnumConfig.funcInfo', $event)">
          <div v-for="dItem in hhFaceEnumConfig.funcInfo.checkList" :key="dItem.code" style="display: flex;align-items: flex-start;padding: 5px">
            <el-checkbox :label="dItem.code">
              <span class="auth-checked-span">{{ dItem.desc }}</span>
            </el-checkbox>
          </div>
        </el-checkbox-group>
        <div style="height: 40px;line-height: 40px">
          <span class="secondary_head">系统配置</span><el-checkbox v-model="hhFaceEnumConfig.sysInfo.checkAll" class="selectAll_item" :indeterminate="hhFaceEnumConfig.sysInfo.isIndeterminate" @change="handleCheckAllChange('hhFaceEnumConfig.sysInfo', $event)">全选</el-checkbox>
        </div>
        <el-checkbox-group v-model="hhFaceEnumConfig.sysInfo.checkedIdList" style="padding: 0 10px;display: flex;flex-direction:row;flex-wrap: wrap" @change="handleCheckedChange('hhFaceEnumConfig.sysInfo', $event)">
          <div v-for="dItem in hhFaceEnumConfig.sysInfo.checkList" :key="dItem.code" style="display: flex;align-items: flex-start;padding: 5px">
            <el-checkbox :label="dItem.code">
              <span class="auth-checked-span">{{ dItem.desc }}</span>
            </el-checkbox>
          </div>
        </el-checkbox-group>
      </div>
    </div>
    <div class="auth-card">
      <div style="height: 40px;line-height: 40px;display: flex;align-items: center">
        <span style="color: #333333;margin-right: 20px;font-weight: bold">HHArome权限配置</span><el-switch v-model="form.hhAromeSwitch" @change="switchChange" />
      </div>
      <div :style="[{maxHeight: !form.hhAromeSwitch ? '0px' : '660px',transition: 'max-height 0.4s linear'}]">
        <div style="height: 40px;line-height: 40px;">
          <span class="secondary_head">设备基本信息</span><el-checkbox v-model="deviceInfo.checkAll" class="selectAll_item" :indeterminate="deviceInfo.isIndeterminate" @change="handleCheckAllChange('deviceInfo', $event)">全选</el-checkbox>
        </div>
        <el-checkbox-group v-model="deviceInfo.checkedIdList" style="padding: 0 10px" @change="handleCheckedChange('deviceInfo', $event)">
          <div v-for="dItem in deviceInfo.checkList" :key="dItem.code" style="display: flex;align-items: flex-start;padding: 5px">
            <div style="width: 160px">
              <el-checkbox
                :label="dItem.code"
                @change="handleCheckChange('deviceInfo',`${dItem.listField}Id`, $event)"
              >{{ dItem.desc }}</el-checkbox>
            </div>
            <el-select
              v-model="deviceInfo[`${dItem.listField}Id`]"
              class="filter-item"
              :placeholder="'请选择' + dItem.desc"
              :field="`${dItem.listField}Id`"
              clearable
              multiple
              :disabled="deviceInfo.checkedIdList.findIndex(v=>v==dItem.code) == -1"
              style="width: 100%"
              filterable
            >
              <el-option
                v-for="item in deviceInfo[`${dItem.listField}List`]"
                :key="item.code"
                :label="item.label"
                :value="item.code"
              />
            </el-select>
          </div>
        </el-checkbox-group>
        <div style="height: 40px;line-height: 40px">
          <span class="secondary_head">使用配置</span><el-checkbox v-model="useTimeInfo.checkAll" class="selectAll_item" :indeterminate="useTimeInfo.isIndeterminate" @change="handleCheckAllChange('useTimeInfo', $event)">全选</el-checkbox>
        </div>
        <el-checkbox-group v-model="useTimeInfo.checkedIdList" style="padding: 0 10px;display: flex;flex-direction:row;flex-wrap: wrap" @change="handleCheckedChange('useTimeInfo', $event)">
          <div v-for="dItem in useTimeInfo.checkList" :key="dItem.code" style="display: flex;align-items: flex-start;padding: 5px">
            <el-checkbox :label="dItem.code">
              <span class="auth-checked-span">{{ dItem.desc }}</span>
            </el-checkbox>
          </div>
        </el-checkbox-group>
        <div style="height: 40px;line-height: 40px">
          <span class="secondary_head">推送地址配置</span><el-checkbox v-model="pushInfo.checkAll" class="selectAll_item" :indeterminate="pushInfo.isIndeterminate" @change="handleCheckAllChange('pushInfo', $event)">全选</el-checkbox>
        </div>
        <el-checkbox-group v-model="pushInfo.checkedIdList" style="padding: 0 10px;display: flex;flex-direction:row;flex-wrap: wrap" @change="handleCheckedChange('pushInfo', $event)">
          <div v-for="dItem in pushInfo.checkList" :key="dItem.code" style="display: flex;align-items: flex-start;padding: 5px">
            <el-checkbox :label="dItem.code">
              <span class="auth-checked-span">{{ dItem.desc }}</span>
            </el-checkbox>
          </div>
        </el-checkbox-group>
        <div style="height: 40px;line-height: 40px">
          <span class="secondary_head">系统配置</span><el-checkbox v-model="systemInfo.checkAll" class="selectAll_item" :indeterminate="systemInfo.isIndeterminate" @change="handleCheckAllChange('systemInfo', $event)">全选</el-checkbox>
        </div>
        <el-checkbox-group v-model="systemInfo.checkedIdList" style="padding: 0 10px;display: flex;flex-direction:row;flex-wrap: wrap" @change="handleCheckedChange('systemInfo', $event)">
          <div v-for="dItem in systemInfo.checkList" :key="dItem.code" style="display: flex;align-items: flex-start;padding: 5px">
            <el-checkbox :label="dItem.code">
              <span class="auth-checked-span">{{ dItem.desc }}</span>
            </el-checkbox>
          </div>
        </el-checkbox-group>
      </div>
    </div>
    <div class="card-footer">
      <el-button style="width: 120px" @click="cancel"> 取消 </el-button>
      <el-button type="primary" style="width: 120px" :loading="submitLoading" @click="submit">
        确定
      </el-button>
    </div>
  </div>
</template>

<script>
import TagCard from '@/components/TagCard'
import { addOrUpdateAuthAccount } from '@/api/accountAuth'

export default {
  components: { TagCard },
  props: {
    buyList: {
      type: Array,
      default: () => []
    },
    userLibList: {
      type: Array,
      default: () => []
    },
    merchantLists: {
      type: Array,
      default: () => []
    },
    ampeDataList: {
      type: Array,
      default: () => []
    },
    permissionList: {
      type: Array,
      default: () => []
    },
    systemInfoList: {
      type: Array,
      default: () => []
    },
    useTimeInfoList: {
      type: Array,
      default: () => []
    },
    authTypeList: {
      type: Array,
      default: () => []
    },
    pushInfoList: {
      type: Array,
      default: () => []
    },
    hhFaceEnum: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      form: {
        id: null,
        name: null, // 账号名
        password: null, // 手机号
        purchaserId: null, // 购买方公司名称
        hhAromeSwitch: false, // HHArome权限配置
        hhFaceSwitch: false // HHFace权限配置
      },
      rules: {
        name: [
          {
            required: true,
            message: '请输入账号名',
            trigger: ['change', 'blur']
          }
        ],
        password: [
          { required: true, message: '请输入登录密码', trigger: ['change', 'blur'] },
          {
            pattern:
              /^(((?=.*\d)(?=.*[a-z])(?=.*[A-Z]))|((?=.*\d)(?=.*[a-z])(?=.*[~!@#$%^&*]))|((?=.*\d)(?=.*[A-Z])(?=.*[~!@#$%^&*]))|((?=.*[a-z])(?=.*[A-Z])(?=.*[~!@#$%^&*]))|((?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[~!@#$%^&*]))).{10,32}$/,
            message:
              '必须大小写字母、数字、特殊字符,4种组合中至少满足3种，且密码长度在10-32位之间'
          }
        ],
        purchaserId: [
          {
            required: true,
            message: '请选择购买方公司',
            trigger: ['change', 'blur']
          }
        ]
      },
      updateRules: {
        name: [
          {
            required: true,
            message: '请输入账号名',
            trigger: ['change', 'blur']
          }
        ],
        purchaserId: [
          {
            required: true,
            message: '请选择购买方公司',
            trigger: ['change', 'blur']
          }
        ]
      },
      submitLoading: false,
      isEdit: false,
      deviceInfo: {
        checkAll: false,
        isIndeterminate: false,
        checkedIdList: [],
        checkList: [],
        merchantPortalList: [],
        ampePortalList: [],
        merchantPortalId: [],
        ampePortalId: []
      },
      useTimeInfo: {
        checkAll: false,
        isIndeterminate: false,
        checkedIdList: [],
        checkList: []
      },
      pushInfo: {
        checkAll: false,
        isIndeterminate: false,
        checkedIdList: [],
        checkList: []
      },
      systemInfo: {
        checkAll: false,
        isIndeterminate: false,
        checkedIdList: [],
        checkList: []
      },
      /**
       * HHFace权限配置
       */
      hhFaceEnumConfig: {
        // 使用配置枚举
        useInfo: {
          checkAll: false,
          isIndeterminate: false,
          checkedIdList: [],
          checkList: []
        },
        // 支付宝刷脸启动核点配置
        alipayFaceInfo: {
          checkAll: false,
          isIndeterminate: false,
          checkedIdList: [],
          checkList: [],
          merchantPortalList: [],
          userLibList: [],
          merchantPortalId: [],
          userLibId: []
        },
        // 采集配置枚举
        collectInfo: {
          checkAll: false,
          isIndeterminate: false,
          checkedIdList: [],
          checkList: []
        },
        // 三方接口配置枚举
        thirdInfo: {
          checkAll: false,
          isIndeterminate: false,
          checkedIdList: [],
          checkList: []
        },
        // 结果页配置枚举列表
        resultInfo: {
          checkAll: false,
          isIndeterminate: false,
          checkedIdList: [],
          checkList: []
        },
        // 硬件配置枚举
        hardwareInfo: {
          checkAll: false,
          isIndeterminate: false,
          checkedIdList: [],
          checkList: []
        },
        // 推送配置枚举
        pushInfo: {
          checkAll: false,
          isIndeterminate: false,
          checkedIdList: [],
          checkList: []
        },
        // 功能配置枚举
        funcInfo: {
          checkAll: false,
          isIndeterminate: false,
          checkedIdList: [],
          checkList: []
        },
        // 系统配置枚举
        sysInfo: {
          checkAll: false,
          isIndeterminate: false,
          checkedIdList: [],
          checkList: []
        }
      }
    }
  },
  watch: {
    ampeDataList: {
      deep: true,
      handler(newVal, oldVal) {
        this.deviceInfo.ampePortalList = newVal
      }
    },
    merchantLists: {
      deep: true,
      handler(newVal, oldVal) {
        this.deviceInfo.merchantPortalList = newVal
        this.hhFaceEnumConfig.alipayFaceInfo.merchantPortalList = newVal
      }
    },
    userLibList: {
      deep: true,
      handler(newVal, oldVal) {
        this.hhFaceEnumConfig.alipayFaceInfo.userLibList = newVal
      }
    },
    systemInfoList: {
      deep: true,
      handler(newVal, oldVal) {
        this.systemInfo.checkList = newVal
      }
    },
    useTimeInfoList: {
      deep: true,
      handler(newVal, oldVal) {
        this.useTimeInfo.checkList = newVal
      }
    },
    authTypeList: {
      deep: true,
      handler(newVal, oldVal) {
        console.log(newVal)
        this.deviceInfo.checkList = newVal
      }
    },
    pushInfoList: {
      deep: true,
      handler(newVal, oldVal) {
        this.pushInfo.checkList = newVal
      }
    },
    hhFaceEnum: {
      deep: true,
      handler(newVal, oldVal) {
        Object.keys(newVal).forEach(nItem => {
          console.log('hhFaceEnum', nItem, this.hhFaceEnum[nItem], nItem.replace('List', ''))
          this.hhFaceEnumConfig[nItem.replace('List', '')].checkList = this.hhFaceEnum[nItem]
        })
      }
    }
  },
  methods: {
    open(obj) {
      this.submitLoading = false
      this.$nextTick(() => {
        this.$refs.form.resetFields()
        this.form.hhAromeSwitch = false
        this.switchChange(false)
        this.switchHHFaceChange(false)
        if (obj && Object.keys(obj).length > 0) {
          console.log(obj)
          this.form.id = obj.id
          this.form = {
            id: obj.id,
            name: obj.name, // 姓名
            password: '', // 密码
            purchaserId: (obj.purchaserId),
            hhAromeSwitch: obj.hhAromeSwitch,
            hhFaceSwitch: obj.hhFaceSwitch
          }
          const checkIdArr = [];
          (obj.deviceConfig || []).forEach(v => {
            if (v.moduleSwitch) {
              checkIdArr.push(v.moduleType)
              this.deviceInfo[`${v.moduleType == 0 ? 'merchantPortal' : 'ampePortal'}Id`] = v.moduleValues || []
            }
          })
          this.deviceInfo.checkedIdList = checkIdArr
          this.handleCheckedChange('deviceInfo', this.deviceInfo.checkedIdList)
          this.systemInfo.checkedIdList = obj.systemConfig || []
          this.handleCheckedChange('systemInfo', this.systemInfo.checkedIdList)
          this.useTimeInfo.checkedIdList = obj.useConfig || []
          this.handleCheckedChange('useTimeInfo', this.useTimeInfo.checkedIdList)
          this.hhFaceEnumConfig.useInfo.checkedIdList = obj.hhfaceUseConfig || []
          this.handleCheckedChange('hhFaceEnumConfig.useInfo', this.hhFaceEnumConfig.useInfo.checkedIdList)
          this.hhFaceEnumConfig.alipayFaceInfo.checkedIdList = obj.hhfaceFaceConfig || []
          this.hhFaceEnumConfig.alipayFaceInfo.merchantPortalId = obj.hhfaceFaceConfigTenantIds || []
          this.hhFaceEnumConfig.alipayFaceInfo.userLibId = obj.hhfaceFaceConfigUserLibIds || []
          this.handleCheckedChange('hhFaceEnumConfig.alipayFaceInfo', this.hhFaceEnumConfig.alipayFaceInfo.checkedIdList)
          this.hhFaceEnumConfig.collectInfo.checkedIdList = obj.hhfaceCollectConfig || []
          this.handleCheckedChange('hhFaceEnumConfig.collectInfo', this.hhFaceEnumConfig.collectInfo.checkedIdList)
          this.hhFaceEnumConfig.thirdInfo.checkedIdList = obj.hhfaceThirdConfig || []
          this.handleCheckedChange('hhFaceEnumConfig.thirdInfo', this.hhFaceEnumConfig.thirdInfo.checkedIdList)
          this.hhFaceEnumConfig.resultInfo.checkedIdList = obj.hhfaceResultConfig || []
          this.handleCheckedChange('hhFaceEnumConfig.resultInfo', this.hhFaceEnumConfig.resultInfo.checkedIdList)
          this.hhFaceEnumConfig.hardwareInfo.checkedIdList = obj.hhfaceHardwareConfig || []
          this.handleCheckedChange('hhFaceEnumConfig.hardwareInfo', this.hhFaceEnumConfig.hardwareInfo.checkedIdList)
          this.hhFaceEnumConfig.pushInfo.checkedIdList = obj.hhfacePushConfig || []
          this.handleCheckedChange('hhFaceEnumConfig.pushInfo', this.hhFaceEnumConfig.pushInfo.checkedIdList)
          this.hhFaceEnumConfig.funcInfo.checkedIdList = obj.hhfaceFuncConfig || []
          this.handleCheckedChange('hhFaceEnumConfig.funcInfo', this.hhFaceEnumConfig.funcInfo.checkedIdList)
          this.hhFaceEnumConfig.sysInfo.checkedIdList = obj.hhfaceSystemConfig || []
          this.handleCheckedChange('hhFaceEnumConfig.sysInfo', this.hhFaceEnumConfig.sysInfo.checkedIdList)
          this.isEdit = true
        } else {
          this.isEdit = false
        }
      })
    },
    handleCheckAllChange(field, checked) {
      const fieldArr = field.split('.')
      if (fieldArr.length > 1) {
        if ((field[0] == 'hhFaceEnumConfig' && field[1] == 'alipayFaceInfo') && !checked) {
          this[fieldArr[0]][fieldArr[1]].merchantPortalId = []
          this[fieldArr[0]][fieldArr[1]].userLibId = []
        }
        this[fieldArr[0]][fieldArr[1]].checkedIdList = checked ? this[fieldArr[0]][fieldArr[1]].checkList.map(v => v.code) : []
        this[fieldArr[0]][fieldArr[1]].isIndeterminate = false
      } else {
        if ((field == 'deviceInfo') && !checked) {
          this[field].merchantPortalId = []
          this[field].ampePortalId = []
        }
        this[field].checkedIdList = checked ? this[field].checkList.map(v => v.code) : []
        this[field].isIndeterminate = false
      }
    },
    handleCheckChange(field, listFieldId, checked) {
      const fieldArr = field.split('.')
      if (fieldArr.length > 1) {
        if (!checked) {
          this[fieldArr[0]][fieldArr[1]][listFieldId] = []
        }
      } else {
        if (!checked) {
          this[field][listFieldId] = []
        }
      }
    },
    switchChange(checked) {
      if (!checked) {
        this.deviceInfo = {
          ...this.deviceInfo,
          checkAll: false,
          isIndeterminate: false,
          checkedIdList: [],
          merchantPortalId: [],
          ampePortalId: []
        }
        this.systemInfo = {
          ...this.systemInfo,
          checkAll: false,
          isIndeterminate: false,
          checkedIdList: []
        }
        this.useTimeInfo = {
          ...this.useTimeInfo,
          checkAll: false,
          isIndeterminate: false,
          checkedIdList: []
        }
      }
    },
    switchHHFaceChange(checked) {
      if (!checked) {
        this.hhFaceEnumConfig = {
          // 使用配置枚举
          useInfo: {
            checkAll: false,
            isIndeterminate: false,
            checkedIdList: [],
            checkList: this.hhFaceEnumConfig.useInfo?.checkList || []
          },
          // 支付宝刷脸启动核点配置
          alipayFaceInfo: {
            checkAll: false,
            isIndeterminate: false,
            checkedIdList: [],
            checkList: this.hhFaceEnumConfig.alipayFaceInfo?.checkList || [],
            merchantPortalList: this.hhFaceEnumConfig.alipayFaceInfo?.merchantPortalList || [],
            userLibList: this.hhFaceEnumConfig.alipayFaceInfo?.userLibList || [],
            merchantPortalId: [],
            userLibId: []
          },
          // 采集配置枚举
          collectInfo: {
            checkAll: false,
            isIndeterminate: false,
            checkedIdList: [],
            checkList: this.hhFaceEnumConfig.collectInfo?.checkList || []
          },
          // 三方接口配置枚举
          thirdInfo: {
            checkAll: false,
            isIndeterminate: false,
            checkedIdList: [],
            checkList: this.hhFaceEnumConfig.thirdInfo?.checkList || []
          },
          // 结果页配置枚举列表
          resultInfo: {
            checkAll: false,
            isIndeterminate: false,
            checkedIdList: [],
            checkList: this.hhFaceEnumConfig.resultInfo?.checkList || []
          },
          // 硬件配置枚举
          hardwareInfo: {
            checkAll: false,
            isIndeterminate: false,
            checkedIdList: [],
            checkList: this.hhFaceEnumConfig.hardwareInfo?.checkList || []
          },
          // 推送配置枚举
          pushInfo: {
            checkAll: false,
            isIndeterminate: false,
            checkedIdList: [],
            checkList: this.hhFaceEnumConfig.pushInfo?.checkList || []
          },
          // 功能配置枚举
          funcInfo: {
            checkAll: false,
            isIndeterminate: false,
            checkedIdList: [],
            checkList: this.hhFaceEnumConfig.funcInfo?.checkList || []
          },
          // 系统配置枚举
          sysInfo: {
            checkAll: false,
            isIndeterminate: false,
            checkedIdList: [],
            checkList: this.hhFaceEnumConfig.sysInfo?.checkList || []
          }
        }
      }
    },
    handleCheckedChange(field, value) {
      const fieldArr = field.split('.')
      const checkedCount = value.length
      if (fieldArr.length > 1) {
        this[fieldArr[0]][fieldArr[1]].checkAll = !!(checkedCount === this[fieldArr[0]][fieldArr[1]].checkList.length)
        this[fieldArr[0]][fieldArr[1]].isIndeterminate = !!(checkedCount > 0 && checkedCount < this[fieldArr[0]][fieldArr[1]].checkList.length)
      } else {
        this[field].checkAll = !!(checkedCount === this[field].checkList.length)
        this[field].isIndeterminate = !!(checkedCount > 0 && checkedCount < this[field].checkList.length)
      }
    },
    cancel() {
      this.$emit('cancel')
    },
    submit(e) {
      e.preventDefault()
      this.$refs.form.validate(async(valid) => {
        if (!valid) {
          return false
        }
        const arr = [];
        (this.deviceInfo.checkList || []).forEach(v => {
          arr.push({
            moduleSwitch: this.deviceInfo.checkedIdList.includes(v.code),
            moduleType: v.code,
            moduleName: v.desc,
            moduleValues: this.deviceInfo[`${v.listField}Id`]
          })
        })
        // HHArome权限配置勾选之后 设备基本信息至少勾选一个
        if (this.form.hhAromeSwitch && arr.filter(v => v.moduleSwitch).length == 0) {
          this.$message({
            type: 'warning',
            message: `设备基本信息至少勾选一个`
          })
          return
        }
        for (let i = 0; i < arr.length; i++) {
          if (arr[i].moduleSwitch && (!arr[i].moduleValues || arr[i].moduleValues.length == 0)) {
            this.$message({
              type: 'warning',
              message: `请选择${arr[i].moduleName}`
            })
            return
          }
        }
        if (this.submitLoading) {
          return
        }
        this.submitLoading = true
        try {
          await addOrUpdateAuthAccount({
            deviceConfig: arr,
            id: this.form.id,
            name: this.form.name,
            password: this.form.password,
            purchaserId: this.form.purchaserId,
            hhAromeSwitch: this.form.hhAromeSwitch,
            systemConfig: this.systemInfo.checkedIdList || [],
            useConfig: this.useTimeInfo.checkedIdList || [],
            pushConfig: this.pushInfo.checkedIdList || [],

            hhFaceSwitch: this.form.hhFaceSwitch,
            hhfaceUseConfig: this.hhFaceEnumConfig.useInfo.checkedIdList || [],
            hhfaceFaceConfig: this.hhFaceEnumConfig.alipayFaceInfo.checkedIdList || [],
            hhfaceFaceConfigTenantIds: this.hhFaceEnumConfig.alipayFaceInfo.merchantPortalId || [],
            hhfaceFaceConfigUserLibIds: this.hhFaceEnumConfig.alipayFaceInfo.userLibId || [],
            hhfaceCollectConfig: this.hhFaceEnumConfig.collectInfo.checkedIdList || [],
            hhfaceThirdConfig: this.hhFaceEnumConfig.thirdInfo.checkedIdList || [],
            hhfaceResultConfig: this.hhFaceEnumConfig.resultInfo.checkedIdList || [],
            hhfaceHardwareConfig: this.hhFaceEnumConfig.hardwareInfo.checkedIdList || [],
            hhfacePushConfig: this.hhFaceEnumConfig.pushInfo.checkedIdList || [],
            hhfaceFuncConfig: this.hhFaceEnumConfig.funcInfo.checkedIdList || [],
            hhfaceSystemConfig: this.hhFaceEnumConfig.sysInfo.checkedIdList || []
          })
          this.$emit('success', this.isEdit)
        } catch (e) {
          // this.$refs.form.resetFields()
        } finally {
          this.submitLoading = false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.auth-card {
  box-shadow: 0px 0px 6px 0px #99BDF366;
  background: #fff;
  border-radius: 12px;
  padding: 10px 20px;
  overflow: hidden;
  margin: 0 20px;
  height: auto;
}
.card-footer {
  margin-top: 20px;
  display: flex;
  width: 100%;
  justify-content: center;
}

.auth-checked-span {
  word-break: normal;
  display: block;
  white-space: pre-wrap;
  word-wrap: break-word;
  width: 150px;
  line-height: 20px;
}
::v-deep .el-checkbox__input {
  vertical-align: top;
  line-height: 20px;
}
.selectAll_item {
  ::v-deep .el-checkbox__input {
    vertical-align: middle !important;
    line-height: 20px;
  }
}
.secondary_head {
  //min-width: 130px;
  padding-right: 20px;
  display: inline-block;
  position: relative;
  height: 40px;
  line-height: 40px;
  margin-left: 20px;
  &:before {
    position: absolute;
    top: 12px;
    left: -10px;
    width: 3px;
    height: 16px;
    content: "";
    background-color: #409eff;
    border-radius: 3px;
  }
  &:after {
    position: absolute;
    top: 12px;
    left: -16px;
    width: 3px;
    height: 16px;
    content: "";
    background-color: #409eff;
    border-radius: 3px;
  }
}
</style>
