<template>
    <div class="analysis">
        <div v-if="list.length && list.length !== 0">
            <div v-for="(item, index) in list" :key="index">
                <div class="content">
                    <div class="title">
                        <span style="font-size: 16px; font-weight: bold;">Q{{ index + 1 }} ：{{ item.label }}（{{ item.type }}）</span>

                        <!-- <div>
                            <span>图表类型：</span>
                            <el-select v-model="item.chartType" placeholder="请选择">
                                <el-option
                                    v-for="subItem in options"
                                    :key="subItem.value"
                                    :label="subItem.label"
                                    :value="subItem.value"
                                />
                            </el-select>
                        </div> -->
                    </div>
                    <!-- <line-chart
                        class="chart"
                        :chart-option="getCharData(item)"
                        :width="'90vw'"
                    /> -->
                    <div v-if="computedCount(item.type)" class="cell-type">
                        <span>共收集 {{ item.detail.collectionTotal }} 条，</span>
                        <span>有效 {{ item.detail.validTotal }} 条</span>
                        <span v-if="item.type === 'NUMBER_INPUT'">，总计 {{ item.detail.sumTotal }} </span>
                        <span v-if="item.type === 'SWITCH'">，开 {{ item.detail.openTotal }} 条，关 {{ item.detail.closedTotal }} 条</span>
                    </div>
                    
                    <div v-else-if="item.type === 'RADIO' || item.type === 'CHECKBOX' || item.type === 'SELECT'" class="cell-wrapper">
                        <div v-for="(n, i) in item.detail.options" :key="i" class="cell">
                            <div class="cell-label">{{ n.label }}</div>
                            <div class="cell-value">
                                <div class="cell-progress">
                                    <el-progress :stroke-width="20" :show-text="false" :percentage="computedPercent(n.currentCount, item.detail.totalCount)" />
                                </div>
                                <div class="cell-percent">
                                    {{ computedPercent(n.currentCount, item.detail.totalCount).toFixed(2) }}%
                                </div>
                                <div class="cell-num">{{ n.currentCount }}次</div>
                            </div>
                        </div>
                    </div>
                </div>
                <el-divider />
            </div>
        </div>
        <data-empty v-else style="padding: 20px" desc="暂无数据分析" />
    </div>
</template>

<script>
import LineChart from '@/components/echarts/LineChart'
export default {
    components: {
        LineChart
    },
    data() {
        return {
            barChartOptionData: {
                tooltip: {
                    trigger: 'axis',
                    backgroundColor: 'rgba(255,255,255,0.8)', // 通过设置rgba调节背景颜色与透明度
                    color: 'black',
                    borderWidth: '1',
                    borderColor: 'rgb(156,209,255)',
                    textStyle: {
                        color: 'black'
                    },
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                        axisTick: {
                            alignWithLabel: true
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '数量',
                        type: 'line',
                        barWidth: '40%',
                        data: [10, 52, 200, 334, 390, 330, 220]
                    }
                ]
            },
            list: [],
            options: [
                {
                    value: 'pie',
                    label: '饼图'
                },
                /* {
          value: "ring",
          label: "环形图",
        }, */
                {
                    value: 'bar',
                    label: '柱状图'
                },
                {
                    value: 'line',
                    label: '折线图'
                }
            ]
        }
    },
    mounted() {
        this.getData()
    },
    methods: {
        getData() {
            // `${process.env.VUE_APP_API_ROOT_TDUCK}/user/project/report/analysis`
            // params: { projectKey: this.$route.query.key }
            this.$api
                .post('/data/aggregator/questionnaire/analysisreport', {
                    projectKey: this.$route.query.key
                })
                .then(res => {
                    this.list = res.data
                })
        },
        getCharData(data) {
            const config = {
                tooltip: {
                    backgroundColor: 'rgba(255,255,255,0.8)', // 通过设置rgba调节背景颜色与透明度
                    color: 'black',
                    borderWidth: '1',
                    borderColor: 'rgb(156,209,255)',
                    textStyle: {
                        color: 'black'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        axisTick: {
                            alignWithLabel: true
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '数量',
                        type: 'pie',
                        barWidth: '40%'
                    }
                ]
            }
            if (['bar', 'line'].includes(data.chartType)) {
                config.tooltip.axisPointer = {
                    type: 'line'
                }
                config.tooltip.trigger = 'axis'
                config.xAxis[0].data = data.fieldName
                config.series[0].data = data.data
                config.series[0].type = data.chartType
            } else {
                // 环形图暂时不用   无法切换到饼图
                /* if ("ring" === data.chartType) {
          config.series[0].radius = ["40%", "70%"];
          
          config.series[0].emphasis = {
                label: {
                    show: true,
                    fontSize: '25',
                    fontWeight: 'bold'
                }
            }
        }else{
          delete config.series[0].radius
          delete config.series[0].label
        } */
                config.series[0].data = []
                Object.keys(data.map).forEach(key => {
                    config.series[0].data.push({ name: key, value: data.map[key] })
                })
                // config.series[0].data = data.map
            }
            return config
        },
        computedCount(type) {
            const arr = ['PROVINCE_CITY', 'NUMBER_INPUT', 'SWITCH', 'INPUT', 'TEXTAREA', 'INPUT_MAP', 'TIME', 'DATE_RANGE', 'DATE', 'TIME_RANGE']
            return arr.includes(type)
        },
        computedPercent(num, count) {
            return ((num * 100) / count)
        }
    }
}
</script>

<style lang="scss" scoped>
.analysis {
  width: 100%;
  // padding: 20px;
  .content {
    padding: 20px;
    width: 100%;
    .title {
      font-size: 14px;
      // padding: 0 30px;
      height: 54px;
      line-height: 54px;
      width: 100%;
      display: flex;
      justify-content: space-between;
      .select {
        float: right;
      }
    }
  }
}
</style>

<style lang="scss" scoped>
.cell-type {
  padding-left: 10px;
  font-size: 14px;
}
.cell-wrapper {
  width: 100%;
  border: 1px solid #eee;
  .cell, .cell-value {
    widows: 100%;
    display: flex;
    align-items: center;
  }
  .cell {
    justify-content: space-between;
    padding: 10px 0;
    font-size: 14px;
    border-bottom: 1px solid #eee;
    .cell-label {
      width: 60%;
      box-sizing: border-box;
      padding-left: 10px;

    }
    .cell-value {
      width: 40%;
      .cell-progress {
        // flex: 1;
        width: 180px;
      }
      .cell-percent {
        margin-left: 10px;
      }
      .cell-num {
        width: 40%;
        flex-shrink: 0;
        text-align: center;
      }
    }
  }
  .cell:last-child {
    border-bottom: 0;
  }
}
</style>

