<template>
  <a-card>
    <div :class="$style.formImg">
      <div></div>
    </div>
    <div :class="$style.formTxt">创建表单，构建应用</div>
    <a-form-model
      ref="addFormModal"
      :model="addForm"
      :rules="addFormRles"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
    >
      <a-form-model-item label="表单类型" prop="formType">
        <a-radio-group v-model="addForm.formType">
          <a-radio :value="1">流程表单</a-radio>
          <a-radio :value="0">无流程表单</a-radio>
        </a-radio-group>
      </a-form-model-item>
      <a-form-model-item ref="name" label="表单名称" prop="name">
        <a-input v-model="addForm.name" />
      </a-form-model-item>
      <a-form-model-item label="使用模板">
        <SdFormTemplatePicker v-model="addForm.template" :templet-type="addForm.formType" />
      </a-form-model-item>
      <a-form-model-item label="表单图标" prop="icon">
        <sd-icon
          v-model="addForm.icon"
          :type="icon[0].name"
          :theme="icon[0].theme"
          :class="$style.iconclass"
        />
        <a-button @click="selectIcon">更改图标</a-button>
      </a-form-model-item>
      <a-form-model-item label="表单介绍" prop="desc">
        <a-input v-model="addForm.desc" type="textarea" />
      </a-form-model-item>
      <a-form-model-item :wrapper-col="{ span: 14, offset: 6 }">
        <a-button type="primary" :loading="loading" @click="onAddSubmit">
          保存
        </a-button>
        <a-button :class="$style.cancelBtnClass" @click="onAddCancel">
          取消
        </a-button>
      </a-form-model-item>
    </a-form-model>
  </a-card>
</template>

<script>
import { Message } from 'ant-design-vue'
import FormService from '@/form-designer/form-service'
import pickValues from '@/common/services/pick-values'
import sdIconPicker from '@/common/components/sd-icon-picker.vue'
import SdFormTemplatePicker from '@/form-designer/form-template/sd-form-template-picker.vue'
import components from './_import-components/sd-form-create-import'
import ApplicationService from './application-service'

export default {
  name: 'SdFormCreate',
  metaInfo() {
    return {
      title: this.$route.query.appName,
    }
  },
  components: {
    ...components,
    SdFormTemplatePicker,
  },
  inject: ['SdTabbedView'],
  data() {
    return {
      addForm: {
        formType: 1,
        name: '',
        desc: '',
        icon: [{ id: 'sd-audio-circle/fill', name: 'sd-audio-circle', theme: 'fill' }],
      },
      icon: [{ id: 'sd-audio-circle/fill', name: 'sd-audio-circle', theme: 'fill' }],
      addFormRles: {
        formType: [{ required: true, message: '请选择表单类型', trigger: 'change' }],
        name: [
          { required: true, message: '请输入表单名称', trigger: 'change' },
          { max: 100, message: '不能超过100个字符', trigger: 'change' },
        ],
        icon: [{ required: true, message: '请选择表单图标', trigger: 'change' }],
        desc: [{ max: 500, message: '不能超过500个字符', trigger: 'change' }],
      },
      labelCol: { span: 6 },
      wrapperCol: { span: 14 },
      loading: false,
    }
  },
  methods: {
    onAddSubmit() {
      this.$refs.addFormModal.validate((valid) => {
        if (valid) {
          var iconValue = {
            id: this.icon[0].id,
            name: this.icon[0].name,
            theme: this.icon[0].theme,
          }
          var params = {
            head: {
              id: '',
              tableName: '',
              tableType: 1,
              tableTxt: this.addForm.name,
              formType: this.addForm.formType,
              formCategory: this.$route.query.appId,
              formTemplate: 'formTemplate',
              formDesc: this.addForm.desc || '',
              iconCode: JSON.stringify(iconValue),
              isCheckbox: false,
              isPage: true,
              isTree: false,
              relationType: 1,
              tabOrderNum: 1,
              scroll: false,
              attrFD: {},
            },
            fields: [],
          }
          var that = this
          var query = {
            appId: that.$route.query.appId,
            appName: that.$route.query.appName,
            categoryName: that.$route.query.categoryName,
            categoryId: that.$route.query.categoryId,
          }
          this.loading = true
          let p = Promise.resolve(true)
          // 选择了表单模板
          if (this.addForm.template?.[0]) {
            p = FormService.getFormTemplateData({ id: this.addForm.template[0].id }).then(
              (data) => {
                params.head.attrFD = data.attrFd
                params.fields = data.fields
              }
            )
          }
          p.then(() => {
            ApplicationService.createForm(params)
              .then((res) => {
                that.SdTabbedView.closeCurrent()
                that.$router.push({
                  path: 'sd-form-center',
                  query: query,
                })
                const { href } = that.$router.resolve({
                  path: `/sd-form-designer/${res.data.head.id}`,
                  query: {
                    type: res.data.head.formType,
                  },
                })
                window.open(href, '_blank')
              })
              .catch((e) => {
                Message.error({ content: '表单创建失败' })
              })
              .finally(() => {
                this.loading = false
              })
          }).catch(() => {
            Message.error({ content: '获取表单模板信息失败' })
            this.loading = false
          })
        } else {
          return false
        }
      })
    },
    onAddCancel() {
      this.addForm = {
        formType: 1,
        name: '',
        desc: '',
        icon: [{ id: 'sd-audio-circle/fill', name: 'sd-audio-circle', theme: 'fill' }],
      }
      this.SdTabbedView.closeCurrent()
      this.$router.push({ path: 'sd-application-center' })
    },
    selectIcon() {
      pickValues(sdIconPicker, {
        value: this.icon,
      })
        .then((icons) => {
          this.icon = icons || this.icon
        })
        .then((icons) => {
          this.addForm.icon = icons || this.form.icon
        })
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
.iconclass {
  margin-right: 8px;
  font-size: $font-size-base * 2;
  vertical-align: middle;
}
.cancel-btn-class {
  margin-left: 10px;
}
.form-img {
  text-align: center;
  div {
    position: relative;
    left: calc(50% - 135px);
    width: 270px;
    height: 210px;
    background: url('./formcreate.png') no-repeat;
    background-size: cover;
  }
}
.form-txt {
  margin: 20px 0;
  font-size: $font-size-base * 2;
  text-align: center;
}
</style>
