<template>
  <!-- 综合评价 -->
  <div class="comprehensive-description">
    <template v-for="pro in evaluateItem" :key="pro.id">
      <div class="project-item">
        <div class="title">
          <span class="arraw"></span>
          <span class="name">{{ pro.proName }}</span>
        </div>
        <div class="content">
          <a-row class="item-row">
            <template v-for="item in pro.evaluateReault" :key="item.id">
              <a-col :span="item.span" class="item-col">
                <span class="label">{{ item.fieldName }}</span>
                <span class="value">{{ item.fieldValue }}</span>
              </a-col>
            </template>
          </a-row>
        </div>
      </div>
    </template>
  </div>
</template>

<script>
import { defineComponent, reactive, toRefs, onMounted, ref, watch, getCurrentInstance } from 'vue';
import { queryEvaluationById } from '/@/api/map/geologicalApi';
const props = {
  /**
   * 地灾信息
   * */
  geologicalInfo: { type: Object, require: true },
};
export default defineComponent({
  name: 'ComprehensiveDescription',
  components: {},
  props,
  setup(props) {
    const data = reactive({
      geologicalInfo: props.geologicalInfo,
      evaluateItem: [
        {
          id: '1',
          proCode: 'p1',
          proName: '基础信息',
          evaluateReault: [
            {
              id: '1001',
              fieldCode: 'ygcgx',
              fieldName: '与工程关系',
              fieldValue: '',
              span: 24,
            },
            { id: '1002', fieldCode: 'bpdjmc', fieldName: '边坡等级', fieldValue: '无关', span: 8 },
            {
              id: '1003',
              fieldCode: 'wxxfjid-1',
              fieldName: '危险性分级',
              fieldValue: '',
              span: 8,
            },
            {
              id: '1004',
              fieldCode: 'yczdxhl',
              fieldName: '一次最大下滑量(m³)',
              fieldValue: '',
              span: 8,
            },
            {
              id: '1005',
              fieldCode: 'zhdqztid-1',
              fieldName: '综合当前状态',
              fieldValue: '',
              span: 8,
            },
            {
              id: '1006',
              fieldCode: 'zhfzqsid-1',
              fieldName: '综合发展趋势',
              fieldValue: '',
              span: 8,
            },
            { id: '1007', fieldCode: 'djfx', fieldName: '堵江风险', fieldValue: '无关', span: 8 },
            {
              id: '1008',
              fieldCode: 'wdxpj',
              fieldName: '定性稳定性评价',
              fieldValue: '',
              span: 24,
            },
            {
              id: '1009',
              fieldCode: 'swyyjfs',
              fieldName: '失稳诱因及方式',
              fieldValue: '',
              span: 24,
            },
            {
              id: '1010',
              fieldCode: 'wxxfjyjbzid',
              fieldName: '危险性分级依据标准',
              fieldValue: '',
              span: 24,
            },
            {
              id: '1011',
              fieldCode: 'zzjz',
              fieldName: '致灾机制',
              fieldValue: '',
              span: 24,
            },
            {
              id: '1012',
              fieldCode: 'whdx',
              fieldName: '危害对象',
              fieldValue: '',
              span: 24,
            },
          ],
        },
        {
          id: '2',
          proCode: 'p2',
          proName: '影响情况',
          evaluateReault: [
            {
              id: '1001',
              fieldCode: 'yjswyyjfs',
              fieldName: '预计失稳诱因及方式',
              fieldValue: '',
              span: 24,
            },
            {
              id: '1002',
              fieldCode: 'yjdskyx',
              fieldName: '预计对水库的影响',
              fieldValue: '',
              span: 24,
            },
            {
              id: '1003',
              fieldCode: 'yjdgcyxpj',
              fieldName: '预计对工程建筑物影响',
              fieldValue: '',
              span: 24,
            },
            {
              id: '1004',
              fieldCode: 'yjdzbhjyx',
              fieldName: '预计对周边环境的影响',
              fieldValue: '',
              span: 24,
            },
          ],
        },
        {
          id: '3',
          proCode: 'p3',
          proName: '监测防治',
          evaluateReault: [
            { id: '1001', fieldCode: 'jcxz', fieldName: '监测现状', fieldValue: '******', span: 24 },
            { id: '1002', fieldCode: 'jcjy', fieldName: '监测建议', fieldValue: '***', span: 24 },
            { id: '1003', fieldCode: 'fzxz', fieldName: '防治现状', fieldValue: '****', span: 24 },
            { id: '1004', fieldCode: 'fzjy', fieldName: '防治建议', fieldValue: '*****', span: 24 },
          ],
        },
        {
          id: '4',
          proCode: 'p4',
          proName: '危害情况',
          evaluateReault: [
            { id: '1001', fieldCode: 'whrs', fieldName: '危害人数(人)', fieldValue: '11', span: 8 },
            { id: '1002', fieldCode: 'whhs', fieldName: '危害户数(户)', fieldValue: '2', span: 8 },
            { id: '1003', fieldCode: 'whcc', fieldName: '危害财产(万元)', fieldValue: '21', span: 8 },
            { id: '1004', fieldCode: 'whjzw', fieldName: '危害建筑物', fieldValue: '2', span: 24 },
            { id: '1005', fieldCode: 'whgzw', fieldName: '危害构筑物', fieldValue: '0', span: 24 },
            { id: '1006', fieldCode: 'whsssb', fieldName: '危害设施设备', fieldValue: '444', span: 24 },
          ],
        },
        {
          id: '5',
          proCode: 'p5',
          proName: '威胁情况',
          evaluateReault: [
            { id: '1001', fieldCode: 'wxrs', fieldName: '威胁人数(人)', fieldValue: '11', span: 8 },
            { id: '1002', fieldCode: 'wxhs', fieldName: '威胁户数(户)', fieldValue: '2', span: 8 },
            { id: '1003', fieldCode: 'wxcc', fieldName: '威胁财产(万元)', fieldValue: '21', span: 8 },
            { id: '1004', fieldCode: 'wxjzw', fieldName: '威胁建筑物', fieldValue: '2', span: 24 },
            { id: '1005', fieldCode: 'wxgzw', fieldName: '威胁构筑物', fieldValue: '0', span: 24 },
            { id: '1006', fieldCode: 'wxsssb', fieldName: '威胁设施设备', fieldValue: '444', span: 24 },
          ],
        },
      ],
    });
    watch(
      () => props.geologicalInfo,
      (value) => {
        data.geologicalInfo = value;
        if (Object.hasOwnProperty.call(data.geologicalInfo, 'id')) {
          queryEvaluationInfo(data.geologicalInfo.id);
        }
      }
    );
    /**
     * 查询评价信息
     */
    const queryEvaluationInfo = async (id) => {
      let res = await queryEvaluationById(id);
      console.log('评价信息', res);
      if (res.code === 1) {
        //刷新数据
        updateInfo(res.result);
      }
    };
    /**
     * 更新综合评价数据
     */
    const updateInfo = (param) => {
      data.evaluateItem.forEach((evaluate) => {
        evaluate.evaluateReault.forEach((item) => {
          item.fieldValue = '';
          //如果返回的参数中存在改配置字段则进行刷新
          if (Object.hasOwnProperty.call(param, item.fieldCode)) item.fieldValue = param[item.fieldCode];
          else {
            console.log(`综合评价---不存在字段：${item.fieldName}【${item.fieldCode}】`);
          }
        });
      });
    };
    onMounted(() => {
      queryEvaluationInfo(data.geologicalInfo.id);
    });
    return {
      ...toRefs(data),
    };
  },
});
</script>
<style lang="less" scoped>
.comprehensive-description {
  position: relative;
  height: 100%;
  width: 100%;
  padding: 10px;
  overflow: auto;
  .project-item {
    height: auto;
    width: 100%;
    .title {
      display: flex;
      height: 32px;
      align-items: center;
      justify-content: center;
      margin-bottom: 10px;
      .arraw {
        display: flex;
        height: 18px;
        width: 16px;
        background-image: url('/@/assets/images/dialog/arrow.png');
        background-size: 100% 100%;
        margin-right: 6px;
      }
      .name {
        display: flex;
        width: calc(100% - 20px);
        font-size: 16px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #ffffff;
      }
    }
    .content {
      height: auto;
      width: 100%;
      .item-row {
        margin-bottom: 10px;
        .item-col {
          display: flex;
          border: 1px solid rgba(21, 186, 255, 0.3);
          height: 40px;
          line-height: 40px;
          font-size: 14px;
          font-family: Source Han Sans CN;
          font-weight: 500;
          .label {
            display: inline;
            width: 150px;
            height: 40px;
            text-align: center;
            color: #8bcdff;
            border-right: 1px solid rgba(21, 186, 255, 0.3);
            background: rgba(21, 186, 255, 0.1);
          }
          .value {
            display: flex;
            width: calc(100% - 150px);
            height: 40px;
            line-height: 40px;
            padding-left: 20px;
            color: #e5f7ff;
          }
        }
      }
    }
  }
}
</style>
