<template>
  <div class="modal" v-show="dangyuanCommittee">
    <section>
      <div class="dialog_header">
        <div class="close-icon" @click="closeDialog">
          <img src="@/assets/images/common/dialog-colse.png" alt="" />
        </div>
        <div class="title-container">
          <div class="title">{{ dialogTitle }}</div>
        </div>
      </div>
      <div class="dialog_body">
        <div class="content">
          <div class="main">
            <div class="wrap">
              <div class="content">
                <div class="content-top">
                  <div class="content-title">
                    <div>
                      <img
                        :src="require('@/assets/images/icon/dyfxDian.png')"
                      />
                    </div>
                    <div class="title-txt">党员年龄分析</div>
                  </div>
                  <div
                    id="chartBar"
                    style="
                      width: 485px;
                      height: 200px;
                      /* transform: translate(-50px, -50px); */
                    "
                  ></div>
                </div>
                <div class="content-bottom">
                  <div class="content-title">
                    <div>
                      <img
                        :src="require('@/assets/images/icon/dyfxDian.png')"
                      />
                    </div>
                    <div class="title-txt">各新村党员统计</div>
                  </div>
                  <div class="content-bottom-list">
                    <div
                      class="content-bottom-list-row"
                      v-for="item in dataList"
                      :key="item.label"
                    >
                      <div class="content-bottom-list-row-item">
                        {{ item.label }}
                      </div>
                      <div class="content-bottom-list-row-item">
                        <div class="content-bottom-list-row-item-jd" :style="`width:${getWidth(dataList,item.zrcNum)}%`"></div>
                        <div class="content-bottom-list-row-item-jd1"></div>
                      </div>
                      <div class="content-bottom-list-row-item">
                        {{ item.zrcNum }}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
export default {
  name: '',
  data () {
    return {
      dialogTitle: '党员分析',
      dataList: [
        {
          label: '上泊新村',
          zrcNum: 1265,
          wanggeNum: 26,
          dangyuanNum: 26,
          id: '1697533359860244481'
        },
        {
          label: '滨河村',
          zrcNum: 254,
          wanggeNum: 26,
          dangyuanNum: 26,
          id: '1704030137514287105'
        },
        {
          label: '湍湾新村',
          zrcNum: 525,
          wanggeNum: 26,
          dangyuanNum: 26,
          id: '1704036500462198786'
        },
        {
          label: '七级村',
          zrcNum: 825,
          wanggeNum: 26,
          dangyuanNum: 26,
          id: '1704313950756757506'
        },
        {
          label: '沽河村',
          zrcNum: 1896,
          wanggeNum: 26,
          dangyuanNum: 26,
          id: '1704324481563582466'
        },
        {
          label: '太祉庄村',
          zrcNum: 2896,
          wanggeNum: 26,
          dangyuanNum: 26,
          id: '1704327114084933633'
        },
        {
          label: '河流新村',
          zrcNum: 1125,
          wanggeNum: 26,
          dangyuanNum: 26,
          id: '1704331366425518081'
        },
        {
          label: '大坝新村',
          zrcNum: 2125,
          wanggeNum: 26,
          dangyuanNum: 26,
          id: '1704396342955696130'
        },
        {
          label: '双塔村',
          zrcNum: 1425,
          wanggeNum: 26,
          dangyuanNum: 26,
          id: '1704331366425518081'
        },
        {
          label: '移风村',
          zrcNum: 765,
          wanggeNum: 26,
          dangyuanNum: 26,
          id: '1704331366425518081'
        }
      ],
      loading: false
    }
  },
  computed: {
    ...mapGetters(['dangyuanCommittee'])
  },
  components: {},
  mounted () {
    this.$nextTick(() => {
      this.initChartBar()
    })
  },
  created () {},
  methods: {
    ...mapActions({
      showGlobalDialog: 'showGlobalDialog'
    }),
    initChartBar () {
      const myChart = this.$echarts.init(document.getElementById('chartBar'))
      var data = [100, 200, 150, 300, 250, 200, 150]

      var option = {
        tooltip: {},
        width: 420,
        xAxis: {
          type: 'category',
          data: [
            '20岁以下',
            '20-30岁',
            '30-40岁',
            '40-50岁',
            '50-60岁',
            '60-70岁',
            '70岁以上'
          ],
          axisLabel: {
            textStyle: {
              color: '#F59969' // 将x轴文字颜色设为红色
            }
          },
          axisLine: {
            lineStyle: {
              color: '#F59969'
            }
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            show: false,
            lineStyle: {
              color: '#F59969'
            }
          },
          splitNumber: 3,
          splitLine: {
            show: true,
            type: 'dashed',
            lineStyle: {
              type: 'dashed',
              color: '#F59969'
            }
          }
        },
        series: [
          {
            name: '人数',
            type: 'bar',
            data: data,
            barWidth: 20,
            label: {
              show: true,
              position: 'top',
              textStyle: {
                color: '#F59969' // 设置文字颜色为红色
              }
            },
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: 'rgba(254, 181, 52, 1)' // 起点颜色
                  },
                  {
                    offset: 1,
                    color: 'rgba(254, 181, 52, .1)' // 终点颜色
                  }
                ]),
                shadowColor: 'rgba(0, 0, 0, 0)',
                borderRadius: 4
              }
            },
            emphasis: {
              itemStyle: {
                // color: function (params) {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: 'rgba(223, 206, 157, 1)' // 起点颜色
                  },
                  {
                    offset: 1,
                    color: 'rgba(223, 206, 157, .1)' // 终点颜色
                  }
                ]),
                shadowColor: 'rgba(0, 0, 0, 0)',
                borderRadius: 4
              }
            } // 高亮时的样式
          }
        ]
      }

      myChart.setOption(option)
    },
    getWidth (arr, val) {
      let num = 0
      arr.forEach(item => {
        if (item.zrcNum > num) {
          num = item.zrcNum
        }
      })
      return val / num * 100 - 5
    },
    closeDialog () {
      this.showGlobalDialog('')
    }
  }
}
</script>

<style lang="scss" scoped>
.modal {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 150;

  section {
    @include flex(column);
    background: url("~@/assets/images/common/dialog-bg-red.png") no-repeat !important;
    background-size: 100% 100% !important;
    width: 585px;
    height: 748px;
    overflow: hidden;
    box-sizing: border-box;

    .dialog_header {
      position: relative;
      margin-bottom: 0px;

      .close-icon {
        width: 18px;
        height: 18px;
        position: absolute;
        top: 10px;
        right: 16px;
        cursor: pointer;
      }

      .title-container {
        align-items: center;
        background: url("~@/assets/images/common/dialog-header-red.png")
          no-repeat;
        background-size: 100% 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 60px;
        font-size: 26px;

        .title {
          font-family: zaozigongfang;
          letter-spacing: 2px;
          line-height: 50px;
          background-size: 100% 100%;
          display: flex;
          justify-content: center;
          height: 52px;
          font-size: 22px;
          color: #fff;
        }
      }
    }

    .dialog_body {
      position: relative;

      > .content {
        box-sizing: border-box;
        color: #fff;
        padding: 0px 24px 0 27px;

        .main {
          height: 688px;
          overflow-y: hidden;
          box-sizing: border-box;
          overflow-y: scroll;

          &::-webkit-scrollbar {
            width: 0px;
          }

          &::-webkit-scrollbar-track {
            border-radius: 10px;
            background: rgba(251, 233, 197, 1);
          }

          &::-webkit-scrollbar-thumb {
            border-radius: 10px;
            background: rgba(234, 201, 135, 1);
          }
        }
      }
    }
  }
}

.wrap {
  .content {
    padding: 0 17px;
    &-top {
      width: 480px;
      .content-title {
        padding-top: 18px;
        margin-bottom: -24px;
        width: 314px;
        display: flex;
        img {
          width: 18px;
          height: 18px;
          margin-top: 2px;
        }
        .title-txt {
          padding-left: 8px;
          height: 16px;
          font-family: PingFang SC;
          font-weight: 500;
          font-size: 16px;
          color: #ffffff;
        }
      }
    }
    &-bottom {
      .content-title {
        margin-top: -6px;
        width: 314px;
        display: flex;
        img {
          width: 18px;
          height: 18px;
          margin-top: 2px;
        }
        .title-txt {
          padding-left: 8px;
          height: 16px;
          font-family: PingFang SC;
          font-weight: 500;
          font-size: 16px;
          color: #ffffff;
        }
      }

      &-list {
        padding-top: 18px;
        &-row {
          display: flex;
          &-item {
          display: flex;
            &-jd {
              margin-top: 18px;
              height: 6px;
              background-image: linear-gradient(
                to right,
                rgba(255, 153, 81, 0.1) 0%,
                rgba(255, 153, 81, 0.9) 80px,
                rgba(255, 153, 81, 1) 100px,
                rgba(255, 197, 35, 1) 200px,
                rgba(255, 197, 35, 1) 400px
              );
            }
            &-jd1 {
              width: 4px;
              height: 14px;
              margin-top: 14px;
              // background: #fff;
              transform: rotate(45deg);
              margin-left: -2px;
              background-image: radial-gradient(circle at center, rgba(255, 255, 255, 1), rgba(255, 255, 255, .1));
              scale: 0.9;
            }
          }
          &-item:nth-child(1) {
            width: 73px;
            font-weight: 500;
            font-size: 16px;
            color: #fbe9c5;
            line-height: 42px;
          }
          &-item:nth-child(2) {
            height: 24px;
            width: calc(100% - 113px);
          }
          &-item:nth-child(3) {
            width: 40px;
            font-weight: 500;
            font-size: 16px;
            color: #ffffff;
            line-height: 42px;
            text-align: right;
          }
        }
      }
    }
    #chartBar {
      scale: 1.05;
    }
  }
}
</style>
