<template>
    <div class="add-question-page">
      <Card v-if="loading" class="loading-card">
        <Spin fix size="large" />
      </Card>
      <Card v-else>
        <div class="head">
          <Icon type="md-bookmark" color="#2d8cf0" :size="28" />
          <label>{{ title }}</label>
        </div>
        <div class="item">
          <label class="label">导航：</label>
          <Select
            placeholder="请选择问题导航"
            v-model="form.navigationId"
            :disabled="isEdit"
            style="width:400px"

          >
            <Option
              v-for="(item, index) of navigationList"
              :value="item.navigationId"
              :key="'series-option-' + index"

            >{{ item.navigationName }}</Option
            >
          </Select>
          <Button type="primary" style="margin-left: 20px" @click="handleShow" v-if="isAdd">添加导航</Button>
        </div>
        <div class="item">
          <label class="label">问题：</label>
          <Input
            placeholder="请输入问题描述，50字以内"
            v-model="form.question"
            :maxlength="50"
            clearable
            style="width:400px"
          />
        </div>
        <div class="item">
          <label class="label">顺序：</label>
          <Input
            placeholder="请输入显示顺序，值越大优先级越高"
            v-model="form.displayOrder"
            clearable
            type="number"
            style="width:400px"
          />
        </div>
        <div class="item">
          <label class="label">答案：</label>
          <Input
            placeholder="请输入问题答案，200字以内"
            v-model="form.answer"
            clearable
            :maxlength="200"
            type="textarea"
            style="width:400px"
          />
        </div>
        <div class="footer-con">
          <Button
            type="default"
            @click="handleCancel"
            style="margin-right: 30px"
          >取消</Button
          >
          <Button
            type="primary"
            @click="handleSubmit"
          >确定</Button
          >
        </div>
      </Card>
      <Modal>

      </Modal><Modal
      title="添加商品"
      v-model="modalFlag"
      :mask-closable="false"
    >
      <div class="model-item">
        <label class="label">导航名称：</label>
        <Input
          placeholder="请输入导航名称"
          class="search-input"
          v-model="navContent.navigationName"
        />
      </div>
      <div class="model-item">
        <label class="label">显示顺序：</label>
        <Input
          placeholder="请输入显示顺序"
          class="search-input"
          type="number"
          v-model="navContent.displayOrder"
        />
      </div>
      <div slot="footer">
        <Button
          type="primary"
          @click="handleAddNav"
        >
          确定
        </Button>
      </div>
    </Modal>
    </div>
</template>

<script>
import { mapMutations } from 'vuex'
export default {
  name: 'add-question',
  computed: {
    title () {
      if (this.routeName === 'edit_question') {
        return '编辑常见问题 - 填写相关信息'
      } else {
        return '添加常见问题 - 填写相关信息'
      }
    },
    isAdd () {
      return this.routeName === 'add_question'
    },
    isEdit () {
      return this.routeName === 'edit_question'
    }
  },
  data () {
    return {
      modalFlag: false,
      navContent: {
        navigationName: '',
        displayOrder: ''
      },
      routeName: '',
      navigationList: [],
      form: {
        question: '',
        answer: '',
        displayOrder: '',
        questionId: '',
        updateTime: '',
        navigationId: ''
      },
      loading: false
    }
  },
  methods: {
    ...mapMutations(['closeTag']),
    initData () {
      let routeName = this.$route.name
      let { questionId } = this.$route.query
      this.form.questionId = questionId
      this.routeName = routeName
      this.getNavigationList()
      if (routeName == 'edit_question') {
        this.requestQuestionDetail(questionId)
      } else {
      }
    },
    requestQuestionDetail (questionId) {
      this.loading = true
      this.api({
        apiName: 'detailSysQuestion',
        postdata: questionId,
        complete: () => {
          this.loading = false
        },
        success: (res) => {
          let { answer, displayOrder, navigationId, question, updateTime, questionId } = res.data
          this.form = {
            answer,
            displayOrder,
            navigationId,
            question,
            updateTime,
            questionId
          }
        }
      })
    },
    getNavigationList () {
      this.loading = false
      this.api({
        apiName: 'getSysNavigationList',
        success: (res) => {
          this.navigationList = res.data
        },
        complete: () => {
          this.loading = false
        }
      })
    },
    handleCancel () {
      let route = this.$route
      let toRouteName = 'common_problem'
      this.closeTag({ route, toRouteName })
    },
    checkForm () {
      let errMsg = ''
      let { answer, displayOrder, navigationId, question, updateTime, questionId } = this.form
      let form = {
        answer,
        displayOrder,
        navigationId,
        question,
        updateTime,
        questionId
      }
      if (!answer) {
        errMsg = '请输入答案！'
      }
      if (displayOrder < 0 || !/^\d+$/.test(displayOrder)) {
        errMsg = '显示顺序输入格式有误！'
      }
      if (!displayOrder) {
        errMsg = '请填写banner显示顺序！'
      }
      if (!question) {
        errMsg = '请输入问题！'
      }
      if (!navigationId) {
        errMsg = '请选择导航！'
      }
      return { errMsg, form }
    },
    handleSubmit () {
      let { errMsg, form } = this.checkForm()
      if (errMsg) {
        return this.$Notice.warning({ title: errMsg })
      }
      let apiName = this.isAdd ? 'addSysQuestion' : 'updateSysQuestion'
      let title = this.isAdd ? '添加成功！' : '编辑成功！'
      this.api({
        apiName,
        postdata: form,
        success: (res) => {
          let route = this.$route
          let toRouteName = 'common_problem'
          this.closeTag({ route, toRouteName })
          this.$Notice.success({ title })
        }
      })
    },
    handleShow () {
      this.navContent.displayOrder = ''
      this.navContent.navigationName = ''
      this.modalFlag = true
    },
    handleAddNav () {
      if (!this.navContent.navigationName || !this.navContent.displayOrder) {
        this.$Message.warning('所有项均为必填项哦！')
        return
      }
      this.api({
        apiName: 'addNavigation',
        postdata: this.navContent,
        success: (res) => {
          this.getNavigationList()
        },
        complete: () => {
          this.modalFlag = false
          this.$Notice.success({ title: '新增成功' })
        }
      })
    }
  },
  mounted () {
    this.initData()
  }
}
</script>

<style scoped lang="less">
  .loading-card {
    height: 100%;
  }
  .head {
    color: #17233d;
    font-size: 18px;
    font-weight: bold;
    display: flex;
    align-items: center;
    margin-bottom: 15px;
  i {
    margin-right: 10px;
  }
  }
  .item {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    .label{
      width: 100px;
      text-align: right;
      flex-shrink: 0;
    }
  }
  .footer-con {
    // text-align: center;
    margin-left: 140px;
  }
  .model-item {
    display: flex;
    margin-bottom: 10px;
    align-items: center;
    .label {
      display: inline-block;
      width: 100px;
      text-align: right;
    }
  }
</style>
