<template>
  <div class="app-container">
    <el-row :gutter="15">
      <el-form
        ref="form"
        :model="form"
        :rules="rules"
        label-width="110px"
        label-position="top"
      >
        <el-col :span="8">
          <el-form-item label="水闸名称" prop="wagaName">
            <el-input v-model="form.wagaName" placeholder="请输入水闸名称" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="行政区划" prop="adcd">
            <el-cascader
              :options="areasOptions"
              v-model="form.adcd"
              :props="areasOptionProps"
              placeholder="请选择行政区划"
              clearable
              size="small"
              style="width: 100%"
              @change="handleChange"
            >
            </el-cascader>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="水闸编码" prop="wagaCode">
            <el-input v-model="form.wagaCode" placeholder="请输入水闸编码" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="所在位置（可多选）" prop="wagaLoc">
            <!-- <el-input v-model="form.wagaLoc"  placeholder="请输入所在位置" /> -->
            <el-select
              v-model="form.wagaLoc"
              multiple
              collapse-tags
              placeholder="请选择所在位置"
              style="width: 100%"
            >
              <el-option
                v-for="dict in locationOptions"
                :key="dict.dictValue"
                :label="dict.dictLabel"
                :value="dict.dictValue"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="标绘水闸" prop="plottingSluice">
            <el-input
              v-model="form.plottingSluice"
              placeholder="请输入标绘水闸"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="验收情况">
            <el-radio-group v-model="form.acceptanceStatus">
              <el-radio
                v-for="dict in acceptanceStatusOptions"
                :key="dict.dictValue + '验收情况'"
                :label="dict.dictValue"
                >{{ dict.dictLabel }}</el-radio
              >
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="8" v-if="form.acceptanceStatus == 0">
          <el-form-item label="建成时间" prop="completionTime">
            <el-date-picker
              clearable
              size="small"
              style="width: 100%"
              v-model="form.completionTime"
              type="month"
              format="yyyy-MM"
              value-format="yyyy-MM-dd"
              placeholder="选择建成时间"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8" v-if="form.acceptanceStatus == 1">
          <el-form-item label="竣工验收时间" prop="completionAcceptanceTime">
            <el-date-picker
              clearable
              size="small"
              style="width: 100%"
              v-model="form.completionAcceptanceTime"
              type="month"
              format="yyyy-MM"
              value-format="yyyy-MM-dd"
              placeholder="选择竣工验收时间"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="除险加固情况">
            <el-radio-group v-model="form.riskEliminationStatus">
              <el-radio
                v-for="dict in riskEliminationStatusOptions"
                :key="dict.dictValue + '除险加固情况'"
                :label="dict.dictValue"
                >{{ dict.dictLabel }}</el-radio
              >
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="8" v-if="form.riskEliminationStatus == 1">
          <el-form-item
            label="最近除险加固完工时间"
            prop="recentCompletionTime"
          >
            <el-date-picker
              clearable
              size="small"
              style="width: 100%"
              v-model="form.recentCompletionTime"
              type="month"
              format="yyyy-MM"
              value-format="yyyy-MM-dd"
              placeholder="选择最近除险加固完工时间"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="是否为枢纽工程" prop="isHubProject">
            <el-radio-group v-model="form.isHubProject">
              <el-radio
                v-for="dict in isHubProjectOptions"
                :key="dict.dictValue + '枢纽工程'"
                :label="dict.dictValue"
                >{{ dict.dictLabel }}</el-radio
              >
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="8" v-if="form.isHubProject == 1">
          <el-form-item label="枢纽建筑物（可多选）" prop="hubBuildings">
            <el-select
              v-model="form.hubBuildings"
              multiple
              collapse-tags
              placeholder="请选择枢纽建筑物"
              style="width: 100%"
            >
              <el-option
                v-for="dict in hubBuildingsOptions"
                :key="dict.dictValue"
                :label="dict.dictLabel"
                :value="dict.dictValue"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="是否为闸站工程" prop="isGateStation">
            <el-radio-group v-model="form.isGateStation">
              <el-radio
                v-for="dict in isGateStationOptions"
                :key="dict.dictValue + '闸站工程'"
                :label="dict.dictValue"
                >{{ dict.dictLabel }}</el-radio
              >
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="是否为套闸工程" prop="isSetGateProject">
            <el-radio-group v-model="form.isSetGateProject">
              <el-radio
                v-for="dict in isSetGateProjectOptions"
                :key="dict.dictValue + '套闸工程'"
                :label="dict.dictValue"
                >{{ dict.dictLabel }}</el-radio
              >
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="8" v-if="form.isSetGateProject == 1">
          <el-form-item label="副闸闸孔数量（孔）" prop="auxiliaryGateHoles">
            <el-input
              v-model="form.auxiliaryGateHoles"
              placeholder="请输入副闸闸孔数量"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8" v-if="form.isSetGateProject == 1">
          <el-form-item
            label="副闸闸孔总净宽（m）"
            prop="auxiliaryGateHolesWidth"
          >
            <el-input
              v-model="form.auxiliaryGateHolesWidth"
              placeholder="请输入副闸闸孔总净宽"
            />
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="水闸类型（可多选）" prop="wagaType">
            <el-select
              v-model="form.wagaType"
              multiple
              collapse-tags
              placeholder="请选择水闸类型"
              style="width: 100%"
            >
              <el-option
                v-for="dict in sluiceTypeOptions"
                :key="dict.dictValue"
                :label="dict.dictLabel"
                :value="dict.dictValue"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="设计过闸流量" prop="dslcfl">
            <el-input v-model="form.dslcfl" placeholder="请输入设计过闸流量" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="校核过闸流量" prop="chlcfl">
            <el-input v-model="form.chlcfl" placeholder="请输入校核过闸流量" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="工程规模" prop="engScal">
            <el-select
              v-model="form.engScal"
              placeholder="请选择工程规模"
              style="width: 100%"
            >
              <el-option
                v-for="dict in projectScaleOptions"
                :key="dict.dictValue"
                :label="dict.dictLabel"
                :value="dict.dictValue"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="建筑物级别" prop="mainBuildGrad">
            <el-select
              v-model="form.mainBuildGrad"
              placeholder="请选择建筑物级别"
              style="width: 100%"
            >
              <el-option
                v-for="dict in mainBuildGradOptions"
                :key="dict.dictValue"
                :label="dict.dictLabel"
                :value="dict.dictValue"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="设计标准[重现期]" prop="dsrcin">
            <el-input
              v-model="form.dsrcin"
              placeholder="请输入设计标准[重现期]"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="校核标准[重现期]" prop="chrcin">
            <el-input
              v-model="form.chrcin"
              placeholder="请输入校核标准[重现期]"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            label="历史最大过闸流量(m³/s)"
            prop="historicalMaximumGate"
          >
            <el-input
              v-model="form.historicalMaximumGate"
              placeholder="请输入历史最大过闸流量(m³/s)"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            label="历史最大过闸流量日期"
            prop="historicalMaximumDate"
          >
            <el-date-picker
              clearable
              size="small"
              style="width: 100%"
              v-model="form.historicalMaximumDate"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="选择历史最大过闸流量日期"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="设计地震烈度" prop="designSeismicIntensity">
            <el-input
              v-model="form.designSeismicIntensity"
              placeholder="请输入设计地震烈度"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="闸孔数量" prop="gaorNum">
            <el-input v-model="form.gaorNum" placeholder="请输入闸孔数量" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="闸孔总净宽(m)" prop="gaorTotNetWid">
            <el-input
              v-model="form.gaorTotNetWid"
              placeholder="请输入闸孔总净宽(m)"
            />
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="启闭机数量" prop="hoistsNumber">
            <el-input
              v-model="form.hoistsNumber"
              placeholder="请输入启闭机数量"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="观测项目（可多选）" prop="observationProject">
            <el-select
              v-model="form.observationProject"
              multiple
              collapse-tags
              placeholder="请选择观测项目"
              style="width: 100%"
            >
              <el-option
                v-for="dict in observationProjectOptions"
                :key="dict.dictValue"
                :label="dict.dictLabel"
                :value="dict.dictValue"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="闸室结构（可多选）" prop="lockChamberStructure">
            <el-select
              v-model="form.lockChamberStructure"
              multiple
              collapse-tags
              placeholder="请选择闸室结构"
              style="width: 100%"
            >
              <el-option
                v-for="dict in lockChamberStructureOptions"
                :key="dict.dictValue"
                :label="dict.dictLabel"
                :value="dict.dictValue"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="闸门型式（可多选）" prop="gtst">
            <el-checkbox-group v-model="form.gtst">
              <el-checkbox
                v-for="dict in gtstOptions"
                :key="dict.dictValue"
                :label="dict.dictValue"
              >
                {{ dict.dictLabel }}
              </el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="启闭机形式（可多选）" prop="machineForm">
            <el-checkbox-group v-model="form.machineForm">
              <el-checkbox
                v-for="dict in machineFormOptions"
                :key="dict.dictValue"
                :label="dict.dictValue"
              >
                {{ dict.dictLabel }}
              </el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="消能方式（可多选）" prop="endsst">
            <el-checkbox-group v-model="form.endsst">
              <el-checkbox
                v-for="dict in endsstOptions"
                :key="dict.dictValue"
                :label="dict.dictValue"
              >
                {{ dict.dictLabel }}
              </el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="自动化控制（可多选）" prop="automationControl">
            <el-checkbox-group v-model="form.automationControl">
              <el-checkbox
                v-for="dict in automationControlOptions"
                :key="dict.dictValue"
                :label="dict.dictValue"
              >
                {{ dict.dictLabel }}
              </el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="8">
          <el-form-item label="关联字段1" prop="relation">
            <el-input v-model="form.relation" placeholder="请输入关联字段1" />
          </el-form-item>
        </el-col> -->
      </el-form>
    </el-row>
    <div class="btnList">
      <el-button type="primary" @click="submitForm">保 存</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </div>
</template>

<script>
import {
  listSluiceInfo,
  getSluiceInfo,
  delSluiceInfo,
  addSluiceInfo,
  updateSluiceInfo,
  exportSluiceInfo,
} from "@/api/yg/sluiceInfo";
import { getAreasData } from "@/api/areas/index";
import { regionData, codeToText, TextToCode } from "element-china-area-data";

export default {
  name: "sluiceInfo",
  data() {
    return {
      areasOptionProps: {
        emitPath: false,
        checkStrictly: true, //选择任意一级
      },
      areasOptions: [],
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 水闸工程基础信息表格数据
      sluiceInfoList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 所在位置字典
      locationOptions: [],
      // 验收情况字典
      acceptanceStatusOptions: [],
      // 除险加固情况字典
      riskEliminationStatusOptions: [],
      // 是否为枢纽工程字典
      isHubProjectOptions: [],
      // 是否为闸站工程字典
      isGateStationOptions: [],
      // 是否为套闸工程字典
      isSetGateProjectOptions: [],
      // 水闸类型字典
      sluiceTypeOptions: [],
      // 工程规模字典
      projectScaleOptions: [],
      // 建筑物级别字典
      mainBuildGradOptions: [],
      // 闸门型式字典
      gtstOptions: [],
      // 观测项目字典
      observationProjectOptions: [],
      // 闸室结构字典
      lockChamberStructureOptions: [],
      // 启闭机形式字典
      machineFormOptions: [],
      // 消能方式字典
      endsstOptions: [],
      // 自动化控制字典
      automationControlOptions: [],
      // 枢纽建筑物字典
      hubBuildingsOptions: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        ids: null,
        data: {
          wagaName: null,
          adcd: null,
          wagaCode: null,
          wagaLoc: null,
          plottingSluice: null,
          acceptanceStatus: null,
          riskEliminationStatus: null,
          isHubProject: null,
          isGateStation: null,
          isSetGateProject: null,
          wagaType: null,
          dslcfl: null,
          chlcfl: null,
          engScal: null,
          mainBuildGrad: null,
          dsrcin: null,
          chrcin: null,
          historicalMaximumGate: null,
          historicalMaximumDate: null,
          designSeismicIntensity: null,
          gaorNum: null,
          gaorTotNetWid: null,
          gtst: null,
          hoistsNumber: null,
          observationProject: null,
          lockChamberStructure: null,
          machineForm: null,
          endsst: null,
          automationControl: null,
          createUid: null,
          updateUid: null,
          createTime: null,
          updateTime: null,
          proNo: null,
          proCode: null,
          relation: null,
          completionTime: null,
          completionAcceptanceTime: null,
          recentCompletionTime: null,
          hubBuildings: null,
          auxiliaryGateHoles: null,
          auxiliaryGateHolesWidth: null,
        },
      },
      // 表单参数
      form: {},
      copyForm: {},
      // 表单校验
      rules: {
        wagaCode: [
          { required: true, message: "请输入水闸编码", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    this.reset();
    this.getTreeData();
    this.getList();
    this.getDicts("location").then((response) => {
      this.locationOptions = response.data;
    });
    this.getDicts("completion_acceptance_status").then((response) => {
      this.acceptanceStatusOptions = response.data;
    });
    this.getDicts("reinforcement_situation").then((response) => {
      this.riskEliminationStatusOptions = response.data;
    });
    this.getDicts("whether").then((response) => {
      this.isHubProjectOptions = response.data;
    });
    this.getDicts("whether").then((response) => {
      this.isGateStationOptions = response.data;
    });
    this.getDicts("whether").then((response) => {
      this.isSetGateProjectOptions = response.data;
    });
    this.getDicts("sluice_type").then((response) => {
      this.sluiceTypeOptions = response.data;
    });
    this.getDicts("engineering_scale").then((response) => {
      this.projectScaleOptions = response.data;
    });
    this.getDicts("building_level").then((response) => {
      this.mainBuildGradOptions = response.data;
    });
    this.getDicts("gate_type").then((response) => {
      this.gtstOptions = response.data;
    });
    this.getDicts("observation_project").then((response) => {
      this.observationProjectOptions = response.data;
    });
    this.getDicts("Lock_chamber_structure").then((response) => {
      this.lockChamberStructureOptions = response.data;
    });
    this.getDicts("machine_form").then((response) => {
      this.machineFormOptions = response.data;
    });
    this.getDicts("energy_dissipation_method").then((response) => {
      this.endsstOptions = response.data;
    });
    this.getDicts("automation_control").then((response) => {
      this.automationControlOptions = response.data;
    });
    this.getDicts("Hub_buildings").then((response) => {
      this.hubBuildingsOptions = response.data;
    });
  },
  methods: {
    getTreeData() {
      getAreasData().then((items) => {
        // console.log("getAreasData", items.data);
        let res = [];
        let getChildren = (res, pid) => {
          for (const i of items.data) {
            if (i.parentid === pid) {
              const newItem = {
                label: i.name,
                value: i.id,
              };
              if (i.layer != 3) newItem.children = [];
              res.push(newItem);
              getChildren(newItem.children, newItem.value);
            }
          }
        };
        getChildren(res, items.data[0].parentid);
        console.log(66666666666, res);
        this.areasOptions = res;
        // return res;
      });
    },
    handleChange(value) {
      //value为省市区code数组
      if (value) {
        console.log("value", value);
        var provinceCode = codeToText[value[0]]; //code转为省
        var cityCode = codeToText[value[1]]; //市
        var orgion = codeToText[value[2]]; //区
        console.log(44444444, provinceCode, cityCode, orgion);
        // this.baseMsg.adcd = value[value.length - 1];
        console.log("this.form.adcd", this.form.adcd);
      }
    },
    /** 查询水闸工程基础信息列表 */
    getList() {
      const id = this.$route.query.baseDataId;
      getSluiceInfo(id).then((response) => {
        // Object.assign({}, this.form, response.data);
        this.form = response.data;
        console.log(999999, this.form);
        if (this.form.wagaLoc)
          this.form.wagaLoc = JSON.parse(this.form.wagaLoc);
        if (this.form.wagaType)
          this.form.wagaType = JSON.parse(this.form.wagaType);
        if (this.form.hubBuildings)
          this.form.hubBuildings = JSON.parse(this.form.hubBuildings);
        if (this.form.observationProject)
          this.form.observationProject = JSON.parse(
            this.form.observationProject
          );
        if (this.form.lockChamberStructure)
          this.form.lockChamberStructure = JSON.parse(
            this.form.lockChamberStructure
          );
        if (this.form.gtst) this.form.gtst = JSON.parse(this.form.gtst);
        if (this.form.machineForm)
          this.form.machineForm = JSON.parse(this.form.machineForm);
        if (this.form.endsst) this.form.endsst = JSON.parse(this.form.endsst);
        if (this.form.automationControl)
          this.form.automationControl = JSON.parse(this.form.automationControl);

        this.copyForm = { ...response.data };
      });
    },
    // 取消按钮
    cancel() {
      this.$router.back();
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.id != null) {
            // 下拉框
            this.form.wagaLoc = JSON.stringify(this.form.wagaLoc);
            this.form.wagaType = JSON.stringify(this.form.wagaType);
            this.form.hubBuildings = JSON.stringify(this.form.hubBuildings);

            this.form.observationProject = JSON.stringify(
              this.form.observationProject
            );
            this.form.lockChamberStructure = JSON.stringify(
              this.form.lockChamberStructure
            );
            // 多选框
            this.form.gtst = JSON.stringify(this.form.gtst);
            this.form.machineForm = JSON.stringify(this.form.machineForm);
            this.form.endsst = JSON.stringify(this.form.endsst);
            this.form.automationControl = JSON.stringify(
              this.form.automationControl
            );
            updateSluiceInfo(this.form).then((response) => {
              if (response.code === 200) {
                this.msgSuccess("修改成功");
                this.getList();
              }
            });
          }
        }
      });
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        wagaName: null,
        adcd: null,
        wagaCode: null,
        wagaLoc: null,
        plottingSluice: null,
        acceptanceStatus: "0",
        riskEliminationStatus: "0",
        isHubProject: null,
        isGateStation: null,
        isSetGateProject: null,
        wagaType: null,
        dslcfl: null,
        chlcfl: null,
        engScal: null,
        mainBuildGrad: null,
        dsrcin: null,
        chrcin: null,
        historicalMaximumGate: null,
        historicalMaximumDate: null,
        designSeismicIntensity: null,
        gaorNum: null,
        gaorTotNetWid: null,
        gtst: [],
        hoistsNumber: null,
        observationProject: null,
        lockChamberStructure: null,
        machineForm: [],
        endsst: [],
        automationControl: [],
        createUid: null,
        updateUid: null,
        createTime: null,
        updateTime: null,
        proNo: null,
        proCode: null,
        relation: null,
        completionTime: null,
        completionAcceptanceTime: null,
        recentCompletionTime: null,
        hubBuildings: null,
        auxiliaryGateHoles: null,
        auxiliaryGateHolesWidth: null,
      };
      this.resetForm("form");
    },
  },
};
</script>
<style lang="scss" scoped>
.btnList {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1;
}
</style>
