<!--
 * @Author: tengmingxue 1473375109@qq.com
 * @Date: 2023-06-05 17:46:54
 * @LastEditors: tengmingxue 1473375109@qq.com
 * @LastEditTime: 2023-06-08 10:52:30
 * @FilePath: \yx-big-screen\src\views\map\dialog\BasicInfo.vue
 * @Description: 基础信息
-->

<template>
  <!-- 基础信息 -->
  <div class="basic-info">
    <template v-for="pro in evaluateItem" :key="pro.id">
      <div class="project-item">
        <Title :titleName="pro.proName" />
        <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 class="project-item">
      <Title :titleName="'工况评价'" />
      <div class="content">
        <row-table />
      </div>
    </div>
  </div>
</template>

<script>
import { defineComponent, reactive, toRefs, onMounted, ref, watch, getCurrentInstance } from 'vue';
import RowTable from './RowTable.vue';
import Title from '/@/components/Title/index.vue';
import moment from 'moment';
import { queryDialogWorkConditionById } from '/@/api/map/geologicalApi';
const props = {
  geologicalInfo: { type: Object, require: true },
};
export default defineComponent({
  name: 'BasicInfo',
  components: { RowTable, Title },
  props,
  setup(props, { emit }) {
    const data = reactive({
      geologicalInfo: props.geologicalInfo,
      evaluateItem: [
        {
          id: '1',
          proCode: 'p1',
          proName: '基础信息',
          evaluateReault: [
            {
              id: '1001',
              fieldCode: 'dzmc',
              fieldName: '地灾名称',
              fieldValue: '',
              span: 8,
            },
            { id: '1002', fieldCode: 'dzlx', fieldName: '地灾类型', fieldValue: '无', span: 8 },
            {
              id: '1003',
              fieldCode: 'dzbh',
              fieldName: '地灾编号',
              fieldValue: '无',
              span: 8,
            },
            {
              id: '1004',
              fieldCode: 'ab',
              fieldName: '岸别',
              fieldValue: '无关',
              span: 8,
            },
            {
              id: '1005',
              fieldCode: 'bzjl',
              fieldName: '距坝址距离(Km)',
              fieldValue: '无',
              span: 8,
            },
            {
              id: '1006',
              fieldCode: 'xzqh',
              fieldName: '行政区划',
              fieldValue: '无',
              span: 8,
            },
            {
              id: '1007',
              fieldCode: 'yxgc',
              fieldName: '影响工程',
              fieldValue: '无',
              span: 8,
            },
            {
              id: '1008',
              fieldCode: 'gcq',
              fieldName: '工程区',
              fieldValue: '无',
              span: 8,
            },
            {
              id: '1009',
              fieldCode: 'fqfd',
              fieldName: '分区分段',
              fieldValue: '无',
              span: 8,
            },
          ],
        },
        {
          id: '2',
          proCode: 'p2',
          proName: '环境条件',
          evaluateReault: [
            {
              id: '1006',
              fieldCode: 'qw',
              fieldName: '气温(℃)',
              fieldValue:
                '冰川泥石流啊实打实大所大所大所大所大所大所大所大所大所大所大所大阿打算大所多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多啊实打实所所所所所所所所所所所',
              span: 24,
            },
            // {
            //   id: '1007',
            //   fieldCode: 'tymmj',
            //   fieldName: '面积(投影面面积)(㎡)',
            //   fieldValue: '无关',
            //   span: 24,
            // },
            {
              id: '1008',
              fieldCode: 'fs',
              fieldName: '风速(m/s)',
              fieldValue: '22',
              span: 24,
            },
            {
              id: '1009',
              fieldCode: 'zbdqrlgcjjhd',
              fieldName: '周边地区人类工程经济活动',
              fieldValue: '11',
              span: 24,
            },
            {
              id: '1010',
              fieldCode: 'npjjyl',
              fieldName: '年平均降雨量(mm)',
              fieldValue: '2',
              span: 24,
            },
            {
              id: '1011',
              fieldCode: 'ypjjyl',
              fieldName: '月平均降雨量(mm)',
              fieldValue: '3',
              span: 24,
            },
            {
              id: '1001',
              fieldCode: 'rpjyl',
              fieldName: '日平均降雨量(mm)',
              fieldValue: '******',
              span: 24,
            },
          ],
        },
      ],
      defectData: [
        {
          id: '1001',
          defectName: '***',
          qdcbaqxs: '***',
          czcbaqxs: '***',
          xhlczcbaqxs: '***',
          aqxs: '***',
        },
      ],
    });
    watch(
      () => props.geologicalInfo,
      (value) => {
        queryWorkingCondition(value.id);
        // if(Object.hasOwnProperty.call(data.geologicalInfo,'id')){
        // }
      }
    );
    /**
     * 查询工况信息
     */
    const queryWorkingCondition = async (id) => {
      queryDialogWorkConditionById(id).then((res) => {
        console.log('工况信息', res);
        debugger;
        data.geologicalInfo = res.result;
        //刷新数据
        updateBasicInfo(res.result);
      });
      // let res = await queryDialogWorkConditionById(id)
      // console.log('工况信息',res)
    };
    /**
     * 更新基础数据
     */
    const updateBasicInfo = (param) => {
      debugger;
      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(() => {
      // if(data.geologicalInfo){
      //   updateBasicInfo(data.geologicalInfo)
      //   if(Object.hasOwnProperty.call(data.geologicalInfo,'id')){
      //     queryWorkingCondition(data.geologicalInfo.id)
      //   }
      // }
      queryWorkingCondition(data.geologicalInfo.id);
    });
    return {
      ...toRefs(data),
      queryWorkingCondition,
      updateBasicInfo,
    };
  },
});
</script>
<style lang="less" scoped>
.basic-info {
  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: auto;
          line-height: 40px;
          font-size: 14px;
          font-family: Source Han Sans CN;
          font-weight: 500;
          .label {
            display: flex;
            justify-content: center;
            align-items: center;
            height: auto;
            min-height: 40px;
            width: 200px;
            line-height: auto;
            text-align: center;
            color: #8bcdff;
            border-right: 1px solid rgba(21, 186, 255, 0.3);
            background: rgba(21, 186, 255, 0.1);
            word-wrap: break-word;
            word-break: normal;
          }
          .value {
            display: flex;
            align-items: center;
            min-height: 40px;
            width: calc(100% - 200px);
            height: auto;
            padding-left: 20px;
            color: #e5f7ff;
            word-wrap: break-word;
            word-break: normal;
          }
        }
      }

      .table-title {
        height: 50px;
        line-height: 50px;
        margin: 10px 0;
        background: rgba(7, 178, 255, 0.18);
        border-radius: 2px;
        .title-col {
          font-size: 14px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #16c0ff;
          text-align: center;
        }
      }
      .table-container {
        width: 100%;
        height: calc(100% - 70px);
        overflow: auto;
        .defect-table-row {
          height: 50px;
          line-height: 50px;
          width: 100%;
          margin-bottom: 10px;
          background: rgba(255, 255, 255, 0.1);
          border-radius: 2px;
          &:hover {
            background: rgba(255, 255, 255, 0.3);
          }
          .fields-col {
            display: flex;
            height: 100%;
            text-align: center;
            justify-content: center;
            align-items: center;
            .defect-nohandle {
              display: flex;
              width: 10px;
              height: 10px;
              background: #ff3636;
              border: 1px solid #dedede;
              border-radius: 50%;
            }
            .defect-handled {
              display: flex;
              width: 10px;
              height: 10px;
              background: #00d062;
              border-radius: 50%;
            }
            .defect-serial-p {
              display: flex;
              width: 22px;
              height: 22px;
              .defect-serial {
                display: flex;
                width: 22px;
                height: 22px;
                padding: 0 5px;
                line-height: 22px;
                border-radius: 50%;
                font-size: 14px;
                font-family: Alimama ShuHeiTi;
                font-weight: bold;
                font-style: italic;
                color: #ffffff;
                background: linear-gradient(60deg, #0ac2ff 0%, #ffdf48 100%);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
              }
            }
          }
          .fields-style {
            font-size: 14px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #ffffff;
          }
          .fields-style-red {
            color: #ff3535;
          }
          .fields-style-green {
            color: #0ae878;
          }
          .detail {
            font-size: 14px;
            font-family: Source Han Sans CN;
            font-weight: 500;
            color: #08ba68;
            background: linear-gradient(46deg, #ffe87e 0%, #00e1e4 37%, #ffffff 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            cursor: pointer;
            display: flex;
            text-align: center;
            justify-content: center;
            align-items: center;
            .label {
              display: flex;
              margin-right: 6px;
            }
          }
        }
      }
    }
  }
}
</style>
