<template>
  <div class="app-container">
    <div v-show="!operationStatus">
      <el-button
        type="primary"
        icon="el-icon-plus"
        class="margin-left"
        @click="create"
      >添加账号</el-button>
      <!--搜索区-->
      <el-select
        v-model="form.accountId"
        class="margin-left input"
        filterable
        clearable
        placeholder="请选择账号"
      >
        <el-option
          v-for="item in accountList"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        />
      </el-select>
      <el-select
        v-model="form.purchaserId"
        filterable
        clearable
        placeholder="请选择购买方"
        class="margin-left input"
      >
        <el-option
          v-for="item in buyList"
          :key="item.purchaserId"
          :label="item.companyName"
          :value="item.purchaserId"
        />
      </el-select>
      <el-select
        v-model="form.hhAromeSwitch"
        filterable
        clearable
        placeholder="HHArome权限配置"
        class="margin-left input"
      >
        <el-option
          v-for="item in permissionList"
          :key="item.code"
          :label="item.label"
          :value="item.code"
        />
      </el-select>
      <!--      <el-select
        v-model="form.hhFaceSwitch"
        filterable
        clearable
        placeholder="hhFace权限配置"
        class="margin-left input"
      >
        <el-option
          v-for="item in permissionList"
          :key="item.code"
          :label="item.label"
          :value="item.code"
        />
      </el-select>-->
      <el-button type="primary" icon="el-icon-search" class="margin-left" @click="getTableList">搜索</el-button>
      <!--主表格-->
      <el-table
        ref="table_form"
        v-loading="enumLoading || tableLoading"
        :data="tableData"
        class="table"
        element-loading-text="Loading"
        border
        fit
        highlight-current-row
      >
        <el-table-column label="序号" align="center" width="80px">
          <template slot-scope="scope">
            {{ ((pagination.current - 1) * pagination.pageSize) + (scope.$index + 1) }}
          </template>
        </el-table-column>
        <el-table-column label="账号名" align="center">
          <template slot-scope="scope">
            {{ scope.row.name | matchNull }}
          </template>
        </el-table-column>
        <el-table-column label="购买方公司" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.purchaserName | matchNull }}</span>
          </template>
        </el-table-column>
        <el-table-column label="HHFace权限配置" align="center">
          <template slot-scope="scope">
            <el-tag
              v-if="scope.row.hhFaceSwitch"
              effect="dark"
              style="border: 1px solid #409EFF;background: #fff;color: #409EFF;"
            >
              启用
            </el-tag>
            <el-tag
              v-else
              effect="dark"
              style="border: 1px solid #E7EBF4;background: #F6F6F6;color: #A8AEBC;"
            >
              停用
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="HHArome权限配置" align="center">
          <template slot-scope="scope">
            <el-tag
              v-if="scope.row.hhAromeSwitch"
              effect="dark"
              style="border: 1px solid #409EFF;background: #fff;color: #409EFF;"
            >
              启用
            </el-tag>
            <el-tag
              v-else
              effect="dark"
              style="border: 1px solid #E7EBF4;background: #F6F6F6;color: #A8AEBC;"
            >
              停用
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="" label="操作区" width="250">
          <template slot-scope="scope">
            <el-button
              type="danger"
              size="small"
              @click="handleDelete(scope.row.id)"
            >删除</el-button>
            <el-button
              type="primary"
              size="small"
              @click="handleUpdate(scope.row)"
            >编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--分页栏-->
      <pagination
        :total="pagination.total"
        :page.sync="pagination.current"
        :limit.sync="pagination.pageSize"
        :page-sizes="pagination.pageSizeOptions"
        :layout="pagination.layout"
        @pagination="handleSizeChange"
      />
    </div>
    <UpdateCardModule
      v-show="operationStatus"
      ref="updateModel"
      :buy-list="buyList"
      :ampe-data-list="ampeDataList"
      :merchant-lists="merchantLists"
      :permission-list="permissionList"
      :system-info-list="systemInfoList"
      :use-time-info-list="useTimeInfoList"
      :auth-type-list="authTypeList"
      :push-info-list="pushInfoList"
      :hh-face-enum="hhFaceEnum"
      :user-lib-list="userLibList"
      @success="modalSuccess"
      @cancel="operationStatus = false"
    />
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import UpdateCardModule from './UpdateModule.vue'
import { purchaserList, ampeList } from '@/api/configuration'
import tableMixins from '@/mixins/tableMixins'
import { getAllList as getMerchantList } from '@/api/merchant'
import {
  deleteById,
  getAccountAuthPushConfigList,
  getAccountAuthSysConfigList,
  getAccountAuthTypeList,
  getAccountAuthUseConfigList,
  getAccountHHFaceCollectConfigList,
  getAccountHHFaceFaceConfigList, getAccountHHFaceFuncConfigList,
  getAccountHHFaceHardwareConfigList, getAccountHHFacePushConfigList,
  getAccountHHFaceResultConfigList, getAccountHHFaceSystemConfigList,
  getAccountHHFaceThirdConfigList,
  getAccountHHFaceUseConfigList,
  getAccountList,
  getList
} from '@/api/accountAuth'
import { getUserLibList } from '@/api/userlib'

export default {
  components: { Pagination, UpdateCardModule },
  filters: {
    matchNull(str) {
      if (!str) {
        return '-'
      } else {
        return str
      }
    }
  },
  mixins: [tableMixins],
  data() {
    return {
      enumLoading: false, // 是否加载中
      accountList: [],
      buyList: [],
      merchantLists: [],
      ampeDataList: [],
      userLibList: [], // 用户库
      systemInfoList: [], // 系统配置枚举
      useTimeInfoList: [], // 使用配置枚举
      pushInfoList: [], // 推送地址配置枚举
      authTypeList: [], // 设备基本信息配置枚举
      hhFaceEnum: {
        useInfoList: [], // 使用配置枚举
        alipayFaceInfoList: [], // 支付宝人脸采集配置
        collectInfoList: [], // 采集配置枚举
        thirdInfoList: [], // 三方接口配置枚举
        resultInfoList: [], // 结果页配置枚举列表
        hardwareInfoList: [], // 硬件配置枚举
        pushInfoList: [], // 推送配置枚举
        funcInfoList: [], // 功能配置枚举
        sysInfoList: [] // 系统配置枚举
      },
      operationStatus: false,
      permissionList: [
        {
          label: '启用',
          code: true
        }, {
          label: '停用',
          code: false
        }
      ],
      form: {
        accountId: null,
        purchaserId: null,
        hhAromeSwitch: null
        // hhFaceSwitch: null
      }
    }
  },
  created() {
    this.selectInit()
  },
  methods: {
    async selectInit() {
      this.enumLoading = true
      const purchaserAxios = await purchaserList()
      const merchantAxios = await getMerchantList()
      const ampeAxios = await ampeList()
      const accountAxios = await getAccountList()
      const hhAromeSysAxios = await getAccountAuthSysConfigList()
      const hhAromeUseAxios = await getAccountAuthUseConfigList()
      const hhAromePushAxios = await getAccountAuthPushConfigList()
      const hhAromeAuthAxios = await getAccountAuthTypeList()
      const hhFaceUseAxios = await getAccountHHFaceUseConfigList()
      const hhFaceFaceAxios = await getAccountHHFaceFaceConfigList()
      const hhFaceCollectAxios = await getAccountHHFaceCollectConfigList()
      const hhFaceThirdAxios = await getAccountHHFaceThirdConfigList()
      const hhFaceResultAxios = await getAccountHHFaceResultConfigList()
      const hhFaceHardwareAxios = await getAccountHHFaceHardwareConfigList()
      const hhFacePushAxios = await getAccountHHFacePushConfigList()
      const hhFaceFuncAxios = await getAccountHHFaceFuncConfigList()
      const hhFaceSysAxios = await getAccountHHFaceSystemConfigList()
      const userLibAxios = await getUserLibList()
      await Promise.all([
        purchaserAxios, merchantAxios, ampeAxios, accountAxios, hhAromeSysAxios, hhAromeUseAxios,
        hhAromePushAxios, hhAromeAuthAxios, hhFaceUseAxios, hhFaceFaceAxios, hhFaceCollectAxios, hhFaceThirdAxios,
        hhFaceResultAxios, hhFaceHardwareAxios, hhFacePushAxios, hhFaceFuncAxios, hhFaceSysAxios, userLibAxios
      ]).then(res => {
        const purchaserAxiosRes = res[0]
        this.buyList = purchaserAxiosRes.data
        const merchantAxiosRes = res[1]
        this.merchantLists = (merchantAxiosRes.data || []).map(v => {
          return {
            label: v.name,
            code: v.id
          }
        })
        const ampeAxiosRes = res[2]
        this.ampeDataList = (ampeAxiosRes.data || []).map(v => {
          return {
            label: v.ampeName,
            code: v.ampeId
          }
        })
        const accountAxiosRes = res[3]
        this.accountList = (accountAxiosRes.data || [])
        const hhAromeSysAxiosRes = res[4]
        this.systemInfoList = (hhAromeSysAxiosRes.data || [])
        const hhAromeUseAxiosRes = res[5]
        this.useTimeInfoList = (hhAromeUseAxiosRes.data || [])
        const hhAromePushAxiosRes = res[6]
        this.pushInfoList = (hhAromePushAxiosRes.data || [])
        const hhAromeAuthAxiosRes = res[7]
        this.authTypeList = (hhAromeAuthAxiosRes.data || []).map(v => {
          return {
            ...v,
            listField: v.code == 0 ? 'merchantPortal' : 'ampePortal'
          }
        })
        const hhFaceUseAxiosRes = res[8]
        this.hhFaceEnum.useInfoList = (hhFaceUseAxiosRes.data || [])
        const hhFaceFaceAxiosRes = res[9]
        this.hhFaceEnum.alipayFaceInfoList = (hhFaceFaceAxiosRes.data || []).map(v => {
          return {
            ...v,
            listField: v.code == 'TENANT' ? 'merchantPortal' : v.code == 'USER_LIB' ? 'userLib' : ''
          }
        })
        const hhFaceCollectAxiosRes = res[10]
        this.hhFaceEnum.collectInfoList = (hhFaceCollectAxiosRes.data || [])
        const hhFaceThirdAxiosRes = res[11]
        this.hhFaceEnum.thirdInfoList = (hhFaceThirdAxiosRes.data || [])
        const hhFaceResultAxiosRes = res[12]
        this.hhFaceEnum.resultInfoList = (hhFaceResultAxiosRes.data || [])
        const hhFaceHardwareAxiosRes = res[13]
        this.hhFaceEnum.hardwareInfoList = (hhFaceHardwareAxiosRes.data || [])
        const hhFacePushAxiosRes = res[14]
        this.hhFaceEnum.pushInfoList = (hhFacePushAxiosRes.data || [])
        const hhFaceFuncAxiosRes = res[15]
        this.hhFaceEnum.funcInfoList = (hhFaceFuncAxiosRes.data || [])
        const hhFaceSysAxiosRes = res[16]
        this.hhFaceEnum.sysInfoList = (hhFaceSysAxiosRes.data || [])
        const userLibAxios = res[17]
        this.userLibList = (userLibAxios.data || []).map(v => {
          return {
            label: v.userLibName,
            code: v.id
          }
        })
      }).finally(() => {
        this.enumLoading = false
      })
    },
    async initData() {
      await this.getTableList()
    },
    // 增加筛选条件
    transformFilterForm() {
      return {
        accountId: this.form.accountId || null,
        purchaserId: this.form.purchaserId || null,
        hhAromeSwitch: this.form.hhAromeSwitch || null
        // hhFaceSwitch: this.form.hhFaceSwitch || null,
      }
    },
    // 获取表格数据
    async getTableList() {
      this.tableLoading = true
      try {
        const result = await getList(this.getFilterParams())
        this.setDataList(result.data)
      } catch (e) {
        console.log(e)
      } finally {
        this.tableLoading = false
      }
    },
    // 打开添加账号对话框
    create() {
      this.$nextTick(() => {
        this.operationStatus = true
        this.$refs.updateModel.open()
      })
    },
    handleDelete(id) {
      this.$confirm('确定要删除此授权账号吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(() => {
        deleteById(id).then((res) => {
          this.getTableList()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
      })
    },
    handleUpdate(row) {
      this.$nextTick(() => {
        this.operationStatus = true
        this.$refs.updateModel.open(Object.assign({}, row))
      })
    },
    modalSuccess(isEdit) {
      this.operationStatus = false
      if (!isEdit) {
        this.clearPageParams()
      }
      this.getTableList()
    }
  }
}
</script>
<style scoped>
.table{
  margin-top: 15px;
}
.flex {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.margin-left {
  margin: 10px 0 0 10px;
}
.input {
  width: 200px;
}
</style>
