<!--
   *@description: 顶管工程
   *@author: yh Fu
   *@date: 2024-01-04 09:24:57
   *@version: V1.0.5
   -->

<template>
  <div class="app-container">
    <el-form :model="queryParams1" ref="queryForm1" size="small" :inline="true" v-show="showSearch" label-width="110px" @submit.native.prevent>
      <el-form-item label="工程名称" prop="enginName">
        <el-input v-model="queryParams1.enginName" placeholder="请输入工程名称" clearable></el-input>
      </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-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['zdsz:engineeringPipeJacking:edit']"
        >修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['zdsz:engineeringPipeJacking:remove']"
        >删除</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="comprehensiveList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <!--            <el-table-column label="工程id" align="center" prop="enginId" />-->
      <el-table-column label="工程名称" align="center" prop="enginName" />
      <el-table-column label="工程编码" align="center" prop="enginCode" />
      <el-table-column label="施工单位" align="center" prop="constructUnit" />
      <el-table-column label="工程规模" align="center" prop="enginScale" />
      <el-table-column label="施工质量" align="center" prop="constructQuality" />
      <el-table-column label="施工进度" align="center" prop="constructSchedule" />
      <!--            <el-table-column label="备注" align="center" prop="remark" show-overflow-tooltip/>-->
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="300">
        <template slot-scope="scope">
          <!-- <el-button
            type="text"
            icon="el-icon-edit"
            size="mini"
            @click="viewSource(scope.row)"
          >历史</el-button> -->
          <!-- <el-button
            size="mini"
            type="text"
            icon="el-icon-circle-check"
            @click="viewSource(scope.row,'check')"
            v-hasPermi="['zdsz:engineeringCivil:remove']"
          >审核
          </el-button> -->
          <el-button
            size="mini"
            type="text"
            icon="el-icon-time"
            @click="viewSource(scope.row)"
            v-hasPermi="['zdsz:engineeringPipeJacking:query']"
          >历史施工
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['zdsz:engineeringPipeJacking:edit']"
          >修改工程信息</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="addNodeInfo(scope.row)"
            v-hasPermi="['zdsz:engineeringPipeJacking:add']"
          >修改施工信息
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            v-hasPermi="['zdsz:engineeringPipeJacking:add']"
            @click="addMaterial(scope.row)"
          >添加用料
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['zdsz:engineeringPipeJacking:remove']"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams1.pageNum"
      :limit.sync="queryParams1.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改开栓|安检|维修对话框 -->
    <el-dialog :title="title" :visible.sync="open" append-to-body customClass="appendElDialog">
      <el-form ref="form" :model="queryParams" :rules="rules" label-width="110px">
        <el-form-item label="外建工程" prop="type">
          <el-select v-model="queryParams.type" placeholder="请选择类型">
            <el-option
              v-for="e in dict.type.engin_type"
              :key="e.value"
              :label="e.label"
              :value="e.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="工程名称" prop="enginName">
          <el-input v-model="queryParams.enginName" placeholder="请填写外建工程"></el-input>
        </el-form-item>
        <el-form-item label="工程地址" prop="enginAddre">
          <el-input v-model="queryParams.enginAddre" placeholder="请填写工程地址"></el-input>
        </el-form-item>
        <el-form-item label="工程编码" prop="enginCode">
          <el-input v-model="queryParams.enginCode" placeholder="请填写工程编码"></el-input>
        </el-form-item>
        <el-form-item label="施工单位" prop="type">
          <el-input v-model="queryParams.type" placeholder="请填写施工单位"></el-input>
        </el-form-item>
        <el-form-item label="工程规模" prop="enginScale">
          <el-input v-model="queryParams.enginScale" placeholder="请填写联系方式"></el-input>
        </el-form-item>
        <el-form-item label="施工质量" prop="constructQuality">
          <el-input v-model="queryParams.constructQuality" placeholder="请填写联系方式"></el-input>
        </el-form-item>
        <el-form-item label="工程类型" prop="type">
          <el-select v-model="queryParams.type" placeholder="请选择类型">
            <el-option
              v-for="e in dict.type.engin_type"
              :key="e.value"
              :label="e.label"
              :value="e.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="施工进度" prop="constructSchedule">
          <el-input v-model="queryParams.constructSchedule" placeholder="请填写施工进度"/>
        </el-form-item>
        <el-form-item label="备注" prop="remark" style="width: 23.3%;">
          <el-input
            v-model="queryParams.remark"
            type="textarea"
            placeholder="请输入内容"
            class="remark_input"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <!-- <el-button :loading="buttonLoading" type="primary" @click="submitForm">确定</el-button> -->
        <el-button :loading="buttonLoading" type="primary" @click="toNodeDetail">修改施工信息</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 新增主表与节点 -->
    <el-dialog :visible="nodeDetailVisible" :rules="nodeRules" title="节点信息" append-to-body customClass="appendElNodeDialog">
      <el-form ref="nodeForm" :model="zEngineeringInfoBo" :rules="nodeRules" label-width="110px">
        <el-form-item label="节点类型" prop="type">
          <el-input v-model="nodeType" placeholder="顶1管" disabled></el-input>
        </el-form-item>
        <el-form-item label="施工地址" prop="constructAddre">
          <el-input v-model="zEngineeringInfoBo.constructAddre" placeholder="请填写施工地址"></el-input>
        </el-form-item>
        <el-form-item label="施工人电话" prop="constructPhone">
          <el-input v-model="zEngineeringInfoBo.constructPhone" placeholder="请填写施工人电话"></el-input>
        </el-form-item>
        <el-form-item label="施工人" prop="constructUser">
          <el-input v-model="zEngineeringInfoBo.constructUser" placeholder="请填写施工人"></el-input>
        </el-form-item>
        <el-form-item label="负责人" prop="headName">
          <el-input v-model="zEngineeringInfoBo.headName" placeholder="请填写负责人"></el-input>
        </el-form-item>
        <el-form-item label="负责人电话" prop="headPhone">
          <el-input v-model="zEngineeringInfoBo.headPhone" placeholder="请填写负责人电话"></el-input>
        </el-form-item>
        <el-form-item label="回填时间" prop="backfillTime">
          <el-date-picker
            v-model="zEngineeringInfoBo.backfillTime"
            value-format="yyyy-MM-dd hh:mm:ss"
            type="datetime"
            placeholder="请选择回填日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="施工时间" prop="constructTime">
          <el-date-picker
            v-model="zEngineeringInfoBo.constructTime"
            value-format="yyyy-MM-dd hh:mm:ss"
            type="datetime"
            placeholder="请选择施工时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="是否按图纸施工" prop="constructAccordingDrawings">
          <el-select v-model="zEngineeringInfoBo.constructAccordingDrawings">
            <el-option
              v-for="e in constructAccordingDrawingsOption"
              :key="e.value"
              :label="e.label"
              :value="e.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="分段打压" prop="segmentedCompressionQualified">
          <el-select v-model="zEngineeringInfoBo.segmentedCompressionQualified">
            <el-option
              v-for="e in segmentedCompressionQualifiedOption"
              :key="e.value"
              :label="e.label"
              :value="e.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="自闭阀类型" prop="selfClosingValveType">
          <el-select v-model="zEngineeringInfoBo.selfClosingValveType">
            <el-option
              v-for="e in dict.type.self_closing_valve_type"
              :key="e.value"
              :label="e.label"
              :value="e.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="上门类型" prop="visitType">
          <el-select v-model="zEngineeringInfoBo.visitType">
            <el-option
              v-for="e in dict.type.visit_type"
              :key="e.value"
              :label="e.label"
              :value="e.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="照片" prop="zEngiineeringPhotoBoList" style="width: 100%;">
          <FileUpload ref="obsImageUpload" :limit="9999"  :value="zEngineeringInfoBo.zEngiineeringPhotoBoList"
                      @input="getUrl"></FileUpload>
        </el-form-item>
        <el-button :loading="buttonLoading" type="primary" @click="submitForm">提交</el-button>
        <el-button @click="nodeCancel">取 消</el-button>
      </el-form>
    </el-dialog>

    <!-- 顶管工程修改 -->
    <EngineePipe ref="enginPipe"/>

    <!-- 查看历史 -->
    <ConstructionDetails
      ref="ConstructionDetails"
      :currentCollapses="currentCollapses"
      @checkWorking="checkWorking"
      @updateNodeOption="updateNodeOption"
      :status="status"
      enginType="顶管工程"
    />
  </div>
</template>

<script>
import EngineePipe from "@/components/EngineePipe"
import ConstructionDetails from "@/components/ConstructionDetails"             // 查看历史
import {
  addEnginee,                                // 新增工程
  getPipeJackingList,                        // 顶管工程列表
  viewEngineeringPipeJacking,                // 顶管工程查看详情
  deleteEngineeringPipeJacking,              // 删除工程查看详情
  detailEngineeringPipeJacking,              // 历史
  getDictList,
  engineeringCivilReview,
  putEngineeringPipeJacking
} from "@/api/zdsz/enginee"
import {getDicts} from "@/api/system/dict/data";

export default {
  name: "openrepair",
  components:{
    EngineePipe,
    ConstructionDetails
  },
  dicts:['pass_check','is_repair','engin_type','self_closing_valve_type','visit_type','pipe_jack'],
  data() {
    return {
      currentCollapses:[],  // 当前节点历史数据
      // 按钮loading
      buttonLoading: false,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 开栓|安检|维修表格数据
      comprehensiveList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      enginTypeOption:[
        {
          value:'0',
          label:'民用工程'
        },
        {
          value:'2',
          label:'工业工程'
        },
        {
          value:'1',
          label:'市政工程'
        },
        {
          value:'3',
          label:'顶管工程'
        },
        {
          value:'4',
          label:'危险作业工程'
        },
        {
          value:'5',
          label:'基建工程'
        },
      ],
      nodeType:'1',               // 节点类型
      // 查询参数
      queryParams1: {
        enginName:'',
        pageNum:1,
        pageSize:10
      },
      queryParams: {
        enginName:'',            // 工程名称
        enginAddre:'',            // 工程地址
        enginScale:'',           // 工程名称联系方式
        enginCode:'',       // 工程编码
        constructQuality:'',      // 施工质量
        type:null,         // 工程类型
        constructSchedule:"",       // 施工进度
        enginType:'',             // 工程类型  民用工程 0 ,市政工程 1,工业工程 2 ,顶管工程 3,危险作业工程 4,基建工程 5
        remark:'',                // 备注
        zEngineeringNodeBo:{
          type:null,
          zEngineeringInfoBo:{},    //节点信息
        }
      },
      zEngineeringInfoBo:{
        constructAddre:'',        // 施工地址
        constructPhone:'',        // 施工人电话
        constructUser:'',         // 施工人
        headName:'',              // 负责人
        headPhone:'',             // 负责人电话
        constructAccordingDrawings:'', // 是否按图纸施工
        segmentedCompressionQualified:'', // 分段打压是否合格
        selfClosingValveType:'',          // 自闭阀类型
        visitType:'',                     // 上门类型
        backfillTime:'',                  // 回填时间
        constructTime:'',                  // 施工时间
        zEngiineeringPhotoBoList:[],              // 图片列表
        zEngineeringMaterialBo:[],// 用料对象

      },                          // 节点信息
      constructAccordingDrawingsOption:[
        {
          value:'1',
          label:'是'
        },
        {
          value:'0',
          label:'否'
        }
      ],
      segmentedCompressionQualifiedOption:[
        {
          value:'1',
          label:'是'
        },
        {
          value:'0',
          label:'否'
        }
      ],
      nodeDetailVisible:false,
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        areaId: [
          { required: true, message: "小区不能为空", trigger: "change" }
        ],
        constructSchedule: [
          { required: true, message: "施工进度不能为空" ,trigger: 'blur'}
        ],
        enginType: [
          { required: true, message: "外建工程不能为空" ,trigger: 'blur'}
        ],
        constructQuality: [
          { required: true, message: "建立联系电话不能为空" ,trigger: 'blur'}
        ],
        enginName: [
          { required: true, message: "工程名称不能为空" ,trigger: 'blur'}
        ],
        enginAddre: [
          { required: true, message: "工程地址不能为空" ,trigger: 'blur'}
        ],
        enginScale: [
          { required: true, message: "联系方式不能为空" ,trigger: 'blur'}
        ],
        enginCode: [
          { required: true, message: "工程编码不能为空" ,trigger: 'blur'}
        ],
        buildingId: [
          { required: true, message: "楼栋不能为空", trigger: "change" }
        ],
        unitId: [
          { required: true, message: "单元不能为空", trigger: "change" }
        ],
        houseId: [
          { required: true, message: "房间不能为空", trigger: "change" }
        ],
        type: [
          { required: false, message: "类型不能为空", trigger: "change" }
        ],
        isQualified: [
          { required: true, message: "安检是否合格不能为空", trigger: "blur" }
        ],
        remark: [
          { required: false, message: "备注不能为空", trigger: "blur" }
        ],
      },
      // 节点规则校验
      nodeRules:{
        type: [
          { required: true, message: "施工地址不能为空" ,trigger: 'blur'}
        ],
        constructAddre: [
          { required: true, message: "施工地址不能为空" ,trigger: 'blur'}
        ],
        constructPhone: [
          { required: true, message: "施工人电话不能为空" ,trigger: 'blur'}
        ],
        constructUser: [
          { required: true, message: "施工人不能为空" ,trigger: 'blur'}
        ],
        headName: [
          { required: true, message: "负责人不能为空" ,trigger: 'blur'}
        ],
        headPhone: [
          { required: true, message: "负责人电话不能为空" ,trigger: 'blur'}
        ],

      },
      currentType:null,
      nodeList:[],
      checkList:[],
      currentCheckList:[],
      enginNodeStatus:null,
      status:null,
      createTime:'',
      enginId:null,
      updateParams:{}
    };
  },
  created() {
    this.getList();
  },
  methods: {
    // 填写节点信息
    updateNodeOption(zEngineeringInfoBoList){
      delete this.updateParams.zEngineeringNodeBoList
      this.updateParams.zEngineeringNodeBo.zEngineeringInfoBoList = zEngineeringInfoBoList
      putEngineeringPipeJacking(this.updateParams).then(res => {
        console.log(res)
        if(res.code == 200){
          this.$message({
            message: '修改成功',
            type: 'success'
          });
          this.$refs.ConstructionDetails.dialogVisible = false
          this.updateParams = {}

        }
      })
    },
    // 节点单项审核
    checkWorking(checkingInfo){
      let params = checkingInfo
      params.createTime = this.createTime
      params.engInfoId = this.currentId
      engineeringCivilReview(params).then(res => {
        if(res.code == 200){
          this.$message({
            message: '审核成功',
            type: 'success'
          });
        }
      })
    },
    async addNodeInfo(e){
      this.nodeDetailType = '修改'
      this.currentId = e.id
      this.enginId = e.id
      this.status = 'put'
      let val = e.enginType + "_" + e.enginClassification
      const res = await getDicts('pipe_jack');
      const r = res.data!=null?res.data.map(o=>{return {label:o.dictLabel,value:o.dictValue}}):[];
      this.$refs.ConstructionDetails.open(r)
      return
      getDicts(val).then(res => {
        let dict = []
        for (let i = 0; i < res.data.length; i++) {
          dict.push({
            "label": res.data[i].dictLabel,
            "value": res.data[i].dictValue,
          })
        }

      })
    },
    // 新增物料
    addMaterial(data) {
      this.reset();
      this.title = "添加用料";
      this.enginNodeStatus = '添加用料'
      this.loading = true;
      const id = data.id || this.ids
      viewEngineeringPipeJacking(id).then(res => {
        this.loading = false;
        let newData = res.data
        // let val = newData.enginType + "_" + newData.enginClassification
        this.currentCheckList = []
        // getDicts(val).then(res => {
        //   this.checkList = res.data
        // })

        this.queryParams = newData
        console.log(this.queryParams.areaId)

        // console.log('选中节点集合',this.currentCheckList)
        // this.enginClassification = zEngineeringNodeBo.type
        // newData.zEngineeringNodeBo = zEngineeringNodeBo
        this.currentType = 'addMaterial'
        console.log('顶管工程详情',res.data)
        this.$refs.enginPipe.openDialog({
          id: data.id,
          type: '顶管工程'
        }, 'addMaterial',res.data)
        // this.open = true

      })
    },
    // 查看历史
    async viewSource(e,type = null){
      const res = await getDicts('pipe_jack');
      const r = res.data!=null?res.data.map(o=>{return {label:o.dictLabel,value:o.dictValue}}):[];
      this.currentId = e.id
      this.status = 'read-only'
      console.log('__________',r)
      this.$refs.ConstructionDetails.open(r,_,type)
    },
    viewNodeSource(e){
      console.log('查看历史传值',e,this.currentId)
      detailEngineeringPipeJacking({
        id:this.currentId,
        type:e
      }).then(res => {
        console.log(res)
        this.createTime = res.data.createTime
        try {
          this.updateParams = res.data
          this.currentCollapses = res.data.zEngineeringNodeBo.zEngineeringInfoBoList
        } catch (error) {
          this.currentCollapses = [];
        }
        console.log(this.currentCollapses)
      })
    },
    nodeCancel(){
      this.nodeDetailVisible = false
    },
    toNodeDetail(){
      getDictList({enginType:['pipe_jack']}).then(res => {
        this.nodeList = res.data
      })
      this.nodeDetailVisible = true
      return
      this.$refs['form'].validate(e => {
        if(e){
          this.nodeDetailVisible = true
        }
      })

    },
    getUrl(url) {
      this.zEngineeringInfoBo.zEngiineeringPhotoBoList = this.$refs.obsImageUpload.fileList?this.$refs.obsImageUpload.fileList.map(e=>e.url):[];
    },
    /** 查询开栓|安检|维修列表 */
    getList() {
      this.loading = true;
      getPipeJackingList(this.queryParams1).then(res => {
        this.comprehensiveList = res.rows;
        this.total = res.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.$nextTick(() => {
        this.$refs['form'].resetFields()
        this.$refs['nodeForm'].resetFields()
      })
      this.resetForm("form");
      this.resetForm("nodeForm");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams1.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams1.enginName=''
      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.title = "修改顶管工程";
      // const id = row.id || this.ids;
      // viewEngineeringPipeJacking(id).then(res => {
      //   console.log(res)
      //   let newData = res.data
      //   console.log(newData)
      //   console.log(res.data.zEngineeringNodeBoList[0].type)
      //   let zEngineeringNodeBo = {
      //       type:res.data.zEngineeringNodeBoList[0].type,
      //       zEngineeringInfoBo:res.data.zEngineeringNodeBoList[0].zEngineeringInfoBo
      //   }
      //   newData.zEngineeringNodeBo = zEngineeringNodeBo
      //   this.currentType = 'put'
      //   this.queryParams = newData
      //   console.log(this.queryParams)
      //   this.zEngineeringInfoBo = newData.zEngineeringNodeBo.zEngineeringInfoBo
      //   this.open = true
      // })
      // return
      const id = row.id || this.ids;
      viewEngineeringPipeJacking(id).then(res => {
        this.$refs.enginPipe.putEnginPipe(res.data,'put')
      })
    },
    /** 提交按钮 */
    submitForm() {
      // this.$refs["nodeForm"].validate(valid => {
      // if (valid) {
      this.queryParams.zEngineeringNodeBo.zEngineeringInfoBo = this.zEngineeringInfoBo
      addEnginee(this.queryParams).then(res => {
      })
      // }
      // });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal.confirm('是否确认删除选择数据项？').then(() => {
        this.loading = true;
        return deleteEngineeringPipeJacking(ids);
      }).then(() => {
        this.loading = false;
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {
      }).finally(() => {
        this.loading = false;
      });
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('zdsz/engineeringPipeJacking/export', {
        ...this.queryParams
      }, `comprehensive_${new Date().getTime()}.xlsx`)
    }
  }
};
</script>


<style lang="scss" scoped>
::v-deep .appendElDialog{
  width: 70%;
  height: 80%;


  .el-dialog__body{
    height: 85%;
  }

  .el-form-item{
    margin-bottom: 22px;
    width: 44%;
    display: inline-block;
  }
  .el-form-item:nth-child(2n+2){
    margin-left: 5%;
  }
  .el-form-item:not(:nth-child(1):nth-child(2)){
    margin-top: 0.5%;
  }
  .remark_input{
    .el-textarea__inner{
      width: 238%;
      height: 190px;
    }
  }
}

::v-deep .appendElNodeDialog{
  // width: 70%;
  height: 80%;


  .el-dialog__body{
    height: 85%;
  }

  .el-form-item{
    margin-bottom: 22px;
    width: 44%;
    display: inline-block;
  }
  .el-form-item:nth-child(2n+2){
    margin-left: 5%;
  }
  .el-form-item:not(:nth-child(1):nth-child(2)){
    margin-top: 0.5%;
  }
}
</style>
