import UploadFile from '@/components/upload-file'
import {
  NForm,
  NInput,
  NSpace,
  NButton,
  useMessage,
  NFormItem,
  NSelect,
  NRadio,
  NRadioGroup
} from 'naive-ui'
import { defineComponent, onMounted, PropType, reactive, ref } from 'vue'
import { appVersionInfoSave, appVersionInfoUpdate } from '../api'
import { platformArr, statusArr } from './operation'
export default defineComponent({
  name: 'role-operation',
  props: {
    type: {
      type: String,
      default: 'add'
    },
    applyList: {
      type: Array as PropType<any>,
      default: () => []
    },
    data: {
      type: Object as PropType<any>,
      default: () => {}
    }
  },
  emits: ['close', 'getList'],
  setup(props, { slots, attrs, emit }) {
    const forms = reactive({
      platform: null,
      version: null,
      isForceUpdate: null,
      status: null,
      downloadUrl: null,
      description: null
    })
    const btnLoading = ref(false)
    const formsRef = ref()
    const message = useMessage()

    const onSubmit = async () => {
      formsRef.value.validate(async (error: any) => {
        if (error) return false
        try {
          btnLoading.value = true

          if (props.type === 'add') {
            await appVersionInfoSave({ ...forms })
            message.success('添加成功')
          } else if (props.type === 'edit') {
            await appVersionInfoUpdate({
              ...forms,
              id: props.data.id
            })
            message.success('修改成功')
          }

          emit('close')
          emit('getList')
        } catch {}
        btnLoading.value = false
      })
    }
    const changeApp = () => {
      forms.version = null
      forms.isForceUpdate = null
      forms.status = null
      forms.downloadUrl = null
      forms.description = null
    }
    onMounted(async () => {
      if (props.type === 'edit') {
        const data = props.data
        forms.platform = data.platform
        forms.version = data.version
        forms.isForceUpdate = data.isForceUpdate
        forms.status = data.status
        forms.downloadUrl = data.downloadUrl
        forms.description = data.description
      }
    })

    return () => (
      <div style="background: #fff; padding-top: 12px">
        <NForm model={forms} ref={formsRef} label-placement="left" label-width="100">
          <NFormItem
            label="APP客户端"
            path="platform"
            rule={[
              {
                required: true,
                message: '请选择APP客户端'
              }
            ]}
          >
            <NSelect
              options={platformArr}
              v-model:value={forms.platform}
              placeholder="请选择APP客户端"
              disabled={props.type == 'add' ? false : true}
              onChange={() => changeApp()}
            />
          </NFormItem>

          <NFormItem
            label="版本号"
            path="version"
            rule={[
              {
                required: true,
                message: '请输入版本号'
              }
            ]}
          >
            <NInput
              v-model:value={forms.version}
              placeholder="请输入版本号"
              clearable
              maxlength={100}
            ></NInput>
          </NFormItem>
          <NFormItem
            label="强制更新"
            path="isForceUpdate"
            rule={[
              {
                required: true,
                message: '请选择强制更新'
              }
            ]}
          >
            <NRadioGroup v-model:value={forms.isForceUpdate}>
              <NRadio value={true}>是</NRadio>
              <NRadio value={false}>否</NRadio>
            </NRadioGroup>
          </NFormItem>
          <NFormItem
            label="状态"
            path="status"
            rule={[
              {
                required: true,
                message: '请选择状态'
              }
            ]}
          >
            <NSelect options={statusArr} v-model:value={forms.status} placeholder="请选择状态" />
          </NFormItem>
          {(forms.platform === 'android-student' ||
            forms.platform === 'android-teacher' ||
            forms.platform === 'android-school') && (
            <NFormItem
              label="上传文件"
              path="downloadUrl"
              rule={[
                {
                  required: true,
                  message: '请上传文件'
                }
              ]}
            >
              <UploadFile
                size={200}
                listType="image"
                accept=".apk,.war"
                v-model:fileList={forms.downloadUrl}
                bucketName="appstore"
                // accept=".apk"
              />
            </NFormItem>
          )}
          {(forms.platform === 'android-student' ||
            forms.platform === 'android-teacher' ||
            forms.platform === 'android-school') && (
            <NFormItem
              label="上传链接"
              path="downloadUrl"
              rule={[
                {
                  required: true,
                  message: '请输入链接地址'
                }
              ]}
            >
              <NInput
                v-model:value={forms.downloadUrl}
                placeholder="请输入链接地址"
                clearable
                maxlength={100}
              ></NInput>
            </NFormItem>
          )}
          <NFormItem label="描述" path="description">
            <NInput
              v-model:value={forms.description}
              placeholder="请输入描述"
              clearable
              type="textarea"
              rows={2}
              maxlength={200}
            ></NInput>
          </NFormItem>
        </NForm>

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