<template>
  <CommonModal
    v-model="visible"
    class="feedback-modal"
    title="功能反馈"
    width="300"
    :closable="false"
    :footerHide="true"
  >
    <template slot="header">
      <div class="feedback-header">
        <Checkbox v-model="isNotAlertAgain"><span style="color: var(--primary-color);">下次不再提醒</span></Checkbox>
      </div>
    </template>

    <div class="content">
      <h2 style="text-align: center;">功能反馈</h2>

      <div class="form">
        <div class="form-item">
          <p class="item-title"><span class="required">*</span>1、请选择返回旧版的原因（可多选）</p>
          <div>
            <CheckboxGroup v-model="reasons">
              <Checkbox
                :label="item.label"
                v-for="item in options"
                :key="item.value"
              >{{ item.label }}</Checkbox>
            </CheckboxGroup>
          </div>
        </div>
        <div class="form-item">
          <p class="item-title">2、您的建议</p>
          <div>
            <Input
              v-model="suggestions"
              placeholder=""
              style="width: 254px"
              type="textarea"
              :rows="3"
            />
          </div>
        </div>
      </div>

    </div>

    <template slot="footer">
      <div class="feedback-footer">
        <Button @click="close">取消</Button>
        <Button
          type="primary"
          @click="submit"
        >提交并返回旧版本</Button>
      </div>
    </template>
  </CommonModal>
</template>

<script>
import CommonModal from '../commonModal/index.vue';

const R3 = window.R3;
const { network } = R3;

export default {
  name: 'FeedbackModal',

  props: {
    onOk: {
      type: Function,
      default: () => { }
    },
    type: {
      type: [Number, String]
    },
    nottip: {
      type: Array,
      default: () => []
    }
  },

  components: {
    CommonModal,
  },

  data() {
    return {
      visible: false,
      isNotAlertAgain: false,
      reasons: [],
      suggestions: '',
      options: [
        {
          label: '功能有缺失（请在下方具体说明）',
          value: 1
        },
        {
          label: '功能不好用，有bug（请在下方具体说明）',
          value: 2
        },
        {
          label: '页面过于复杂，不会用',
          value: 3
        },
        {
          label: '习惯使用旧版',
          value: 4
        },
        {
          label: '其他',
          value: 5
        },

      ]
    }
  },

  mounted() {
  },

  methods: {
    recordCheck() {
      const tableName = window.R3.store.state.global.activeTab.tableName
      const params = {
        DATA_LIST: {
          nottip: [...this.nottip, tableName]
        }
      }
      network.post('/p/cs/watchboard/addUserRecord', params)
    },

    close() {
      this.visible = false
    },

    submit() {
      if (this.reasons.length === 0) {
        this.$Message.warning('请选择返回旧版的原因')
        return
      }

      // 勾选了不再提醒
      if (this.isNotAlertAgain) {
        this.recordCheck()
      }

      network.post(`/p/cs/user/feedback/${this.type}`, {
        content: this.reasons,
        suggestions: this.suggestions
      }).then(res => {
        if (res.data.code === 0) {
          if (typeof this.onOk === 'function') {
            this.onOk()
          }
        }
      }).finally(() => {
        this.close()
      })
    }
  }
};
</script>

<style lang="less" scoped>
.feedback-modal {
  .feedback-header {
    display: flex;
    align-items: center;
    margin-left: 195px;
    margin-top: 14px;
  }

  .form {
    margin-top: 12px;
    .item-title {
      margin-bottom: 6px;
      position: relative;
    }
  }
  .required {
    position: absolute;
    left: -8px;
    color: red;
  }
  .feedback-footer {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-top: 12px;
  }
}
</style>

<style lang="less">
.feedback-modal {
  .ark-modal-header {
    background: #fff !important;
    border-bottom: none !important;
  }
  .ark-checkbox-wrapper {
    display: block;
    margin-bottom: 8px;
  }
  .ark-modal-body {
    padding-top: 4px !important;
  }
}
</style>
