<!-- 新闻管理 by wangshxc -->
<template>
  <div v-loading="listLoading">
    <!-- 页面title -->
    <div class="management">
      <div class="table-button float-right">
        <ws-button round @click="toEdit" 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" ref="ruleForm" label-width="120px" class="demo-ruleForm">
      <ws-form-item label="问题内容 :">
        <span>{{ ruleForm.questionContent }}</span>
      </ws-form-item>
      <div style="display: flex">
        <ws-form-item label="适用系统 :">
          <div>{{ ruleForm.applicableSystemTypeName }}</div>
       <!--   <ws-radio-group v-model="ruleForm.applicableSystemType">
            <ws-radio v-for="item of systemList" :key="item.dictionaryValue" :label="item.dictionaryValue" disabled>{{ item.dictionaryName }}</ws-radio>
          </ws-radio-group>-->
        </ws-form-item>
        <ws-form-item label="一级功能 :">
         <!-- <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>-->
          <div class="menu-block">{{ruleForm.firstFunctionModuleName}}</div>
        </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>-->
          <div class="menu-block">{{ruleForm.secondFunctionModuleName?ruleForm.secondFunctionModuleName: '--'}}</div>
        </ws-form-item>
        <ws-form-item label="三级功能 :">
        <!--  <ws-select v-model="ruleForm.thirdFunctionModuleCode" @change="changeThreeLevel" placeholder="请选择类型" style="width: 11.2em;">
            <ws-option
              v-for="item in threeLevel"
              :key="item.serviceCode"
              :label="item.serviceName"
              :value="item.serviceCode"
            />
          </ws-select>-->
          <div class="menu-block">{{ruleForm.thirdFunctionModuleName?ruleForm.thirdFunctionModuleName:'--'}}</div>
        </ws-form-item>
      </div>
      <div style="display: flex">
        <ws-form-item label="解答类型 :">
          <div style="width: 327px;">{{ ruleForm.answerTypeWord }}</div>
         <!-- <el-checkbox-group v-model="ruleForm.answerTypeList">
            <el-checkbox v-for="item of answerList" :key="item.dictionaryValue" :label="item.dictionaryValue" disabled>{{ item.dictionaryName }}</el-checkbox>
          </el-checkbox-group>-->
        </ws-form-item>
        <ws-form-item label="创建人 :" style="margin-left: -31px;">
          <div class="menu-block">{{ ruleForm.createUserName }}</div>
        </ws-form-item>
        <ws-form-item label="创建日期 :">
          <div class="menu-block">{{ ruleForm.createDate }}</div>
        </ws-form-item>
      </div>
      <ws-form-item label="文案解答内容 :">
        <div style="white-space: normal;line-height: 20px;margin-top: 10px;">{{ ruleForm.copywritingSolutionContent?ruleForm.copywritingSolutionContent:'--' }}</div>
      </ws-form-item>
      <ws-form-item label="文档解答内容 :">
        <ws-upload
          v-if="ruleForm.documentSolutionContentId && ruleForm.documentSolutionContentId.length>0"
          ref="upload"
          :limit="1"
          oss-key="test"
          accept=".pdf"
          :appendix-ids="ruleForm.documentSolutionContentId"
          table-name="announcement_issue_info"
          :editable="false"
        />
        <span v-else>--</span>
      </ws-form-item>
      <ws-form-item label="视频解答内容 :" v-if="ruleForm.videoSolutionContentUrl && ruleForm.videoSolutionContentUrl.length>0" style="margin-bottom: 12px;">
        <video width="347" height="193" :src="ruleForm.videoSolutionContentUrl" controls="controls"></video>
      </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 {
        questionBankId:this.$route.query.questionBankId,
        likeFlag: false,
        appendixPath: '',
        imageSrc: undefined,
        isLoading: false,
        listLoading: false,
        appendixIds: '',
        systemList: [],
        answerList: [],
        oneLevel: [],
        twoLevel: [],
        threeLevel: [],
        ruleForm: {
          questionContent: '',
          applicableSystemType: '',
          answerType: [],
          createUserName: localStorage.getItem('ws-pf_userName'),
          createDate: '',
          issueUserId: localStorage.getItem('ws-pf_userId'),
          copywritingSolutionContent: '',
          documentSolutionContentId: '',
          videoSolutionContentUrl: '',
        },
      };
    },
    created() {

    },
    mounted() {
      this.render()
    },
    methods: {
      // 切换一级功能
      changeOneLevel(val){
        //获取二级菜单
        getSecondaryFunctionality({pluginCode: ''}).then(res => {
          this.twoLevel = res.data
        })
      },
      // 切换二级功能
      changeTwoLevel(val){
        //获取三级菜单
        getTertiaryFunctionality({pluginCode: ''}).then(res => {
          this.threeLevel = res.data
        })
      },
      // 切换三级功能
      changeThreeLevel(val){

      },
      // 删除
      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
            this.getDetail()
          })
        })
      },
      // 获取详情信息
      getDetail() {
          getOneProblemDetails({questionBankId: this.$route.query.questionBankId}).then(res => {
            let obj = res.data
          let arr = res.data.answerType.split(',')
            let answerTypeWord = []
            for(let i of arr){
              if(this.answerList.findIndex( item => item.dictionaryValue == i ) > -1){
                answerTypeWord.push(this.answerList[this.answerList.findIndex( item => item.dictionaryValue == i )].dictionaryName)
              }
            }
            obj.answerTypeWord = answerTypeWord.join(';')
           let index = this.systemList.findIndex( item => item.dictionaryValue == res.data.applicableSystemType )
            obj.applicableSystemTypeName = this.systemList[index].dictionaryName
            this.ruleForm = obj
        });
      },
      // 编辑
      toEdit() {
        this.$router.push({
          name: 'helpEdit',
          query: {
            questionBankId: this.ruleForm.questionBankId
          }
        })
      },
      // 返回
      goBack() {
        this.$router.push({name: 'helpList'})
      },
    }
  }
</script>
<style lang='scss' scoped>
  .menu-block{
    width: 160px;
  }

  .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>
