<template>
  <div class="app-container">
    <el-descriptions
      class="margin-top"
      :column="2"
      border
      :labelStyle="{
        'text-align': 'left',
        width: '180px',
        height: '50px',
      }"
      :contentStyle="{ minWidth: '350px' }"
    >
      <el-descriptions-item>
        <template slot="label"> 水闸名称 </template>
        {{ this.form.wagaName }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 水闸代码 </template>
        {{ this.form.wagaCode }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 水闸类型 </template>
        {{ sluiceTypeFormat(this.form) }}
      </el-descriptions-item>
<!--      <el-descriptions-item>-->
<!--        <template slot="label"> 水闸用途 </template>-->
<!--        {{ this.form.wagaUse }}-->
<!--      </el-descriptions-item>-->
<!--      <el-descriptions-item>-->
<!--        <template slot="label"> 行政区划 </template>-->
<!--        {{ $formatAdcd(this.form) }}-->
<!--      </el-descriptions-item>-->
      <el-descriptions-item>
        <template slot="label"> 工程规模 </template>
        {{ projectScaleFormat(this.form) }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 水闸所在位置 </template>
        {{ this.form.wagaLoc }}
      </el-descriptions-item>
<!--      <el-descriptions-item>-->
<!--        <template slot="label"> 起点经度 </template>-->
<!--        {{ this.form.wagaStartLong }}-->
<!--      </el-descriptions-item>-->
<!--      <el-descriptions-item>-->
<!--        <template slot="label"> 起点纬度 </template>-->
<!--        {{ this.form.wagaStartLat }}-->
<!--      </el-descriptions-item>-->
<!--      <el-descriptions-item>-->
<!--        <template slot="label"> 终点经度 </template>-->
<!--        {{ this.form.wagaEndLong }}-->
<!--      </el-descriptions-item>-->
<!--      <el-descriptions-item>-->
<!--        <template slot="label"> 终点纬度 </template>-->
<!--        {{ this.form.wagaEndLat }}-->
<!--      </el-descriptions-item>-->
      <el-descriptions-item>
        <template slot="label"> 工程等别 </template>
        {{ engineerLevelFormat(this.form) }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 主要建筑物级别 </template>
        {{ majorStructureLevelFormat(this.form) }}
      </el-descriptions-item>
<!--      <el-descriptions-item>-->
<!--        <template slot="label"> 最大过闸流量 </template>-->
<!--        {{ this.form.desLockDisc }}-->
<!--      </el-descriptions-item>-->
<!--      <el-descriptions-item>-->
<!--        <template slot="label"> 闸孔数量 </template>-->
<!--        {{ this.form.gaorNum }}-->
<!--      </el-descriptions-item>-->
<!--      <el-descriptions-item>-->
<!--        <template slot="label"> 闸孔总净宽 </template>-->
<!--        {{ this.form.gaorTotNetWid }}-->
<!--      </el-descriptions-item>-->
<!--      <el-descriptions-item>-->
<!--        <template slot="label"> 工程建设情况 </template>-->
<!--        {{ engineerConstructionSituationFormat(this.form) }}-->
<!--      </el-descriptions-item>-->

<!--      <el-descriptions-item>-->
<!--        <template slot="label"> 开工时间 </template>-->
<!--        {{ this.form.startDate }}-->
<!--      </el-descriptions-item>-->
<!--      <el-descriptions-item>-->
<!--        <template slot="label"> 建成时间 </template>-->
<!--        {{ this.form.compDate }}-->
<!--      </el-descriptions-item>-->
<!--      <el-descriptions-item>-->
<!--        <template slot="label"> 归口管理部门 </template>-->
<!--        {{ this.form.admDep }}-->
<!--      </el-descriptions-item>-->
<!--      <el-descriptions-item>-->
<!--        <template slot="label"> 是否为套闸工程 </template>-->
<!--        {{ isGateProjectFormat(this.form) }}-->
<!--      </el-descriptions-item>-->
<!--      <el-descriptions-item>-->
<!--        <template slot="label"> 观测项目 </template>-->
<!--        {{ observationProjectFormat(this.form) }}-->
<!--      </el-descriptions-item>-->
      <el-descriptions-item>
        <template slot="label"> 水准基面 </template>
        {{ this.form.levelDatum }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 水闸概况 </template>
        {{ this.form.sluiceOverview }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 水闸中心经度 </template>
        {{ this.form.wagaCenLong }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">水闸中心纬度</template>
        {{ this.form.wagaCenLat }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">是否穿堤水闸</template>
        {{ this.form.ifCeb }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">是否为枢纽工程</template>
        {{ this.form.ifHyj }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">是否为闸站工程</template>
        {{ this.form.ifGse }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">是否为套闸工程</template>
        {{ this.form.ifSge}}
      </el-descriptions-item>.
      <el-descriptions-item>
        <template slot="label">设计地震烈度</template>
        {{ this.form.freqin}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">建成时间</template>
        {{ this.form.compDate}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">竣工验收时间</template>
        {{ this.form.checkDate}}
      </el-descriptions-item>
<!--      <el-descriptions-item>-->
<!--        <template slot="label"> 安全类别 </template>-->
<!--        {{ securityCategoryFormat(this.form) }}-->
<!--      </el-descriptions-item>-->

      <!-- <el-descriptions-item>
        <template slot="label"> 安全鉴定状态 </template>
        {{ securityStatusFormat(this.form) }}
      </el-descriptions-item> -->
    </el-descriptions>

    <!-- <div class="btnList">
      <el-button type="primary" @click="pass">通 过</el-button>
      <el-button @click="noPass">不通过</el-button>
    </div> -->
  </div>
</template>
<script>
import {
  listJbxx,
  getJbxx,
  delJbxx,
  addJbxx,
  updateJbxx,
  exportJbxx,
} from "@/api/yg/jbxx";
import { regionData, codeToText, TextToCode } from "element-china-area-data";

export default {
  name: "Jbxx",
  props: {
    baseDataId: String,
  },
  data() {
    return {
      areasOptions: [],
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 水闸安全管理基本信息表格数据
      jbxxList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 工程规模字典
      projectScaleOptions: [],
      // 水闸类型字典
      sluiceTypeOptions: [],
      // 工程等别字典
      engineerLevelOptions: [],
      // 主要建筑物级别字典
      majorStructureLevelOptions: [],
      // 工程建设情况字典
      engineerConstructionSituationOptions: [],
      // 是否为套闸工程字典
      isGateProjectOptions: [],
      // 观测项目字典
      observationProjectOptions: [],
      // 安全类别字典
      securityCategoryOptions: [],
      // 安全鉴定状态字典
      securityStatusOptions: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        ids: null,
        data: {
          wagaName: null,
          wagaCode: null,
          engScal: null,
          wagaStartLong: null,
          wagaStartLat: null,
          wagaEndLong: null,
          wagaEndLat: null,
          wagaLoc: null,
          wagaType: null,
          wagaUse: null,
          engGrad: null,
          mainBuildGrad: null,
          desLockDisc: null,
          gaorNum: null,
          gaorTotNetWid: null,
          engStat: null,
          startDate: null,
          compDate: null,
          admDep: null,
          isGateProject: null,
          observationProject: null,
          levelDatum: null,
          sluiceOverview: null,
          createUid: null,
          updateUid: null,
          owerDept: null,
          relation: null,
          status: null,
          securityCategory: null,
          securityStatus: null,
        },
        // 排序方式
        params: {
          // 按哪个字段排序
          orderBy: "create_time",
          // desc降序，升序asc
          sortBy: "desc",
        },
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        wagaName: [
          { required: true, message: "水闸名称不能为空", trigger: "blur" },
        ],
        wagaCode: [
          { required: true, message: "水闸编码不能为空", trigger: "blur" },
        ],
        wagaStartLong: [
          {
            pattern:
              /^(\-|\+)?(((\d|[1-9]\d|1[0-7]\d|0{1,3})\.\d{1,15})|(\d|[1-9]\d|1[0-7]\d|0{1,3})|180\.0{1,15}|180)$/,
            message: "请输入正确的经度,-180至180,小数可有15位",
            trigger: "blur",
          },
        ],
        wagaEndLong: [
          {
            pattern:
              /^(\-|\+)?(((\d|[1-9]\d|1[0-7]\d|0{1,3})\.\d{1,15})|(\d|[1-9]\d|1[0-7]\d|0{1,3})|180\.0{1,15}|180)$/,
            message: "请输入正确的经度,-180至180,小数可有15位",
            trigger: "blur",
          },
        ],
        wagaStartLat: [
          {
            pattern:
              /^(\-|\+)?([0-8]?\d{1}\.\d{1,15}|90\.0{1,15}|[0-8]?\d{1}|90)$/,
            message: "请输入正确的纬度,-90至90,小数可有15位",
            trigger: "blur",
          },
        ],
        wagaEndLat: [
          {
            pattern:
              /^(\-|\+)?([0-8]?\d{1}\.\d{1,15}|90\.0{1,15}|[0-8]?\d{1}|90)$/,
            message: "请输入正确的纬度,-90至90,小数可有15位",
            trigger: "blur",
          },
        ],
        securityCategory: [
          { required: true, message: "请选择安全类别", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    this.getList();
    this.getDicts("engineering_scale").then((response) => {
      this.projectScaleOptions = response.data;
    });
    this.getDicts("sluice_type").then((response) => {
      this.sluiceTypeOptions = response.data;
    });
    this.getDicts("engineering_grade").then((response) => {
      this.engineerLevelOptions = response.data;
    });
    this.getDicts("building_level").then((response) => {
      this.majorStructureLevelOptions = response.data;
    });
    this.getDicts("engineering_construct_situation").then((response) => {
      this.engineerConstructionSituationOptions = response.data;
    });
    this.getDicts("whether").then((response) => {
      this.isGateProjectOptions = response.data;
    });
    this.getDicts("observation_project").then((response) => {
      this.observationProjectOptions = response.data;
    });
    this.getDicts("security_category").then((response) => {
      this.securityCategoryOptions = response.data;
    });
    this.getDicts("safety_evaluation_status").then((response) => {
      this.securityStatusOptions = response.data;
    });
  },
  methods: {
    pass() {
      console.log("审核通过");
    },
    noPass() {
      console.log("审核不通过");
    },
    /** 查询水闸安全管理基本信息列表 */
    getList() {
      this.loading = true;
      const id = this.$route.query.baseDataId || this.baseDataId;
      getJbxx(id).then((response) => {
        console.log(1111, response);
        this.form = response.data;
        // this.jbxxList = response.records;
        // this.total = response.total;
        // this.loading = false;
      });
    },
    // 工程规模字典翻译
    projectScaleFormat(row, column) {
      return this.selectDictLabel(this.projectScaleOptions, row.engScal);
    },
    // 水闸类型字典翻译
    sluiceTypeFormat(row, column) {
      return this.selectDictLabel(this.sluiceTypeOptions, row.wagaType);
    },
    // 工程等别字典翻译
    engineerLevelFormat(row, column) {
      return this.selectDictLabel(this.engineerLevelOptions, row.engGrad);
    },
    // 主要建筑物级别字典翻译
    majorStructureLevelFormat(row, column) {
      return this.selectDictLabel(
        this.majorStructureLevelOptions,
        row.mainBuildGrad
      );
    },

    // 工程建设情况字典翻译
    engineerConstructionSituationFormat(row, column) {
      return this.selectDictLabel(
        this.engineerConstructionSituationOptions,
        row.engStat
      );
    },
    // 是否为套闸工程字典翻译
    isGateProjectFormat(row, column) {
      return this.selectDictLabel(this.isGateProjectOptions, row.isGateProject);
    },
    // 观测项目字典翻译
    observationProjectFormat(row, column) {
      return this.selectDictLabel(
        this.observationProjectOptions,
        row.observationProject
      );
    },

    // 安全类别字典翻译
    securityCategoryFormat(row, column) {
      return this.selectDictLabel(
        this.securityCategoryOptions,
        row.securityCategory
      );
    },
    // 安全鉴定状态字典翻译
    securityStatusFormat(row, column) {
      return this.selectDictLabel(
        this.securityStatusOptions,
        row.securityStatus
      );
    },
    // 取消按钮
    cancel() {
      // this.reset();
      this.$router.back();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        wagaName: null,
        wagaCode: null,
        engScal: null,
        wagaStartLong: null,
        wagaStartLat: null,
        wagaEndLong: null,
        wagaEndLat: null,
        wagaLoc: null,
        wagaType: null,
        wagaUse: null,
        engGrad: null,
        mainBuildGrad: null,
        desLockDisc: null,
        gaorNum: null,
        gaorTotNetWid: null,
        engStat: null,
        startDate: null,
        compDate: null,
        admDep: null,
        isGateProject: null,
        observationProject: null,
        levelDatum: null,
        sluiceOverview: null,
        createUid: null,
        updateUid: null,
        createTime: null,
        updateTime: null,
        owerDept: null,
        remark: null,
        relation: null,
        status: "0",
        securityCategory: null,
        securityStatus: null,
      };
      this.resetForm("form");
    },

    /** 提交按钮 */
    submitForm() {
      console.log("审核通过");
      // this.$refs["form"].validate((valid) => {
      //   if (valid) {
      //     if (this.form.id != null) {
      //       updateJbxx(this.form).then((response) => {
      //         if (response.code === 200) {
      //           this.msgSuccess("修改成功");
      //           // this.open = false;
      //           this.getList();
      //         }
      //       });
      //     } else {
      //       addJbxx(this.form).then((response) => {
      //         if (response.code === 200) {
      //           this.msgSuccess("新增成功");
      //           // this.open = false;
      //           this.getList();
      //         }
      //       });
      //     }
      //   }
      // });
    },
  },
};
</script>
<style lang="scss" scoped>
.btnList {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1;
}
</style>
