<template>
  <div>
    <el-card class="box-card" v-for="(item,index) in showData" :key="index">
      <div slot="header" class="clearfix">
        <span v-text="item.label" class="box-card-item__title"></span>
      </div>
      <div class="content-item">
        <div v-if="item.showStyle === 'chart'">
          <echarts :options="item.chartOptions" width="975px" height="300px"></echarts>
          <div class="chart-datalist">
            <table class="table-chartdata">
              <thead>
                <tr><th>选项</th><th>答复情况</th></tr>
              </thead>
              <tbody>
                <tr v-for="(option,idx) in item.values" :key="idx">
                  <td v-text="option.name"></td>
                  <td v-text="option.value"></td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <div v-else>
          <ul class="ul-data-list">
            <li v-for="(val, idx) in item.values" :key="idx">
              <span v-html="val.value"></span>
              <span class="view-detail"><router-link :to="'/plugins/customForm/customFormPreview/' + val.dataID"><i class="fa fa-eye"></i></router-link></span>
            </li>
          </ul>
        </div>

      </div>
    </el-card>

  </div>
</template>
<script>
import _ from 'lodash'
import Echarts from '@src/components/Echarts.vue'
var totalCount = 0
export default {
  components: {
    echarts: Echarts
  },
  props: {
    model: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      formDatas: {}
    }
  },
  computed: {
    showData() {
      let data = this.formDatas.data
      return _.filter(data, (item) => { return item.showFlag === 'Y' })
    }
  },
  created() {
    this.getFormData()
  },
  methods: {
    async getFormData() {
      let res = await axios.get(`/ui/customforms/${this.model.ID}/datas/reportdata`)
      if (res.data.status === 1) {
        let data = res.data.data.data
        totalCount = res.data.data.total
        for (var i = 0; i < data.length; i++) {
          var dataItem = data[i]
          if (dataItem.showStyle === 'chart') {
            let chartData = buildPieChart(dataItem)
            dataItem.chartOptions = chartData
            data[i] = dataItem
          }
        }
        let formData = {
          data,
          total: res.data.data.total
        }

        this.formDatas = formData
      }
    }
  }
}
var buildPieChart = function(dataItem) {
  let names = dataItem.values.map(item => item.name)
  return {
    title: {
      text: dataItem.label,
      subtext: '答题人数：' + totalCount,
      x: 'center'
    },
    tooltip: {
      trigger: 'item',
      formatter: '{b} : {c} ({d}%)'
    },
    toolbox: {
      right: 20,
      feature: {
        saveAsImage: {
          backgroundColor: '#ffffff'
        }
      }
    },
    legend: {
      orient: 'vertical',
      left: 'left',
      data: names
    },
    series: [
      {
        name: '',
        type: 'pie',
        radius: '55%',
        center: ['50%', '60%'],
        data: dataItem.values,
        itemStyle: {
          emphasis: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  }
}

/*
  [{
    label:"dsdfjalskdfjaskdf",
    show: "datatable",
    values:[{dataID:23945829345,value:"sdfasdfasdf",widgetType: 'xxxxx'}]
  },{
    label: "lkweoiufslkdfjsdf",
    show:"chart",
    values:[{text:'xxxx',value:94384},{text:'dddd',value:3434}]
  }]
  */
</script>
<style scoped>
  .box-card-item__title{
    font-size: 15px;
  }
  .chart-datalist{
    padding: 0 30px;
  }
  .table-chartdata{
    width:100%;
    border-collapse: collapse;
    border-spacing: 0;
  }
  .table-chartdata,.table-chartdata td,.table-chartdata th{
    border:solid 1px #EBEEF5
  }
  .table-chartdata td,.table-chartdata th{
    padding:3px 10px
  }

  .ul-data-list {
    list-style:none;
    padding: 0;

  }
  .ul-data-list li{
    list-style: none;
    padding-left: 7px;
    position: relative;
    line-height:32px;
    border-bottom:solid 1px #EBEEF5;
  }
  .ul-data-list span.view-detail{
    position:absolute;
    right:5px;
    top: 0;
    display:none;
  }
  .ul-data-list li:hover{
    background-color:#F7F7F7;
  }
  .ul-data-list li:hover span.view-detail{
    display:block;
  }

</style>
