<!-- 新闻管理 by wangshxc -->
<template>
  <div v-loading="listLoading">
    <!-- 页面title -->
    <div class="management">
      <div class="table-button float-right">
        <ws-button round @click="save" type="primary" class="mr10">保存</ws-button>
        <ws-button v-if="questionBankId" slot="reference" class="mr10" @click="toDel" round>删除</ws-button>
        <ws-button @click="goBack" class="mr10" round>返回</ws-button>
      </div>
    </div>
    <!--新增表单列表 Start-->
    <ws-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
      <ws-form-item label="问题内容 :" prop="questionContent">
        <ws-input type="textarea" v-model="ruleForm.questionContent" class="title" maxlength="200" style="width: 95%;"></ws-input>
      </ws-form-item>
      <div style="display: flex">
        <ws-form-item label="适用系统 :" prop="applicableSystemType">
          <ws-radio-group v-model="ruleForm.applicableSystemType">
            <ws-radio v-for="item of systemList" :key="item.dictionaryValue" :label="item.dictionaryValue">{{ item.dictionaryName }}</ws-radio>
          </ws-radio-group>
        </ws-form-item>
        <ws-form-item label="一级功能 :" prop="firstFunctionModuleCode">
          <ws-select v-model="ruleForm.firstFunctionModuleCode" @change="changeOneLevel" placeholder="请选择" style="width: 11.2em;">
            <ws-option
              v-for="item in oneLevel"
              :key="item.serviceCode"
              :label="item.serviceName"
              :value="item.serviceCode"/>
          </ws-select>
        </ws-form-item>
        <ws-form-item label="二级功能 :">
          <ws-select v-model="ruleForm.secondFunctionModuleCode" @change="changeTwoLevel" placeholder="请选择" style="width: 11.2em;">
            <ws-option
              v-for="item in twoLevel"
              :key="item.serviceCode"
              :label="item.serviceName"
              :value="item.serviceCode"
            />
          </ws-select>
        </ws-form-item>
        <ws-form-item label="三级功能 :">
          <ws-select v-model="ruleForm.thirdFunctionModuleCode" placeholder="请选择" style="width: 11.2em;">
            <ws-option
              v-for="item in threeLevel"
              :key="item.serviceCode"
              :label="item.serviceName"
              :value="item.serviceCode"
            />
          </ws-select>
        </ws-form-item>
      </div>
      <div style="display: flex">
        <ws-form-item label="解答类型 :" prop="answerTypeList">
        <el-checkbox-group v-model="ruleForm.answerTypeList" @change="changeType">
          <el-checkbox v-for="item of answerList" :key="item.dictionaryValue" :label="item.dictionaryValue">{{ item.dictionaryName }}</el-checkbox>
        </el-checkbox-group>
      </ws-form-item>
        <ws-form-item label="创建人 :" prop="createUserName" style="margin-left: -31px;">
          <ws-input v-model="ruleForm.createUserName" class="title" maxlength="100" placeholder="请输入标题" :disabled="questionBankId && questionBankId.length>0" style="width: 158px"></ws-input>
        </ws-form-item>
        <ws-form-item label="创建日期 :" prop="createDate">
          <ws-date-picker
            value-format="yyyy-MM-dd"
            v-model="ruleForm.createDate"
            type="date"
            :disabled="questionBankId && questionBankId.length>0"
            style="width: 158px"
          />
        </ws-form-item>
      </div>
      <ws-form-item label="文案解答内容 :" :prop="copywritingSolutionContent">
        <ws-input type="textarea" :rows="4" v-model="ruleForm.copywritingSolutionContent" maxlength="1000" style="width: 95%;"></ws-input>
      </ws-form-item>
      <ws-form-item label="文档解答内容 :" class="required-item">
        <span class="required-star" v-if="ruleForm.answerTypeList && ruleForm.answerTypeList.indexOf('2') >-1">*</span>
        <ws-upload
          ref="upload"
          :limit="1"
          oss-key="test"
          accept=".pdf"
          :appendix-ids="ruleForm.documentSolutionContentId"
          table-name="announcement_issue_info"
          />
      </ws-form-item>
      <ws-form-item label="视频解答内容 :" style="margin-bottom: 12px;" class="required-item">
        <span class="required-star" v-if="ruleForm.answerTypeList && ruleForm.answerTypeList.indexOf('3') >-1">*</span>
        <ws-upload
          ref="videoUpload"
          :limit="1"
          oss-key="test"
          :appendix-ids="ruleForm.videoSolutionContentId"
          accept=".avi, .mov, .rmvb, .rm, .flv, .mp4, .3gp"
          table-name="announcement_issue_info"
        />
      </ws-form-item>
    </ws-form>
  </div>

</template>

<script>
  import WsUpload from '../../components/WsUpload'
  import {
    getFirstLevelFunctionality,
    getSecondaryFunctionality,
    getTertiaryFunctionality,
    getDictionaryData,
    getFileList,
    getOneProblemDetails,
    deleteOneProblem,
    setNewModuleProblem
  } from '../../api/help'

  export default {
    name: 'helpAdd',
    components: {
      WsUpload,
    },
    data() {
      return {
        copywritingSolutionContent: '',
        questionBankId:this.$route.query.questionBankId,
        likeFlag: false,
        appendixPath: '',
        imageSrc: undefined,
        isLoading: false,
        listLoading: false,
        appendixIds: '',
        systemList: [],
        answerList: [],
        oneLevel: [],
        twoLevel: [],
        threeLevel: [],
        ruleForm: {
          questionContent: '',
          applicableSystemType: '1',
          answerTypeList: [],
          createUserId: localStorage.getItem('ws-pf_userId'),
          createUserName: localStorage.getItem('ws-pf_userName'),
          createDate: this.getNowFormatDate(),
          issueUserId: localStorage.getItem('ws-pf_userId'),
          copywritingSolutionContent: '',
          documentSolutionContentId: '',
          videoSolutionContentId: '',
          videoSolutionContentUrl: '',
          firstFunctionModuleCode: '',
          secondFunctionModuleCode: '',
          thirdFunctionModuleCode: '',
        },
        rules: {
          questionContent: [
            {required: true, message: '请输入问题内容', trigger: 'blur'}
          ],
          applicableSystemType: [
            {required: true, message: '请选择适用系统', trigger: 'change'}
          ],
          firstFunctionModuleCode: [
            {required: true, message: '请选择一级功能', trigger: 'change'}
          ],
          answerTypeList: [
            {required: true, message: '请选择解答类型', trigger: 'change'}
          ],
          createDate: [
            {required: true, message: '请选择创建日期', trigger: 'change'}
          ],
          createUserName: [
            {required: true, message: '请输入创建人', trigger: 'blur'}
          ],
          copywritingSolutionContent: [
            {required: true, message: '请输入文案解答内容', trigger: 'blur'}
          ]
        },
      };
    },
    created() {
      this.render()
    },
    mounted() {
      if(this.$route.query.questionBankId){
        this.getDetail()
      }
    },
    methods: {
      changeType(val){
        if(val.indexOf('1')>-1){
          this.copywritingSolutionContent = 'copywritingSolutionContent'
        } else {
          this.copywritingSolutionContent = ''
        }
      },
      // 当前时间
      getNowFormatDate() {
        const date = new Date()
        const year = date.getFullYear()
        let month = date.getMonth() + 1
        let strDate = date.getDate()
        if (month >= 1 && month <= 9) {
          month = '0' + month
        }
        if (strDate >= 0 && strDate <= 9) {
          strDate = '0' + strDate
        }
        return year + '-' + month + '-' + strDate
      },
      // 切换一级功能
      changeOneLevel(val){
        //获取二级菜单
        getSecondaryFunctionality({serviceCode: val}).then(res => {
          this.twoLevel = res.data
          this.ruleForm.secondFunctionModuleCode = ''
          this.ruleForm.thirdFunctionModuleCode = ''
        })
      },
      // 切换二级功能
      changeTwoLevel(val){
        //获取三级菜单
        getTertiaryFunctionality({serviceCode: val}).then(res => {
          this.threeLevel = res.data
          this.ruleForm.thirdFunctionModuleCode = ''
        })
      },
      // 删除
      toDel() {
        this.$confirm('问题删除后将不能恢复，确定要删除吗？','提示',{
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
          deleteOneProblem({questionBankId: this.ruleForm.questionBankId}).then(res => {
            this.$message({type: "success",message: "删除成功"});
            this.$router.push({name: 'helpList'})
          })
        })
      },
      // 初始化
      render() {
        //获取一级菜单
        getFirstLevelFunctionality().then(res => {
          this.oneLevel = res.data
        })
        //获取适用系统
        getDictionaryData({typeCode: 'applicable_system_type'}).then(res => {
          this.systemList = res.data
        })
        //获取解答类型
        getDictionaryData({typeCode: 'answer_type'}).then(res => {
          this.answerList = res.data
        })
      },
      // 获取详情信息
      getDetail() {
          getOneProblemDetails({questionBankId: this.$route.query.questionBankId}).then(res => {
            let obj = res.data
            obj.answerTypeList = res.data.answerType.split(',')
            this.ruleForm = obj
            //获取二级菜单
            getSecondaryFunctionality({serviceCode: this.ruleForm.firstFunctionModuleCode,newGuidelinesFlag: '1'}).then(res => {
              this.twoLevel = res.data
              //获取三级菜单
              getTertiaryFunctionality({serviceCode: this.ruleForm.secondFunctionModuleCode,newGuidelinesFlag: '1'}).then(res => {
                this.threeLevel = res.data
              })
            })
          });
      },
      // 保存方法
      saveProblem(){
        this.listLoading = true;
        this.ruleForm.answerType = this.ruleForm.answerTypeList.join(',')
        setNewModuleProblem(this.ruleForm).then(response => {
          this.$message({
            type: 'success',
            message: '保存成功!'
          });
          this.$router.push({ name: "helpList" })
          this.listLoading = false
        })
      },
      // 保存
      save() {
        this.$refs.ruleForm.validate(valid => {
          if (valid) {
              this.$refs.upload.handleSaveBill().then((res) => {
                  if (res && res.length>0) {
                    this.ruleForm.documentSolutionContentId = res
                  } else {
                    if(this.ruleForm.answerTypeList.indexOf('2') >-1){
                      this.$message({
                        message: '文档解答内容为必填项',
                        type: 'error'
                      })
                      return false
                    }
                  }
                  this.$refs.videoUpload.handleSaveBill().then((videores) => {
                    if (videores && videores.length > 0) {
                      getFileList({appendixIds : videores}).then(videoresp => {
                        if (videoresp.data.length > 0) {
                          this.ruleForm.videoSolutionContentId = videores
                          this.ruleForm.videoSolutionContentUrl = this.$store.getters.baseInfo.fileUrl + videoresp.data[0].appendixPath
                        }
                        this.saveProblem()
                      })
                    } else {
                      if (this.ruleForm.answerTypeList.indexOf('3') > -1) {
                        this.$message({
                          message: '视频解答内容为必填项',
                          type: 'error'
                        })
                        return false
                      } else {
                        this.saveProblem()
                      }
                    }
                  })
              })
          } else {
            this.$message({
              message: '带*号的为必填项',
              type: 'error'
            })
            return false
          }
        })
      },
      // 返回
      goBack() {
        this.$router.push({name: 'helpList'})
      },
    }
  }
</script>
<style lang='scss' scoped>
  .el-table tr:hover{
    cursor: pointer;
  }

  .required-item{
    position: relative;
    .required-star{
      color: #e74c3c;
      position: absolute;
      left: -116px;
    }
  }
  .management {
    height: 50px;
    background: #fff;
  }

  .float-right {
    float: right;
  }

  .title {
    width: 30em;
  }

  .mr10 {
    margin-left: 5px;
  }

  .el-radio{
    margin-right: 6px;
  }
  /deep/ .el-radio__label{
    padding-left: 5px;
  }
  .el-checkbox{
    margin-right: 83px;
  }
</style>
