<template>
  <div class="app-container">
    <el-row :gutter="15">
      <el-form
        ref="form"
        :model="form"
        :rules="rules"
        label-width="80px"
        label-position="top"
      >
        <!-- 工程管理单位 -->
        <el-col :span="24">
          <el-divider> 工程管理单位 </el-divider>
        </el-col>
        <el-col :span="8">
          <el-form-item label="工程管理单位" prop="engineeringManagementUnit">
            <el-input
              v-model="form.engineeringManagementUnit"
              placeholder="请输入工程管理单位"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="工程管理单位性质" prop="managementUnitNature">
            <el-select
              v-model="form.managementUnitNature"
              placeholder="请选择工程管理单位性质"
              style="width: 100%"
            >
              <el-option
                v-for="dict in managementUnitNatureOptions"
                :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="engineeringManagementOwnership"
          >
            <el-select
              v-model="form.engineeringManagementOwnership"
              placeholder="请选择工程管理单位权属"
              style="width: 100%"
            >
              <el-option
                v-for="dict in engineeringManagementOwnershipOptions"
                :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="engineeringManagementPerson"
          >
            <el-input
              v-model="form.engineeringManagementPerson"
              placeholder="请输入工程管理单位责任人"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            label="工程管理单位责任人职务"
            prop="engineeringManagementPosition"
          >
            <el-input
              v-model="form.engineeringManagementPosition"
              placeholder="请输入工程管理单位责任人职务"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            label="工程管理单位责任人手机号码"
            prop="engineeringManagementPhone"
          >
            <el-input
              v-model="form.engineeringManagementPhone"
              placeholder="请输入工程管理单位责任人手机号码"
            />
          </el-form-item>
        </el-col>
        <!-- 水行政主管部门 -->
        <el-col :span="24">
          <el-divider> 水行政主管部门 </el-divider>
        </el-col>
        <el-col :span="8">
          <el-form-item
            label="水行政主管部门"
            prop="waterAdministrativeDepartment"
          >
            <el-select
              v-model="form.waterAdministrativeDepartment"
              placeholder="请选择水行政主管部门"
              style="width: 100%"
            >
              <el-option
                v-for="dict in waterAdministrativeDepartmentOptions"
                :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="administrationDepartmentNature"
          >
            <el-select
              v-model="form.administrationDepartmentNature"
              placeholder="请选择水行政主管部门性质"
              style="width: 100%"
            >
              <el-option
                v-for="dict in administrationDepartmentNatureOptions"
                :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="administrationDepartmentPerson"
          >
            <el-input
              v-model="form.administrationDepartmentPerson"
              placeholder="请输入水行政主管部门责任人"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            label="水行政主管部门责任人职务"
            prop="administrationDepartmentPosition"
          >
            <el-input
              v-model="form.administrationDepartmentPosition"
              placeholder="请输入水行政主管部门责任人职务"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            label="水行政主管部门责任人手机号码"
            prop="administrationDepartmentPhone"
          >
            <el-input
              v-model="form.administrationDepartmentPhone"
              placeholder="请输入水行政主管部门责任人手机号码"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            label="行业归口管理部门"
            prop="centralizedManagementDepartment"
          >
            <el-select
              v-model="form.centralizedManagementDepartment"
              placeholder="请选择行业归口管理部门"
              style="width: 100%"
            >
              <el-option
                v-for="dict in centralizedManagementDepartmentOptions"
                :key="dict.dictValue + '行业归口管理部门'"
                :label="dict.dictLabel"
                :value="dict.dictValue"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <!-- 划界确权 -->
        <el-col :span="24">
          <el-divider> 划界确权 </el-divider>
        </el-col>
        <el-col :span="24">
          <el-row :gutter="15">
            <el-col :span="24">
              <el-col :span="8">
                <el-form-item
                  label="管理范围划界"
                  prop="managementDelimitation"
                >
                  <el-radio-group v-model="form.managementDelimitation">
                    <el-radio
                      v-for="dict in managementDelimitationOptions"
                      :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.managementDelimitation == 0">
                <el-form-item label="完成时间" prop="delimitationTime">
                  <el-date-picker
                    clearable
                    size="small"
                    style="width: 100%"
                    v-model="form.delimitationTime"
                    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.managementDelimitation == 0">
                <el-form-item label="证明材料" prop="delimitationEvidence">
                  <!-- <el-input
                    v-model="form.delimitationEvidence"
                    placeholder="请输入证明材料"
                  /> -->
                  <el-upload
                    class="upload-demo"
                    action="thinking/common/upload"
                    :headers="headers"
                    :on-preview="handleOpinionPreview"
                    :on-remove="
                      (file) => handleOpinionRemove(file, 'fileList1')
                    "
                    :before-remove="beforeOpinionRemove"
                    multiple
                    :on-exceed="handleOpinionExceed"
                    :on-success="
                      (_, fileList) =>
                        submitOpinionUpload(fileList, 'fileList1')
                    "
                    :file-list="fileList1"
                  >
                    <el-button size="small" type="primary" plain>
                      <i class="el-icon-upload el-icon--right"></i>
                      点击上传
                    </el-button>
                    <div slot="tip" class="el-upload__tip">
                      支持jpg/png/pdf/word/excel文件等，不超过100M
                    </div>
                  </el-upload>
                </el-form-item>
              </el-col>
            </el-col>
          </el-row>
          <el-row :gutter="15">
            <el-col :span="24">
              <el-col :span="8">
                <el-form-item
                  label="管理范围确权"
                  prop="managementConfirmation"
                >
                  <el-radio-group v-model="form.managementConfirmation">
                    <el-radio
                      v-for="dict in managementConfirmationOptions"
                      :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.managementConfirmation == 0">
                <el-form-item label="完成时间" prop="confirmationTime">
                  <el-date-picker
                    clearable
                    size="small"
                    style="width: 100%"
                    v-model="form.confirmationTime"
                    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.managementConfirmation == 0">
                <el-form-item label="证明材料" prop="confirmationEvidence">
                  <!-- <el-input
                    v-model="form.confirmationEvidence"
                    placeholder="请输入证明材料"
                  /> -->
                  <el-upload
                    class="upload-demo"
                    action="thinking/common/upload"
                    :headers="headers"
                    :on-preview="handleOpinionPreview"
                    :on-remove="
                      (file) => handleOpinionRemove(file, 'fileList2')
                    "
                    :before-remove="beforeOpinionRemove"
                    multiple
                    :on-exceed="handleOpinionExceed"
                    :on-success="
                      (_, fileList) =>
                        submitOpinionUpload(fileList, 'fileList2')
                    "
                    :file-list="fileList2"
                  >
                    <el-button size="small" type="primary" plain>
                      <i class="el-icon-upload el-icon--right"></i>
                      点击上传
                    </el-button>
                    <div slot="tip" class="el-upload__tip">
                      支持jpg/png/pdf/word/excel文件等，不超过100M
                    </div>
                  </el-upload>
                </el-form-item>
              </el-col>
            </el-col>
          </el-row>
          <el-row :gutter="15">
            <el-col :span="8">
              <el-form-item label="保护范围划界" prop="protectionDelimitation">
                <el-radio-group v-model="form.protectionDelimitation">
                  <el-radio
                    v-for="dict in protectionDelimitationOptions"
                    :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.protectionDelimitation == 0">
              <el-form-item label="完成时间" prop="protectionTime">
                <el-date-picker
                  clearable
                  size="small"
                  style="width: 100%"
                  v-model="form.protectionTime"
                  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.protectionDelimitation == 0">
              <el-form-item label="证明材料" prop="protectionEvidence">
                <!-- <el-input
                  v-model="form.protectionEvidence"
                  placeholder="请输入证明材料"
                /> -->
                <el-upload
                  class="upload-demo"
                  action="thinking/common/upload"
                  :headers="headers"
                  :on-preview="handleOpinionPreview"
                  :on-remove="(file) => handleOpinionRemove(file, 'fileList3')"
                  :before-remove="beforeOpinionRemove"
                  multiple
                  :on-exceed="handleOpinionExceed"
                  :on-success="
                    (_, fileList) => submitOpinionUpload(fileList, 'fileList3')
                  "
                  :file-list="fileList3"
                >
                  <el-button size="small" type="primary" plain>
                    <i class="el-icon-upload el-icon--right"></i>
                    点击上传
                  </el-button>
                  <div slot="tip" class="el-upload__tip">
                    支持jpg/png/pdf/word/excel文件等，不超过100M
                  </div>
                </el-upload>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
        <!-- 工程影像信息 -->
        <el-col :span="24">
          <el-divider> 工程相关文件 </el-divider>
        </el-col>
        <el-col :span="24">
          <el-row :gutter="15">
            <el-col :span="8">
              <el-form-item label="工程照片" prop="engineeringPanoramicPhotos">
                <!-- <el-input
                  v-model="form.engineeringPanoramicPhotos"
                  placeholder="请输入工程照片"
                /> -->
                <el-upload
                  class="upload-demo"
                  action="thinking/common/upload"
                  :headers="headers"
                  :on-preview="handleOpinionPreview"
                  :on-remove="(file) => handleOpinionRemove(file, 'fileList4')"
                  :before-remove="beforeOpinionRemove"
                  multiple
                  :on-exceed="handleOpinionExceed"
                  :on-success="
                    (_, fileList) => submitOpinionUpload(fileList, 'fileList4')
                  "
                  :file-list="fileList4"
                >
                  <el-button size="small" type="primary" plain>
                    <i class="el-icon-upload el-icon--right"></i>
                    点击上传
                  </el-button>
                  <div slot="tip" class="el-upload__tip">
                    支持jpg/png/pdf/word/excel文件等，不超过100M
                  </div>
                </el-upload>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
        <!-- 划界确权 -->
        <el-col :span="24">
          <el-divider> 监控类型 </el-divider>
        </el-col>
        <el-col :span="8">
          <el-form-item label="监控类型（可多选）" prop="monitoringType">
            <el-select
              v-model="form.monitoringType"
              multiple
              collapse-tags
              placeholder="监控类型（可多选）"
              style="width: 100%"
            >
              <el-option
                v-for="dict in monitoringTypeOptions"
                :key="dict.dictValue + '监控类型'"
                :label="dict.dictLabel"
                :value="dict.dictValue"
              ></el-option>
            </el-select>
          </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 {
  listEngineerManageInfo,
  getEngineerManageInfo,
  delEngineerManageInfo,
  addEngineerManageInfo,
  updateEngineerManageInfo,
  exportEngineerManageInfo,
} from "@/api/yg/engineerManageInfo";

import { getToken } from "@/utils/auth";
import { getFileStream } from "@/api/system/upload";

export default {
  name: "EngineerManageInfo",
  props: ["dikeCode"],
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 水闸工程管理信息表格数据
      sluiceEngineerMangeInfoList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 工程管理单位性质字典
      managementUnitNatureOptions: [],
      // 工程管理单位权属字典
      engineeringManagementOwnershipOptions: [],
      // 水行政主管部门字典
      waterAdministrativeDepartmentOptions: [],
      // 水行政主管部门性质字典
      administrationDepartmentNatureOptions: [],
      // 行业归口管理部门字典
      centralizedManagementDepartmentOptions: [],
      // 管理范围划界字典
      managementDelimitationOptions: [],
      // 管理范围确权字典
      managementConfirmationOptions: [],
      // 保护范围划界字典
      protectionDelimitationOptions: [],
      // 监控类型字典
      monitoringTypeOptions: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        ids: null,
        data: {
          engineeringManagementUnit: null,
          managementUnitNature: null,
          engineeringManagementOwnership: null,
          engineeringManagementPerson: null,
          engineeringManagementPosition: null,
          engineeringManagementPhone: null,
          waterAdministrativeDepartment: null,
          administrationDepartmentNature: null,
          administrationDepartmentPerson: null,
          administrationDepartmentPosition: null,
          administrationDepartmentPhone: null,
          centralizedManagementDepartment: null,
          managementDelimitation: null,
          delimitationTime: null,
          delimitationEvidence: null,
          managementConfirmation: null,
          confirmationTime: null,
          confirmationEvidence: null,
          protectionDelimitation: null,
          protectionTime: null,
          protectionEvidence: null,
          gateOperatingProcedures: null,
          waterGateControlOperation: null,
          engineeringCompletionAcceptance: null,
          engineeringChart: null,
          engineeringPanoramicPhotos: null,
          approvalDocumentsDowngrade: null,
          createUid: null,
          updateUid: null,
          createTime: null,
          updateTime: null,
          proCode: null,
          proNo: null,
          remarks: null,
          owerDept: null,
          relations: null,
          monitoringType: null,
        },
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {},
      // 请求头
      headers: {
        shuili: "water " + getToken(),
      },
      fileList1: [],
      fileList2: [],
      fileList3: [],
      fileList4: [],
    };
  },
  created() {
    this.getList();
    this.getDicts("engineering_management_nature").then((response) => {
      this.managementUnitNatureOptions = response.data;
    });
    this.getDicts("engineering_management_ownership").then((response) => {
      this.engineeringManagementOwnershipOptions = response.data;
    });
    this.getDicts("water_administrative_department").then((response) => {
      this.waterAdministrativeDepartmentOptions = response.data;
    });
    this.getDicts("water_administrative_department_nature").then((response) => {
      this.administrationDepartmentNatureOptions = response.data;
    });
    this.getDicts("centralized_management_department").then((response) => {
      this.centralizedManagementDepartmentOptions = response.data;
    });
    this.getDicts("scope_delineation").then((response) => {
      this.managementDelimitationOptions = response.data;
    });
    this.getDicts("scope_confirmation").then((response) => {
      this.managementConfirmationOptions = response.data;
    });
    this.getDicts("scope_delineation").then((response) => {
      this.protectionDelimitationOptions = response.data;
    });
    this.getDicts("monitoring_type").then((response) => {
      this.monitoringTypeOptions = response.data;
    });
  },
  methods: {
    /** 查询水闸工程管理信息列表 */
    getList() {
      this.queryParams.data.dikeCode = this.dikeCode;
      listEngineerManageInfo(this.queryParams).then((response) => {
        if (response.records.length > 0) {
          this.form = response.records[0];
          if (this.form.delimitationEvidence) {
            this.fileList1 = JSON.parse(this.form.delimitationEvidence);
          }
          if (this.form.confirmationEvidence) {
            this.fileList2 = JSON.parse(this.form.confirmationEvidence);
          }
          if (this.form.protectionEvidence) {
            this.fileList3 = JSON.parse(this.form.protectionEvidence);
          }
          if (this.form.engineeringPanoramicPhotos) {
            this.fileList4 = JSON.parse(this.form.engineeringPanoramicPhotos);
          }
          if (this.form.monitoringType) {
            this.form.monitoringType = JSON.parse(this.form.monitoringType);
          }
        }
        console.log("this.form", this.form);
        console.log("response.records", response.records);
      });
    },
    // 工程管理单位性质字典翻译
    managementUnitNatureFormat(row, column) {
      return this.selectDictLabel(
        this.managementUnitNatureOptions,
        row.managementUnitNature
      );
    },
    // 工程管理单位权属字典翻译
    engineeringManagementOwnershipFormat(row, column) {
      return this.selectDictLabel(
        this.engineeringManagementOwnershipOptions,
        row.engineeringManagementOwnership
      );
    },
    // 水行政主管部门字典翻译
    waterAdministrativeDepartmentFormat(row, column) {
      return this.selectDictLabel(
        this.waterAdministrativeDepartmentOptions,
        row.waterAdministrativeDepartment
      );
    },
    // 水行政主管部门性质字典翻译
    administrationDepartmentNatureFormat(row, column) {
      return this.selectDictLabel(
        this.administrationDepartmentNatureOptions,
        row.administrationDepartmentNature
      );
    },
    // 行业归口管理部门字典翻译
    centralizedManagementDepartmentFormat(row, column) {
      return this.selectDictLabel(
        this.centralizedManagementDepartmentOptions,
        row.centralizedManagementDepartment
      );
    },
    // 管理范围划界字典翻译
    managementDelimitationFormat(row, column) {
      return this.selectDictLabel(
        this.managementDelimitationOptions,
        row.managementDelimitation
      );
    },
    // 管理范围确权字典翻译
    managementConfirmationFormat(row, column) {
      return this.selectDictLabel(
        this.managementConfirmationOptions,
        row.managementConfirmation
      );
    },
    // 保护范围划界字典翻译
    protectionDelimitationFormat(row, column) {
      return this.selectDictLabel(
        this.protectionDelimitationOptions,
        row.protectionDelimitation
      );
    },
    // 取消按钮
    cancel() {
      // this.open = false;
      this.$router.back();
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        engineeringManagementUnit: null,
        managementUnitNature: null,
        engineeringManagementOwnership: null,
        engineeringManagementPerson: null,
        engineeringManagementPosition: null,
        engineeringManagementPhone: null,
        waterAdministrativeDepartment: null,
        administrationDepartmentNature: null,
        administrationDepartmentPerson: null,
        administrationDepartmentPosition: null,
        administrationDepartmentPhone: null,
        centralizedManagementDepartment: null,
        managementDelimitation: null,
        delimitationTime: null,
        delimitationEvidence: null,
        managementConfirmation: null,
        confirmationTime: null,
        confirmationEvidence: null,
        protectionDelimitation: null,
        protectionTime: null,
        protectionEvidence: null,
        gateOperatingProcedures: null,
        waterGateControlOperation: null,
        engineeringCompletionAcceptance: null,
        engineeringChart: null,
        engineeringPanoramicPhotos: null,
        approvalDocumentsDowngrade: null,
        createUid: null,
        updateUid: null,
        createTime: null,
        updateTime: null,
        proCode: null,
        proNo: null,
        remarks: null,
        owerDept: null,
        relations: null,
        monitoringType: [],
      };
      this.resetForm("form");
    },
    // 查询表单重置
    resetQueryForm() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        data: {
          id: null,
          engineeringManagementUnit: null,
          managementUnitNature: null,
          engineeringManagementOwnership: null,
          engineeringManagementPerson: null,
          engineeringManagementPosition: null,
          engineeringManagementPhone: null,
          waterAdministrativeDepartment: null,
          administrationDepartmentNature: null,
          administrationDepartmentPerson: null,
          administrationDepartmentPosition: null,
          administrationDepartmentPhone: null,
          centralizedManagementDepartment: null,
          managementDelimitation: null,
          delimitationTime: null,
          delimitationEvidence: null,
          managementConfirmation: null,
          confirmationTime: null,
          confirmationEvidence: null,
          protectionDelimitation: null,
          protectionTime: null,
          protectionEvidence: null,
          gateOperatingProcedures: null,
          waterGateControlOperation: null,
          engineeringCompletionAcceptance: null,
          engineeringChart: null,
          engineeringPanoramicPhotos: null,
          approvalDocumentsDowngrade: null,
          createUid: null,
          updateUid: null,
          createTime: null,
          updateTime: null,
          proCode: null,
          proNo: null,
          remarks: null,
          owerDept: null,
          relations: null,
          monitoringType: null,
        },
        params: {
          // 按哪个字段排序
          orderBy: "create_time",
          // desc降序，升序asc
          sortBy: "desc",
        },
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetQueryForm();
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加水闸工程管理信息";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids;
      getEngineerManageInfo(id).then((response) => {
        this.form = response.data;
        this.open = true;
        this.title = "修改水闸工程管理信息";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.form.dikeCode = this.dikeCode;

          this.form.delimitationEvidence = JSON.stringify(this.fileList1);
          this.form.confirmationEvidence = JSON.stringify(this.fileList2);
          this.form.protectionEvidence = JSON.stringify(this.fileList3);
          this.form.engineeringPanoramicPhotos = JSON.stringify(this.fileList4);
          this.form.monitoringType = JSON.stringify(this.form.monitoringType);

          if (this.form.id != null) {
            updateEngineerManageInfo(this.form).then((response) => {
              if (response.code === 200) {
                this.msgSuccess("修改成功");
                this.open = false;
                this.getList();
              }
            });
          } else {
            addEngineerManageInfo(this.form).then((response) => {
              if (response.code === 200) {
                this.msgSuccess("新增成功");
                this.open = false;
                this.getList();
              }
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      if (ids) {
        this.$confirm("是否删除选中的数据？", "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(function () {
            return delEngineerManageInfo(ids);
          })
          .then(() => {
            this.getList();
            this.msgSuccess("删除成功");
          })
          .catch(function () {});
      } else {
        this.$message.warning("请选择要删除的数据！！");
      }
    },

    // 上传意见附件
    submitOpinionUpload(fileList, name) {
      console.log(name, fileList);
      this[name].push({
        name: fileList.name,
        fileName: fileList.response.fileName,
        url: fileList.response.url,
        uid: fileList.uid,
      });
      console.log(name, this[name]);
    },
    handleOpinionRemove(file, name) {
      // console.log(file, fileList1);
      let index = this[name].findIndex((item) => item.uid === file.uid);
      // 删除文件
      this[name].splice(index, 1);
    },

    // 点击预览的文件进行下载
    handleOpinionPreview(file) {
      // console.log(file);
      getFileStream({ fileName: file.fileName }).then((res) => {
        const blob = new Blob([res], {
          // type类型后端返回来的数据中会有，根据自己实际进行修改
          // 表格下载为 application/xlsx，压缩包为 application/zip等，
          type: "application/xlsx",
        }); //excel,pdf等
        const href = URL.createObjectURL(blob); //创建新的URL表示指定的blob对象
        const a = document.createElement("a"); //创建a标签
        a.style.display = "none";
        a.href = href; // 指定下载链接
        a.download = file.name; //指定下载文件名
        a.click(); //触发下载
        URL.revokeObjectURL(a.href); //释放URL对象
      });
    },
    handleOpinionExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
    beforeOpinionRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep {
  .el-divider {
    height: 4px;
    color: #000;
  }
  .el-divider__text {
    font-weight: 700;
    font-size: 20px;
    background-color: #f4f9f7;
  }
}
.btnList {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1;
}
</style>
