<template>
  <div :class="$style.recommend">
    <a-form-model
      ref="recommendRuleForm"
      :rules="rules"
      :model="recommendForm"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
    >
      <a-form-model-item label="推荐方式：" prop="type" :class="$style.recomentRadio">
        <a-checkbox-group v-model="recommendForm.type" @change="onChange">
          <a-checkbox value="1" name="type" :disabled="commentHome">
            推荐到门户
          </a-checkbox>
          <a-checkbox value="2" name="type">
            推荐到个人
          </a-checkbox>
        </a-checkbox-group>
      </a-form-model-item>
      <a-form-model-item v-if="showPerson" label="推荐对象：" prop="person">
        <sd-user-picker
          v-model="recommendForm.person"
          :single="false"
          :read-only="false"
          @change="recomentChange"
        /> </a-form-model-item
      ><a-form-model-item label="推荐原因：" prop="desc">
        <a-input v-model="recommendForm.desc" type="textarea" />
      </a-form-model-item>
      <div :class="$style.btn">
        <a-button type="primary" @click="onSubmit">
          确定
        </a-button>
        <a-button :class="$style.padd" @click="resetForm">
          取消
        </a-button>
      </div>
    </a-form-model>
  </div>
</template>

<script>
import { Message } from 'ant-design-vue'
import KmKnowledageService from '../km-knowledage-service'
import components from './_import-components/km-knowledage-commentmodal-import'
export default {
  name: 'KmKnowledageCommentmodal',
  metaInfo: {
    title: 'OaKnowledageCommentmodal',
  },
  components,
  props: {
    commentHome: {
      type: Boolean,
      default: false,
    },
    showModal: {
      type: Boolean,
      default: false,
    },
    success: {
      type: Function,

      default: () => {},
    },
  },
  data() {
    return {
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },

      // 推荐
      recommendForm: {
        resource: '',
        person: [],
        desc: '',
      },
      showPerson: false,
      rules: {
        type: [
          {
            type: 'array',
            required: true,
            message: '推荐方式不能为空！',
            trigger: 'change',
          },
        ],
        person: [
          {
            required: true,
            message: '推荐对象不能为空！',
            trigger: ['change', 'blur'],
          },
        ],
      },
    }
  },
  created() {},
  methods: {
    recomentChange(values) {},
    onChange(checkedValues) {
      if (checkedValues.length !== 0 && checkedValues.find((n) => n === '2')) {
        this.showPerson = true
      } else {
        this.showPerson = false
      }
    },
    // 推荐到门户
    recommendHome() {
      let recommenArea = ''
      recommenArea = '推荐到门户'
      window.open(
        `#/km-flow-guide?code=PROJECT_ZSGL_ZSTJ&knowledgeId=${this.$route.query.id}&title=${this.$route.query.title}&type=${recommenArea}&reason=${this.recommendForm.desc}`,
        '_blank'
      )
      this.recommendForm.desc = ''
    },
    // 推荐到个人
    recommendPerson() {
      const params = {
        beanId: Number(this.$route.query.id),
        title: this.$route.query.title,
        applyPerson: this.recommendForm.person,
        reason: this.recommendForm.desc,
      }
      KmKnowledageService.kmRecommendPerson(params).then((res) => {
        if (res.status === 200) {
          Message.success('推荐个人成功！')
          this.success()
        }
      })
    },
    onSubmit() {
      this.$refs.recommendRuleForm.validate((valid) => {
        if (valid) {
          if (
            this.recommendForm.type.indexOf('2') > -1 &&
            this.recommendForm.type.indexOf('1') > -1
          ) {
            this.recommendPerson()
            setTimeout(() => {
              this.recommendHome()
            }, 1000)
          } else if (this.recommendForm.type.indexOf('1') > -1) {
            this.recommendHome()
          } else {
            this.recommendPerson()
          }
          this.$emit('showModal', false)
          this.recommendForm.person = []
          this.recommendForm.type = []
        } else {
          return false
        }
      })
    },
    resetForm() {
      this.$emit('showModal', false)
      this.recommendForm.desc = ''
      this.recommendForm.person = []
      this.recommendForm.type = []
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
.recommend {
  padding: 20px;
  .recommend-li {
    height: 35px;
    margin-bottom: 0;
    line-height: $heading-2-size;
    span {
      padding-right: 20px;
    }
  }
  .btn {
    text-align: right;
    .padd {
      margin-left: 20px;
    }
  }
}
</style>
