import {defineComponent, onMounted, reactive, ref} from "vue";
import {NButton, NForm, NFormItemGi, NGrid, NInput, NSpace, useMessage} from "naive-ui";
import {wxTemplateConfigSave, wxTemplateConfigUpdate} from "@views/message/api";

export default defineComponent({
  mpName: 'wechat-config-template-edit',
  props: {
    appid: {
      type: String,
      required: false
    },
    editMode: {
      type: String,
      required: true
    },
    rowData: {
      type: Object,
      required: false
    },
  },
  emits: ['close', 'getList'],
  setup(props, {slots, attrs, emit}) {
    const message = useMessage()
    const btnLoading = ref(false)
    const forms = reactive({
      wxTemplateId: null, //微信模板id
      command: null, //指令
      url: null, //模板消息地址
      description: null, //描述
      content: {
        content: null,
        title: null,
      } as any
    })
    const formsRef = ref()

    const state = reactive({
      rowData: null as any,
    })

    onMounted(async () => {
      if (!props.appid) {
        return
      }
      state.rowData = props.rowData
      if (props.editMode == 'edit' && props.rowData) {
        forms.command = state.rowData.command
        forms.wxTemplateId = state.rowData.wxTemplateId
        forms.url = state.rowData.url
        forms.description = state.rowData.description
        if (state.rowData.content) {
          forms.content.content = state.rowData.content.content
          forms.content.title = state.rowData.content.title
        }
      }
    })

    const onSubmit = async () => {
      formsRef.value.validate(async (error: any) => {
        if (error) return false
        btnLoading.value = true
        try {
          let res;
          if (props.editMode == 'add') {
            res = await wxTemplateConfigSave(
                {
                  ...forms,
                  appid: props.appid
                }
            ) as any;
          } else {
            res = await wxTemplateConfigUpdate(
                {
                  ...forms,
                  id: state.rowData.id,
                  appid: props.appid
                }
            ) as any;
          }
          if (res && res.code === 200) {
            emit('close')
            emit('getList')
          }
        } catch (error) {
        }
        btnLoading.value = false
      })
    }

    return () => {
      return (
          <div style="background: #fff; padding-top: 12px">
            <NForm
                ref={formsRef}
                labelPlacement="top"
                model={forms}
                label-placement="left"
                label-width="100"
            >
              <NGrid cols={2}>
                <NFormItemGi
                    label="标题"
                    path="content.title"
                    rule={[
                      {
                        required: true,
                        message: '请输入标题'
                      }
                    ]}
                >
                  <NInput
                      v-model:value={forms.content.title}
                      placeholder="请输入标题"
                      clearable
                  />
                </NFormItemGi>
                <NFormItemGi
                    label="指令"
                    path="command"
                    rule={[
                      {
                        required: true,
                        message: '请输入指令'
                      }
                    ]}
                >
                  <NInput
                      v-model:value={forms.command}
                      placeholder="请输入指令"
                      clearable
                  />
                </NFormItemGi>
                <NFormItemGi
                    label="模板ID"
                    path="wxTemplateId"
                    rule={[
                      {
                        required: true,
                        message: '请输入模板ID'
                      }
                    ]}
                >
                  <NInput
                      v-model:value={forms.wxTemplateId}
                      placeholder="请输入模板ID"
                      clearable
                  />
                </NFormItemGi>
                <NFormItemGi
                    label="模板地址"
                    path="appid"
                    rule={[
                      {
                        required: false,
                        message: '请输入模板地址'
                      }
                    ]}
                >
                  <NInput
                      v-model:value={forms.url}
                      placeholder="请输入模板地址"
                      clearable
                  />
                </NFormItemGi>

              </NGrid>
              <NGrid cols={1}>
                <NFormItemGi
                    label="内容"
                    path="content.content"
                    rule={[
                      {
                        required: true,
                        message: '请输入内容'
                      }
                    ]}
                >
                  <NInput
                      type={'textarea'}
                      v-model:value={forms.content.content}
                      placeholder="请输入内容"
                      autosize={{minRows:3}}
                  />
                </NFormItemGi>
                <NFormItemGi
                    label="描述"
                    path="description"
                    rule={[
                      {
                        required: false,
                        message: '请输入描述'
                      }
                    ]}
                >
                  <NInput
                      type={'textarea'}
                      v-model:value={forms.description}
                      placeholder="请输入描述"
                      autosize={{minRows:3}}
                  />
                </NFormItemGi>
              </NGrid>
            </NForm>

            <NSpace justify="end">
              <NButton onClick={() => emit('close')}>取消</NButton>
              <NButton type="primary" onClick={onSubmit}
                       loading={btnLoading.value}
                       disabled={btnLoading.value}
              >
                保存
              </NButton>
            </NSpace>
          </div>
      )
    }
  }
})