<template>
  <div class="questionnaire-survey-container" id="questionnaire-survey-container">
    <div class="survey-operation-zone">
      <div class="survey-operation-left">
        <el-radio-group v-model="listType" style="margin-left: 30px;" @change="listTypeChange">
          <el-radio-button :label="1">统计结果</el-radio-button>
          <el-radio-button :label="2">详细数据</el-radio-button>
        </el-radio-group>
        <el-select v-model="questionType" placeholder="请选择题目类型" v-show="listType==1" style="width: 240px;margin:0 30px;" @change="getQuestionData">
          <el-option :label="item.label" :value="item.value" v-for="(item,index) in questionParamList" :key="item.value"></el-option>
        </el-select>
      </div>
      <div class="survey-operation-right">
        <el-button type="primary" @click="toQuestionnaireOption" style="margin-left: 30px;">问卷配置</el-button>
      </div>
    </div>
    <!-- 统计结果 -->
    <div class="survey-question-zone" v-masonry v-show="listType==1"
    item-selector=".survey-question-box" gutter="20" id="survey-question-zone">
      <div class="survey-question-box" v-masonry-tile 
      v-for="(item, index) in statisticsResult" :key="item.QuestionnaireId">
        <div class="survey-question-head">
          <div class="survey-question-title">
            {{ (index+1)+'.'+item.Question }}<span>{{ `【${questionTypeList[item.Type-1]}】` }}</span>
          </div>
          <template v-if="item.Type==3">
            <div class="survey-question-more" @click="toTextDetail(item,index+1)">
              <span>查看详情</span>
              <i class="el-icon-arrow-right"></i>
            </div>
          </template>
        </div>
        <div class="survey-question-body" >
          <div class="survey-question-table"  :style="item.Type==3?'width: 100%':''">
            <el-table :data="item.Options" header-row-class-name="custom-table-header" 
            v-if="item.Type!=3">
              <el-table-column label="选项" prop="Option" show-overflow-tooltip >
                <template slot-scope="{row,$index}">
                  {{OptionLetterList[row.Index]+':'}}{{ row.Option }}
                </template>
              </el-table-column>
              <el-table-column label="小计" prop="Count" sortable show-overflow-tooltip width="130">
                <template slot-scope="{row}">
                  {{ row.Count }}
                </template>
              </el-table-column>
              <el-table-column label="比例" prop="Percentage" width="80"
              sortable show-overflow-tooltip>
                <template slot-scope="{row}">
                  {{ Math.round(row.Percentage*10000)/100+'%' }}
                </template>
              </el-table-column>
            </el-table>
            <!-- max-height="420px" -->
            <el-table :data="item.Answers || []" header-row-class-name="custom-table-header" 
             v-else  class="textTable">
              <el-table-column label="序号" prop="index" width="70">
                <template slot-scope="{row,$index}">
                  {{ $index+1 }}
                </template>
              </el-table-column>
              <el-table-column label="姓名" prop="UserName" show-overflow-tooltip width="110">
                <template slot-scope="{row}">
                  {{ row.UserName }}
                </template>
              </el-table-column>
              <el-table-column label="文本内容" prop="text"  show-overflow-tooltip>
                <template slot-scope="{row}">
                  {{ row.Answer }}
                </template>
              </el-table-column>
            </el-table>
          </div>          
          <div class="survey-question-chart" v-if="item.Type!=3">
            <questionChart :chart-data="item.chartData" :key="item.QuestionnaireId"></questionChart>
          </div>
        </div>
      </div>
    </div>
    <!-- 详细数据 -->
    <div class="survey-detail-zone" v-show="listType==2">
      <el-table :data="detailData" border>
        <el-table-column label="姓名" prop="UserName">
          <template slot-scope="{row}">
            {{ row.UserName }}
          </template>
        </el-table-column>
        <el-table-column label="公司名称" prop="CompanyName">
          <template slot-scope="{row}">
            {{ row.CompanyName }}
          </template>
        </el-table-column>        
        <el-table-column label="职位" prop="Position">
          <template slot-scope="{row}">
            {{ row.Position }}
          </template>
        </el-table-column>        
        <el-table-column label="填写时间" prop="CreateTime">
          <template slot-scope="{row}">
            {{ row.CreateTime }}
          </template>
        </el-table-column>        
        <el-table-column label="操作">
          <template slot-scope="{row}">
            <span style="color:#409EFF ;cursor: pointer;" @click="questionnaireDetail(row)">查看</span>
          </template>
        </el-table-column>
        <div slot="empty" class="table-noData">
          <img src="~@/assets/img/cus_m/nodata.png">
          <span>暂无数据</span>
        </div>
      </el-table>
      <!-- 页数选择器 -->
      <m-page
        :page_no="detailDataSearchP.CurrentIndex"
        :pageSize="detailDataSearchP.PageSize"
        :total="total"
        style="position: absolute;right: 60px;bottom: 50px;"
        @handleCurrentChange="pageChange"
      />
    </div> 
    <el-dialog
      title="问卷调查"
      :visible.sync="questionnaireDetailShow"
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      width="780px"
      top="5vh"
    >
      <div style="padding: 10px 40px 0;" class="questionnaire-container" id="questionnaire-container">
        <div class="questionnaire-title">
          {{ detailTitle }}
        </div>
        <el-form :model="detailForm" ref="questionRef" label-position="top" size="small" disabled
        :show-message="false">
          <el-form-item :label="index+1+'.'+item.Question" :prop="'detail'+item.QuestionnaireId" 
          :rules="item.IsMust?{required:true,message:'该题为必答题',trigger:['blur','change']}:{}"
          v-for="(item,index) in questionList" :key="item.QuestionnaireId">
            <el-radio-group v-model="detailForm['detail'+item.QuestionnaireId]" v-if="item.Type==1">
              <el-radio :label="it" v-for="(it,ind) in item.Options" :key="it">{{ it }}</el-radio>
            </el-radio-group>
            <el-checkbox-group v-model="detailForm['detail'+item.QuestionnaireId]"
            v-else-if="item.Type==2">
              <el-checkbox  :label="it" v-for="(it,ind) in item.Options" :key="it" >{{ it }}</el-checkbox>
            </el-checkbox-group>
            <el-input v-else rows="5" v-model="detailForm['detail'+item.QuestionnaireId]" type="textarea" placeholder="请输入文本"></el-input>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import mPage from '@/components/mPage.vue';
import{etaTrialInterence}from '@/api/modules/crmApi.js';
import questionChart from './compontents/questionChart.vue';
import EventBus from '@/api/bus.js'
  export default {
    name:'questionnaireSurvey',
    components:{
      questionChart,
      mPage
    },
    data() {
      this.questionParamList = [{label:'全部',value:1},{label:'选择题',value:2},{label:'简答题',value:3}]
      this.OptionLetterList=['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z',
      'a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z']
      this.questionTypeList = ['单选题','多选题','填空题']
      // 计时器
      this.timer=null
      this.haveAddEvent=false
      return {
        listType:1,
        questionType:1,
        statisticsResult:[],
        detailData:[],
        detailDataSearchP:{
          CurrentIndex:1,
          PageSize:10
        },
        total:0,
        // 弹窗
        questionnaireDetailShow:false,
        detailTitle:'',
        detailForm:{ },
        questionList:[]
      }
    },
    methods: {
      // radio-button改变
      listTypeChange(value){
        if(value==1){
          this.getQuestionData()
        }else if(value==2){
          this.getAnswererList()
        }
      },
      getQuestionData(){
        etaTrialInterence.getQuestionDataList({ListParam:this.questionType}).then(res=>{
          if(res.Ret !=200) return 
          this.statisticsResult = res.Data ?res.Data.filter(item => item.Type!=4): []
          this.statisticsResult.forEach(item =>{
            if(!item.Options) return 
            item.chartData =  item.Options.map((item,index)=>{
              return {value:Math.round(item.Percentage*10000)/100  ,name:this.OptionLetterList[index]}
            })
          })
        })
      },
      toTextDetail(item,index){
        this.$router.push({path:'/textQuestionDetail',
        query:{
          quesionId:item.QuestionnaireId,
          question:index+'.'+item.Question
        }})
      },
      getAnswererList(){
        etaTrialInterence.getDetailDataList(this.detailDataSearchP).then(res=>{
          if(res.Ret == 200){
            this.detailData = res.Data.List || []
            this.total = res.Data.Paging.Totals || 0
          }
        })
      },
      // 查看详情
      questionnaireDetail(row){
        etaTrialInterence.getDetailDataDetail({Mobile:row.Mobile,CreateTime:row.CreateTime}).then(res=>{
          if(res.Ret == 200){
            let temArr = res.Data || []
            this.detailTitle = temArr.find(item => item.Type==4)?temArr.find(item => item.Type==4).Options[0]:''
            this.questionList = temArr.filter(item => item.Type!=4)
            this.questionList.map(item =>{
              this.detailForm['detail'+item.QuestionnaireId] = 
              item.Type==2?item.UserOptions?item.UserOptions.split('~#'):[]:item.UserOptions
            })
            this.questionnaireDetailShow=true
          }
        })
      },
      pageChange(page_no){
        this.detailDataSearchP.CurrentIndex = page_no
        this.getAnswererList()
      },
      toQuestionnaireOption(){
        this.$router.push('/questionnaireOption')
      },
    },
    created() {
      this.getQuestionData()
      // this.getAnswererList()
      //collapseHandle侧边导航栏展开收缩事件，触发window的resize事件
      EventBus.$off('collapseHandle')
      EventBus.$on('collapseHandle',(params)=>{
        this.$nextTick(()=>{
          const resizeEvent = new Event('resize')
          window.dispatchEvent(resizeEvent)
        })
      })
    }
  }
</script>

<style lang="scss" scoped>
  #questionnaire-survey-container{
    // height: auto;
    // min-height: 100%;
    .survey-operation-zone{
      background-color: white;
      padding: 20px 30px;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      border: 1px solid #DCDFE6;
      border-radius: 4px;
      margin-bottom: 20px;
      .survey-operation-left{
        margin-left: -30px;
        display: flex;
        align-items: center;
      }
      .survey-operation-right{
        margin-left: -30px;
      }
    }
    // 统计结果
    .survey-question-zone{
      .survey-question-box{
        box-sizing: border-box;
        width: calc( (100% - 20px)/2 );
        background-color: white;
        border: 1px solid #DCDFE6;
        border-radius: 4px;
        margin-bottom: 20px;
        .survey-question-head{
          border-bottom: 1px solid #DCDFE6;
          padding: 20px 30px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          .survey-question-title{
            span{
              color: #999999;
            }
          }
          .survey-question-more{
            cursor: pointer;
            color: #409EFF;
            font-size: 14px;
            white-space: nowrap;
          }
        }
        .survey-question-body{
          padding: 20px 30px 30px;
          box-sizing: border-box;
          display: flex;
          flex-wrap: nowrap;
          justify-content: space-between;
          .survey-question-table{
            padding-top: 20px;
            width: 56%;
            margin-right: 20px;
          }
          .survey-question-chart{
            height: 340px;
            width: 44%;
          }
        }
      }
      @media screen and (max-width:1366px) {
        .survey-question-box{
          width: 100%;
        }
      }
      @media screen and (min-width:2880px) {
        .survey-question-box{
          width: calc( (100% - 40px)/3 );
        }
      }
      @media screen and (min-width:3840px) {
        .survey-question-box{
          width: calc( (100% - 60px)/4 );
        }
      }
    }
    // 详细数据
    .survey-detail-zone{
      background-color: white;
      min-height: calc(100vh - 212px);
      box-sizing: border-box;
      padding: 30px 30px 80px;
      .table-noData{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin: 18vh 0;
        img{
          height: 110px;
          width: 136px;
        }
        span{
          font-weight: 400;
          font-size: 16px;
          color: #999999;
        }
      }
    }
    // 详情弹窗
    .questionnaire-container{
      margin-bottom: 120px;
    .questionnaire-title{
      font-weight: 500;
      font-size: 16px;
      color: #333333;
      margin-bottom: 25px;
    }

  }
  }
</style>
<style lang="scss">
#questionnaire-survey-container{
  #survey-question-zone{
    .el-table{
      .custom-table-header{
        th{
          background-color: white!important;
          font-weight: 500;
          padding:7px 0;
        }
      }
      .cell{
        color: #333333;
        padding-left: 0;
        padding-right: 10px;
      }
    }
  }
  .el-form-item__label{
    font-weight: 5000;
    font-size: 16px;
    color: #333333;
  }
  .el-radio__label,.el-checkbox__label,.el-textarea__inner{
    color: #666666;
  }
  .el-checkbox-group,.el-radio-group{
    margin-left: -40px;
  }
  .el-radio,.el-checkbox{
    margin-right: 0;
    margin-left: 40px;
  }
}

</style>