<div class="page" style="overflow:auto">
  <!-- 头部 -->
  <HeaderData></HeaderData>
  <!-- 题目筛选 -->
  <div class="testData">
    <div class="testList">
      <div class="testProject">
        <el-dropdown trigger="click" @command="projectCommand">
          <el-button type="primary">{{ownHouseName}} <i class="el-icon-caret-bottom icon-right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>全部</el-dropdown-item>
            <el-dropdown-item v-for="(item,index) in houseList" :key="item.houseId" :command="item">
              {{item.houseName}}</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <div class="testItem">
        <div class="itemArrow"><i class="el-icon-arrow-left"></i></div>
        <div class="testContent">
          <div class="testTopic" :class="{testTopicSel:item.isSelected}" v-for="(item,index) in dataList"
            :key="item.created">
            <div id></div>
            <div style="display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
            overflow: hidden;
            text-overflow: ellipsis;
            word-break: break-all;
            word-wrap: break-word;">{{index+1}}.{{item.title}}</div>
            <img v-if="item.isSelected" class="testSel" src="
              https://dm.static.elab-plus.com/diaoyanbao/%E5%A4%9A%E9%80%89-%E9%80%89%E4%B8%AD@2x.png" alt=""
              @click="changeTest(item)">
            <img v-if="!item.isSelected" class="testSel"
              src="https://dm.static.elab-plus.com/diaoyanbao/%E5%A4%9A%E9%80%89-%E6%9C%AA%E9%80%89@2x.png" alt=""
              @click="changeTest(item)">
          </div>
        </div>
        <div class="itemArrow"><i class="el-icon-arrow-right"></i></div>
      </div>
    </div>
    <div class="testTip">
      <div v-if="!isCrossAnalyse"><span
          v-if="currentDate">截止到{{currentDate}}，问卷共{{answerData.answerAll || 0}}人参与，完成全部题目的有{{answerData.answerJoin || 0}}人。</span>
      </div>
      <div v-if="isCrossAnalyse" style="display: flex;align-items:center;">
        <div class="analyseBag">
          <div class="analyseBagTitle">
            <el-dropdown trigger="click" @command="analyseCommand">
              <el-button type="primary">{{analyseCommandSel}}<i class="el-icon-caret-bottom icon-right"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="-1">全部</el-dropdown-item>
                <el-dropdown-item command="0">数据包</el-dropdown-item>
                <el-dropdown-item command="1">区域</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
          <div class="analyseBagList">
            <el-cascader v-model="analyseValue" :options="analyseOptions"
              :props="{ checkStrictly: analyseCommandSel== '区域' ? true : false }"
              @change="handleAnalyseChange(analyseValue)">
            </el-cascader>
          </div>
        </div>
        <div class="addBag" @click="isCrossAnalyse=false"><i class="el-icon-circle-plus-outline"></i><span> 新建数据包</span>
        </div>
      </div>
      <div class="switchItem">
        <div class="switch" :class="{ switchSelected: !isCrossAnalyse}" @click="isCrossAnalyse=false">答题统计</div>
        <div class="switch" :class="{ switchSelected: isCrossAnalyse}" @click="isCrossAnalyse=true">交叉分析</div>
      </div>
    </div>
    <div class="answer" v-if="!isCrossAnalyse">
      <div class="filter">
        <img v-if="isFilter" class="filterIcon"
          src="https://dm.static.elab-plus.com/diaoyanbao/%E5%8F%96%E6%B6%88%E7%AD%9B%E9%80%89%E6%8C%89%E9%92%AE@2x.png"
          alt="" @click="isFilter=false">
        <img v-if="!isFilter" class="filterIcon"
          src="https://dm.static.elab-plus.com/diaoyanbao/%E7%AD%9B%E9%80%89%E6%8C%89%E9%92%AE@2x.png" alt=""
          @click="isFilter=true">
        <div class="rightFilter">
          <div class="rightFilterItem" :class="{ rightFilterItemSel: !isShowTable}" @click="isShowTable=false">图形</div>
          <div class="rightFilterItem" :class="{ rightFilterItemSel: isShowTable}" @click="isShowTable=true">表格</div>
        </div>
      </div>
      <div class="filterContent" v-if="isFilter">
        <div class="filterView">
          <div class="filterItem" v-for="(items, indexs) in filterList" :key="indexs">
            <div class="filterTitle"><span v-if="indexs==0">选择条件</span></div>
            <div class="filterAnswer">
              <el-cascader v-model="value[indexs]" :options="options" @change="handleChange(value[indexs],indexs)">
              </el-cascader>
            </div>
            <div class="filterReply" v-if="questionListSel[indexs]">
              <el-checkbox-group v-model="checkList[indexs]">
                <el-checkbox v-for="(item, index) in questionListSel[indexs].optionList" :label="item.content"
                  :key="index" @change="checked=>changequestionChild(checked,item, indexs)">
                </el-checkbox>
              </el-checkbox-group>
            </div>
            <div class="filterDel" @click="delFilter(indexs)"><i class="el-icon-delete"></i>
            </div>
          </div>
          <div class="addfilter" @click="addFilter">
            <img class="addfilterIcon"
              src="https://dm.static.elab-plus.com/diaoyanbao/%E6%B7%BB%E5%8A%A0%E6%9D%A1%E4%BB%B6%E6%8C%89%E9%92%AE@2x.png"
              alt="">
          </div>
          <div class="filterSave">
            <div class="saveLocation" @click="getAnswerData">筛选</div>
            <div class="saveOnLine" @click="saveOnLine">保存此筛选条件作为数据包</div>
          </div>
        </div>
        <div class="filterResult">已为您筛选出【{{filterStr}}】共{{answerData.answerAll}}人，此条件下的用户题目答题情况如下：</div>
      </div>
      <div class="result" v-if="isShowTable">
        <div class="resultItem" v-for="(item, index) in answerData.questionList" :key="index">
          <div class="resultTitle">题目{{index+1}}:{{item.content}}[{{item.chooseType == '1'? '单选':'多选'}}]</div>
          <div class="resultTable">
            <div class="tableHeader">
              <div class="option">选项</div>
              <div class="numbers">答题人数</div>
              <div class="percent">占该题总答题人数百分比</div>
            </div>
            <div class="tableRow" v-for="(optionItem, optionIndex) in item.optionList" :key="optionIndex">
              <div class="option">{{optionItem.content}}</div>
              <div class="numbers">{{optionItem.answerCount}}</div>
              <div class="percent">
                <el-progress :percentage="((optionItem.answerCount/item.answerTotal)*100).toFixed(0) || 0"
                  color="#4E5DFF" :stroke-width="8">
                </el-progress>
              </div>
            </div>
            <div class="tableRow">
              <div class="option">总计</div>
              <div class="numbers">{{item.answerTotal}}</div>
              <div class="percent">_ _</div>
            </div>
          </div>
        </div>
      </div>
      <div class="chart" v-if="!isShowTable">
        <div class="chartItem" v-for="(item, index) in chartData" :key="index">
          <div class="chartTitle">题目{{index+1}}:{{item.content}}[{{item.chooseType == '1'? '单选':'多选'}}]</div>
          <div class="chartData">
            <HistogramHorizontal :id="'c1'" :chartId="'c'+item.questionId" :chart-data="item.data">
            </HistogramHorizontal>
          </div>
        </div>
      </div>
    </div>
    <div v-if="isCrossAnalyse" class="crossAnalyse">
      <div class="crossFilter">
        <div class="xyFilter">
          <div><span class="crossFilterTitle">自变量 X</span><span
              class="crossFilterSubTitle">（一般为样本属性，例如性别，年龄等。限2题）</span></div>
          <div style="margin-top: 8px;" v-for="(items, indexs) in filterXList" :key="indexs">
            <el-cascader v-model="optionsXValue[indexs]" :options="optionsX"
              @change="handleChangeX(optionsXValue[indexs],indexs)">
            </el-cascader>
          </div>
          <div class="addfilter" @click="addfilterX" v-if="filterXList.length<2">
            <img class="addfilterIcon"
              src="https://dm.static.elab-plus.com/diaoyanbao/%E6%B7%BB%E5%8A%A0%E6%9D%A1%E4%BB%B6%E6%8C%89%E9%92%AE@2x.png"
              alt="">
          </div>
        </div>
        <div class="xyFilter" style="margin-left: 40px;">
          <div><span class="crossFilterTitle">因变量 Y</span><span class="crossFilterSubTitle">（您要分析的目标题目）</span></div>
          <div style="margin-top: 8px;" v-for="(items, indexs) in filterYList" :key="indexs">
            <el-cascader v-model="optionsYValue[indexs]" :options="optionsY"
              @change="handleChangeY(optionsYValue[indexs],indexs)">
            </el-cascader>
          </div>
          <div class="addfilter" @click="addfilterY">
            <img class="addfilterIcon"
              src="https://dm.static.elab-plus.com/diaoyanbao/%E6%B7%BB%E5%8A%A0%E6%9D%A1%E4%BB%B6%E6%8C%89%E9%92%AE@2x.png"
              alt="">
          </div>
        </div>
        <div class="analyse">
          <div class="startAnalyse" @click="getCrossAnalyse">开始分析</div>
          <div class="analyseTip">*不可选择同样的题目</div>
        </div>
      </div>
      <div class="crossAnalyseTable" v-for="(item, index) in crossAnalyse" :key="index">
        <div class="crossAnalyseTitle">题目{{index+1}}:</div>
        <div class="crossAnalyseChart">
          <HistogramHorizontals :id="'c2'" :chartId="'caaaaa'+index" :chart-data="item.data">
          </HistogramHorizontals>
        </div>
        <div class="table">
          <div class="caTable">
            <div class="headerRow" style="width: 100px;">X\Y</div>
            <div class="headerRow" v-for="(item1,index1) in item.table[0].title" :key="index1"
              :style="`width:${840/(item.table[0].title.length || 1)}px`">{{item1}}</div>
          </div>
          <div class="caTable" v-for="(items,indexs) in item.table" :key="indexs">
            <div class="tabkeRow" style="width: 100px;">{{items.name}}</div>
            <div class="tabkeRow" v-for="(item0,index0) in items.value" :key="index0"
              :style="`width:${840/(items.value.length || 1)}px`">{{item0}}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>