<template>
    <div class="p-15">
        <h5 class="chart-title c-primary"><slot name="title"></slot></h5>
        <div :ref="refName" class="sexChart"></div>
        <div class="chart-tip m-t-20 m-l-15">
            <div class="c-primary text-left">
                <slot name="subtitle"></slot>
            </div>
            <div class="c-white text-left">
                <slot name="content"></slot>
            </div>
        </div>
    </div>
</template>
<script>
let echarts = require("echarts/lib/echarts");
require("echarts/lib/chart/pictorialBar");
import customed from '../../assets/js/customed.json';
echarts.registerTheme('customed',customed)
const refName = Math.random().toString(36).substr(2)
const style ={
  color:'#616161',
  fontSize:14
}
import {
  // boyColor,
  // girlColor,
  girlpathSymbols,
  boypathSymbols
} from "../../assets/js/chart-color.js";

let boyCount = 10,
  girlCount = 10;
export default {
  name: "sexRatio",
  data() {
    return {
      refName: refName,
      option: {
        legend: {
          show: false
        },
        grid: [
          {
            containLabel: true,
            top: 0,
            left: 15,
            right: 110,
            bottom: 0
          }
        ],
        yAxis: {
          data: ["男", "女"],
          splitLine: { show: false },
          axisTick: { show: false },
          axisLine: { show: false },
          axisLabel: { show: false }
        },
        xAxis: {
          max: 100,
          gridIndex: 0,
          type: "value",
          splitLine: { show: false },
          axisLabel: { show: false },
          axisTick: { show: false },
          axisLine: { show: false }
        },
        series: [
          {
            type: "pictorialBar",
            symbolClip: true,
            symbolRepeat: 8,
            symbolBoundingData: 100,
            symbolSize: ["30%", "75%"],
            label:{
              show: true,
              position: "right",
              // color: "#616161",
              distance:20
            },
            data: [
              {
                label: {
                  normal: {
                    color: '#616161',
                    formatter: [
                      "{sunny|}",
                      "{num|" + boyCount + "}{per|%}"
                    ].join("\n"),
                    rich: {
                      sunny: {
                        backgroundColor: {
                          image: this.boyImg
                        },
                        height: 86,
                        width: 86,
                        align: "center"
                      },
                      num: {
                        fontSize: 18,
                        lineHeight:"30",
                        color:'#616161',
                        align: "center"
                      },
                      per: {
                        fontSize: 16,
                        color:'#616161',
                        lineHeight: "30",
                      }
                    }
                  }
                },
                value: 100,
                symbol: boypathSymbols,
                itemStyle: {
                  normal: {
                    // color: boyColor
                  }
                }
              },
              {
                label: {
                  normal: {
                    formatter: [
                      "{sunny|}",
                      "{num|" + girlCount + "}{per|%}"
                    ].join("\n"),
                    rich: {
                      sunny: {
                        backgroundColor: {
                          image: this.girlImg
                        },
                        height: 86,
                        width: 86,
                        align: "center"
                      },
                      num: {
                        fontSize: 18,
                        color:'#616161',
                        align: "center",
                        lineHeight:"30",
                        verticalAlign: "bottom"
                      },
                      per: {
                        fontSize: 16,
                        color:'#616161',
                        lineHeight: "30",
                        verticalAlign: "bottom"
                      }
                    }
                  }
                },
                value: 100,
                symbol: girlpathSymbols,
                itemStyle: {
                  normal: {
                    color: this.girlColor
                  }
                }
              }
            ],
            z: 10
          },
          {
            type: "pictorialBar",
            symbolRepeat: 8,
            symbolBoundingData: 100,
            symbolSize: ["30%", "75%"],
            itemStyle: {
              normal: {
                color: "#dadee1"
              }
            },
            emphasis: {
              itemStyle:{
                color: "#dadee1"
              }
            },
            data: [
              {
                value: 100,
                symbol: boypathSymbols
              },
              {
                value: 100,
                symbol: girlpathSymbols
              }
            ]
          }
        ]
      }
    };
  },
  props: {
    datas: {
      type: Object,
      default: function() {
        return {};
      }
    },
    boyImg: {
      type: String
    },
    girlImg: {
      type: String
    },
    girlColor: String
  },
  methods: {
    loadData() {
      this.mychart.setOption({
        textStyle:style,
        legend: {
          show: false
        },
        grid: [
          {
            containLabel: true,
            top: 0,
            left: 15,
            right: 110,
            bottom: 0
          }
        ],
        yAxis: {
          data: ["男", "女"],
          splitLine: { show: false },
          axisTick: { show: false },
          axisLine: { show: false },
          axisLabel: { show: false }
        },
        xAxis: {
          max: 100,
          gridIndex: 0,
          type: "value",
          splitLine: { show: false },
          axisLabel: { show: false },
          axisTick: { show: false },
          axisLine: { show: false }
        },
        series: [
          {
            type: "pictorialBar",
            symbolClip: true,
            symbolRepeat: 8,
            symbolBoundingData: 100,
            symbolSize: ["30%", "75%"],
            label:{
              show: true,
              position: "right",
              color: "#616161",
              distance:20
            },
            data: [
              {
                label: {
                  normal: {
                    formatter: [
                      "{sunny|}",
                      "{num|" + Math.round(this.datas["男"] * 100) / 100 + "}{per|%}"
                    ].join("\n"),
                    rich: {
                      sunny: {
                        backgroundColor: {
                          image: this.boyImg
                        },
                        height: 86,
                        width: 86,
                        align: "center"
                      },
                      num: {
                        fontSize: 18,
                        lineHeight:"30",
                        color:'#616161',
                        align: "center"
                      },
                      per: {
                        fontSize: 16,
                        color:'#616161',
                        lineHeight: "30",
                      }
                    }
                  }
                },
                value: this.datas['男'],
                symbol: boypathSymbols,
                itemStyle: {
                  normal: {
                    // color: boyColor
                  }
                }
              },
              {
                label: {
                  normal: {
                    formatter: [
                      "{sunny|}",
                      "{num|" + Math.round(this.datas["女"] * 100) / 100 + "}{per|%}"
                    ].join("\n"),
                    rich: {
                      sunny: {
                        backgroundColor: {
                          image: this.girlImg
                        },
                        height: 86,
                        width: 86,
                        align: "center"
                      },
                      num: {
                        fontSize: 18,
                        color:'#616161',
                        align: "center",
                        lineHeight:"30",
                        verticalAlign: "bottom"
                      },
                      per: {
                        fontSize: 16,
                        color:'#616161',
                        lineHeight: "30",
                        verticalAlign: "bottom"
                      }
                    }
                  }
                },
                value: this.datas["女"],
                symbol: girlpathSymbols,
                itemStyle: {
                  normal: {
                    color: this.girlColor
                  }
                }
              }
            ],
            z: 10
          },
          {
            type: "pictorialBar",
            symbolRepeat: 8,
            symbolBoundingData: 100,
            symbolSize: ["30%", "75%"],
            itemStyle: {
              normal: {
                color: "#dadee1"
              }
            },
            emphasis: {
              itemStyle:{
                color: "#dadee1"
              }
            },
            data: [
              {
                value: 100,
                symbol: boypathSymbols
              },
              {
                value: 100,
                symbol: girlpathSymbols
              }
            ]
          }
        ]
      });
    }
  },
  updated() {
    this.loadData();
  },
  mounted() {
    this.mychart = echarts.init(this.$refs[refName],'customed');
    this.loadData();
  },
  watch: {
    datas: {
      handler(val, oldVal) {
        this.loadData();
      },
      deep: true
    }
  }
};
</script>
<style lang="scss" scoped>
.sexChart {
  width: 100%;
  height: 100%;
}
</style>
