<template>
  <div class="home">
    <el-tabs v-model="activeName" type="card">
      <el-tab-pane label="用户行为数据统计" name="behavior">
        <div style="height: 400px;">
          <Echart :options="options" id="可选" height='100%' width="100%" v-if="options"></Echart>
        </div>

        <el-card class="box-card" style="margin-top: 20px;">
          <div slot="header" class="clearfix">
            <div style="float: left;font-weight: bold;">精品展数据统计</div>
            <el-radio-group v-model="radio" style="float: right;">
              <el-radio :label="1">精品展</el-radio>
              <el-radio :label="2">展览</el-radio>
              <el-radio :label="3">文物</el-radio>
            </el-radio-group>
          </div>
          <TablePage :data="list.records" :tableTitle="tableTitle">
          </TablePage>
        </el-card>
      </el-tab-pane>
      <el-tab-pane label="展览数据统计" name="amount">
        <h3>精品展地区分布图</h3>
        <el-card>
          精品展地区分布
        </el-card>
        <h3>展览数据</h3>
        <el-row :gutter="16">
          <el-col :span="12">
            <el-card>
              <div slot="header" style="display: flex;justify-content: space-between; align-items: center;">
                <div>展览分布统计
                </div>
                <el-radio-group v-model="radio" style="float: right;">
                  <el-radio :label="1">按地区</el-radio>
                  <el-radio :label="2">按博物馆</el-radio>
                </el-radio-group>
              </div>
              展览分布统计饼图
            </el-card>
          </el-col>
          <el-col :span="12">
            <el-card>
              <div slot="header" style="display: flex;justify-content: space-between; align-items: center;">
                <div>展览类别统计</div>
                <el-radio-group v-model="radio" style="float: right;">
                  <el-radio :label="1">按类型</el-radio>
                  <!-- <el-radio :label="2">按</el-radio> -->
                </el-radio-group>
              </div>
              展览类别统计饼图
            </el-card>
          </el-col>
        </el-row>
        <h3>文物数据</h3>
        <el-row :gutter="16">
          <el-col :span="12">
            <el-card>
              <div slot="header" style="display: flex;justify-content: space-between; align-items: center;">
                <div>文物分布统计
                </div>
                <el-radio-group v-model="radio" style="float: right;">
                  <el-radio :label="1">按地区</el-radio>
                  <el-radio :label="2">按博物馆</el-radio>
                </el-radio-group>
              </div>
              文物分布统计饼图
            </el-card>
          </el-col>
          <el-col :span="12">
            <el-card>
              <div slot="header" style="display: flex;justify-content: space-between; align-items: center;">
                <div>文物类别统计</div>
                <el-radio-group v-model="radio" style="float: right;">
                  <el-radio :label="1">按类型</el-radio>
                  <el-radio :label="2">按年代</el-radio>
                </el-radio-group>
              </div>
              文物类别统计饼图
            </el-card>
          </el-col>
        </el-row>

      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import TablePage from "@/components/Table/TablePage.vue";
import { title } from "./config";
import Echart from '@/components/Echarts' //引入echatrs组件
export default {
  name: 'Home',
  computed: {
    ...mapGetters([
      'name'
    ]),
    tableTitle() {
      return title;
    },
  },
  components: {
    TablePage, Echart,
  },
  data() {
    return {
      activeName: 'behavior',
      radio: 1,
      list: {
        records: [
          {
            name: '神秘贵州',
            unit: '贵州省地质博物馆',
            regionName: '贵阳市',
            dj: 100,
            dz: 8,
            sc: 7
          },
          {
            name: '夜郎的疑问',
            unit: '黔西南州博物馆',
            regionName: '黔西南州',
            dj: 99,
            dz: 6,
            sc: 7
          },
          {
            name: '四渡赤水',
            unit: '遵义博物馆',
            regionName: '遵义市',
            dj: 96,
            dz: 4,
            sc: 9
          }
        ]
      },
      options: null
    }
  },
  mounted() {
    this.getBehaviorData()
  },
  methods: {
    getBehaviorData() {
      var pie_color = ['#00A5B9', '#FFD71D', '#F76464', '#56A3FF', '#32D790', '#F4B561', '#7080DB', '#DF7A90',
        '#3CC4EF', '#EF7F3C', '#EF3C81', '#0DBF8C', '#2F73C0', '#C55E18', '#C899FF', '#C6D727',
        '#FF688F', '#87A0DC', '#00D9F7', '#A24EED'
      ];
      var legendList = [];
      var pieData = [{
        name: 'A 农、林、牧、渔业',
        value: 290
      }, {
        name: 'B 采矿业',
        value: 40
      }, {
        name: 'C 制造业',
        value: 320
      }, {
        name: 'D 电力、热力、燃气及水生产和供应业',
        value: 540
      }, {
        name: 'E 建筑业',
        value: 25
      }, {
        name: 'F 批发和零售业',
        value: 90
      }, {
        name: 'G 交通运输、仓储和邮政业',
        value: 450
      }, {
        name: 'H 住宿和餐饮业',
        value: 120
      }, {
        name: 'I 信息传输、软件和信息技术服务业',
        value: 288
      }, {
        name: 'J 金融业',
        value: 344
      }, {
        name: 'K 房地产业',
        value: 571
      }, {
        name: 'L 租赁和商务服务业',
        value: 842
      }, {
        name: 'M 科学研究和技术服务业',
        value: 120
      }, {
        name: 'N 水利、环境和公共设施管理业',
        value: 430
      }, {
        name: 'O 居民服务、修理和其他服务业',
        value: 403
      }, {
        name: 'Q 卫生和社会工作',
        value: 600
      }, {
        name: 'R 文化、体育和娱乐业',
        value: 787
      }, {
        name: 'S 公共管理、社会保障和社会组织',
        value: 91
      }, {
        name: 'T 国际组织',
        value: 34
      }];
      for (var i = 0; i < pieData.length; i++) {
        legendList.push(pieData[i].name);
      }
      this.options = {
        color: pie_color,
        title: {
          show: false,
          text: '',
          textStyle: {
            color: '#333333',
            fontSize: 16,
          },
        },
        grid: {
          show: false,
          left: '2%',
          right: '50%',
          bottom: 0,
          top: '2%',
          containLabel: true
        },
        legend: {
          bottom: '4%',
          right: '10%',
          orient: 'vertical',
          width: 540,
          height: 240,
          padding: [14, 20],
          backgroundColor: 'rgba(236,246,255,0.30)',
          borderWidth: 1,
          borderColor: '#E7F2FB',
          borderRadius: 4,
          icon: 'circle',
          itemWidth: 8,
          itemHeight: 8,
          textStyle: {
            color: '#333333',
            fontSize: 12,
          },
          data: legendList,
        },
        xAxis: {
          type: 'value',
          gridIndex: 0,
          name: '家',
          nameTextStyle: {
            color: '#9B9B9B',
            fontSize: 14
          },
          axisLabel: {
            color: '#727272',
            fontSize: 14,
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#333333',
              opacity: 0.35,
            }
          },
          axisTick: {
            show: true,
            inside: true,
            lineStyle: {
              color: '#333333',
              opacity: 0.35,
            }
          },
          splitLine: {
            show: false
          }
        },
        yAxis: {
          type: 'category',
          gridIndex: 0,
          data: legendList,
          inverse: true,
          axisLabel: {
            color: '#727272',
            fontSize: 14,
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#333333',
              opacity: 0.35,
            }
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false
          }
        },
        series: [{
          name: '柱状图',
          type: 'bar',
          xAxisIndex: 0,
          yAxisIndex: 0,
          data: pieData,
          label: {
            show: true,
            position: 'right',
            color: '#4A4A4A',
            fontSize: 14,
          },
          barWidth: 20,
          itemStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x1: 0,
              y1: 1,
              colorStops: [{
                offset: 0,
                color: '#FF9A91'
              }, {
                offset: 1,
                color: '#F8B44F'
              }],
              global: false
            },
            barBorderRadius: [0, 10, 10, 0]
          }
        }, {
          type: 'pie',
          radius: ['10%', '36%'],
          center: ['75%', '30%'],
          data: pieData,
          hoverAnimation: false,
          label: {
            show: true,
            position: 'outside',
            formatter: '{b}：{d}%',

          },
          zlevel: 2
        }, {
          name: '外圈',
          type: 'pie',
          radius: ['36%', '37.5%'],
          center: ['75%', '30%'],
          hoverAnimation: false,
          itemStyle: {
            color: 'rgb(21 132 214 / 0.1)',
          },
          emphasis: {
            itemStyle: {
              color: 'rgb(21 132 214 / 0.1)'
            }
          },
          labelLine: {
            show: false
          },
          data: [{
            value: 1
          }],
          zlevel: 1
        }, {
          name: '内圈',
          type: 'pie',
          radius: ['8.5%', '10%'],
          center: ['75%', '30%'],
          hoverAnimation: false,
          itemStyle: {
            color: 'rgb(21 132 214 / 0.1)',
          },
          emphasis: {
            itemStyle: {
              color: 'rgb(21 132 214 / 0.1)'
            }
          },
          labelLine: {
            show: false
          },
          data: [{
            value: 1
          }],
          zlevel: 1
        }]
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.home {
  padding: 16px;
}
</style>
