<template>
  <div class="app-container">
    <div class="head">
      添加通用设备
      <el-button
        type="primary"
        size="mini"
        style="margin-left: 20px"
        @click="back"
      >返回</el-button>
      <el-button
        type="primary"
        size="mini"
        style="margin-left: 20px"
        @click="chooseTemplate"
      >选用模板</el-button>
    </div>
    <div
      v-loading="enumLoading"
      element-loading-text="加载中..."
    >
      <edit-device-module
        style="margin-left: 16px"
        :template-data="templateData"
        :application-list="applicationList"
        :buy-list="buyList"
        :device-list="deviceList"
        :brand-list="brandList"
        :reader-brand-list="readerBrandList"
        :qr-brand-list="qrBrandList"
        :camera-type-list="cameraTypeList"
        :live-type-list="liveTypeList"
        :push-failed-record-type-list="pushFailedRecordTypeList"
        :success-show-personal-info-type-list="successShowPersonalInfoTypeList"
        :set-personal-type-list="setPersonalTypeList"
        :is-dis="false"
        @finish="back"
        @back="back"
      />
      <el-dialog
        title="选用模板"
        :visible.sync="dialogVisible"
        width="500px"
        :close-on-click-modal="false"
      >
        <el-form
          ref="form"
          :model="form"
          :rules="rules"
          label-width="80px"
          label-position="left"
        >
          <el-form-item label="模板名称" prop="id" required>
            <el-select
              v-model="form.id"
              placeholder="请选择模板名称"
              filterable
              style="width: 100%"
            >
              <el-option
                v-for="(item, index) in templateDataList"
                :key="index"
                :label="item.templateName"
                :value="item.deviceTemplateId"
              />
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false"> 取消 </el-button>
          <el-button type="primary" @click="sure"> 确定 </el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import EditDeviceModule from './components/EditDeviceModule'
import {
  templateList,
  templateDetail,
  getCameraTypeEnum,
  getLiveTypeEnum,
  getPushFailedRecordTypeEnum,
  getSuccessShowPersonalInfoListEnum,
  getSetPersonalListEnum
} from '@/api/HHLocalDevice'
import { getIdCardReaderBrand, getQrCodeReaderBrandEnum, getReaderBrand } from '@/api/device'
import { applicationTypeList, deviceModelList, purchaserList } from '@/api/configuration'

export default {
  components: { EditDeviceModule },
  data() {
    return {
      enumLoading: false, // 是否加载中
      templateData: {},
      templateDataList: [],
      applicationList: [], // 设备型号下拉
      deviceList: [], // 设备型号下拉
      buyList: [], // 购买方公司名称下拉
      brandList: [], // 身份证阅读器品牌下拉
      readerBrandList: [], // 阅读器品牌下拉
      qrBrandList: [], // 二维码读头品牌下拉
      cameraTypeList: [], // 摄像头类型下拉
      liveTypeList: [], // 活体检测模式下拉
      pushFailedRecordTypeList: [], // 记录类型下拉
      successShowPersonalInfoTypeList: [], // 成功显示人员信息下拉
      setPersonalTypeList: [], // 设置——人员列表下拉
      dialogVisible: false,
      form: {
        id: null
      },
      rules: {
        id: [
          {
            required: true,
            message: '不能为空!',
            trigger: ['change', 'blur']
          }
        ]
      }
    }
  },
  mounted() {
    // this.initData()
  },
  created() {
    this.selectInit()
  },
  methods: {
    async selectInit() {
      this.enumLoading = true
      const applicationTypeAxios = await applicationTypeList() // 获取应用类型列表
      const deviceModelAxios = await deviceModelList() // 设备型号列表
      const purchaserAxios = await purchaserList() // 购买方列表
      const templateAxios = await templateList() // 模板列表
      const qrBrandAxios = await getQrCodeReaderBrandEnum() // 获取二维码读头品牌
      const brandAxios = await getIdCardReaderBrand() // 身份证阅读器品牌下拉
      const readerBrandAxios = await getReaderBrand() // 阅读器品牌下拉
      const cameraTypeAxios = await getCameraTypeEnum() // 摄像头类型下拉
      const liveTypeAxios = await getLiveTypeEnum() // 活体检测模式下拉
      const pushFailedRecordTypeAxios = await getPushFailedRecordTypeEnum() // 记录类型下拉
      const successShowPersonalInfoTypeAxios = await getSuccessShowPersonalInfoListEnum() // 成功显示人员信息下拉
      const setPersonalTypeAxios = await getSetPersonalListEnum() // 设置——人员列表下拉
      Promise.all([
        applicationTypeAxios,
        deviceModelAxios,
        purchaserAxios,
        templateAxios,
        qrBrandAxios,
        brandAxios,
        readerBrandAxios,
        cameraTypeAxios,
        liveTypeAxios,
        pushFailedRecordTypeAxios,
        successShowPersonalInfoTypeAxios,
        setPersonalTypeAxios
      ]).then(res => {
        const applicationTypeAxiosRes = res[0]
        this.applicationList = applicationTypeAxiosRes.data
        const deviceModelAxiosRes = res[1]
        this.deviceList = deviceModelAxiosRes.data
        const purchaserAxiosRes = res[2]
        this.buyList = purchaserAxiosRes.data
        const templateAxiosRes = res[3]
        this.templateDataList = templateAxiosRes.data
        const qrBrandAxiosRes = res[4]
        this.qrBrandList = qrBrandAxiosRes.data
        const brandAxiosRes = res[5]
        this.brandList = brandAxiosRes.data
        const readerBrandAxiosRes = res[6]
        this.readerBrandList = readerBrandAxiosRes.data
        const cameraTypeAxiosRes = res[7]
        this.cameraTypeList = cameraTypeAxiosRes.data
        const liveTypeAxiosRes = res[8]
        this.liveTypeList = liveTypeAxiosRes.data
        const pushFailedRecordTypeAxiosRes = res[9]
        this.pushFailedRecordTypeList = pushFailedRecordTypeAxiosRes.data
        const successShowPersonalInfoTypeAxiosRes = res[10]
        this.successShowPersonalInfoTypeList = successShowPersonalInfoTypeAxiosRes.data
        const setPersonalTypeAxiosRes = res[11]
        this.setPersonalTypeList = setPersonalTypeAxiosRes.data
      }).finally(() => {
        this.enumLoading = false
      })
    },
    back() {
      this.$router.back()
    },
    chooseTemplate() {
      this.form.id = null
      this.dialogVisible = true
      this.$nextTick(() => {
        this.$refs['form'].clearValidate()
      })
    },
    sure() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          templateDetail(this.form.id).then((res) => {
            this.dialogVisible = false
            this.templateData = JSON.parse(JSON.stringify(res.data))
          })
        }
      })
    }
  }
}
</script>

<style scoped>
.head {
  margin-left: 16px;
  font-weight: 600;
  font-size: 18px;
  color: #333333;
}
.foot-layout {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 34px;
  padding-right: 180px;
  margin-bottom: 20px;
}
</style>
