<template>
  <van-popup
    v-model="isShow"
    position="bottom"
    :style="{ height: '50%' }"
    round
    @click-overlay="handleClose"
  >
    <div class="popup-title">作业预约</div>
    <van-grid :border="false" :gutter="5">
      <van-grid-item v-for="(item, index) in type" :key="index" @click="handleItme(item)">
        <img class="popup-img" :src="item.icon" />
        <span>{{ item.name }}</span>
      </van-grid-item>
    </van-grid>
  </van-popup>
</template>

<script>
export default {
  props: {
    show: {
      type: Boolean,
      default: () => {
        return false
      }
    }
  },
  watch: {
    show (cur, old) {
      this.isShow = cur
    }
  },
  data () {
    return {
      isShow: false,
      type: [
        {
          code: '10',
          name: '动火作业',
          icon: require('@/assets/images/icon11.png')
        },
        {
          code: '20',
          name: '受限作业',
          icon: require('@/assets/images/icon11.png')
        },
        {
          code: '30',
          name: '盲板抽堵',
          icon: require('@/assets/images/icon11.png')
        },
        {
          code: '40',
          name: '高处作业',
          icon: require('@/assets/images/icon11.png')
        },
        {
          code: '50',
          name: '吊装作业',
          icon: require('@/assets/images/icon11.png')
        },
        {
          code: '60',
          name: '临时用电',
          icon: require('@/assets/images/icon11.png')
        },
        {
          code: '70',
          name: '动土作业',
          icon: require('@/assets/images/icon11.png')
        },
        {
          code: '80',
          name: '断路作业',
          icon: require('@/assets/images/icon11.png')
        }
      ]
    }
  },
  methods: {
    handleClose () {
      this.$emit('update:show', false)
    },
    handleItme (item) {
      const query = {
        name: item.name,
        code: item.code
      }
      this.$router.push({
        path: '/jobReservationFrom',
        query
      })
    }
  }
}
</script>

<style lang="less" scoped>
.popup-title {
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid #dcdee0;
  font-weight: 500;
  color: #000;
}
.popup-img {
  height: 50px;
  margin-bottom: 8px;
}
</style>
