<template>
  <el-dialog title="应用配置" width="600px" top="4vh" v-model="visible">
    <div class="content">
      <div class="row">
        <el-form ref="formRef" :model="form" :rules="rules" label-width="120" label-position="right">
          <el-form-item label="Client ID" prop="dingAppKey">
            <el-input placeholder="请输入" v-model="form.dingAppKey" style="width: 300px;"></el-input>
          </el-form-item>
          <el-form-item label="Client Secret" prop="dingAppSecret">
            <el-input placeholder="请输入" v-model="form.dingAppSecret" style="width: 300px;"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div class="row">
        <div class="title">如何获取Client ID和Client Secret</div>
        <div class="t">1. 登录钉钉开发者后台。</div>
        <div class="img">
          <el-image :src="img1" style="width: 268px; height: auto" :preview-src-list="imgList"
            :initial-index="0"></el-image>
        </div>
        <div class="t">2.进入已创建的打卡应用的详情页</div>
        <div class="img">
          <el-image :src="img2" style="width: 268px; height: auto" :preview-src-list="imgList"
            :initial-index="1"></el-image>
        </div>
        <div class="t">3.在详情页找到《凭证与基础信息》，再复制如下红框的两个内容，复制粘贴过来即可</div>
        <div class="img"><el-image :src="img3" style="width: 268px; height: auto" :preview-src-list="imgList"
            :initial-index="2"></el-image></div>
      </div>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="visible = false">取消</el-button>
        <el-button type="primary" @click="submitHandle" :loading="loading"> 确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref } from 'vue'
import { attendanceConfig, attendanceConfigPut } from '@/api/coupon/index'
import img1 from '@/assets/dingding_img1.png'
import img2 from '@/assets/dingding_img2.png'
import img3 from '@/assets/dingding_img3.png'

const imgList = ref([
  img1,
  img2,
  img3
])

const visible = ref(false)

const loading = ref(false)

const formRef = ref(null)

const form = ref({
  dingAppKey: '',
  dingAppSecret: ''
})

const rules = {
  dingAppKey: [
    {
      required: true,
      message: '请输入Client ID',
      trigger: 'blur'
    }
  ],
  dingAppSecret: [
    {
      required: true,
      message: '请输入Client Secret',
      trigger: 'blur'
    }
  ]
}

const emits = defineEmits(['success'])

// 提交保存
function submitHandle() {
  formRef.value.validate(async vaild => {
    try {
      if (vaild) {
        loading.value = true
        await attendanceConfigPut(form.value)
        ElNotification({
          type: 'success',
          title: '注意',
          message: '保存成功'
        })
        visible.value = false
        emits('success')
      }
    } catch (error) {
      console.log(error);
    }
    setTimeout(() => {
      loading.value = false
    }, 500);
  })
}

function show() {
  visible.value = true
  attendanceConfigAjax()
}

defineExpose({
  show
})

// 获取配置
async function attendanceConfigAjax() {
  try {
    const res = await attendanceConfig()
    form.value = res
  } catch (error) {
    console.log(error);
  }
}
</script>

<style scoped lang="scss">
.content {
  .row {
    border-bottom: 1px solid #ececec;

    .title {
      font-size: 14px;
      color: #333333;
      padding: 14px 0;
    }

    .t {
      font-size: 12px;
      color: #666;
      padding-bottom: 14px;
    }

    .img {
      padding-bottom: 20px;
    }
  }
}
</style>