<template>
  <div>
    <div>
      <Form
        :model="formInline"
        ref="form1"
        label-position="left"
      >
      <Col span="5" v-if="user_level ==='2'">
        <FormItem label="" key="cityId"  prop="cityId" :rules="[{ required: true, message: '必填', trigger: 'change' },]">
          <Select
            v-model="formInline.cityId"
            @on-change="changeArea('2', formInline.cityId)"
            placeholder="请选择市"

            style="width: 90%"
          >
            <Option
              v-for="item in areaData.list1"
              :value="item.parent_id"
              :key="item.parent_id"
            >{{ item.name }}</Option
            >
          </Select>
        </FormItem>
      </Col>
      <Col span="5" v-if="user_level ==='3' || user_level ==='2'">
        <FormItem
          prop="areaId"
          key="areaId"
          :label-width="0"
          :rules="[
                      { required: true, message: '必填', trigger: 'change' },
                    ]"
        >
          <Select
            v-model="formInline.areaId"
            placeholder="请选择区"
            style="width: 90%"
          >
            <Option
              v-for="item in areaData.list2"
              :value="item.parent_id"
              :key="item.parent_id"
            >{{ item.name }}</Option
            >
          </Select>
        </FormItem>
      </Col>
      </Form>
    </div>
    <div class="box" style="width:100%;height: 80vh">
      <div class="top-box"  @click="toPage('/riskFactorWarn?type=1')">
        <img src="@/assets/contradictionImgs/warn1-1.png" alt="">
        <div class="num">2123</div>
        <div class="title">风险因子预警</div>
      </div>
      <div class="top-box" @click="toPage('/groupEventWarn?type=1')">
        <img src="@/assets/contradictionImgs/warn1-2.png" alt="">
        <div class="num">222</div>
        <div  class="title">群体性事件预警</div>
      </div>
      <div class="top-box" @click="toPage('/keyAreaWarn?type=1')">
        <img src="@/assets/contradictionImgs/warn1-3.png" alt="">
        <div class="num">2334</div>
        <div  class="title">重点领域预警</div>
      </div>
      <div class="top-box" @click="toPage('/riskFactorWarn?type=1')">
        <img src="@/assets/contradictionImgs/warn1-4.png" alt="">
        <div class="num">1232</div>
        <div  class="title">涉众预警</div>
      </div>
    </div>
  </div>
</template>

<script>
import { selectCityList } from '@/api/contradiction'

export default {
  data () {
    return {
      formInline: {},
      user_level: '',
      areaData: {
        list1: [],
        list2: [],
        list3: [],
        list4: []
      }
    }
  },
  async mounted () {
    this.user_level = this.$store.state.user.severUserInfo.company_grade
    if (this.user_level === '2') {
      await this.getCityData('1')
    }
    if (this.user_level === '3') {
      await this.getCityData('2', this.$store.state.user.severUserInfo.company_id)
    }
  },
  methods: {
    async getCityData (level, id) {
      let res = await selectCityList({ parent_id: id })
      if (res.data.errcode === 0) {
        this.areaData['list' + level] = res.data.data
        return
      }
      this.$Message.error(res.errmsg)
    },
    async changeArea (level, parent_id) {
      await this.getCityData(level, parent_id)
    },
    toPage (url) {
      this.$router.push({
        path: url
      })
    }
  }
}
</script>

<style scoped lang="less">
.box{
  display: flex;
  justify-content: space-around;
  align-items: flex-start;

  .top-box{
    display: flex;
    flex-direction:column;
    justify-content: center;
    align-items: center;
    width: 24%;
    height: 200px;
    border-radius: 16px;
    background: #ffeeec;
    border: 1px solid #c53535;
    cursor: pointer;
    .title{
      font-family: "PingFang SC";
      font-weight: 400;
      font-size: 14px;
      text-align: center;
      color: #2e3038;
    }
    .num{
      font-family: "Montserrat";
      font-weight: 500;
      font-size: 36px;
      text-align: center;
      color: #c53535;
    }
  }
}
</style>
