<template>
  <div id="service-1">
    <el-row>
      <el-col :span="24" class="main">
        <el-col :span="24" class="one">
          <el-col :span="24" class="one_1">
            服务对象
            <el-button type="primary" size="mini" @click="back()" v-if="service_show == '2'" class="btn">返回</el-button>
            <el-input placeholder="请输入服务对象名称" v-model="service_name" class="search_name" size="mini" @input="search">
              <el-button slot="append" icon="el-icon-search" @click="search()"></el-button>
            </el-input>
          </el-col>
          <el-col :span="24" class="one_2">
            <div id="service1" class="canvas" style="width: 100%; height: 17vw"></div>
          </el-col>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { EventBus } from '../eventBus';
const { service_type } = require('@common/src/layout/deploy/dict');
// 引入基本模板
let echarts = require('echarts/lib/echarts');
// 引入柱状图组件
require('echarts/lib/chart/bar');
// 引入提示框和title组件
require('echarts/lib/component/tooltip');
require('echarts/lib/component/title');
echarts = require('echarts');
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions: baoan_statis } = createNamespacedHelpers('baoan_statis');
export default {
  name: 'service-1',
  props: {
    typeInfo: { type: Object },
    companyInfo: { type: Object },
    service_show: { type: String, default: () => '1' },
  },
  components: {},
  data: function () {
    return {
      nameList: [],
      // 服务对象类型
      service_typeList: service_type,
      service_name: '',
      //转起来的变量
      chart: undefined,
      timer: undefined,
      viewNumber: 0,
    };
  },
  created() {
    this.search();
  },
  mounted() {
    this.connectBus();
  },
  methods: {
    ...baoan_statis(['fiveQuery']),
    async search({ skip = 0, limit = 10, purpose, company_id, ...info } = {}) {
      const query = {};
      // 服务类型
      if (this.service_name) query.name = this.service_name;
      // 企业类型
      if (purpose) query.purpose = purpose;
      // 企业id
      if (company_id) query.company_id = company_id;
      let res = await this.fiveQuery(query);
      if (this.$checkRes(res)) {
        let data = res.data.list.map((i) => ({ value: i.num, name: i.name, id: i.id }));
        this.$set(this, `nameList`, data);
        if (!this.chart) this.init();
        else this.changeData();
      }
    },
    // 更换chart数据
    changeData() {
      if (!this.chart) return;
      let option = this.getOption(this.nameList);
      this.chart.setOption(option);
    },
    // 初始化chart
    init() {
      if (this.nameList) {
        var chartDom = document.getElementById('service1');
        var myChart = echarts.init(chartDom);
        let option = this.getOption(this.nameList);
        option && myChart.setOption(option);
        myChart.on('click', (params) => {
          // this.$emit('toService', params.data);
          EventBus.$emit('toService', params.data);
        });
        this.chart = myChart;
      }
    },
    // 组织chart的数据函数
    getOption(data) {
      let option;
      option = {
        tooltip: { show: false },
        legend: { show: false },
        tooltip: {
          trigger: 'item',
          backgroundColor: 'rgba(0,0,0,0.7)',
          textStyle: { color: '#ffffff', fontFamily: 'sans-serif', fontSize: 12 },
          position: 'bottom',
        },
        series: [
          {
            name: '服务对象',
            type: 'pie',
            radius: [10, 70],
            center: ['50%', '50%'],
            label: { color: 'rgba(255,255,255)', fontSize: '12', show: false },
            data,
          },
        ],
      };
      return option;
    },
    // 返回
    back() {
      this.$emit('back');
    },
    // 建立总线监听函数
    connectBus() {
      EventBus.$on('toLinkage', (data) => {
        this.search(data);
      });
      EventBus.$on('backToInit', (data) => {
        this.search(data);
      });
    },
  },
  beforeDestroy() {
    if (this.chart) {
      this.chart.dispose();
      this.chart = undefined;
    }
  },
  computed: {
    ...mapState(['user']),
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
  watch: {
    // typeInfo: {
    //   deep: true,
    //   immediate: true,
    //   handler(val, oval) {
    //     let toSearch = false;
    //     if (!oval) toSearch = true;
    //     else {
    //       const okeys = Object.keys(oval);
    //       const keys = Object.keys(val);
    //       if (okeys.length == 0 && keys.length > 0) toSearch = true;
    //       else if (okeys.length > 0 && keys.length === 0) toSearch = true;
    //     }
    //     if (toSearch) this.search({ purpose: val.purpose_id });
    //   },
    // },
    // companyInfo: {
    //   deep: true,
    //   immediate: true,
    //   handler(val, oval) {
    //     let toSearch = false;
    //     if (!oval) toSearch = true;
    //     else {
    //       const okeys = Object.keys(oval);
    //       const keys = Object.keys(val);
    //       if (okeys.length == 0 && keys.length > 0) toSearch = true;
    //       else if (okeys.length > 0 && keys.length === 0) toSearch = true;
    //       else toSearch = !_.isEqual(_.get(val, 'id'), _.get(oval, 'id'));
    //     }
    //     if (toSearch) this.search({ company_id: val.id });
    //   },
    // },
  },
};
</script>

<style lang="less" scoped>
.main {
  .one {
    .one_1 {
      color: #000;
      font-size: 0.9375vw;
      font-weight: 700;
      padding-left: 0.52vw;
      font-size: 2vmin;
      font-weight: 700;
      position: relative;
      border-bottom: 2px solid #2441a9;
      line-height: 2.96875vw;
      text-align: left;
      .btn {
        color: #31dafb;
        background-color: transparent;
        margin: 0 0 0 5px;
      }
      .btn:hover {
        color: #ffffff;
      }
      .search_name {
        width: 60%;
        position: absolute;
        right: 0;
        top: 26px;
        /deep/.el-input__inner {
          background-color: transparent;
          color: #ffffff;
        }
        /deep/.el-input-group__append {
          background-color: transparent;
          color: #ffffff;
        }
      }
    }
    .one_1:before {
      background: #2441a9;
      border-radius: 50%;
      content: '';
      width: 6px;
      height: 6px;
      position: absolute;
      right: -2px;
      bottom: -4px;
      z-index: 1;
      visibility: visible;
    }
    .one_2 {
      background: #2441a9;
    }
  }
}
.canvas {
  /deep/canvas {
    width: 19vw !important;
    height: 17vw !important;
  }
}
</style>
