<template>
  <el-card shadow="never" class="aui-card--fill">
  <div>
    <el-form>
      <el-form-item label="乡镇" prop="outStreet" label-width="80px" v-if="$hasPermission('sys:epidemicreportuserinfo:townsSearch')">
        <el-select v-model="outStreet" placeholder="乡镇" @change="selectModel($event)" clearable>
          <el-option v-for="item in outStreetArr" :key="item.dictValue" :label="item.dictName" :value="item.dictValue" >
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div style="text-align: center" v-if="$hasPermission('sys:epidemicreportuserinfo:townsSearch')">
      <h2>{{ title }}人员出入情况</h2>
    </div>
    <div style="text-align: center" v-else>
      <h2>人员出入情况</h2>
    </div>
<!--    <div id="myChart" :style="{width: '1000px', height: '300px'}"></div>-->
    <chart ref="chart1" :style="{width: '1000px', height: '300px'}" :options="orgOptions" :auto-resize="true"></chart>
  </div>
  </el-card>
</template>

<script>
export default {
  name: "hellowEcharts",
  data() {
    return {
      title: "平阴县",
      outStreet:'',
      outStreetArr:[],
      barName:'',
      peopleNumber : [1,2,3],
      orgOptions:{}
    }
  },
  created: function () {
    this.getDailyTypeArrInfo()
    this.getPeopleNumber("");
  },
  mounted() {
    // this.drawLine();
    this.orgOptions = {
      tooltip: {},
      xAxis: {
        type: 'category',
        data: ["外地人数", "返乡人数", "现住外地人数"]
      },
      yAxis: {
        type: 'value'
      },
      series: [{
        data: [0, 0, 0],
        type: 'bar',
        name:"人员情况",
        label: {
          show: true,
          position: 'top',
          color: 'rgba(20, 101, 230, 1)'
        },
      }]
    }
  },
  methods: {
    // 获取乡镇下拉信息(传参：4代表查“街道”)
    getDailyTypeArrInfo () {
      this.$http.get(`sys/epidemicreportuserinfo/selectStreet/4`).then(({ data: res }) => {
        this.outStreetArr = res
      }).catch(() => {})
    },
    // 乡镇取值变化事件
    selectModel (event) {
      if (event == ''){
        this.title = '平阴县'
        this.barName = '平阴县'
        this.getPeopleNumber(event);
      }
      this.outStreetArr.find((item) => {
        if (item.dictValue === event) {
          this.title = item.dictName
          this.barName = item.dictName
          this.outStreet = item.dictValue
          this.getPeopleNumber(item.dictValue)
        }
      })
    },
    getPeopleNumber(item){
      if (item == ""){
        item =  0
      }
      this.$http.get(`select/getPeopleNumber/`+item).then(({ data: res }) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        this.orgOptions.series[0].data = res.data
      }).catch(() => {})
    }
  }
}
</script>

<style scoped>

</style>
