<template>
  <div>
    <div class="panel-box">
      <h3 class="train-h3">培训信息</h3>
      <div class="panel-body">
        <el-form
          ref="formRef"
          label-width="120px"
          class="signForm"
          :model="form"
          :rules="rules"
          style="width: 100%;"
        >
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="所在单位名称" prop="unitName">
                <el-input v-model="form.unitName" placeholder="请输入所在单位名称" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="现任职务" prop="unitRole">
                <el-input v-model="form.unitRole" placeholder="请输入现任职务" />
              </el-form-item>
            </el-col>
            <el-col v-if="activity.invoiceFlag=='1'" :span="12">
              <el-form-item label="是否需要发票" prop="invoiceFlag" required>
                <el-radio-group v-model="form.invoiceFlag">
                  <el-radio label="1" size="large">是</el-radio>
                  <el-radio label="0" size="large">否</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col v-if="activity.invoiceFlag=='1'" :span="12">
              <el-form-item v-if="form.invoiceFlag=='1'" label="发票形式" prop="invoiceType" required>
                <el-radio-group v-model="form.invoiceType">
                  <el-radio v-if="activity.invoiceType.indexOf('0')>-1" label="0" size="large">电子票</el-radio>
                  <el-radio v-if="activity.invoiceType.indexOf('1')>-1" label="1" size="large">纸质专票</el-radio>
                  <el-radio v-if="activity.invoiceType.indexOf('2')>-1" label="2" size="large">纸质普票</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col>
              <el-form-item v-if="activity.invoiceFlag=='1'" label="开票信息" prop="invoiceInfo">
                <el-input v-model="form.invoiceInfo" placeholder="请输入开票信息" />
              </el-form-item>
            </el-col>
            <el-col v-for="c in customInfo" :key="c.id" :span="12">
              <el-form-item :label="c.name">
                <el-input v-if="c.type=='1'" v-model="form.customInfoObj[c.id]" :placeholder="`请输入${c.name}`" />
                <image-upload v-if="c.type=='2'" v-model="form.customInfoObj[c.id]" :limit="1" />
                <file-upload v-if="c.type=='3'" v-model="form.customInfoObj[c.id]" :limit="1" />
                <el-select v-if="c.type=='4'" v-model="form.customInfoObj[c.id]">
                  <el-option v-for="o in c.options" :key="o.id" :label="o.name" :value="o.id" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
    <div class="panel-footer text-center">
      <el-button class="back" type="" round @click="prev">上一步</el-button>
      <el-button type="primary" round @click="next">下一步</el-button>
    </div>
  </div>
</template>

<script setup>
import { reactive, watch, computed } from 'vue'
import { getCurrentInstance, onMounted } from '@vue/runtime-core'
import * as train from '@/apiPc/train'
import { toRefs } from '@vueuse/shared'
import { useRoute } from 'vue-router'
import _ from 'lodash'
import ImageUpload from '@/components/ImageUpload'
import FileUpload from '@/components/FileUpload'

const emit = defineEmits(['prev', 'next'])
const { proxy } = getCurrentInstance()
const route = useRoute()

const props = defineProps({
  activity: {
    type: Object,
    default: () => {}
  }
})

const customInfo = computed(() => {
  if (props.activity.customInfo) {
    return JSON.parse(props.activity.customInfo).info
  } else {
    return []
  }
})

const data = reactive({
  form: {
    invoiceFlag: '1',
    customInfoObj: {}
  },
  rules: {
    unitName: { required: true, message: '所在单位名称不能为空', trigger: 'blur' },
    unitRole: { required: true, message: '现任职务不能为空', trigger: 'blur' },
    invoiceInfo: { required: true, message: '开票信息不能为空', trigger: 'blur' },
    invoiceType: { required: true, message: '发票类型不能为空', trigger: 'change' }
  }
})
const { form, rules } = toRefs(data)

watch(() => props.activity.invoiceFlag, (val) => {
  if (val == '1') {
    if (!form.value.invoiceType) {
      form.value.invoiceType = _.orderBy(props.activity.invoiceType.split(','))[0]
    }
  }
}, { immediate: true })

onMounted(() => {
  train.getTrainPersonalInfo(route.params.id).then((res) => {
    if (res.data) {
      form.value = res.data
      if (res.data.customInfo) {
        form.value.customInfoObj = JSON.parse(res.data.customInfo)
      } else {
        form.value.customInfoObj = {}
      }
    }
  })
})

function prev() {
  emit('prev')
}

function next() {
  proxy.$refs['formRef'].validate((valid) => {
    if (valid) {
      form.value.activityId = route.params.id
      form.value.customInfo = JSON.stringify(form.value.customInfoObj)
      train.savePersonalInfo(form.value).then(() => {
        proxy.$modal.msgSuccess('保存成功')
        emit('next')
      })
    }
  })
}

</script>

<style scope lang="scss">
.panel-box{
  border:1px solid #F5766A;
  padding:10px 20px;
}
.train-h3{
  font-size: 16px;
  font-weight: 600;
  color: var(--el-color-primary);
  padding-left: 20px;
  border-left: 3px solid var(--el-color-primary) ;
 }
.back{
  border:1px solid var(--el-color-primary) ;
  color:var(--el-color-primary)
}

.app-container {
  padding: 0;
  background: #f5f7f9;
}

.panel-footer .el-button--success {
  background: linear-gradient(270deg, #39dba7, #38ef7d);
  border: none;
  padding: 0 40px;
  font-size: 16px;
}

.signForm {
  .el-form-item__label {
    color: #4c5359;
  }
}

.tip {
  font-size: 13px;
  color: #999;
  margin: 10px 0;

  i {
    color: red;
    margin: 0 4px 0 0;
  }
}

.threeFour {
  width: 100%;
}

:deep(.el-upload--picture-card) {
  width: 120px;
  height: 160px;
}

:deep(.el-upload-list--picture-card .el-upload-list__item) {
  width: 120px;
  height: 160px;
}

.red {
  color: #f56c6c;
}

.el-form-item{align-items: center;}
</style>