<template>
  <div class="app-container">


    <el-tabs v-model="activeName">
      <el-tab-pane v-for="c in cert_type" :key="c.value" :label="c.label" :name="c.value">
        <el-card>
          <el-form
            ref="certConfigRef" :model="form" :rules="rules" label-width="100px" label-suffix="："
          >
            <!--          <el-form-item label="发布方式" prop="pushType">-->
            <!--            <el-radio-group v-model="form.pushType">-->
            <!--              <el-radio label="0">自动发布</el-radio>-->
            <!--              <el-radio label="1">手动发布</el-radio>-->
            <!--            </el-radio-group>-->
            <!--          </el-form-item>-->
            <!--          <el-form-item label="发布时间" prop="days">-->
            <!--            <el-input v-model="form.days" type="number" placeholder="如输入0，则为立即发布" style="width: 340px">-->
            <!--              <template #prepend>审批通过</template>-->
            <!--              <template #append>天</template>-->
            <!--            </el-input>-->
            <!--          </el-form-item>-->
            <el-form-item label-width="0" prop="templateName">
              <el-radio-group v-model="form.templateName">
                <div v-for="t in templateArr" :key="t.name">
                  <el-image :src="fillImgUrl(t.picUrl)" style="width: 150px;height: 150px"/>
                  <br>
                  <el-radio :label="t.name">{{ t.name }}</el-radio>
                </div>
              </el-radio-group>
            </el-form-item>
          </el-form>

          <div class="text-center mt20">
            <el-button type="primary" style="width: 180px" size="large" @click="submitForm">保 存</el-button>
          </div>
        </el-card>
      </el-tab-pane>
    </el-tabs>


  </div>

</template>

<script setup name="Cert">
import { getCurrentInstance, ref, toRefs, watch } from 'vue'
import { addCertConfig, getCertConfigByType, updateCertConfig } from '@/api/system/certConfig'
import { reactive } from '@vue/runtime-core'
import _ from 'lodash'

const { proxy } = getCurrentInstance()
const { cert_type } = proxy.useDict('cert_type')

const activeName = ref('')
const templateArr = ref([])

const data = reactive({
  form: {
    pushType: '1',
    days: 0
  },
  rules: {
    pushType: [
      { required: true, message: '发布方式不能为空', trigger: 'change' }
    ],
    days: [
      { required: true, message: '发布时间不能为空', trigger: 'blur' }
    ],
    templateName: [
      { required: true, message: '模板不能为空', trigger: 'change' }
    ]
  }
})

const { form, rules } = toRefs(data)

watch(cert_type, (val) => {
  if (val && val.length > 0) {
    activeName.value = val[0].value
  }
}, { immediate: true })

let index = 0
watch(activeName, (val) => {
  if (!val) {
    return
  }

  switch (val) {
    case '20001':
      index = 0
      templateArr.value = [
        { name: '模板一', picUrl: '', pdfUrl: '' }
        // { name: '模板二', picUrl: '', pdfUrl: '' },
        // { name: '模板三', picUrl: '', pdfUrl: '' }
      ]
      break
    case '20002':
      index = 1
      templateArr.value = [
        { name: '模板一', picUrl: '', pdfUrl: '' }
        // { name: '模板五', picUrl: '', pdfUrl: '' },
        // { name: '模板六', picUrl: '', pdfUrl: '' }
      ]
      break
    case '20003':
      index = 2
      templateArr.value = [
        { name: '模板一', picUrl: '', pdfUrl: '' }
        // { name: '模板八', picUrl: '', pdfUrl: '' },
        // { name: '模板九', picUrl: '', pdfUrl: '' }
      ]
      break
    case '20004':
      index = 3
      templateArr.value = [
        { name: '模板一', picUrl: '', pdfUrl: '' }
        // { name: '模板十一', picUrl: '', pdfUrl: '' },
        // { name: '模板十二', picUrl: '', pdfUrl: '' }
      ]
      break
  }

  getCertConfigByType(val).then((res) => {
    if (res.data.length > 0) {
      const template = JSON.parse(res.data[0].template)

      form.value = {
        templateName: template.name,
        ...res.data[0]
      }
    } else {
      form.value = {
        certType: val,
        status: '0',
        pushType: '1',
        days: 0
      }

      _.each(proxy.$refs['certConfigRef'], (ref) => {
        ref.resetFields()
      })
    }
  })
}, { immediate: true })

function submitForm() {
  proxy.$refs['certConfigRef'][index].validate(valid => {
    if (valid) {
      form.value.template = JSON.stringify(_.find(templateArr.value, (t) => {
        return t.name === form.value.templateName
      }))

      if (form.value.certId) {
        updateCertConfig(form.value).then(response => {
          proxy.$modal.msgSuccess('修改成功')
        })
      } else {
        addCertConfig(form.value).then((res) => {
          proxy.$modal.msgSuccess('新增成功')
          form.value.certId = res.data
        })
      }
    }
  })
}
</script>