<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"
            >请选择</van-col
          >
          <van-col span="4"></van-col>
          <van-col span="2"></van-col>
        </van-row>
      </van-cell-group>
    </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>
          <van-col span="10">人员伤亡严重性</van-col>
          <van-col span="8" class="border" @click="onClickTarget"
            >请选择</van-col>
          <van-col span="4"></van-col>
          <van-col span="2"></van-col>
        </van-row>


        <van-row v-for="(item, index) in resultList" :key="index">
          <van-col span="10">{{ item.target }}</van-col>
          <van-col span="8" class="border" @click="onClickTarget"
            >请选择</van-col>
          <van-col span="4">{{ item.possibility }}</van-col>
          <van-col span="2">{{ item.level }}</van-col>
        </van-row>
      </van-cell-group>
    </div>
  </div>
</template>

<script>
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"
        }
      ],

      resultList: [
        {
          target: "经济损失严重性",
          grade: "",
          possibility: "",
          level: ""
        },
        {
          target: "周边敏感目标影响严重性",
          grade: "",
          possibility: "",
          level: ""
        },
        {
          target: "社会关注度",
          grade: "",
          possibility: "",
          level: ""
        },
        {
          target: "基础设施影响",
          grade: "",
          possibility: "",
          level: ""
        },
      ],
      value: "",
      columns: ["杭州", "宁波", "温州", "嘉兴", "湖州"],
      showPicker: false
    };
  },
  mounted() {},
  methods: {
    onConfirm(value) {
      this.value = value;
      this.showPicker = false;
    },
    onClickTarget() {}
  }
};
</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: center;
    .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;
    }
  }
}
</style>
