<template>
  <div>
    <!-- 发生可能性 -->
    <div class="content-wrap">
      <van-cell-group>
        <van-cell title="发生可能性" is-link arrow-direction="down" />
        <van-row>
          <van-col span="10">指标</van-col>
          <van-col span="8">分级</van-col>
          <van-col span="4">可能性</van-col>
          <van-col span="2">等级</van-col>
        </van-row>
        <van-row v-for="(item, index) in happenList" :key="index">
          <van-col span="10">{{ item.target }}</van-col>
          <van-col span="8">{{ item.grade }}</van-col>
          <van-col span="4">{{ item.possibility }}</van-col>
          <van-col span="2">{{ item.level }}</van-col>
        </van-row>
        <van-row>
          <van-col span="10">项目部管理能力和水平</van-col>
          <van-col span="8" class="border" @click="onClickTarget">{{
            projectGrade
          }}</van-col>
          <van-col span="4">{{ projectPossibility }}</van-col>
          <van-col span="2">{{ projectLevel }}</van-col>
        </van-row>
      </van-cell-group>
    </div>

    <van-popup v-model="showPicker" position="bottom">
      <van-picker
        show-toolbar
        value-key="riskGrade"
        :columns="columns"
        @confirm="onConfirm"
        @cancel="showPicker = false"
      />
    </van-popup>

    <!-- 后果严重性 -->
    <div class="content-wrap">
      <van-cell-group>
        <van-cell title="后果严重性" is-link arrow-direction="down" />
        <van-row>
          <van-col span="10"></van-col>
          <van-col span="8">潜在后果</van-col>
          <van-col span="4">描述</van-col>
          <van-col span="2">等级</van-col>
        </van-row>
        <!-- 人员伤亡严重性 -->
        <van-row>
          <van-col span="10">人员伤亡严重性</van-col>
          <van-col span="8" class="border" @click="peopleClick">{{
            peopleGrade
          }}</van-col>
          <van-col span="4">{{ peoplePossibility }}</van-col>
          <van-col span="2">{{ peopleLevel }}</van-col>
        </van-row>
        <!-- 经济损失严重性 -->
        <van-row>
          <van-col span="10">经济损失严重性</van-col>
          <van-col span="8" class="border" @click="econClick">{{
            econGrade
          }}</van-col>
          <van-col span="4">{{ econPossibility }}</van-col>
          <van-col span="2">{{ econLevel }}</van-col>
        </van-row>
        <!-- 周边敏感目标影响严重性 -->
        <van-row>
          <van-col span="10">周边敏感目标影响严重性</van-col>
          <van-col span="8" class="border" @click="aroundClick">{{
            aroundGrade
          }}</van-col>
          <van-col span="4">{{ aroundPossibility }}</van-col>
          <van-col span="2">{{ aroundLevel }}</van-col>
        </van-row>
        <!-- 社会关注度 -->
        <van-row>
          <van-col span="10">社会关注度</van-col>
          <van-col span="8" class="border" @click="societyClick">{{
            societyGrade
          }}</van-col>
          <van-col span="4">{{ societyPossibility }}</van-col>
          <van-col span="2">{{ societyLevel }}</van-col>
        </van-row>
        <!-- 基础设施影响 -->
        <van-row>
          <van-col span="10">基础设施影响</van-col>
          <van-col span="8" class="border" @click="baseClick">{{
            baseGrade
          }}</van-col>
          <van-col span="4">{{ basePossibility }}</van-col>
          <van-col span="2">{{ baseLevel }}</van-col>
        </van-row>
      </van-cell-group>
    </div>
  </div>
</template>

<script>
import { postMatrix } from "@/service/risk";
export default {
  data() {
    return {
      happenList: [
        {
          target: "全国行业历史发生概率",
          grade: "过去2年发生一次以上",
          possibility: "很可能",
          level: "2"
        },
        {
          target: "本市行业历史发生概率",
          grade: "过去5年发生一次以上",
          possibility: "很可能",
          level: "2"
        },
        {
          target: "本企业历史发生概率",
          grade: "过去从未发生",
          possibility: "基本很可能",
          level: "2"
        },
        {
          target: "企业安全生产管理水平",
          grade: "企业安全生产标准化",
          possibility: "很可能",
          level: "2"
        },
        {
          target: "项目经理管理能力和水平",
          grade: "项目经理信用评分比",
          possibility: "可能",
          level: "2"
        }
      ],
      projectLevelList: [], // 项目部管理能力和水平数组
      projectGrade: "请选择",
      projectPossibility: "",
      projectLevel: "",

      peopleList: [], // 人员伤亡严重性
      peopleGrade: "请选择", //
      peoplePossibility: "",
      peopleLevel: "",

      econList: [], // 经济损失严重性
      econGrade: "请选择", //
      econPossibility: "",
      econLevel: "",

      aroundList: [], //周边敏感目标影响严重性
      aroundGrade: "请选择", //
      aroundPossibility: "",
      aroundLevel: "",

      societyList: [], //社会关注度
      societyGrade: "请选择", //
      societyPossibility: "",
      societyLevel: "",

      baseList: [], //社会关注度
      baseGrade: "请选择", //
      basePossibility: "",
      baseLevel: "",

      selectWhichOne: "",
      value: "",
      columns: [],
      showPicker: false
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      this.$toast.loading({
        message: "加载中...",
        forbidClick: true,
        loadingType: "spinner",
        duration: 0
      });
      postMatrix("/riskMain/listLevel")
        .then(res => {
          this.$toast.clear();
          this.projectLevelList = res.data.项目部管理能力和水平;
          this.peopleList = res.data.人员伤亡严重性;
          this.econList = res.data.经济损失严重性;
          this.aroundList = res.data.周边敏感目标影响严重性;
          this.societyList = res.data.社会关注度;
          this.baseList = res.data.基础设施影响;
        })
        .catch(() => {
          this.$toast.clear();
          this.$toast.fail("加载失败,请稍后再试");
        });
    },

    // 项目部管理能力和水平数组点击事件
    onClickTarget() {
      this.columns = this.projectLevelList;
      this.showPicker = true;
      this.selectWhichOne = "topOne";
    },
    // 人员伤亡严重性点击事件
    peopleClick() {
      this.columns = this.peopleList;
      this.showPicker = true;
      this.selectWhichOne = "bottomOne";
    },
    // 经济损失严重性
    econClick() {
      this.columns = this.econList;
      this.showPicker = true;
      this.selectWhichOne = "bottomTwo";
    },
    // 周边敏感目标影响严重性
    aroundClick() {
      this.columns = this.aroundList;
      this.showPicker = true;
      this.selectWhichOne = "bottomThree";
    },
    // 社会关注度
    societyClick() {
      this.columns = this.societyList;
      this.showPicker = true;
      this.selectWhichOne = "bottomFour";
    },
    // 基础设施影响
    baseClick() {
      this.columns = this.baseList;
      this.showPicker = true;
      this.selectWhichOne = "bottomFive";
    },
    // 弹出层事件
    onConfirm(value) {
      if (value == "") return;
      switch (this.selectWhichOne) {
        case "topOne":
          this.projectGrade = value.riskGrade;
          this.projectPossibility = value.riskPossibility;
          this.projectLevel = value.riskLevel;
          break;
        case "bottomOne":
          this.peopleGrade = value.riskGrade;
          this.peoplePossibility = value.riskPossibility;
          this.peopleLevel = value.riskLevel;
          break;
        case "bottomTwo":
          this.econGrade = value.riskGrade;
          this.econPossibility = value.riskPossibility;
          this.econLevel = value.riskLevel;
          break;
        case "bottomThree":
          this.aroundGrade = value.riskGrade;
          this.aroundPossibility = value.riskPossibility;
          this.aroundLevel = value.riskLevel;
          break;
        case "bottomFour":
          this.societyGrade = value.riskGrade;
          this.societyPossibility = value.riskPossibility;
          this.societyLevel = value.riskLevel;
          break;
        case "bottomFive":
          this.baseGrade = value.riskGrade;
          this.basePossibility = value.riskPossibility;
          this.baseLevel = value.riskLevel;
          break;

        default:
          break;
      }
      this.showPicker = false;
    },

    // 计算的方法
    compute() {
      if (this.projectLevel == "") {
        this.$toast.fail("必须选择发生可能性");
        return;
      } else if (
        this.peopleLevel == "" &&
        this.econLevel == "" &&
        this.aroundLevel == "" &&
        this.societyLevel == "" &&
        this.baseLevel == ""
      ) {
        this.$toast.fail("必须选择后果严重性");
        return;
      }
      let topNum = (
        (0.1 * 2 +
          0.2 * 2 +
          0.7 * 2 +
          (0.3 * 2 +
            0.4 * 2 +
            0.3 * parseFloat(this.projectLevel ? this.projectLevel : 0))) /
        2
      ).toFixed(1);
      let bottomNum = (
        0.6 * parseInt(this.peopleLevel ? this.peopleLevel : 0) +
        0.1 * parseInt(this.econLevel ? this.econLevel : 0) +
        0.1 * parseInt(this.aroundLevel ? this.aroundLevel : 0) +
        0.1 * parseInt(this.societyLevel ? this.societyLevel : 0) +
        0.1 * parseInt(this.baseLevel ? this.baseLevel : 0)
      ).toFixed(1);
      return {a: Math.round(topNum), b:Math.round(bottomNum)}
    }
  }
};
</script>
<style lang="less" scoped>
/* @import url(); 引入css类 */
.van-cell::after {
  right: 0;
  left: 0;
}
.content-wrap {
  margin-bottom: 0.266667rem;
  .van-row {
    display: flex;
    align-items: baseline;
    .van-col {
      height: 0.693333rem;
      font-size: 0.3334rem;
      padding: 0.106667rem 0;
      margin: 0.106667rem 0;
      text-align: center;
    }
    .border {
      border: 1px solid #e5e6e7;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
}
</style>
