<!--
 * @Author: SunTao 328867980@qq.com
 * @Date: 2025-02-10 11:02:50
 * @LastEditors: SunTao 328867980@qq.com
 * @LastEditTime: 2025-02-27 15:07:15
 * @FilePath: \znxjxt-ui\src\views\xj\document\view-notification\index.vue
 * @Description: 单据-查看通知单页面
-->

<template>
  <div class="content">
    <el-form :model="noticeForm" ref="noticeForm" size="small" :inline="true" label-width="5rem">
      <el-form-item label="路段类型:">
        <el-select v-model="noticeForm.diseRoadPosiType" placeholder="请选择路段类型" clearable>
          <el-option v-for="item in segmentTypeList" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="病害成因:">
        <el-select v-model="noticeForm.diseCauses" placeholder="请选择病害成因" clearable>
          <el-option v-for="item in causesList" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="所在路段:">
        <el-select v-model="noticeForm.diseRoadPart" placeholder="请选择所在路段" filterable remote clearable reserve-keyword
          :filter-method="handleDiseRoadPart" @change="changeDiseRoadPart">
          <el-option v-for="(item, index) in roadPartList" :key="`diseRoadPart-name-${index}`" :label="item.label"
            :value="item.value"></el-option> </el-select>
      </el-form-item>
      <el-form-item label="病害类型:">
        <el-select v-model="noticeForm.diseFirstType" placeholder="请选择病害类型" clearable @change="changeDetailed">
          <el-option v-for="item in diseFirstType" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="病害二级类型:" label-width="8rem">
        <el-select v-model="noticeForm.diseTypeDetailed" placeholder="请选择病害二级类型" filterable clearable>
          <el-option v-for="item in diseTypeDetailedList" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="工区:">
        <el-select v-model="noticeForm.matTaskAreaId" placeholder="请选择工区" filterable remote clearable reserve-keyword
          :filter-method="handleMatTaskArea" @change="changeMatTaskArea">
          <el-option v-for="(item, index) in taskAreaList" :key="`taskAreaList-name-${index}`" :label="item.label"
            :value="item.value"></el-option> </el-select>
      </el-form-item>
      <el-form-item label="工作站:">
        <el-select v-model="noticeForm.matTWorkStationId" placeholder="请选择工作站" filterable remote clearable
          reserve-keyword :filter-method="handleMatWorkStation" @change="changeMatWorkStation">
          <el-option v-for="(item, index) in matWorkStationList" :key="`WorkStationId-name-${index}`"
            :label="item.label" :value="item.value"></el-option> </el-select>
      </el-form-item>
      <el-form-item label="车道:">
        <el-input v-model="noticeForm.diseRoadLine" placeholder="请填写车道" clearable>
        </el-input>
      </el-form-item>
      <el-form-item label="桥梁:" v-if="noticeForm.diseRoadPosiType !== '1'">
        <el-select v-model="noticeForm.connBridge" placeholder="请选择桥梁" filterable remote clearable reserve-keyword
          :filter-method="handleConnBridge" @change="changeConnBridge">
          <el-option v-for="(item, index) in connBridgeList" :key="`connBridge-name-${index}`" :label="item.label"
            :value="item.value"></el-option> </el-select>
      </el-form-item>
      <el-form-item label="隧道:" v-if="noticeForm.diseRoadPosiType !== '1'">
        <el-select v-model="noticeForm.connTunnel" placeholder="请选择隧道" filterable remote clearable reserve-keyword
          :filter-method="handleConnTunnel" @change="changeConnTunnel">
          <el-option v-for="(item, index) in connTunnelList" :key="`connTunnel-name-${index}`" :label="item.label"
            :value="item.value"></el-option> </el-select>
      </el-form-item>
      <el-form-item label="收费站:" v-if="noticeForm.diseRoadPosiType === '1'">
        <el-select v-model="noticeForm.stationCode" placeholder="请选择收费站" filterable remote clearable reserve-keyword
          :filter-method="handleStationCode" @change="changeStationCode">
          <el-option v-for="(item, index) in stationCodeList" :key="`stationCode-name-${index}`" :label="item.label"
            :value="item.value"></el-option> </el-select>
      </el-form-item>
      <el-form-item label="收费站位置:" v-if="noticeForm.diseRoadPosiType === '1'" label-width="8rem">
        <el-select v-model="noticeForm.stationLocation" placeholder="请选择收费站位置" clearable>
          <el-option v-for="item in stationLocationList" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="方向:">
        <el-select v-model="noticeForm.diseRoadDirec" placeholder="请选择方向" clearable>
          <el-option v-for="item in roadDirectionList" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="公里桩">
        <el-input v-model="noticeForm.stakeStart" placeholder="起始公里桩" style="width: 10rem" clearable />
        <span style="margin: 0 5px">-</span>
        <el-input v-model="noticeForm.stakeEnd" placeholder="终止公里桩" style="width: 10rem" clearable />
        <el-tooltip class="item" effect="dark" content="格式为K0000+000" placement="top">
          <i class="el-icon-info"></i>
        </el-tooltip>
      </el-form-item>
      <el-form-item label="匝道类型:">
        <el-select v-model="noticeForm.rampType" placeholder="请选择匝道类型" clearable>
          <el-option v-for="item in rampTypeList" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="匝道立交:">
        <el-select v-model="noticeForm.rampInterchangeCode" placeholder="请选择匝道立交" filterable remote clearable
          reserve-keyword :filter-method="handleRampIntOrientation" @change="changeRampIntOrientation">
          <el-option v-for="(item, index) in rampIntOrientationList" :key="`rampInterchangeCode-name-${index}`"
            :label="item.label" :value="item.value"></el-option> </el-select>
      </el-form-item>
      <el-form-item label="匝道立交方向:" label-width="8rem">
        <el-select v-model="noticeForm.rampIntOrientation" placeholder="请选择匝道立交方向" clearable>
          <el-option v-for="item in rampInterchangeCodeList" :key="item.value" :label="item.label"
            :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="是否紧急" prop="urgentFlag">
        <el-select v-model="noticeForm.urgentFlag" placeholder="请选择" clearable>
          <el-option label="紧急" value="1" />
          <el-option label="不紧急" value="2" />
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- 导航栏 -->
    <el-tabs v-model="activeName" @tab-click="getList">
      <el-tab-pane v-for="(item, index) in viewTableTabs" :key="`tabs-${index}`" :label="item.title" :name="item.name">
        <!-- 表格 -->
        <el-table class="notice-table" ref="noticeTable" :data="noticeList" @selection-change="handleSelectionChange"
          v-loading="loading" style="width: 100%">
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column fixed type="index" label="序号"> </el-table-column>
          <el-table-column fixed label="所在路段" width="200" show-overflow-tooltip align="center"
            prop="diseRoadPartName" />
          <el-table-column label="路段类型" align="center" prop="diseRoadPosiTypeName">
          </el-table-column>
          <el-table-column label="病害成因" align="center" prop="diseCausesName">
          </el-table-column>
          <el-table-column label="工区" width="150" show-overflow-tooltip align="center" prop="matTaskAreaName" />
          <el-table-column label="病害类型" align="center" prop="diseFirstTypeName" />
          <el-table-column label="病害详细类型" width="150" show-overflow-tooltip align="center" prop="diseTypeDetailedName">
          </el-table-column>
          <el-table-column label="工作站" align="center" prop="matTWorkStationName">
          </el-table-column>
          <el-table-column label="方向" align="center" prop="diseRoadDirecName" />
          <el-table-column label="开始桩号" width="100" show-overflow-tooltip align="center" prop="diseStartStake" />
          <el-table-column label="终止桩号" width="100" show-overflow-tooltip align="center" prop="diseEndStake" />
          <el-table-column label="桥梁" width="150" show-overflow-tooltip align="center" prop="connBridgeName" />
          <el-table-column label="隧道" width="150" show-overflow-tooltip align="center" prop="connTunnelName" />
          <el-table-column label="收费站" align="center" prop="stationName" />
          <el-table-column label="收费站位置" width="100" show-overflow-tooltip align="center" prop="stationLocationName" />
          <el-table-column label="匝道类型" width="100" show-overflow-tooltip align="center" prop="rampTypeName" />
          <el-table-column label="匝道立交" width="200" show-overflow-tooltip align="center" prop="rampInterchangeName" />
          <el-table-column label="匝道立交方向" width="200" show-overflow-tooltip align="center"
            prop="rampIntOrientationName" />
          <!-- <el-table-column label="是否紧急" align="center" prop="urgentFlag">
            <template slot-scope="scope">
              <el-button v-if="scope.row.urgentFlag === 1" type="danger" plain disabled>紧急</el-button>
              <el-button v-if="scope.row.urgentFlag === 2" type="warning" plain disabled>不紧急</el-button>
            </template>
</el-table-column> -->
          <el-table-column fixed="right" label="操作" width="200" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button size="mini" type="text" icon="el-icon-view" @click="handleView(scope.row)">查看
              </el-button>
              <el-button v-if="activeName === '已退回'" size="mini" type="text" icon="el-icon-edit"
                @click="handleEdit(scope.row)">编辑
              </el-button>
              <!-- <el-button
                size="mini"
                type="text"
                icon="el-icon-edit"
                @click="handleUpdate(scope.row)"
                >生成通知单
              </el-button> -->
              <el-button v-if="activeName === '已退回'" size="mini" type="text" icon="el-icon-delete"
                @click="handleDelete(scope.row)">删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
    <!-- 分页组件 -->
    <div class="pagination-part">
      <el-pagination background :current-page.sync="pagination.pageNo" @current-change="handleCurrentChange"
        :page-sizes="[10, 20, 30, 40]" :page-size.sync="pagination.pageSize" @size-change="handleSizeChange"
        layout="total, sizes, prev, pager, next, jumper" :total="tableTotal">
      </el-pagination>
    </div>

    <!-- 编辑/详情弹窗 -->
    <el-dialog title="生成表单" :visible.sync="dialogVisible" width="90%" append-to-body :close-on-click-modal="false"
      destroy-on-close>
      <view-dialog v-if="dialogVisible" :segmentList="segmentList" :tableDefect="tableDefect" :causesList="causesList"
        :rampTypeList="rampTypeList" :diseFirstType="diseFirstType" :stationLocationList="stationLocationList"
        :roadDirectionList="roadDirectionList" :segmentTypeList="segmentTypeList" :dialogItem="dialogItem"
        @cancel="viewCancel" />
    </el-dialog>
  </div>
</template>

<script>
import {
  getSegment,
  getDefectList,
  getSegmentTypeList,
  getCausesList,
  getDiseRoadPartDropDown,
  getDiseFirstType,
  getDiseTypeDetailed,
  getTaskareaDropDown,
  getWorkstationDropDown,
  getBridgeDropDown,
  getTunnelDropDown,
  getStationDropDown,
  getStationLocation,
  getRoadDirectionList,
  getRampTypeList,
  getCrossDropDown,
  getRampDropDown,
} from "@/api/xj/document";
import { getNoticeList, deleteNotice } from "@/api/xj/document-view"
import ViewDialog from "./components/view-dialog.vue";
export default {
  name: "MaintenanceNotice",
  components: { ViewDialog },
  data() {
    return {
      // 查询条件绑定
      searchForm: {},
      // 查询表单绑定
      noticeForm: {
        diseRoadPosiType: "",
        diseCauses: "",
        diseRoadPart: "",
        diseFirstType: "",
        diseTypeDetailed: "",
        matTaskAreaId: "",
        matTWorkStationId: "",
        diseRoadLine: "",
        connBridge: "",
        connTunnel: "",
        stationCode: "",
        stationLocation: "",
        diseRoadDirec: "",
        rampType: "",
        rampInterchangeCode: "",
        rampIntOrientation: "",
      },
      // 路段类型下拉数据
      segmentTypeList: [],
      // 病害成因下拉数据
      causesList: [],
      // 所在路段下拉
      roadPartList: [],
      // 病害类型下拉数据
      diseFirstType: [],
      // 病害类型二级下拉数据
      diseTypeDetailedList: [],
      // 工区下拉数据
      taskAreaList: [],
      // 工作站下拉数据
      matWorkStationList: [],
      // 桥梁下拉
      connBridgeList: [],
      // 隧道下拉
      connTunnelList: [],
      // 收费站下拉
      stationCodeList: [],
      // 收费站位置下拉数据
      stationLocationList: [],
      // 道路下拉数据
      roadDirectionList: [],
      // 匝道类型下拉数据
      rampTypeList: [],
      // 匝道立交下拉
      rampIntOrientationList: [],
      // 匝道立交方向下拉
      rampInterchangeCodeList: [],
      // 导航栏点击绑定
      activeName: "已生成",
      // 导航栏列表
      viewTableTabs: [{ title: "已生成", name: "已生成" }, { title: "已开工", name: "已开工" }, { title: "已完成", name: "已完成" }, { title: "已退回", name: "已退回" },],
      // 列表数据
      noticeList: [],
      // 列表加载状态
      loading: false,
      // 列表勾选绑定
      checkIds: [],
      // 列表分页绑定
      pagination: {
        pageNo: 1,
        pageSize: 10,
      },
      // 列表分页总数
      tableTotal: 0,

      // 弹窗显隐控制
      dialogVisible: false,
      // 传弹窗数据
      dialogItem: { title: "" },
      // 道路名称下拉
      segmentList: [],
      // 病害类型下拉级联
      tableDefect: [],
    }
  },
  mounted() {
    this.setSegmentTypeList()
    this.setCausesList()
    this.handleDiseRoadPart()
    this.setDiseFirstType()
    this.handleMatTaskArea()
    this.handleMatWorkStation()
    this.handleConnBridge()
    this.handleConnTunnel()
    this.handleStationCode()
    this.setStationLocation()
    this.setRoadDirectionList()
    this.setRampTypeList()
    this.handleRampIntOrientation()
    this.getSegmentList()
    this.getDefectData()
    this.getList()
  },
  methods: {
    /**
     * @description: 获取路段下拉数据
     * @return {*}
     */
    getSegmentList() {
      getSegment().then(({ code, data }) => {
        if (code === 200) {
          this.segmentList = data;
        }
      });
    },

    /**
 * @description: 获取病害类型下拉数据
 * @return {*}
 */
    getDefectData() {
      getDefectList().then(({ code, data }) => {
        if (code === 200) {
          this.tableDefect = data;
        }
      });
    },

    /**
     * @description: 获取路段类型下拉列表数据
     * @return {*}
     */
    setSegmentTypeList() {
      getSegmentTypeList().then(({ code, data }) => {
        if (code === 200) {
          this.segmentTypeList = data;
        }
      })
    },

    /**
     * @description: 获取病害成因下拉列表数据
     * @return {*}
     */
    setCausesList() {
      getCausesList().then(({ code, data }) => {
        if (code === 200) {
          this.causesList = data;
        }
      })
    },

    /**
* @description: 获取所在路段下拉数据
* @param {*}
* @return {*}
*/
    handleDiseRoadPart(str) {
      getDiseRoadPartDropDown({ name: str }).then(({ code, data }) => {
        if (code === 200) {
          this.roadPartList = data
        }
      })
    },

    /**
   * @description: 修改所在路段事件
   * @param {*}
   * @return {*}
   */
    changeDiseRoadPart(value) {
      if (!value) {
        this.handleDiseRoadPart()
      }
    },

    /**
     * @description: 获取病害类型下拉列表数据
     * @return {*}
     */
    setDiseFirstType() {
      getDiseFirstType().then(({ code, data }) => {
        if (code === 200) {
          this.diseFirstType = data;
        }
      })
    },

    /**
    * @description: 病害类型一级修改事件
    * @param {*} row
    * @return {*}
    */
    changeDetailed(value) {
      this.noticeForm.diseTypeDetailed = "";
      const [child] = this.diseFirstType.filter(item => item.value === value)
      getDiseTypeDetailed({ parentId: child.key }).then(({ code, data }) => {
        if (code === 200) {
          this.diseTypeDetailedList = data;
        }
      })
    },

    /**
   * @description: 获取工区下拉数据
   * @param {*}
   * @return {*}
   */
    handleMatTaskArea(str) {
      getTaskareaDropDown({ name: str }).then(({ code, data }) => {
        if (code === 200) {
          this.taskAreaList = data
        }
      })
    },

    /**
   * @description: 修改工区事件
   * @param {*}
   * @return {*}
   */
    changeMatTaskArea(value) {
      if (!value) {
        this.handleMatTaskArea()
      }
    },

    /**
   * @description: 获取工作站下拉数据
   * @param {*}
   * @return {*}
   */
    handleMatWorkStation(str) {
      getWorkstationDropDown({ name: str }).then(({ code, data }) => {
        if (code === 200) {
          this.matWorkStationList = data
        }
      })
    },

    /**
   * @description: 工作站修改事件
   * @param {*}
   * @return {*}
   */
    changeMatWorkStation(value) {
      if (!value) {
        this.handleMatWorkStation()
      }
    },
    /**
     * @description: 获取桥梁下拉数据
     * @param {*}
     * @return {*}
     */
    handleConnBridge(str) {
      getBridgeDropDown({ name: str }).then(({ code, data }) => {
        if (code === 200) {
          this.connBridgeList = data
        }
      })
    },

    /**
   * @description: 桥梁修改事件
   * @param {*}
   * @return {*}
   */
    changeConnBridge(value) {
      if (!value) {
        this.handleConnBridge()
      }
    },

    /**
     * @description: 获取隧道下拉数据
     * @param {*}
     * @return {*}
     */
    handleConnTunnel(str) {
      getTunnelDropDown({ name: str }).then(({ code, data }) => {
        if (code === 200) {
          this.connTunnelList = data
        }
      })
    },

    /**
   * @description: 隧道修改事件
   * @param {*}
   * @return {*}
   */
    changeConnTunnel(value) {
      if (!value) {
        this.handleConnTunnel()
      }
    },

    /**
     * @description: 获取收费站下拉数据
     * @param {*}
     * @return {*}
     */
    handleStationCode(str) {
      getStationDropDown({ name: str }).then(({ code, data }) => {
        if (code === 200) {
          this.stationCodeList = data
        }
      })
    },

    /**
   * @description: 收费站修改事件
   * @param {*}
   * @return {*}
   */
    changeStationCode(value) {
      if (!value) {
        this.handleStationCode()
      }
    },
    /**
     * @description: 获取收费站位置下拉列表数据
     * @return {*}
     */
    setStationLocation() {
      getStationLocation().then(({ code, data }) => {
        if (code === 200) {
          this.stationLocationList = data;
        }
      })
    },

    /**
     * @description: 获取道路方向下拉列表数据
     * @return {*}
     */
    setRoadDirectionList() {
      getRoadDirectionList().then(({ code, data }) => {
        if (code === 200) {
          this.roadDirectionList = data;
        }
      })
    },

    /**
     * @description: 获取匝道类型下拉列表数据
     * @return {*}
     */
    setRampTypeList() {
      getRampTypeList().then(({ code, data }) => {
        if (code === 200) {
          this.rampTypeList = data;
        }
      })
    },

    /**
     * @description: 获取互通立交下拉数据
     * @param {*}
     * @return {*}
     */
    handleRampIntOrientation(str) {
      getCrossDropDown({ name: str }).then(({ code, data }) => {
        if (code === 200) {
          this.rampIntOrientationList = data
        }
      })
    },

    /**
   * @description: 互通立交修改事件
   * @param {*}
   * @return {*}
   */
    changeRampIntOrientation(value) {
      if (!value) {
        this.handleRampIntOrientation()
      }
      this.noticeForm.rampIntOrientation = ""
      this.handleRampInterchangeCode()
    },

    /**
     * @description: 获取匝道下拉数据
     * @param {*}
     * @return {*}
     */
    handleRampInterchangeCode() {
      getRampDropDown({ crossid: this.noticeForm.rampInterchangeCode }).then(({ code, data }) => {
        if (code === 200) {
          this.rampInterchangeCodeList = data
        }
      })
    },

    /**
   * @description: 点击查询事件
   * @param {*}
   * @return {*}
   */
    handleQuery() {
      this.searchForm = JSON.parse(JSON.stringify(this.noticeForm))
      this.pagination.pageNo = 1;
      this.getList();
    },

    /**
    * @description: 点击重置事件
    * @param {*}
    * @return {*}
    */
    resetQuery() {
      this.searchForm = {}
      this.noticeForm = {
        diseRoadPosiType: "",
        diseCauses: "",
        diseRoadPart: "",
        diseFirstType: "",
        diseTypeDetailed: "",
        matTaskAreaId: "",
        matTWorkStationId: "",
        diseRoadLine: "",
        connBridge: "",
        connTunnel: "",
        stationCode: "",
        stationLocation: "",
        diseRoadDirec: "",
        rampType: "",
        rampInterchangeCode: "",
        rampIntOrientation: "",
      },
        this.pagination.pageNo = 1;
      this.getList();
    },

    /**
    * @description: 获取列表数据
    * @param {*}
    * @return {*}
    */
    getList() {
      this.noticeList = [];
      this.loading = true;
      const dataItem = {
        ...this.searchForm,
        ...this.pagination,
        maintenanceStatus: this.activeName
      };
      getNoticeList(dataItem)
        .then(({ code, rows, total }) => {
          if (code === 200) {
            this.noticeList = rows;
            this.tableTotal = total;
          }
        })
        .finally(() => {
          this.loading = false;
        });
    },

    /**
    * @description: 点击列表查看事件
    * @param {*}
    * @return {*}
    */
    handleView(item) {
      this.dialogVisible = true
      this.dialogItem = { ...item, title: "view" }
    },

    /**
    * @description: 点击列表编辑事件
    * @param {*}
    * @return {*}
    */
    handleEdit(item) {
      this.dialogItem = { ...item, title: "edit" }
      this.dialogVisible = true
    },

    /**
    * @description: 点击列表删除事件
    * @param {*}
    * @return {*}
    */
    handleDelete(row) {
      this.$modal
        .confirm(`是否确认删除选中的1条记录？`)
        .then(() => {
          return deleteNotice(row.id);
        })
        .then(() => {
          this.getList();
          // this.$refs.defectTable.clearSelection();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => { });
    },

    /**
    * @description: 列表选择改变事件
    * @param {*} selection
    * @return {*}
    */
    handleSelectionChange(selection) {
      this.checkIds = selection.map((item) => item.id);
    },

    /**
  * @description: 切换分页
  * @param {*} arg
  * @return {*}
  */
    handleCurrentChange(arg) {
      this.pagination.pageNo = arg;
      this.getList();
    },

    /**
     * @description: 切换每页条数
     * @param {*} arg
     * @return {*}
     */
    handleSizeChange(arg) {
      this.pagination.pageSize = arg;
      this.getList();
    },

    /**
     * @description: 关闭弹窗方法
     * @param {*}
     * @return {*}
     */
    viewCancel() {
      this.dialogVisible = false;
      this.dialogItem = { title: "" }
      this.getList();
    }
  },

}
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  height: calc(100vh - 5.4rem);
  padding: 1rem;
  overflow-y: auto;
}

/* 分页样式 */
.pagination-part {
  width: 100%;
  display: flex;
  padding-top: 1rem;
  justify-content: flex-end;
}
</style>
