<template>
  <div class="wrap-layout">
    <el-form
      ref="form"
      :model="form"
      :rules="rules"
      label-width="160px"
      label-position="left"
    >
      <div class="item-layout">
        <span class="prompt">设备基本信息</span>
        <div class="display-config-layout">
          <el-form-item label="模板名称" prop="templateName" required>
            <el-input
              v-model="form.templateName"
              placeholder="请输入模板名称"
            />
          </el-form-item>
          <el-form-item label="应用类型" prop="applicationTypeId" required>
            <el-select
              v-model="form.applicationTypeId"
              placeholder="请选择应用类型"
              filterable
            >
              <el-option
                v-for="(item, index) in applicationList"
                :key="index"
                :label="item.applicationType"
                :value="item.applicationTypeId"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            label="设备型号（硬件）"
            prop="deviceModelHardwareId"
            required
          >
            <el-select
              v-model="form.deviceModelHardwareId"
              placeholder="请选择设备型号（硬件）"
              filterable
            >
              <el-option
                v-for="(item, index) in devicelList"
                :key="index"
                :label="item.deviceModel"
                :value="item.deviceModelId"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            label="设备型号（环境）"
            prop="deviceModelEnvironmentId"
            required
          >
            <el-select
              v-model="form.deviceModelEnvironmentId"
              placeholder="请选择设备型号（环境）"
              filterable
            >
              <el-option
                v-for="(item, index) in devicelList"
                :key="index"
                :label="item.deviceModel"
                :value="item.deviceModelId"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="系统类型" prop="systemTypeCode" required>
            <el-select
              v-model="form.systemTypeCode"
              placeholder="请选择系统类型"
              filterable
            >
              <el-option
                v-for="(item, index) in systemType"
                :key="index"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            label="小程序授权配置名称"
            prop="provisionalProofNoticeId"
          >
            <el-select
              v-model="form.provisionalProofNoticeId"
              placeholder="配置名称"
              filterable
            >
              <el-option
                v-for="(item, index) in dispositionName"
                :key="index"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </div>
      </div>
      <div class="item-layout">
        <span class="prompt">采集配置</span>
        <div class="display-config-layout">
          <el-form-item label="启用支付宝刷脸功能" prop="useAlipayFace">
            <el-radio-group v-model="form.useAlipayFace">
              <el-radio :label="true">是</el-radio>
              <el-radio :label="false">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="启用无证登记" prop="noIdcardRegister">
            <el-radio-group v-model="form.noIdcardRegister">
              <el-radio :label="true">是</el-radio>
              <el-radio :label="false">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item
            v-if="form.noIdcardRegister"
            label="无证是否输入手机号"
            prop="noIdcardInputPhone"
          >
            <el-radio-group v-model="form.noIdcardInputPhone">
              <el-radio :label="true">是</el-radio>
              <el-radio :label="false">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </div>
      </div>
      <!-- <div class="item-layout">
        <span class="prompt">查询地址配置</span>
        <div class="display-config-layout">
          <el-form-item label="获取办证记录地址" prop="identityProofRecordUrl">
            <el-input
              v-model="form.identityProofRecordUrl"
              placeholder="请输入"
              maxlength="200"
            />
          </el-form-item>
        </div>
      </div> -->
      <div class="item-layout">
        <span class="prompt">推送地址配置</span>
        <div class="display-config-layout">
          <el-form-item
            label="办证记录推送地址"
            prop="identityProofRecordPushUrl"
          >
            <el-input
              v-model="form.identityProofRecordPushUrl"
              placeholder="请输入"
              maxlength="200"
            />
          </el-form-item>
        </div>
      </div>

      <div class="item-layout">
        <span class="prompt">功能配置</span>
        <div class="display-config-layout">
          <el-form-item label="是否打印临时证明" prop="printIdentityProof">
            <el-radio-group v-model="form.printIdentityProof">
              <el-radio :label="true">是</el-radio>
              <el-radio :label="false">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="启用风险人员核查" prop="riskCheck">
            <el-radio-group v-model="form.riskCheck">
              <el-radio :label="true">是</el-radio>
              <el-radio :label="false">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="是否小程序授权" prop="miniAuth">
            <el-radio-group v-model="form.miniAuth">
              <el-radio :label="true">是</el-radio>
              <el-radio :label="false">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="刷脸失败跳转手输" prop="faceFailHandInput">
            <el-radio-group v-model="form.faceFailHandInput">
              <el-radio :label="true">是</el-radio>
              <el-radio :label="false">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </div>
      </div>
      <div class="item-layout">
        <span class="prompt">超时时长配置（秒）</span>
        <div class="display-config-layout">
          <el-form-item label="二维码授权超时时长" prop="authQrcodeTimeout">
            <el-input-number
              v-model="form.authQrcodeTimeout"
              size="mini"
              :min="1"
              :max="1000"
            />
          </el-form-item>
          <el-form-item label="输身份证超时时长" prop="inputIdcardTimeout">
            <el-input-number
              v-model="form.inputIdcardTimeout"
              size="mini"
              :min="1"
              :max="1000"
            />
          </el-form-item>
          <el-form-item label="输手机号超时时长" prop="inputPhoneTimeout">
            <el-input-number
              v-model="form.inputPhoneTimeout"
              size="mini"
              :min="1"
              :max="1000"
            />
          </el-form-item>
          <el-form-item
            label="成功结果页超时时长（普通版）"
            prop="commonSuccessResultPageTimeout"
            class="overlength"
          >
            <el-input-number
              v-model="form.commonSuccessResultPageTimeout"
              size="mini"
              :min="1"
              :max="1000"
            />
          </el-form-item>
          <el-form-item
            label="成功结果页超时时长（打印版）"
            prop="printSuccessResultPageTimeout"
            class="overlength"
          >
            <el-input-number
              v-model="form.printSuccessResultPageTimeout"
              size="mini"
              :min="1"
              :max="1000"
            />
          </el-form-item>
          <el-form-item
            label="失败结果页超时时长（获取三要素失败）"
            prop="userinfoFailedResultPageTimeout"
            class="overlength"
          >
            <el-input-number
              v-model="form.userinfoFailedResultPageTimeout"
              size="mini"
              :min="1"
              :max="1000"
            />
          </el-form-item>
          <el-form-item
            label="失败结果页超时时长（命中风险人员）"
            prop="riskFailedResultPageTimeout"
            class="overlength"
          >
            <el-input-number
              v-model="form.riskFailedResultPageTimeout"
              size="mini"
              :min="1"
              :max="1000"
            />
          </el-form-item>
          <el-form-item
            label="失败结果页超时时长（其他）"
            prop="commonFailedResultPageTimeout"
            class="overlength"
          >
            <el-input-number
              v-model="form.commonFailedResultPageTimeout"
              size="mini"
              :min="1"
              :max="1000"
            />
          </el-form-item>
          <el-form-item label="刷脸超时时间" prop="faceTimeout">
            <el-input-number
              v-model="form.faceTimeout"
              size="mini"
              :min="20"
              :max="1000"
            />
          </el-form-item>
          <el-form-item label="1v1比对超时时间" prop="oneToOneTimeout">
            <el-input-number
              v-model="form.oneToOneTimeout"
              size="mini"
              :min="20"
              :max="1000"
            />
          </el-form-item>
          <el-form-item label="联网查询超时时间" prop="connectSearchTimeout">
            <el-input-number
              v-model="form.connectSearchTimeout"
              size="mini"
              :min="1"
              :max="1000"
            />
          </el-form-item>
        </div>
      </div>
      <div class="item-layout">
        <span class="prompt">语音配置</span>
        <div class="display-config-layout">
          <el-form-item
            label="支付宝刷脸人脸比对成功提示音"
            prop="faceSuccessVoice"
            class="overlength"
          >
            <el-input
              v-model="form.faceSuccessVoice"
              placeholder="请输入"
              maxlength="50"
            />
          </el-form-item>
          <el-form-item
            label="支付宝刷脸人脸比对失败提示音"
            prop="faceFailVoice"
            class="overlength"
          >
            <el-input
              v-model="form.faceFailVoice"
              placeholder="请输入"
              maxlength="50"
            />
          </el-form-item>
          <el-form-item label="办证成功提示音" prop="identityProofSuccessVoice">
            <el-input
              v-model="form.identityProofSuccessVoice"
              placeholder="请输入"
              maxlength="50"
            />
          </el-form-item>
          <el-form-item label="打印证明提示音" prop="printIdentityProofVoice">
            <el-input
              v-model="form.printIdentityProofVoice"
              placeholder="请输入"
              maxlength="50"
            />
          </el-form-item>
          <el-form-item label="输身份证号提示音" prop="inputIdcardVoice">
            <el-input
              v-model="form.inputIdcardVoice"
              placeholder="请输入"
              maxlength="50"
            />
          </el-form-item>
          <el-form-item label="输手机号提示音" prop="inputPhoneVoice">
            <el-input
              v-model="form.inputPhoneVoice"
              placeholder="请输入"
              maxlength="50"
            />
          </el-form-item>
          <el-form-item label="联网信息查询提示音" prop="connectSearchVoice">
            <el-input
              v-model="form.connectSearchVoice"
              placeholder="请输入"
              maxlength="50"
            />
          </el-form-item>
        </div>
      </div>
      <div class="item-layout">
        <span class="prompt">辖区配置</span>
        <div class="display-config-layout">
          <el-form-item label="单位标识" prop="useCompanyCode">
            <el-input v-model="form.useCompanyCode" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="地区(省市区)" prop="address">
            <el-input v-model="form.address" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="派出所" prop="pcsName">
            <el-input v-model="form.pcsName" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="派出所代码" prop="pcsCode">
            <el-input v-model="form.pcsCode" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="使用单位" prop="useCompanyName">
            <el-input v-model="form.useCompanyName" placeholder="请输入" />
          </el-form-item>
        </div>
      </div>
      <div class="item-layout">
        <span class="prompt">页面文本配置</span>
        <div class="display-config-layout">
          <el-form-item label="首页标题" prop="homePageTitle">
            <el-input v-model="form.homePageTitle" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="刷脸按钮文本" prop="faceButtonText">
            <el-input v-model="form.faceButtonText" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="手输按钮文本" prop="inputButtonText">
            <el-input v-model="form.inputButtonText" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="结果页-打印文本" prop="resultPagePrintText">
            <el-input v-model="form.resultPagePrintText" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="结果页-非打印文本" prop="resultPageNoPrintText">
            <el-input
              v-model="form.resultPageNoPrintText"
              placeholder="请输入"
            />
          </el-form-item>
        </div>
      </div>
      <div class="item-layout">
        <span class="prompt">系统配置</span>
        <div class="display-config-layout">
          <el-form-item label="设置管理员密码" prop="mpassword">
            <el-input
              v-model="form.mpassword"
              placeholder="请输入"
              maxlength="50"
            />
          </el-form-item>
          <el-form-item label="语音音量（1~100）" prop="voiceVolume">
            <el-input-number
              v-model="form.voiceVolume"
              size="mini"
              :min="1"
              :max="100"
            />
          </el-form-item>
        </div>
      </div>
    </el-form>
    <div class="foot-layout">
      <el-button
        style="margin-left: 20px; width: 120px"
        @click="back"
      >取 消</el-button>
      <div style="width: 80px" />
      <el-button
        type="primary"
        style="width: 120px"
        :loading="submitLoading"
        @click="submit"
      >提 交</el-button>
    </div>
  </div>
</template>

<script>
import { applicationTypeList, deviceModelList } from '@/api/configuration'
import { noticeList, templateAdd } from '@/api/titlelib'

export default {
  name: 'EditDevice',
  props: {
    obj: {
      type: Object,
      default: () => {}
    },
    templateData: {
      type: Object,
      default: () => {}
    },
    isDis: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      submitLoading: false,
      form: {
        id: null,
        mode: null,
        status: null,
        useAlipayFace: true,
        mpassword: '117521',
        voiceVolume: 80,
        purchaserId: null,
        applicationTypeId: null,
        deviceModelHardwareId: null,
        deviceModelEnvironmentId: null,
        systemTypeCode: null,

        provisionalProofNoticeId: null,
        noIdcardRegister: false,
        noIdcardInputPhone: true,
        identityProofRecordUrl: '',
        identityProofRecordPushUrl:
          'https://tx.hz-hanghui.com:8087/ti-prove/handleProveRecord/push',
        printIdentityProof: true,
        riskCheck: false,
        miniAuth: false,
        authQrcodeTimeout: 20,
        inputIdcardTimeout: 60,
        inputPhoneTimeout: 30,
        commonSuccessResultPageTimeout: 10,
        printSuccessResultPageTimeout: 5,
        userinfoFailedResultPageTimeout: 5,
        riskFailedResultPageTimeout: 10,
        commonFailedResultPageTimeout: 5,
        faceSuccessVoice: '比对成功',
        faceFailVoice: '比对失败，请再试一次或尝试其他方式办理',
        identityProofSuccessVoice: '办理成功',
        printIdentityProofVoice: '正在打印临时身份证明',
        inputIdcardVoice: '请输入身份证号',
        inputPhoneVoice: '请输入手机号',
        connectSearchVoice: '正在联网查询信息，请耐心等待',
        useCompanyCode: '',
        useCompanyName: '',
        address: '',
        pcsName: '',
        pcsCode: '',
        faceTimeout: 40,
        oneToOneTimeout: 40,
        connectSearchTimeout: 40,
        faceFailHandInput: false,
        homePageTitle: '临时身份证明自助服务系统',
        faceButtonText: '支付宝用户刷脸快捷办理',
        inputButtonText: '无支付宝旅客/老年人入口',
        resultPagePrintText: '查看电子版临时身份证明',
        resultPageNoPrintText: '电子版临时身份证明'
      },
      rules: {
        templateName: [
          {
            required: true,
            message: '不能为空!',
            trigger: ['change', 'blur']
          }
        ],
        applicationTypeId: [
          {
            required: true,
            message: '不能为空!',
            trigger: ['change', 'blur']
          }
        ],
        deviceModelHardwareId: [
          {
            required: true,
            message: '不能为空!',
            trigger: ['change', 'blur']
          }
        ],
        deviceModelEnvironmentId: [
          {
            required: true,
            message: '不能为空!',
            trigger: ['change', 'blur']
          }
        ],
        systemTypeCode: [
          {
            required: true,
            message: '不能为空!',
            trigger: ['change', 'blur']
          }
        ],
        provisionalProofNoticeId: [
          {
            required: true,
            message: '不能为空!',
            trigger: ['change', 'blur']
          }
        ],
        mode: [
          {
            required: true,
            whitespace: true,
            message: '不能为空!',
            trigger: ['change', 'blur']
          }
        ]
      },
      applicationList: [],
      devicelList: [],
      systemType: [
        { id: 1, name: '蚂蚁OS' },
        { id: 2, name: '非蚂蚁OS' }
      ],
      dispositionName: []
    }
  },
  watch: {},

  mounted() {
    this.initData()
    this.noticeList()
    console.log(this.form)
  },
  methods: {
    initData() {
      this.applicationTypeList()
      this.deviceModelList()
      this.$nextTick(() => {
        if (this.obj) {
          this.form = this.obj
        }
      })
      console.log(this.form)
    },
    back() {
      this.$emit('back')
    },
    handleRemove(type) {
      if (type) {
        this.form[type] = null
      }
    },
    noticeList() {
      noticeList().then((res) => {
        this.dispositionName = res.data
      })
    },

    submit(e) {
      console.log(this.form)
      e.preventDefault()
      this.$refs.form.validate(async(valid) => {
        if (!valid) {
          return false
        }
        if (this.submitLoading) {
          return
        }
        this.submitLoading = true
        try {
          await templateAdd(this.form)
          this.$message({
            message: `${this.form.id ? '修改' : '添加'}成功!`,
            type: 'success'
          })
          this.$emit('back')
        } catch (e) {
          console.info('add', e)
        } finally {
          this.submitLoading = false
        }
      })
    },
    // 获取应用类型列表
    applicationTypeList() {
      applicationTypeList().then((res) => {
        this.applicationList = res.data
      })
    },
    // 设备型号列表
    deviceModelList() {
      deviceModelList().then((res) => {
        this.devicelList = res.data
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.wrap-layout {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 1120px;
  form {
    width: 100%;
  }

  .item-layout {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    width: 100%;
    margin-top: 24px;
    &: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;
      }
      .overlength ::v-deep .el-form-item__label {
        line-height: 1.4;
      }

      ::v-deep .el-radio__input {
        vertical-align: top;
      }
      ::v-deep .el-select {
        width: 100%;
      }
      ::v-deep .el-radio-group {
        & > label.el-radio {
          margin-right: 60px;
        }
      }
    }
  }

  .foot-layout {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 34px;
    padding-right: 180px;
    margin-bottom: 20px;
  }
}
.avatar-uploader .upload-default {
  border: 1px dashed #d9d9d9;
  border-radius: 0;
  cursor: pointer;
  width: 70px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.upload-default .avatar-uploader-icon {
  color: #8c939d;
  width: 22px;
  height: 18px;
  font-size: 20px;
  margin-top: 24px;
}
.upload-default .el-upload__text {
  margin-top: 8px;
  font-size: 14px;
  font-weight: 400;
  color: #ced3e3;
}
.upload-img {
  width: 150px;
  height: 60px;
  position: relative;
  img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    // border-radius: 12px;
  }
  .del-img {
    display: inline-block;
    width: 20px;
    height: 20px;
    background: #83878f;
    color: #fff;
    position: absolute;
    top: -12px;
    right: -10px;
    border-radius: 48%;
    line-height: 18px;
  }
}
</style>
