import {
  NForm,
  NFormItem,
  NInput,
  NSelect,
  NSpace,
  NButton,
  useMessage,
  NCascader,
  NInputNumber,
  NIcon,
  NTooltip
} from 'naive-ui'
import { defineComponent, onMounted, PropType, reactive, ref } from 'vue'
import { sysMenuButtonSave, sysMenuButtonUpdate } from '../../api'
import UploadFile from '@/components/upload-file'
import { QuestionCircleFilled, QuestionCircleOutlined } from '@vicons/antd'

export default defineComponent({
  name: 'city-operation',
  props: {
    type: {
      type: String,
      default: 'add'
    },
    clientType: {
      type: String,
      default: 'STUDENT'
    },
    data: {
      type: Object as PropType<any>,
      default: () => {}
    }
  },
  emits: ['close', 'getList'],
  setup(props, { slots, attrs, emit }) {
    const forms = reactive({
      title: null,
      linkUrl: null,
      order: null,
      buttonImage: null,
      type: 'APP',
      homePage: null as any, // 是否首页展示
      clientType: props.clientType || null,
      auditFlag: null as any,
      defaultButton: null as any, // 是否默认按钮(用于添加管理员默认添加按钮)
      lockFlag: null as any, // 是否锁定-主要是管理端使用
      manageButton: null as any // 辅助管理-主要是管理端使用
    })

    const btnLoading = ref(false)
    const formsRef = ref()
    const message = useMessage()

    // 提交记录
    const onSubmit = async () => {
      formsRef.value.validate(async (error: any) => {
        if (error) return
        try {
          btnLoading.value = true
          if (props.type === 'add') {
            await sysMenuButtonSave({ ...forms })
            message.success('添加成功')
          } else if (props.type === 'edit') {
            await sysMenuButtonUpdate({ ...forms, id: props.data.id })
            message.success('修改成功')
          }
          emit('getList')
          emit('close')
        } catch {
          //
        }
        setTimeout(() => {
          btnLoading.value = false
        }, 100)
      })
    }

    // 初始化数据
    if (props.type === 'edit') {
      const data = props.data
      forms.title = data.title
      forms.linkUrl = data.linkUrl
      forms.order = data.order
      forms.buttonImage = data.buttonImage
      forms.auditFlag = data.auditFlag ? 1 : 0
      forms.homePage = data.homePage ? 1 : 0
      forms.defaultButton = data.defaultButton ? 1 : 0
      forms.lockFlag = data.lockFlag ? 1 : 0
      forms.manageButton = data.manageButton ? 1 : 0
    }

    return () => (
      <div style="background: #fff; padding-top: 12px">
        <NForm model={forms} ref={formsRef} label-placement="left" label-width="auto">
          <NFormItem
            label="标题"
            path="title"
            rule={[
              {
                required: true,
                message: '请输入标题',
                trigger: ['input', 'blur']
              }
            ]}
          >
            <NInput
              v-model:value={forms.title}
              placeholder="请输入标题"
              clearable
              showCount
              maxlength={14}
            />
          </NFormItem>
          <NFormItem label="跳转链接" path="linkUrl">
            <NInput v-model:value={forms.linkUrl} placeholder="请输入跳转链接" clearable />
          </NFormItem>
          <NFormItem
            label="排序值"
            path="order"
            rule={[
              {
                required: true,
                message: '请输入排序值'
              }
            ]}
          >
            <NInputNumber
              v-model:value={forms.order}
              placeholder="请输入排序值"
              clearable
              min={0}
              style={{ width: '100%' }}
            />
          </NFormItem>
          <NFormItem
            label="是否审核"
            path="auditFlag"
            rule={[
              {
                required: true,
                message: '请选择是否审核'
              }
            ]}
          >
            <NSelect
              v-model:value={forms.auditFlag}
              placeholder="请选择是否审核"
              options={[
                {
                  label: '是',
                  value: 1
                },
                {
                  label: '否',
                  value: 0
                }
              ]}
              clearable
            />
          </NFormItem>
          <NFormItem
            label="首页展示"
            path="homePage"
            rule={[
              {
                required: true,
                message: '请选择首页展示'
              }
            ]}
          >
            <NSelect
              v-model:value={forms.homePage}
              placeholder="请选择首页展示"
              options={[
                {
                  label: '是',
                  value: 1
                },
                {
                  label: '否',
                  value: 0
                }
              ]}
              clearable
            />
          </NFormItem>
          <NFormItem
            label="是否默认"
            path="defaultButton"
            rule={[
              {
                required: true,
                message: '请选择是否默认'
              }
            ]}
          >
            {/* 刘俊驰要求是是0 否是1 */}
            <NSelect
              v-model:value={forms.defaultButton}
              placeholder="请选择是否默认"
              disabled={forms.manageButton === 1}
              options={[
                {
                  label: '是',
                  value: 1
                },
                {
                  label: '否',
                  value: 0
                }
              ]}
              clearable
            />
          </NFormItem>
          <NFormItem
            label="是否锁定"
            path="lockFlag"
            rule={[
              {
                required: true,
                message: '请选择是否锁定'
              }
            ]}
          >
            <NSelect
              v-model:value={forms.lockFlag}
              placeholder="请选择是否锁定"
              options={[
                {
                  label: '是',
                  value: 1
                },
                {
                  label: '否',
                  value: 0
                }
              ]}
              clearable
            />
          </NFormItem>
          <NFormItem
            // label="辅助管理"
            path="manageButton"
            rule={[
              {
                required: true,
                message: '请选择辅助管理'
              }
            ]}
          >
            {{
              label: () => (
                <span style={{ display: 'flex', alignItems: 'center' }}>
                  管理配置
                  <NTooltip>
                    {{
                      trigger: () => (
                        <NIcon size={16} color="#FF8057">
                          <QuestionCircleFilled />
                        </NIcon>
                      ),
                      default: () => '总管理员是否可将该按钮权限配置给辅助管理员'
                    }}
                  </NTooltip>
                </span>
              ),
              default: () => (
                <NSelect
                  v-model:value={forms.manageButton}
                  placeholder="请选择管理配置"
                  options={[
                    {
                      label: '是',
                      value: 0
                    },
                    {
                      label: '否',
                      value: 1
                    }
                  ]}
                  onUpdateValue={(val: any) => {
                    // 5737 优化：app按钮管理--管理配置选【否】时，强制 是否默认值 为【否】，如果管理配置选【是】时，则不限制
                    if (val === 1) {
                      forms.defaultButton = 0
                    }
                  }}
                  clearable
                />
              )
            }}
          </NFormItem>
          <NFormItem
            label="按钮图"
            path="buttonImage"
            rule={[
              {
                required: true,
                message: '请上传按钮图',
                trigger: ['input', 'blur']
              }
            ]}
          >
            <UploadFile
              v-model:fileList={forms.buttonImage}
              accept=".jpg,.jpeg,.png"
              cropper
              bucketName="news-info"
              options={{
                enlarge: 1, //  图片放大倍数
                autoCropWidth: 88, //默认生成截图框宽度
                autoCropHeight: 88 //默认生成截图框高度
              }}
              size={1}
              tips="请上传请上传尺寸为88*88大小1M以内的JPG、PNG图片"
            />
          </NFormItem>
        </NForm>

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