<template>
  <div style="padding: 10px 15px">
    <div class="maintindetail">
      <div class="title">
        {{ facilitieinfo.ext1.tz_ss_name  }}养护计划
        <div class="btngroup">
          <el-button type="primary" v-if="maintaininfo.status == 1" @click="showpf = true"
            >派 发</el-button
          >

          <el-button
            type="primary"
            v-if="maintaininfo.status == 2"
            @click="showzxfk = true"
            >执行反馈</el-button
          >
          <el-button
            type="primary"
            v-if="maintaininfo.status == 3"
            @click="docgsc"
            >成果上传</el-button
          >
          <el-button type="primary" v-if="maintaininfo.status == 3" @click="yssq"
            >申请验收</el-button
          >
          <el-button
            type="primary"
            v-if="maintaininfo.status == 4"
            @click="showysqk = true"
            >验收情况上传</el-button
          >

          <el-button
            type="danger"
            @click="
              () => {
                router.back();
              }
            "
            >返回</el-button
          >
        </div>
      </div>
      <div class="card">
        <div class="title" style="position: relative">设施信息</div>
        <div class="body">
          <el-row>
            <el-col :span="8">台账编号：{{ facilitieinfo.ext1.tz_id }}</el-col>
            <el-col :span="8">设施名称：{{ facilitieinfo.ext1.tz_ss_name }}</el-col>
            <el-col :span="8"
              >运维长度（m）：{{ facilitieinfo.ext1.tz_ss_data_length }}</el-col
            >
            <el-col :span="8">管径范围（mm）：{{ facilitieinfo.ext1.tz_ss_dn }}</el-col>
            <el-col :span="8">设施起止点：{{ facilitieinfo.ext1.tz_ss_road_se }}</el-col>
            <el-col :span="8"
              >辖区班组：{{
                (facilitieinfo.ext1.tz_ss_unit == ""
                  ? []
                  : facilitieinfo.ext1.tz_ss_unit ?? []
                )
                  .map((i) => {
                    return (
                      alldept.find((p) => {
                        return p.deptId + "" === i + "";
                      })?.deptName ?? "-"
                    );
                  })
                  .join("、")
              }}</el-col
            >
          </el-row>
        </div>
      </div>

      <div class="card">
        <div class="title" style="position: relative">
          养护计划信息
          <div
            style="position: absolute; right: 10px; top: 0; color: #333; font-size: 20px"
          >
            {{
              maintain_status.filter(
                (i) => i.value.toString() === maintaininfo.status.toString()
              )[0]?.label ?? "-"
            }}
          </div>
        </div>
        <div class="body">
          <el-row>
            <el-col :span="6"
              >所在道路：{{ maintaininfo.ext1.facilities_road ?? "-" }}</el-col
            >
            <el-col :span="6"
              >养护起点：{{ maintaininfo.ext1.facilities_start ?? "-" }}</el-col
            >
            <el-col :span="6"
              >养护终点：{{ maintaininfo.ext1.facilities_end ?? "-" }}</el-col
            >
            <el-col :span="6"
              >养护时间：{{ maintaininfo.ext1.task.datestart ?? "-" }} ~
              {{ maintaininfo.ext1.task.dateend ?? "-" }}</el-col
            >
            <el-col :span="6"
              >管道养护（合计）：{{
                evilFn(
                  (maintaininfo.ext1.task.gd ?? [])
                    .map((i) => {
                      var p = 0;
                      try {
                        p = parseFloat(i.yh_length);
                      } catch (e) {
                        p = 0;
                      }
                      return p == "" || isNaN(p) ? 0 : p;
                    })
                    .join("+")
                )
              }}
              米</el-col
            >
            <el-col :span="6">检查井：{{ maintaininfo.ext1.task.jcj ?? "-" }} 座</el-col>
            <el-col :span="6">雨水口：{{ maintaininfo.ext1.task.ysk ?? "-" }} 座</el-col>
            <el-col :span="6">排河口：{{ maintaininfo.ext1.task.phk ?? "-" }} 座</el-col>

            <el-col :span="4">雨水口养护详情</el-col>
            <el-col :span="4">单箅：{{ maintaininfo.ext1.task.bz_dan }} 个</el-col>
            <el-col :span="4">双箅：{{ maintaininfo.ext1.task.bz_shuang }} 个</el-col>
            <el-col :span="4">三箅：{{ maintaininfo.ext1.task.bz_san }} 个</el-col>
            <el-col :span="4">四箅：{{ maintaininfo.ext1.task.bz_si }} 个</el-col>
            <el-col :span="4">多箅：{{ maintaininfo.ext1.task.bz_duo }} 个</el-col>

            <el-col
              :span="24"
              v-for="(item, index) in maintaininfo.ext1.task.gd"
              style="margin-bottom: 0px"
            >
              <el-row style="margin-bottom: 0px">
                <el-col :span="4">{{ index == 0 ? "管道养护详情" : "" }} </el-col>
                <el-col :span="6">管道养护：{{ item.yh_length }}（m）</el-col>
                <el-col :span="6">管道口径：{{ item.yh_gj }}（mm）</el-col>
                <el-col :span="8">备注：{{ item.yh_remark }}</el-col>
              </el-row>
            </el-col>
            <el-col :span="24"> 备注：{{ maintaininfo.maintainRemark ?? "-" }} </el-col>

            <!-- <el-col :span="6"
              >养护类型：{{
                maintain_type.filter((i) => i.value === maintaininfo.maintainType + "")[0]
                  ?.label ?? "-"
              }}</el-col
            >
            <el-col :span="6">养护数量：{{ maintaininfo.maintainCount }}</el-col>
            <el-col :span="6">养护单位：{{ maintaininfo.maintainUnit }}</el-col>
            <el-col :span="6"
              >报南排：{{ maintaininfo.maintainReportNp == 1 ? "是" : "否" }}</el-col
            >
            <el-col :span="6">年计划：{{ maintaininfo.maintainYear }}</el-col>
            <el-col :span="6">月计划：{{ maintaininfo.maintainMonth }}</el-col>
            <el-col :span="12">计划备注：{{ maintaininfo.maintainDes }}</el-col>
            <el-col :span="24">备注：{{ maintaininfo.maintainRemark }}</el-col> -->
          </el-row>
        </div>
      </div>

      <div class="card" v-if="maintaininfo.status > 1">
        <div class="title">派发信息</div>
        <div class="body">
          <el-row>
            <el-col :span="6"
              >负责人：{{
                allusers.filter(
                  (i) =>
                    i.userId.toString() ===
                    JSON.parse(
                      maintaininfo.maintainLogs.filter((ii) => ii.maintainStatus === 2)[0]
                        .logDes
                    ).fzr.toString()
                )[0]?.nickName ?? "-"
              }}</el-col
            >
            <el-col :span="6"
              >联系方式：{{
                allusers.filter(
                  (i) =>
                    i.userId.toString() ===
                    JSON.parse(
                      maintaininfo.maintainLogs.filter((ii) => ii.maintainStatus === 2)[0]
                        .logDes
                    ).fzr.toString()
                )[0]?.phonenumber ?? "-"
              }}</el-col
            >
            <el-col :span="6"
              >处置班组：{{
                alldept
                  .filter(
                    (i) =>
                      (
                        JSON.parse(
                          maintaininfo.maintainLogs.filter(
                            (ii) => ii.maintainStatus === 2
                          )[0].logDes
                        ).fzbz ?? []
                      ).indexOf(i.deptId) != -1
                  )
                  .map((i) => i.deptName)
                  .join(",")
              }}</el-col
            >
            <el-col :span="6"
              >派发时间：{{
                maintaininfo.maintainLogs.filter((ii) => ii.maintainStatus === 2)[0]
                  .createTime
              }}</el-col
            >
            <el-col :span="12" v-if="maintaininfo.status > 2"> 作业照片： </el-col>
            <el-col :span="12" v-if="maintaininfo.status > 2"> 工作照片： </el-col>
            <el-col :span="12" v-if="maintaininfo.status > 2">
              <ImagePreview
                v-model:src="
                  JSON.parse(
                    maintaininfo.maintainLogs.filter((ii) => ii.maintainStatus === 3)[0]
                      .logDes ?? '{}'
                  ).gzz.zyimages
                "
                :height="'120px'"
                :width="'120px'"
              ></ImagePreview>
            </el-col>
            <el-col :span="12" v-if="maintaininfo.status > 2">
              <ImagePreview
                v-model:src="
                  JSON.parse(
                    maintaininfo.maintainLogs.filter((ii) => ii.maintainStatus === 3)[0]
                      .logDes ?? '{}'
                  ).gzz.gzimages
                "
                :height="'120px'"
                :width="'120px'"
              ></ImagePreview>
            </el-col>
          </el-row>
        </div>
      </div>

      <div class="card" v-if="maintaininfo.status > 2">
        <div class="title" style="position: relative">作业成果</div>
        <div class="body">
          <div class="titleheader" :style="`${'margin-top:0px'}`">
            {{ "完成工作量" }}
          </div>
          <div>
            <el-row>
              <el-col :span="24">
                <el-table
                  :data="getmapdataext(cgscobj.wcgzl, 'default')"
                  border
                  :summary-method="getSummaries"
                  show-summary
                  style="width: 100%; margin-top: 20px"
                >
                  <el-table-column fixed type="expand">
                    <template #default="props">
                      <div
                        style="
                          width: 80%;
                          margin-left: 10%;
                          margin-top: 5px;
                          margin-bottom: 10px;
                        "
                      >
                        <el-table :data="props.row.gd" :border="1">
                          <el-table-column label="管渠养护(米)" prop="yh_length" />
                          <el-table-column label="管径(mm)" prop="yh_gj" />
                          <el-table-column label="泥量(方)" prop="nl" />
                          <el-table-column label="备注" prop="yh_remark" />
                        </el-table>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column type="index" label="序号" fixed width="80" />
                  <el-table-column prop="time" label="时间" fixed width="150" />
                  <el-table-column prop="gd.yh_length" label="管渠养护(米) " width="120">
                    <template #default="scope">
                      {{
                        evilFn(
                          scope.row.gd
                            .map((i) => {
                              return parseFloat(i.yh_length ?? 0);
                            })
                            .join("+")
                        )
                      }}
                    </template>
                  </el-table-column>
                  <el-table-column prop="jcj" label="检查井(座)" width="100" />
                  <el-table-column prop="ysk" label="雨水口(座)" width="100" />
                  <el-table-column prop="bz_dan" label="单箅(块)" />
                  <el-table-column prop="bz_shuang" label="双箅(块)" />
                  <el-table-column prop="bz_san" label="三箅(块)" />
                  <el-table-column prop="bz_si" label="四箅(块)" />
                  <el-table-column prop="bz_duo" label="多箅(块)" />
                  <el-table-column prop="$bz_" label="箅子合计(块)" width="120">
                    <template #default="scope">
                      {{
                        (parseFloat(scope.row.bz_dan) ?? 0) +
                        (parseFloat(scope.row.bz_shuang) ?? 0) +
                        (parseFloat(scope.row.bz_san) ?? 0) +
                        (parseFloat(scope.row.bz_si) ?? 0) +
                        (parseFloat(scope.row.bz_duo) ?? 0)
                      }}
                    </template>
                  </el-table-column>
                  <el-table-column prop="phk" label="排河口(座)" width="100" />
                  <el-table-column prop="gd.nl" label="泥量(方)" width="100">
                    <template #default="scope">
                      {{
                        evilFn(
                          scope.row.gd
                            .map((i) => {
                              return parseFloat(i.nl ?? 0);
                            })
                            .join("+")
                        )
                      }}
                    </template>
                  </el-table-column>

                  <el-table-column prop="tbr"  label="填报人">
                    <template #default="scope">
                      {{
                        allusers
                          .filter((i) => scope.row.tbr + "" === i.userId + "")
                          .map((i) => i.nickName)
                          .join(",")
                      }}
                    </template>
                  </el-table-column>
                  <el-table-column prop="remark" label="备注"  />

                   <el-table-column  label="操作" fixed="right" width="80" >
                     <template #default="scope">
                       <el-button text size="small" @click="editgzl(scope.row.time)"> {{ maintaininfo.status < 4 ?'修改':'核查' }} </el-button>
                     </template>

                   </el-table-column>
                </el-table>
              </el-col>
            </el-row>
          </div>
          <div class="titleheader" :style="`${'margin-top:0px'}`">
            {{ "未能作业" }}
          </div>
          <div class="wnzyqk">
            <el-row>

                <el-col :span="3">项目</el-col>
                <el-col :span="3">占压</el-col>
                <el-col :span="3">围挡</el-col>
                <el-col :span="3">掩埋</el-col>
                <el-col :span="3">高水位</el-col>
                <el-col :span="3">打不开</el-col>
                <el-col :span="3">偏心井</el-col>
                <el-col :span="3">其他</el-col>

                 <el-col :span="3">管渠（米）</el-col>
                <el-col :span="3">{{cgscobj.wnzyqk.phk.zy}}</el-col>
                <el-col :span="3">-</el-col>
                <el-col :span="3">{{cgscobj.wnzyqk.phk.wd}}</el-col>
                <el-col :span="3">-</el-col>
                <el-col :span="3">{{cgscobj.wnzyqk.phk.gsw}}</el-col>
                <el-col :span="3">-</el-col>
                <el-col :span="3">{{cgscobj.wnzyqk.phk.qt}}</el-col>

                 <el-col :span="3">检查井（座）</el-col>
                <el-col :span="3">{{cgscobj.wnzyqk.jcj.zy}}</el-col>
                <el-col :span="3">{{cgscobj.wnzyqk.jcj.wd}}</el-col>
                <el-col :span="3">{{cgscobj.wnzyqk.jcj.ym}}</el-col>
                <el-col :span="3">{{cgscobj.wnzyqk.jcj.gsw}}</el-col>
                <el-col :span="3">{{cgscobj.wnzyqk.jcj.dbk}}</el-col>
                <el-col :span="3">{{cgscobj.wnzyqk.jcj.pxj}}</el-col>
                <el-col :span="3">{{cgscobj.wnzyqk.jcj.qt}}</el-col>

                 <el-col :span="3">雨水口（座）</el-col>
                 <el-col :span="3">{{cgscobj.wnzyqk.ysk.zy}}</el-col>
                <el-col :span="3">{{cgscobj.wnzyqk.ysk.wd}}</el-col>
                <el-col :span="3">{{cgscobj.wnzyqk.ysk.ym}}</el-col>
                <el-col :span="3">{{cgscobj.wnzyqk.ysk.gsw}}</el-col>
                <el-col :span="3">{{cgscobj.wnzyqk.ysk.dbk}}</el-col>
                <el-col :span="3">-</el-col>
                <el-col :span="3">{{cgscobj.wnzyqk.ysk.qt}}</el-col>

                 <el-col :span="24" style="text-align: left;padding-left:20px">备注：{{cgscobj.wnzyqk.remark}}</el-col>



            </el-row>
          </div>

          <div class="titleheader" :style="`${'margin-top:0px'}`">
            {{ "作业单" }}
          </div>
          <div>
            <el-row>
              <el-col :span="24">
                <div style="position: relative">
                  作业图纸：
                  <div style="position: absolute; top: 0; left: 60px; width: 100%">
                    <div
                      style="
                        margin-bottom: 10px;
                        color: #4f9eee;
                        display: inline-block;
                        margin-left: 10px;
                      "
                      v-for="i in cgscobj.zyd.zytz.split(',') ?? []"
                    >
                      <a target="_blank" :href="`${STATICURL + i}`">
                        {{ i.split("/")[i.split("/").length - 1] }}
                      </a>
                    </div>
                  </div>
                </div>
              </el-col>

              <el-col :span="24">
                <div style="position: relative">
                  记录单：
                  <div style="position: absolute; top: 0; left: 60px; width: 100%">
                    <div
                      style="
                        margin-bottom: 10px;
                        color: #4f9eee;
                        display: inline-block;
                        margin-left: 10px;
                      "
                      v-for="i in cgscobj.zyd.jld.split(',') ?? []"
                    >
                      <a target="_blank" :href="`${STATICURL + i}`">
                        {{ i.split("/")[i.split("/").length - 1] }}
                      </a>
                    </div>
                  </div>
                </div>
              </el-col>

              <el-col :span="24">
                <div style="position: relative">
                  收方单：
                  <div style="position: absolute; top: 0; left: 60px; width: 100%">
                    <div
                      style="
                        margin-bottom: 10px;
                        color: #4f9eee;
                        display: inline-block;
                        margin-left: 10px;
                      "
                      v-for="i in cgscobj.zyd.sdf.split(',') ?? []"
                    >
                      <a target="_blank" :href="`${STATICURL + i}`">
                        {{ i.split("/")[i.split("/").length - 1] }}
                      </a>
                    </div>
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
      </div>

      <div class="card" v-if="maintaininfo.status > 4">
        <div class="title" style="position: relative">验收情况</div>
        <div class="body">
         <el-row>
              <el-col :span="24">
                <div style="position: relative">
                  现场签单：
                  <div style="position: absolute; top: 0; left: 60px; width: 100%">
                    <div
                      style="
                        margin-bottom: 10px;
                        color: #4f9eee;
                        display: inline-block;
                        margin-left: 10px;
                      "
                      v-for="i in ysqkobj.sfzlsc.xcqd.split(',') ?? []"
                    >
                      <a target="_blank" :href="`${STATICURL + i}`">
                        {{ i.split("/")[i.split("/").length - 1] }}
                      </a>
                    </div>
                  </div>
                </div>
              </el-col>

              <el-col :span="24">
                <div style="position: relative">
                  验收报告：
                  <div style="position: absolute; top: 0; left: 60px; width: 100%">
                    <div
                      style="
                        margin-bottom: 10px;
                        color: #4f9eee;
                        display: inline-block;
                        margin-left: 10px;
                      "
                      v-for="i in ysqkobj.sfzlsc.ysbg.split(',') ?? []"
                    >
                      <a target="_blank" :href="`${STATICURL + i}`">
                        {{ i.split("/")[i.split("/").length - 1] }}
                      </a>
                    </div>
                  </div>
                </div>
              </el-col>

              <el-col :span="24">
                <div style="position: relative">
                  验收附件：
                  <div style="position: absolute; top: 0; left: 60px; width: 100%">
                    <div
                      style="
                        margin-bottom: 10px;
                        color: #4f9eee;
                        display: inline-block;
                        margin-left: 10px;
                      "
                      v-for="i in ysqkobj.sfzlsc.ysfj.split(',') ?? []"
                    >
                      <a target="_blank" :href="`${STATICURL + i}`">
                        {{ i.split("/")[i.split("/").length - 1] }}
                      </a>
                    </div>
                  </div>
                </div>
              </el-col>
            </el-row>

        </div>
      </div>
    </div>

    <el-dialog v-model="showpf" title="计划派发" draggable>
      <div>
        <el-form :model="pdobj" label-width="120px">
          <el-form-item label="负责班组"
            ><el-tree-select
              style="width: 100%"
              v-model="pdobj.fzbz"
              multiple
              :data="treedept"
          /></el-form-item>
          <el-form-item label="负责人">
            <el-select v-model="pdobj.fzr" placeholder="请选择" style="width: 100%">
              <el-option
                v-for="item in allusers.filter(
                  (i) => (pdobj.fzbz ?? []).indexOf(i.deptId) !== -1
                )"
                :label="item.nickName"
                :value="item.userId"
              />
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showpf = false">取消</el-button>
          <el-button type="primary" @click="Maintaindistributed">确定</el-button>
        </span>
      </template>
    </el-dialog>

    <el-dialog v-model="showzxfk" title="计划执行反馈" draggable>
      <div>
        <el-form :model="zxfkobj" label-width="10px">
          <el-form-item label="">
            <el-tabs v-model="currenttabname" class="demo-tabs">
              <el-row>
                <el-col :span="6">
                  <el-form-item label="负责人" label-width="80px">
                    <el-input
                      readonly
                      v-model="zxfkobj.gzz.fzr"
                      placeholder="请输入负责人"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="组员" label-width="80px">
                    <el-select
                      v-model="zxfkobj.gzz.zy"
                      multiple
                      filterable
                      allow-create
                      default-first-option
                      :reserve-keyword="false"
                      placeholder="请输入组员"
                    >
                      <el-option
                        v-for="item in allusers"
                        :key="item.nickName"
                        :label="item.nickName"
                        :value="item.userId"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="12">
                  <el-form-item label="作业图片" label-width="80px">
                    <ImageUpload v-model="zxfkobj.gzz.zyimages"></ImageUpload>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="工作图片" label-width="80px">
                    <ImageUpload v-model="zxfkobj.gzz.gzimages"></ImageUpload>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-tabs>
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showzxfk = false">取消</el-button>
          <el-button type="primary" @click="FeedbackMaintain">确定</el-button>
        </span>
      </template>
    </el-dialog>

    <el-dialog v-model="showcgsc" :title="maintaininfo.status < 4?'计划成果上传':'验收养护工作量'" width="70vw" draggable>
      <div>
        <el-form :model="cgscobj" label-width="10px">
          <el-tabs v-model="currenttabname" class="demo-tabs">
            <el-tab-pane :label="maintaininfo.status < 4?'完成工作量':'核查养护工作量'" name="wcgzl">
              <el-row style="margin-top: 10px">
                <el-col :span="12" style="text-align: left">
                  <el-form-item :label="`时间`" label-width="100px">
                    <el-date-picker
                      v-model="cgscobj.wcgzltime"
                      value-format="YYYY-MM-DD"
                      type="date"
                      placeholder="请选择"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="填报人" label-width="100px">
                    <el-select
                      v-model="cgscobj.wcgzl.default.tbr"
                      placeholder="请选择人员"
                      style="width: 100%"
                      filterable
                      allow-create
                    >
                      <el-option
                        v-for="item in allusers"
                        :label="item.nickName"
                        :value="item.userId.toString()"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <el-form-item label="检查井" label-width="100px">
                    <el-input
                      v-model="cgscobj.wcgzl.default.jcj"
                     type="number"
                      placeholder="请输入"
                      ><template #append>(座)</template></el-input
                    ></el-form-item
                  >
                </el-col>
                <el-col :span="8">
                  <el-form-item label="雨水口" label-width="100px">
                    <el-input
                      v-model="cgscobj.wcgzl.default.ysk"
                     type="number"
                      placeholder="请输入"
                      ><template #append>(座)</template></el-input
                    ></el-form-item
                  >
                </el-col>
                <el-col :span="8">
                  <el-form-item label="排河口" label-width="100px">
                    <el-input
                      v-model="cgscobj.wcgzl.default.phk"
                     type="number"
                      placeholder="请输入"
                      ><template #append>(座)</template></el-input
                    ></el-form-item
                  >
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="4">
                  <div
                    style="
                      font-weight: bold;
                      font-size: 15px;
                      text-align: right;
                      padding-right: 30px;
                      padding-top: 3px;
                    "
                  >
                    雨水口养护详情
                  </div>
                </el-col>
                <el-col :span="4" style="padding-right: 10px">
                  <el-form-item label="单箅" label-width="40px">
                    <el-input
                      v-model="cgscobj.wcgzl.default.bz_dan"
                      type="number"
                      placeholder="请输入"
                      ><template #append>(个)</template></el-input
                    ></el-form-item
                  >
                </el-col>
                <el-col :span="4" style="padding-right: 10px">
                  <el-form-item label="双箅" label-width="40px">
                    <el-input
                      v-model="cgscobj.wcgzl.default.bz_shuang"
                      type="number"
                      placeholder="请输入"
                      ><template #append>(个)</template></el-input
                    ></el-form-item
                  >
                </el-col>
                <el-col :span="4" style="padding-right: 10px">
                  <el-form-item label="三箅" label-width="40px">
                    <el-input
                      v-model="cgscobj.wcgzl.default.bz_san"
                      type="number"
                      placeholder="请输入"
                      ><template #append>(个)</template></el-input
                    ></el-form-item
                  >
                </el-col>
                <el-col :span="4" style="padding-right: 10px">
                  <el-form-item label="四箅" label-width="40px">
                    <el-input
                      v-model="cgscobj.wcgzl.default.bz_si"
                      type="number"
                      placeholder="请输入"
                      ><template #append>(个)</template></el-input
                    ></el-form-item
                  >
                </el-col>
                <el-col :span="4" style="padding-right: 10px">
                  <el-form-item label="多箅" label-width="40px">
                    <el-input
                      v-model="cgscobj.wcgzl.default.bz_duo"
                      type="number"
                      placeholder="请输入"
                      ><template #append>(个)</template></el-input
                    ></el-form-item
                  >
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="4">
                  <div
                    style="
                      font-weight: bold;
                      font-size: 15px;
                      text-align: right;
                      padding-right: 30px;
                      padding-top: 3px;
                    "
                  >
                    管道养护详情
                  </div>
                </el-col>
                <el-col :span="20">
                  <el-row>
                    <el-col :span="24">
                      <el-row v-for="(item, index) in cgscobj.wcgzl.default.gd">
                        <el-col :span="6" style="padding-right: 10px">
                          <el-form-item label="管道养护" label-width="80px">
                            <el-input
                              v-model="item.yh_length"
                             type="number"
                              placeholder="请输入"
                              ><template #append>(米)</template></el-input
                            ></el-form-item
                          >
                        </el-col>

                        <el-col :span="6" style="padding-right: 10px">
                          <el-form-item label="管径" label-width="80px">
                            <el-input
                              v-model="item.yh_gj"
                              type="number"
                              placeholder="请输入"
                              ><template #append>(mm)</template></el-input
                            ></el-form-item
                          >
                        </el-col>
                        <el-col :span="6" style="padding-right: 10px">
                          <el-form-item label="泥量" label-width="80px">
                            <el-input v-model="item.nl" type="text" placeholder="请输入"
                              ><template #append>(方)</template></el-input
                            ></el-form-item
                          >
                        </el-col>
                        <el-col :span="6" style="padding-right: 40px; position: relative">
                          <el-form-item label="备注" label-width="40px">
                            <el-input
                              v-model="item.yh_remark"
                              type="text"
                              placeholder="请输入"
                            ></el-input
                          ></el-form-item>
                          <el-button
                            style="position: absolute; right: 0; top: 3px"
                            size="small"
                            @click="gzloperat(index)"
                            type="primary"
                            :icon="
                              index == cgscobj.wcgzl.default.gd.length - 1 ? Plus : Minus
                            "
                          ></el-button>
                        </el-col>
                      </el-row>
                    </el-col>
                  </el-row>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="备注" label-width="150px">
                    <el-input
                      v-model="cgscobj.wcgzl.default.remark"
                      type="textarea"
                      placeholder="请输入"
                    ></el-input></el-form-item
                ></el-col>
              </el-row>
            </el-tab-pane>
            <el-tab-pane label="未能作业情况" name="wnzyqk" v-if="!isgzledit">
              <el-row>
                <el-col :span="4" style="text-align: right; font-weight: bold"
                  >雨水口</el-col
                >
                <el-col :span="10"
                  ><el-form-item label="占压" label-width="80px">
                    <el-input
                      v-model="cgscobj.wnzyqk.ysk.zy"
                      type="number"
                      placeholder="请输入"
                      ><template #append>(座)</template></el-input
                    ></el-form-item
                  ></el-col
                >
                <el-col :span="10"
                  ><el-form-item label="高水位" label-width="80px">
                    <el-input
                      v-model="cgscobj.wnzyqk.ysk.gsw"
                      type="number"
                      placeholder="请输入"
                      ><template #append>(座)</template></el-input
                    ></el-form-item
                  ></el-col
                >
                <el-col :span="4"></el-col>
                <el-col :span="10"
                  ><el-form-item label="围挡" label-width="80px">
                    <el-input
                      v-model="cgscobj.wnzyqk.ysk.wd"
                      type="number"
                      placeholder="请输入"
                      ><template #append>(座)</template></el-input
                    ></el-form-item
                  ></el-col
                >
                <el-col :span="10"
                  ><el-form-item label="打不开" label-width="80px">
                    <el-input
                      v-model="cgscobj.wnzyqk.ysk.dbk"
                      type="number"
                      placeholder="请输入"
                      ><template #append>(座)</template></el-input
                    ></el-form-item
                  ></el-col
                >
                <el-col :span="4"></el-col>
                <el-col :span="10"
                  ><el-form-item label="掩埋" label-width="80px">
                    <el-input
                      v-model="cgscobj.wnzyqk.ysk.ym"
                      type="number"
                      placeholder="请输入"
                      ><template #append>(座)</template></el-input
                    ></el-form-item
                  ></el-col
                >
                <el-col :span="10"
                  ><el-form-item label="其他" label-width="80px">
                    <el-input
                      v-model="cgscobj.wnzyqk.ysk.qt"
                      type="number"
                      placeholder="请输入"
                      ><template #append>(座)</template></el-input
                    ></el-form-item
                  ></el-col
                >

                <el-col :span="4" style="text-align: right; font-weight: bold"
                  >检查井</el-col
                >
                <el-col :span="10"
                  ><el-form-item label="占压" label-width="80px">
                    <el-input
                      v-model="cgscobj.wnzyqk.jcj.zy"
                      type="number"
                      placeholder="请输入"
                      ><template #append>(座)</template></el-input
                    ></el-form-item
                  ></el-col
                >
                <el-col :span="10"
                  ><el-form-item label="高水位" label-width="80px">
                    <el-input
                      v-model="cgscobj.wnzyqk.jcj.gsw"
                      type="number"
                      placeholder="请输入"
                      ><template #append>(座)</template></el-input
                    ></el-form-item
                  ></el-col
                >
                <el-col :span="4"></el-col>
                <el-col :span="10"
                  ><el-form-item label="围挡" label-width="80px">
                    <el-input
                      v-model="cgscobj.wnzyqk.jcj.wd"
                      type="number"
                      placeholder="请输入"
                      ><template #append>(座)</template></el-input
                    ></el-form-item
                  ></el-col
                >
                <el-col :span="10"
                  ><el-form-item label="偏心井" label-width="80px">
                    <el-input
                      v-model="cgscobj.wnzyqk.jcj.pxj"
                      type="number"
                      placeholder="请输入"
                      ><template #append>(座)</template></el-input
                    ></el-form-item
                  ></el-col
                >
                <el-col :span="4"></el-col>
                <el-col :span="10"
                  ><el-form-item label="掩埋" label-width="80px">
                    <el-input
                      v-model="cgscobj.wnzyqk.jcj.ym"
                     type="number"
                      placeholder="请输入"
                      ><template #append>(座)</template></el-input
                    ></el-form-item
                  ></el-col
                >
                <el-col :span="10"
                  ><el-form-item label="打不开" label-width="80px">
                    <el-input
                      v-model="cgscobj.wnzyqk.jcj.dbk"
                      type="number"
                      placeholder="请输入"
                      ><template #append>(座)</template></el-input
                    ></el-form-item
                  ></el-col
                >
                <el-col :span="4"></el-col>
                <el-col :span="10"
                  ><el-form-item label="其他" label-width="80px">
                    <el-input
                      v-model="cgscobj.wnzyqk.jcj.qt"
                      type="number"
                      placeholder="请输入"
                      ><template #append>(座)</template></el-input
                    ></el-form-item
                  ></el-col
                >
                <el-col :span="10"></el-col>

                <el-col :span="4" style="text-align: right; font-weight: bold"
                  >排河口</el-col
                >
                <el-col :span="10"
                  ><el-form-item label="占压" label-width="80px">
                    <el-input
                      v-model="cgscobj.wnzyqk.phk.zy"
                      type="number"
                      placeholder="请输入"
                      ><template #append>(米)</template></el-input
                    ></el-form-item
                  ></el-col
                >
                <el-col :span="10"
                  ><el-form-item label="高水位" label-width="80px">
                    <el-input
                      v-model="cgscobj.wnzyqk.phk.gsw"
                      type="number"
                      placeholder="请输入"
                      ><template #append>(座)</template></el-input
                    ></el-form-item
                  ></el-col
                >
                <el-col :span="4"></el-col>
                <el-col :span="10"
                  ><el-form-item label="围挡" label-width="80px">
                    <el-input
                      v-model="cgscobj.wnzyqk.phk.wd"
                      type="number"
                      placeholder="请输入"
                      ><template #append>(米)</template></el-input
                    ></el-form-item
                  ></el-col
                >
                <el-col :span="10"
                  ><el-form-item label="其他" label-width="80px">
                    <el-input
                      v-model="cgscobj.wnzyqk.phk.dbk"
                     type="number"
                      placeholder="请输入"
                      ><template #append>(座)</template></el-input
                    ></el-form-item
                  ></el-col
                >

                <el-col :span="24">
                  <el-form-item label="备注" label-width="150px">
                    <el-input
                      v-model="cgscobj.wnzyqk.remark"
                      type="textarea"
                      placeholder="请输入"
                    ></el-input></el-form-item
                ></el-col>
              </el-row>
            </el-tab-pane>
            <el-tab-pane label="作业单上传" name="zydsc" v-if="!isgzledit">
              <el-row>
                <el-col :span="24">
                  <el-form-item label="作业图纸" label-width="80px">
                    <FileUpload v-model="cgscobj.zyd.zytz" :fileSize="500"></FileUpload>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="记录单" label-width="80px">
                    <FileUpload v-model="cgscobj.zyd.jld" :fileSize="500"></FileUpload>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="收单方" label-width="80px">
                    <FileUpload v-model="cgscobj.zyd.sdf" :fileSize="500"></FileUpload>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-tab-pane>
          </el-tabs>
        </el-form>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showcgsc = false">取消</el-button>
          <el-button type="primary" @click="ResultsuploadMaintain">确定</el-button>
        </span>
      </template>
    </el-dialog>

    <el-dialog v-model="showysqk" title="验收情况上传" draggable>
      <div>
        <el-form :model="ysqkobj" label-width="10px">
          <el-row>
                <el-col :span="24">
                  <el-form-item label="现场签单" label-width="80px">
                    <FileUpload v-model="ysqkobj.sfzlsc.xcqd" :fileSize="500"></FileUpload>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="验收报告" label-width="80px">
                    <FileUpload v-model="ysqkobj.sfzlsc.ysbg" :fileSize="500"></FileUpload>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="验收附件" label-width="80px">
                    <FileUpload v-model="ysqkobj.sfzlsc.ysfj" :fileSize="500"></FileUpload>
                  </el-form-item>
                </el-col>
              </el-row>
        </el-form>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showcgsc = false">取消</el-button>
          <el-button type="primary" @click="MaintainComplete">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { defineComponent, ref, onMounted, watch } from "vue";
import { useDict } from "@/utils/dict";
// 图片预览组件
import ImagePreview from "@/components/ImagePreview";
import ImageUpload from "@/components/ImageUpload";
import FileUpload from "@/components/FileUpload";
import VideoUpload from "@/components/VideoUpload";
import VideoPreview from "@/components/VideoPreview";
import { cloneDeep } from "lodash";
import { listDept, getDept } from "@/api/system/dept";
import { ElMessage } from "element-plus";
import router from "../../../router";
import { useRoute } from "vue-router";
import {
  Delete,
  Edit,
  Search,
  Share,
  Upload,
  Plus,
  Minus,
} from "@element-plus/icons-vue";
import { listFacilities, getFacilities } from "@/api/system/facilities";
import {
  listMaintain,
  addMaintain,
  getMaintain,
  distributedMaintain,
  feedbackMaintain,
  resultsuploadMaintain,
  completeMaintain,
} from "@/api/system/maintain";
import {
  changeUserStatus,
  listUser,
  resetUserPwd,
  delUser,
  getUser,
  updateUser,
  addUser,
} from "@/api/system/user";
import { treeselect as deptTreeselect } from "@/api/system/dept";
import moment from "moment";
import { updateMaintain } from "../../../api/system/maintain";

const { maintain_status, maintain_type, sys_area } = useDict(
  "maintain_status",
  "maintain_type",
  "sys_area"
);

const STATICURL = import.meta.env.VITE_APP_BASE_API;
const route = useRoute();
const store = useStore();
const getters = computed(() => store.getters);
const currenttabname = ref("wcgzl");
const currenttabname1 = ref("sdf");
const isgzledit = ref(false)

const showysqk = ref(false);
const ysqkobj = ref({
  sfzlsc: {
    xcqd: "",
    ysbg: "",
    ysfj: "",
  },
});

const showcgsc = ref(false);
const cgscobj = ref({
  wcgzltime: "",
  wcgzl: {
    default: {
      time: "",
      jcj: "",
      ysk: "",
      phk: "",
      bz_dan: "",
      bz_shuang: "",
      bz_san: "",
      bz_si: "",
      bz_duo: "",
      gd: [
        {
          yh_length: "",
          yh_gj: "",
          yh_remark: "",
          nl: "",
        },
      ],
      remark: "",
      tbr: getters.value.userId.toString(),
      ishc:'0',
    },
  },
  wnzyqk: {
    ysk: {
      zy: "",
      gsw: "",
      wd: "",
      dbk: "",
      ym: "",
      qt: "",
    },
    jcj: {
      zy: "",
      gsw: "",
      wd: "",
      pxj: "",
      dbk: "",
      ym: "",
      qt: "",
    },
    phk: {
      zy: "",
      gsw: "",
      wd: "",
      qt: "",
    },
    remark: "",
  },
  zyd: {
    zytz: "",
    jld: "",
    sdf: "",
  },
});

const showzxfk = ref(false);
const zxfkobj = ref({
  gzz: {
    fzr: "",
    zy: "",
    zyimages: [],
    gzimages: [],
  },
});

const showpf = ref(false);
const pdobj = ref({ fzbz: [], fzr: "" });

const alldept = ref([]);
const treedept = ref([]);
const allusers = ref([]);
const facilitieinfo = ref({
  addrEnd: "",
  addrFrom: "",
  areaAdDes: "",
  areaDes: "",
  createBy: null,
  createTime: null,
  exId: 1,
  exId1: "",
  ext1: {},
  fLength: "0",
  id: null,
  name: "",
  nature: "",
  params: {},
  remark: null,
  roadName: "",
  searchValue: null,
  updateBy: null,
  updateTime: null,
});
const maintaininfo = ref({
  createBy: null,
  createTime: null,
  ext1: { task: { datestart: "", dateend: "" } },
  ext2: null,
  facilitiesId: 1,
  id: 1,
  maintainCount: 2,
  maintainDes: "是东方闪电",
  maintainLogs: [],
  maintainMonth: "06",
  maintainRemark: "是东方闪电",
  maintainReportNp: 1,
  maintainType: 1,
  maintainUnit: "南宁公交集团",
  maintainYear: "2022",
  params: {},
  remark: null,
  searchValue: null,
  status: 1,
  updateBy: null,
  updateTime: null,
});

const getdetail = () => {
  getMaintain(Number(route.params.id)).then((res) => {
    maintaininfo.value = res.data;
    maintaininfo.value.ext1 = JSON.parse(maintaininfo.value.ext1);
    var templist = {};
    var list = res.data.maintainLogs;
    for (var i in list) {
      var log = list[i];
      if (templist.hasOwnProperty(log.maintainStatus + "")) {
        if (
          moment(templist[log.maintainStatus + ""].createTime).unix() -
            moment(log.createTime).unix() <
          0
        ) {
          templist[log.maintainStatus + ""] = log;
        }
      } else {
        templist[log.maintainStatus + ""] = log;
      }
    }
    var lists = [];
    for (var i in templist) {
      lists.push(templist[i]);
    }
    maintaininfo.value.maintainLogs = lists;
    getFacilities(maintaininfo.value.facilitiesId).then((rep) => {
      facilitieinfo.value = rep.data;
      facilitieinfo.value.ext1 = JSON.parse(facilitieinfo.value.ext1);
    });

    if (Number(maintaininfo.value.status) > 1) {
      try {
        zxfkobj.value.gzz.fzr =
          allusers.value.filter(
            (i) =>
              i.userId.toString() ===
              JSON.parse(
                maintaininfo.value.maintainLogs.filter((ii) => ii.maintainStatus === 2)[0]
                  .logDes
              ).fzr.toString()
          )[0]?.nickName ?? "-";

        cgscobj.value = JSON.parse(
          maintaininfo.value.maintainLogs.filter((ii) => ii.maintainStatus === 4)[0]
            .logDes
        );
        ysqkobj.value = JSON.parse(
          maintaininfo.value.maintainLogs.filter((ii) => ii.maintainStatus === 5)[0]
            .logDes
        );
      } catch (e) {}
    }
  });
};

const Maintaindistributed = () => {
  distributedMaintain({
    maintainId: route.params.id,
    logDes: JSON.stringify(pdobj.value),
  }).then((res) => {
    showpf.value = false;
    ElMessage.success("派发成功！");
    getdetail();
  });
};

const FeedbackMaintain = () => {
  feedbackMaintain({
    maintainId: route.params.id,
    logDes: JSON.stringify(zxfkobj.value),
  }).then((res) => {
    showzxfk.value = false;
    ElMessage.success("反馈成功！");
    getdetail();
  });
};

const ResultsuploadMaintain = () => {
  if (cgscobj.value.wcgzl.default.time) {
    cgscobj.value.wcgzl[cgscobj.value.wcgzl.default.time] = cloneDeep(
      cgscobj.value.wcgzl.default
    );
  }

  resultsuploadMaintain({
    maintainId: route.params.id,
    logDes: JSON.stringify(cgscobj.value),
  }).then((res) => {
    showcgsc.value = false;
    ElMessage.success("上传成功！");
    getdetail();
  });
};

const yssq = () => {
  updateMaintain({ id: route.params.id, status: 4 }).then((res) => {
    ElMessage.success("申请成功！");
    getdetail();
  });
};

const MaintainComplete = () => {
  completeMaintain({
    maintainId: route.params.id,
    logDes: JSON.stringify(ysqkobj.value),
  }).then((res) => {
    showysqk.value = false;
    ElMessage.success("上传成功！");
    getdetail();
  });
};

const getSummaries = (param) => {
  const { columns, data } = param;
  const sums = [];
  columns.forEach((column, index) => {
    if (index === 1 || index === 0) {
      sums[index] = "";
      return;
    }
    if (index === 2) {
      sums[index] = "合计";
      return;
    }

    const values = data.map((item) => {
      if ((column.property ?? "").indexOf("$") != -1) {
        return evilFn(
          (Object.keys(item) ?? [])
            .filter((i) => i.indexOf(column.property.split("$")[1]) != -1)
            .map((i) => item[i])
            .join("+")
        );
      }
      if ((column.property ?? "").indexOf(".") != -1) {
        return evilFn(
          item[column.property.split(".")[0]]
            .map((i) => i[column.property.split(".")[1]])
            .join("+")
        );
      }
      return Number(item[column.property]);
    });
    if (column.property === "remark"||column.property === "tbr") {
      sums[index] = "-";
      return;
    }
    if (!values.every((value) => Number.isNaN(value))) {
      sums[index] = `${values.reduce((prev, curr) => {
        const value = Number(curr);
        if (!Number.isNaN(value)) {
          return prev + curr;
        } else {
          return prev;
        }
      }, 0)}`;
    } else {
      sums[index] = "-";
    }
  });
  return sums;
};

const evilFn = (fn) => {
  let Fn = Function; // 一个变量指向Function，防止有些前端编译工具报错
  return new Fn(`return ${fn}`)();
};


const editgzl = (time) => {
  cgscobj.value.wcgzltime = time;
  isgzledit.value = true;
  showcgsc.value = true;
}
const docgsc = () => {
  isgzledit.value = false;
  showcgsc.value = true;
}


const gzloperat = (index) => {
  if (cgscobj.value.wcgzl.default.gd.length - 1 == index) {
    //add
    cgscobj.value.wcgzl.default.gd.push({
      yh_length: "",
      yh_gj: "",
      yh_remark: "",
      nl: "",
    });
  } else {
    //sub
    cgscobj.value.wcgzl.default.gd.splice(index, 1);
  }
};

const getmapdataext = (map, key) => {
  var obj = cloneDeep(map);
  delete obj[key];
  // debugger
  return Object.values(obj).sort((a, b) => {
    return (
      (a.time && a.time != "" ? moment(a.time).unix : 0) -
      (b.time && b.time != "" ? moment(b.time).unix : 0)
    );
  });
};

{
  if (!route.params.id || route.params.id == "undefined") {
    router.back();
  }
  listDept().then((response) => {
    alldept.value = cloneDeep(response.data);
  });
  function setdatakey(dept) {
    if (dept.children) {
      dept.children = dept.children.map((i) => {
        return setdatakey(i);
      });
    }
    dept["value"] = dept.id;
    return dept;
  }
  deptTreeselect().then((res) => {
    treedept.value = [setdatakey(res.data[0])];
  });
}

watch(
  () => cgscobj.value.wcgzltime,
  () => {
    if (cgscobj.value.wcgzltime && cgscobj.value.wcgzl[cgscobj.value.wcgzltime]) {
      cgscobj.value.wcgzl.default = cloneDeep(
        cgscobj.value.wcgzl[cgscobj.value.wcgzltime]
      );
    } else {
      cgscobj.value.wcgzl.default = {
        time: cgscobj.value.wcgzltime,
        jcj: "",
        ysk: "",
        phk: "",
        bz_dan: "",
        bz_shuang: "",
        bz_san: "",
        bz_si: "",
        bz_duo: "",
        gd: [
          {
            yh_length: "",
            yh_gj: "",
            yh_remark: "",
            nl: "",
          },
        ],
        remark: "",
        tbr: getters.value.userId.toString(),ishc:'0'
      };
    }
  }
);

watch(
  () => maintaininfo.value.facilitiesId,
  () => {
    if (maintaininfo.value.facilitiesId != null) {
      getFacilities(maintaininfo.value.facilitiesId).then((rep) => {
        facilitieinfo.value = rep.data;

        facilitieinfo.value.ext1 = JSON.parse(facilitieinfo.value.ext1);
      });
    }
  }
);

onMounted(async () => {
  await listUser({ pageSize: 1000 }).then((res) => {
    allusers.value = res.rows;
  });
  getdetail();
});
</script>

<style lang="scss">
.demo-tabs {
  width: 100%;
}
.el-row {
  margin-bottom: 20px;
}
.maintindetail {
  background: #fff;
  padding: 30px 22px;
  border-radius: 8px;
  overflow-y: auto;
  padding-top: 20px;
  position: relative;

  .el-select {
    width: 100%;
  }

  .title {
    color: #2b3551;
    font-size: 16px;
    font-weight: 400;
    .btngroup {
      position: absolute;
      top: 13px;
      right: 20px;
      .el-button {
        margin-left: 25px;
      }
    }
  }
  .card {
    border: 1px solid #e5e9f2;
    border-radius: 8px;
    margin-top: 16px;
    overflow: hidden;
    .title {
      background: rgba(192, 204, 218, 0.2);
      height: 54px;
      line-height: 54px;
      color: #324057;
      font-size: 14px;
      font-weight: Bold;
      padding-left: 22px;
    }
    .body {
      padding: 20px;
      color: #475669;
      font-size: 14px;
      // padding-top: 10px;
      .el-col {
        margin-bottom: 20px;
      }
      .titleheader {
        color: #2c7de3;
        font-weight: Bold;
        margin-bottom: 24px;
        margin-top: 20px;
      }
      .wnzyqk{
        .el-row{
          border-left: 1px solid var(--el-border-color);
           border-top: 1px solid var(--el-border-color);
        }
        .el-col{
          border: 1px solid var(--el-border-color);
          border-left: none;
           border-top: none;
          margin-bottom: 0;
          line-height: 38px;
          text-align: center;
        }
      }
    }
  }
}
</style>
