﻿﻿﻿﻿﻿﻿<template>
  <div style="height:100%;width:100%" id="wenTiContainer_sk">
    <a-layout style="height:100%;width:100%;">
      <a-layout-sider width="318px" style="border-right:2px solid #d5d5ff;float:left" :style="{'max-height':testHeight+'px','height':testHeight+'px'}">
        <div class="tree" style="width: 100%; height: 100%; overflow: auto; display: inline-flex;">
          <a-tree
            :tree-data="treeData"
            @select="handleCheckChange"
            :fieldNames="{ children: 'children', title: 'pnm', key: 'id' }"
            :autoExpandParent="false"
            ref="jigou_tree"
            style="height:100%;">
            <template #custom="item">
              <span style="float:left;">{{ item.pnm }}</span>
              <div style="float:right;display: flex;justify-content: flex-end;align-items: center;width:50%;">
                <span style="color:blue;width:80px;"></span>
              </div>
            </template>
          </a-tree>
        </div>
      </a-layout-sider>
      <a-layout-content style="margin:0px;padding:0px;overflow-y:hidden;" class="shuiku">
        <div class="pages" :style="{'max-height':testHeight+'px'}">
          <div style="padding: 12px 0 0 0">
            <a-row type="flex" justify="space-between">
              <a-col :span="24">
                <a-form
                  layout="inline"
                  :label-col="{span: 6}"
                  :wrapper-col="{span: 18}"
                  class="demo-form-inline"
                  style="padding-left: 10px;">
                  <a-form-item label="行政区划" style="min-width: 23%;">
                    <a-input resize="none" :rows="3" placeholder="请输入行政区划名称" v-model.trim="findParams.adFullName" allow-clear></a-input>
                  </a-form-item>
                  <a-form-item label="水库名称" style="min-width: 23%;">
                    <a-input resize="none" :rows="3" placeholder="请输入水库名称" v-model.trim="findParams.nm" allow-clear></a-input>
                  </a-form-item>
                </a-form>
              </a-col>
            </a-row>
            <a-row style="margin-top:1%" type="flex" justify="space-between" v-show="showExpandSearchPanel">
              <a-col :span="24">
                <a-form
                  layout="inline"
                  class="demo-form-inline"
                  style="padding-left: 10px; gap: 16px 24px;">
                  <a-form-item label="检查事项" style="min-width: 23%;">
                    <a-select v-model:value="findParams.bplmsTypeId" placeholder="请选择" allow-clear style="min-width: 200px;">
                      <a-select-option v-for="item in problemList" :key="item.guid" :value="item.guid">{{ item.inspPblmsName }}</a-select-option>
                    </a-select>
                  </a-form-item>
                  <a-form-item label="是否典型" style="min-width: 23%;">
                    <a-select v-model:value="findParams.ifCasePblm" placeholder="请选择" allow-clear style="min-width: 200px;">
                      <a-select-option v-for="item in supervision" :key="item.value" :value="item.value">{{ item.label }}
                      </a-select-option>
                    </a-select>
                  </a-form-item>
                  <a-form-item label="问题筛选" style="min-width: 23%;">
                    <a-select v-model:value="pblscr" placeholder="请选择" allow-clear style="min-width: 200px;">
                      <a-select-option v-for="item in pblscrList" :key="item.value" :value="item.value">{{ item.label }}
                      </a-select-option>
                    </a-select>
                  </a-form-item>
                  <a-form-item label="上报人员" style="min-width: 23%;">
                    <a-input resize="none" :rows="3" placeholder="请输入名称" v-model:value="findParams.persName" allow-clear></a-input>
                  </a-form-item>
                  <a-form-item label="发现时间" style="min-width: 23%;">
                    <a-range-picker v-model:value="value6" format="YYYY-MM-DD" separator="至" allow-clear />
                  </a-form-item>
                  <a-form-item label="所在组" style="min-width: 23%;">
                    <a-input resize="none" :rows="3" placeholder="请输入所在组名称" v-model:value="pblscrGroup" allow-clear></a-input>
                  </a-form-item>
                  <a-form-item label="是否包含多媒体文件" style="min-width: 23%;">
                    <a-select v-model:value="findParams.hasVedio" placeholder="请选择" allow-clear style="min-width: 200px;">
                      <a-select-option v-for="item in hasVedio1" :key="item.value" :value="item.value">{{ item.label }}
                      </a-select-option>
                    </a-select>
                  </a-form-item>
                </a-form>
              </a-col>
            </a-row>
            <a-row type="flex" justify="space-between" style="border-top:1px solid #0014ff2e;margin-top: 1%;">
              <a-col style="padding-bottom:10px;" :offset="11" :span="2">
                <a-button style="float:right;margin-right:10px;border: 1px solid #0014ff2e;border-radius: 0px 0px 5px 5px;border-top: 0px;" type="primary" plain size="small" @click="showExpandSearchPanel = !showExpandSearchPanel">
                  {{ showExpandSearchPanel?'收起':'更多条件' }}
                  <a-icon type="down" v-show="!showExpandSearchPanel"/>
                  <a-icon type="up" v-show="showExpandSearchPanel"/>
                </a-button>
              </a-col>
              <a-col :offset="2" :span="9">
                <a-button style="color:rgba(255,255,255,1);float:right;margin-right:10px;margin-top:5px;" type="primary"  @click="search">&nbsp;查&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;询&nbsp;</a-button>
                <a-button style="color:rgba(255,255,255,1);float:right;margin-right:10px;margin-top:5px;" type="danger" icon="download" @click="exportExcel">导出EXCEL</a-button>
                <shuiKuWentiPl v-if="showShuiKuTianBaoPl" :showShuiKuTianBaoPl="showShuiKuTianBaoPl" @closePlDialog="closePlDialog">
                </shuiKuWentiPl>
              </a-col>
            </a-row>
          </div>
          <a-table
            ref="multipleTable"
            :columns="columns"
            :data-source="searchResult"
            :loading="loading"
            :pagination="false"
            row-key="id"
            style="width: 100%;"
            :style="{ height: tableHeight + 'px'}"
            :scroll="{ x: true, y: tableHeight - 60}"
            bordered
            :row-selection="{
              columnWidth: 30,
              selectedRowKeys: selectedRowKeys,
              onChange: handleSelectionChange,
            }">
            <template slot="index" slot-scope="text, recode, index">
              <span>{{ (currentPage - 1) * pageSize + (index + 1) }}</span>
            </template>
            <template slot="province" slot-scope="text">
              <a-tooltip placement="top">
                <template slot="title">
                  <span>{{ text.province }}</span>
                </template>
                <span class="ellipsis60">{{ text.province }}</span>
              </a-tooltip>
            </template>
            <template slot="city" slot-scope="text">
              <a-tooltip placement="top">
                <template slot="title">
                  <span>{{ text.city }}</span>
                </template>
                <span class="ellipsis60">{{ text.city }}</span>
              </a-tooltip>
            </template>
            <template slot="country" slot-scope="text">
              <a-tooltip placement="top">
                <template slot="title">
                  <span>{{ text.country }}</span>
                </template>
                <span class="ellipsis60">{{ text.country }}</span>
              </a-tooltip>
            </template>
            <template slot="nm" slot-scope="text">
              <a-tooltip placement="top">
                <template slot="title">
                  <span>{{ text.nm }}</span>
                </template>
                <span class="ellipsis110">{{ text.nm }}</span>
              </a-tooltip>
            </template>
            <template slot="inspPblmsName" slot-scope="text">
              <a-tooltip placement="top">
                <template slot="title">
                  <span>{{ text.inspPblmsName }}</span>
                </template>
                <span class="ellipsis140">{{ text.inspPblmsName }}</span>
              </a-tooltip>
            </template>
            <template slot="inspPblmDesc" slot-scope="text">
              <a-tooltip placement="top">
                <template slot="title">
                  <span>{{ text.inspPblmDesc }}</span>
                </template>
                <span class="ellipsis160">{{ text.inspPblmDesc }}</span>
              </a-tooltip>
            </template>
            <span slot="ifCasePblm" slot-scope="text">
              <p v-if="text.ifCasePblm == 1">是</p>
              <p v-if="text.ifCasePblm == 0">否</p>
            </span>
            <template slot="attach" slot-scope="text">
              <a-tooltip placement="top">
                <template slot="title">
                  <span>{{ '附件' + text.attach }}</span>
                </template>
                <span class="ellipsis60">{{ '附件' + text.attach }}</span>
              </a-tooltip>
            </template>
            <template slot="snNum" slot-scope="text">
              <a-tooltip placement="top">
                <template slot="title">
                  <span>{{ text.snNum }}</span>
                </template>
                <span class="ellipsis80">{{ text.snNum }}</span>
              </a-tooltip>
            </template>
            <template slot="persName" slot-scope="text">
              <a-tooltip placement="top">
                <template slot="title">
                  <span>{{ text.persName }}</span>
                </template>
                <span class="ellipsis70">{{ text.persName }}</span>
              </a-tooltip>
            </template>
            <template slot="orgNm" slot-scope="text">
              <a-tooltip placement="top">
                <template slot="title">
                  <span>{{ text.orgNm }}</span>
                </template>
                <span class="ellipsis80">{{ text.orgNm }}</span>
              </a-tooltip>
            </template>
            <template slot="collTime" slot-scope="text">
              <a-tooltip placement="top">
                <template slot="title">
                  <span>{{ text.collTime ? formatDateTime(text.collTime) : '' }}</span>
                </template>
                <span class="ellipsis110">{{ text.collTime ? formatDateTime(text.collTime) : '' }}</span>
              </a-tooltip>
            </template>
            <span slot="hasVedio" slot-scope="text">
              <p v-if="text.hasVedio == 1">是</p>
              <p v-if="text.hasVedio == 0">否</p>
            </span>
            <template slot="action" slot-scope="text">
              <a-button icon="eye" type="link" @click="showDetails(text.pblmId)"></a-button>
              <a-button icon="edit" type="link" @click="changeSup(text.pblmId)" v-if="ownPriv('manage')"></a-button>
              <a-button icon="delete" type="link" v-if="ownPriv('manage')" @click="removeSuperviseOne(text.pblmId)">
              </a-button>
            </template>
          </a-table>
          <a-pagination
            show-size-changer
            :pageSize.sync="pageSize"
            :total="total"
            :page-size-options="['10','20', '50','100']"
            :show-total="total => `共${total}条`"
            @showSizeChange="handleSizeChange"
            @change="search"
            style="margin-top: 10px;" />
        </div>
        <!-- 详情弹框 -->
        <a-modal
          class="outerDialog custom_dialog"
          title="问题详情"
          width="60%"
          :open="supervisionDetailsVisible"
          @cancel="supervisionDetailsVisible = false">
          <supervision-details ref="xianqing" :problemId="currentProblemId"></supervision-details>
          <span slot="footer">
            <a-button style="margin-top:5px;" @click="supervisionDetailsVisible = false">返回</a-button>
          </span>
        </a-modal>
        <!-- 删除的弹窗 -->
        <a-modal
          class="deleteDialog"
          title="问题删除描述"
          width="60%"
          :open="problemDeleteVisible"
          @cancel="problemDeleteVisible = false">
          <Problem-delete ref="deleteMiaoShu" :deleteProblemId="deleteId" @deleteSuccess="deleteSuccess"></Problem-delete>
          <span slot="footer">
            <a-button @click="problemDeleteVisible = false">返回</a-button>
          </span>
        </a-modal>
      </a-layout-content>
    </a-layout>
    <!-- 编辑问题 -->
    <problem-edit :editId="editId" @closeEditDialog="closeEditDialog" v-if="changeSupervisionVisible" pType="24">
    </problem-edit>
  </div>
</template>

<script>
import {
  creatSupervise,
  deleteFileById,
  findPageInfo,
  findPageInfoShuiKu,
  getEngId,
  getShuiKuWenTi,
  getSupervisdByID,
  getXSKProblemNew,
  getXSKProblemNewExport,
  removeSupervise,
  showDetailsXq,
  submitUpload,
  updatelist,
} from '../../api/duChaAPI.js';
import { getXskBzhPblm, getXskbzhProblemNew } from '../../api/fujian_api';
import { hostUrl } from '../../utils/global_variable.js';
import request from '../../utils/gw_ajax_request.js';
import { formatDateTime2 } from '../../utils/gw_date';
import { exportModel } from '../../utils/gw_exportModel';
import elaudio from '../../widgets/elAudioShort.vue';
import inputWidthDuChaShuiKu from '../../widgets/inputWith_sk.vue';
import inputWidthDuChaNodes from '../../widgets/inputWithDuChaNodes.vue';
import inuptWithDuChaTreeNode from '../../widgets/inuptWithDuChaTreeNode.vue';
import upload from '../../widgets/uploadFile.vue';
import problemEdit from '../duChaWenTi/xskbzhProblemModify.vue';
import ProblemDelete from './problemDelete';
import problemDialog from './problemDialog.vue';
import shuiKuWentiPl from './shuiKuWenti_piliang.vue';
import supervisionDetails from './supervisionDetails_xskbzh';

export default {
  props: ['codeId'],
  components: {
    upload,
    // 详情页
    supervisionDetails,
    // 删除描述页
    ProblemDelete,
    elaudio: elaudio,
    inuptWithDuChaTreeNode: inuptWithDuChaTreeNode,
    inputWidthDuChaNodes: inputWidthDuChaNodes,
    inputWidthDuChaShuiKu: inputWidthDuChaShuiKu,
    problemDialog: problemDialog,
    shuiKuWentiPl: shuiKuWentiPl,
    // 修改问题
    problemEdit,
  },
  data() {
    var validatePass1 = (rules1, value, callback) => {
      if (this.newSupervision.startTime > this.newSupervision.endTime) {
        callback(new Error('结束时间不能早于开始时间'));
      } else {
        callback();
      }
    };
    var validatePass2 = (rules1, value, callback) => {
      const startTime = this.changeSupervision.startTime.slice(0, 10);
      if (startTime > this.changeSupervision.endTime) {
        callback(new Error('结束时间不能早于开始时间'));
      } else {
        callback();
      }
    };
    var divisionList = (rules1, value, callback) => {
      if (this.newGroup.divisionList.length) {
        callback();
      } else {
        callback(new Error('至少要添加一个地区'));
      }
    };
    return {
      showExpandSearchPanel: false,
      tableHeight: window.innerHeight - 291,
      globoId: '',
      addPicPanel: false,
      currentDate: new Date(),
      deleteId: '',
      treeNodeArray: [],
      treeNodeSelectVisible: false,
      adNodeArray: [],
      adNodeSelectVisible: false,
      areaSelectVisible: false,
      rsvrNodeArray: [],
      rsvrNodeSelectVisible: false,
      skSelectVisible: false,
      currentProblemId: '',
      updateIdXiuGai: '',
      dxdcAsideHeight: window.innerHeight - 220,
      maxHeight: window.innerHeight - 300,
      testHeight: window.innerHeight - 80,
      supervisionStateList: [
        {
          value: '0',
          label: '暂存',
        },
        {
          value: '1',
          label: '上报',
        },
      ],
      supervisionState: [
        {
          value: '0',
          label: '一般',
        },
        {
          value: '1',
          label: '较重',
        },
        {
          value: '2',
          label: '严重',
        },
        {
          value: '3',
          label: '特别严重',
        },
      ],
      supervision: [
        {
          value: '1',
          label: '是',
        },
        {
          value: '0',
          label: '否',
        },
      ],
      hasVedio1: [
        {
          value: '1',
          label: '是',
        },
        {
          value: '0',
          label: '否',
        },
      ],
      findUseOrgArray: [],
      areaInputValue: {},
      memberInputValue: {},
      multipleSelection: [], // 已选
      selectionType: {
        remove: 0,
        befor: 0,
        now: 0,
        after: 0,
      },
      // 根据客户点击的督查类型查找督查对象ID
      // 新增
      listobjId: [],
      userId: localStorage.getItem('persId'),
      treeData: [],
      // 修改督查
      pictureArray: [],
      audioArray: [],
      videoArray: [],
      fileArray: [],
      audiotabName: '',
      videotabName: '',
      picturetabName: '',
      filetabName: '',
      playerOptions: {
        height: '120',
        autoplay: true,
        muted: true,
        language: 'en',
        playbackRates: [0.7, 1.0, 1.5, 2.0],
        sources: [
          {
            type: 'video/mp4',
            // mp4
            src: 'http://vjs.zencdn.net/v/oceans.mp4',
            // webm
            // src: "https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm"
          },
          {
            type: 'video/mp4',
            // mp4
            src: 'http://vjs.zencdn.net/v/oceans.mp4',
            // webm
            // src: "https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm"
          },
          {
            type: 'video/mp4',
            // mp4
            src: 'http://vjs.zencdn.net/v/oceans.mp4',
            // webm
            // src: "https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm"
          },
          {
            type: 'video/mp4',
            // mp4
            src: 'http://vjs.zencdn.net/v/oceans.mp4',
            // webm
            // src: "https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm"
          },
        ],
      },
      changeSupervisionVisible: false,
      changeSupervision: {
        nm: '',
        presId: localStorage.getItem('persId'),
        endTime: '',
        pblmId: '',
        objId: '',
        objType: '',
        inspGroupId: '',
        inspPblmName: '',
        inspPblmDesc: '',
        pblmLong: '',
        pblmLat: '',
        pblmStat: '',
        ifCasePblm: '',
        inspPblmOrgName: '',
        pblmPersName: '',
        // inspPblmCate: "",
        reviOpin: '',
        reviConc: '',
        reviOrgGuid: '',
        collTime: '',
        recPers: '',
        gwComFiles: [
          {
            id: '',
            filePath: '',
            bizId: '',
          },
        ],
      },
      flash: false,
      // 督查类型
      supervisionTypeList: [
        {
          value: '1',
          label: '小水库',
        },
      ],
      // 查询
      value6: [],
      findParams: {
        hasVedio: '',
        adCode: '',
        pblmStat: '',
        // inspPblmCate: "",
        ifCasePblm: '',
        nm: '',
        // rsName: "",
        adFullName: '',
        startTime: '',
        endTime: '',
        pType: 24,
        bplmsTypeId: '',
        persId: localStorage.getItem('persId'),
      },
      currentPage: 1, // 页码
      pageSize: 20, // 条数
      loading: false,
      total: 0, // 总数
      searchResult: [], // 结果
      crId: '', // 当前督查id
      // 督查详情
      userid: localStorage.getItem('persId'),
      supervisionDetailsVisible: false,
      problemDeleteVisible: false,
      supervisionDetails: {},
      pblmId: '',
      gwComFiles: [],
      pblscr: '',
      pblscrList: [
        {
          lable: '我的问题',
          value: localStorage.getItem('persId'),
        },
      ],
      pblscrGroup: '',
      t1: {},
      t2: {},
      t3: {},
      problemList: [],
      currentCheckPointList: [],
      currentProblemDescList: [],
      xiangqingmiaoshu: '',
      wenTiLeiBie: '',
      jianChaXiangMu: '',
      actionUrl: '',
      fileList: [],
      header: {
        persId: localStorage.getItem('persId'),
        orgId: localStorage.getItem('currentOrgId'),
        accessToken: localStorage.getItem('accessToken'),
      },
      fileListLength: 0,
      showShuiKuTianBaoPl: false,
      uploadDisabled: true,
      exportLoading: false,
      datas: {},
      buttonLoading: false,
      editId: '',
      selectedRowKeys: [],
      columns: [
        {
          title: '序号',
          dataIndex: 'index',
          width: 25,
          align: 'center',
        },
        {
          title: '省',
          dataIndex: 'province',
          width: 60,
          align: 'center',
        },
        {
          title: '市',
          dataIndex: 'city',
          width: 60,
          align: 'center',
        },
        {
          title: '县',
          dataIndex: 'country',
          width: 60,
          align: 'center',
        },
        {
          title: '督查水库名称',
          dataIndex: 'nm',
          width: 110,
          align: 'center',
        },
        {
          title: '检查事项',
          dataIndex: 'inspPblmsName',
          width: 140,
          align: 'center',
        },
        {
          title: '检查事项',
          dataIndex: 'inspPblmsName',
          width: 140,
          align: 'center',
        },
        {
          title: '问题描述',
          dataIndex: 'inspPblmDesc',
          width: 160,
          align: 'center',
        },
        {
          title: '典型',
          dataIndex: 'ifCasePblm',
          width: 60,
          align: 'center',
        },
        {
          title: '附件',
          dataIndex: 'attach',
          width: 60,
          align: 'center',
        },
        {
          title: '问题序号',
          dataIndex: 'snNum',
          width: 80,
          align: 'center',
        },
        {
          title: '上报人',
          dataIndex: 'persName',
          width: 70,
          align: 'center',
        },
        {
          title: '所在组',
          dataIndex: 'orgNm',
          width: 80,
          align: 'center',
        },
        {
          title: '上报时间',
          dataIndex: 'collTime',
          width: 110,
          align: 'center',
        },
        {
          title: '是否包含多媒体文件',
          dataIndex: 'hasVedio',
          width: 150,
          align: 'center',
        },
        {
          title: '操作',
          dataIndex: 'action',
          width: 100,
          align: 'center',
          fixed: 'right',
        },
      ],
    };
  },
  computed: {
    hostUrl() {
      return hostUrl;
    },
    formatDateTime() {
      return formatDateTime2;
    },
  },
  created() {
    if (this.userId) {
      console.log('已经登录');
      this.search();
    } else {
      this.$router.push('/login');
    }
    this.getproblemSmallType();
    this.getLeftTreeData();
    this.addPicPanel = false;
  },
  methods: {
    handleCheckChange(data, checked) {
      this.treeNodeArray = data;
    },
    getLeftTreeData() {
      request
        .get('/dc/organization/base/getAllNode', {
          params: {
            userId: this.userId,
            orgType: '024',
          },
        })
        .then((res) => {
          let data = res.data;
          data.forEach((ele) => {
            if (ele.pid == null || ele.pid == '') {
              ele.pid = '024';
            }
          });
          data = this.getTrees(data);
          this.treeData = data;
          console.log(data);

          // _self.duChaType = _self.treeData[0].id.substring(2,3);
        });
    },
    // 格式化树形数据
    getTrees(list) {
      // @wxcwater重写方法 适应多个树
      let highLevelLength = 99; // 预设最大节点id长度，目前最大应该为12，所以设置为99保证正常
      list.forEach((item, index) => {
        item['pidLength'] = item.pid && item.pid != '' ? item.pid.length : 0;
        if (highLevelLength > item.pidLength) {
          highLevelLength = item.pidLength;
        }
      });
      console.log(highLevelLength);
      const heightLevelNode = [];
      list.forEach((item, index) => {
        if (highLevelLength >= item.pidLength) {
          heightLevelNode.push(item);
        }
      });

      list.forEach((item, index) => {
        heightLevelNode.forEach((pItem) => {
          this.addTreeNode(pItem, item);
        });
      });
      console.log(heightLevelNode);
      return heightLevelNode;
    },

    addTreeNode: function (treeNode, leafNode) {
      if (!Object.hasOwn(treeNode, 'children')) {
        treeNode['children'] = [];
      }
      if (leafNode.pid == treeNode.id) {
        treeNode.children.push(leafNode);
        return;
      }
      treeNode.children.forEach((item) => {
        this.addTreeNode(item, leafNode);
      });
    },
    // 查询参数逻辑
    insertTreeNode: function (params) {
      this.treeNodeArray.push({
        name: params.name,
        code: params.code,
      });
      this.treeNodeSelectVisible = false;
      this.areaSelectVisible = false;
      this.skSelectVisible = false;
    },
    deleteTreeNode: function (tag) {
      let deleteIndex;
      this.treeNodeArray.forEach((item, index) => {
        if (item.code == tag.code) {
          deleteIndex = index;
        }
      });
      this.treeNodeArray.splice(deleteIndex, 1);
    },
    selectDuChaAreaNode(params) {
      this.adNodeArray.push(params);
      this.areaSelectVisible = false;
      this.skSelectVisible = false;
    },
    deleteAreaNode(tag) {
      let deleteIndex;
      this.adNodeArray.forEach((item, index) => {
        if (item.adCode == tag.adCode) {
          deleteIndex = index;
        }
      });
      this.adNodeArray.splice(deleteIndex, 1);
    },
    selectSkNode(params) {
      this.rsvrNodeArray.push(params);
      this.skSelectVisible = false;
    },
    deleteSkNode(tag) {
      let deleteIndex;
      this.rsvrNodeArray.forEach((item, index) => {
        if (item.rsCode == tag.rsCode) {
          deleteIndex = index;
        }
      });
      this.rsvrNodeArray.splice(deleteIndex, 1);
    },
    // end
    handleClose(tag) {
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
    },

    showInput() {
      this.inputVisible = true;
      this.$nextTick((_) => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },
    // 操作成功反馈
    successInfo() {
      this.$message.success('保存成功!');
    },
    // 操作失败反馈
    failInfo(val) {
      this.$message.error(val);
    },
    // 清空选择
    toggleSelection(rows) {
      this.$refs.multipleTable.clearSelection();
    },
    // 已选择项
    handleSelectionChange(val, row) {
      this.selectedRowKeys = val;
      this.multipleSelection = row;
    },
    // 查询
    search() {
      this.loading = true;
      // request.get("/dc/organization/base/getAllNode", {
      //         params: {
      //             userId: this.userId,
      //             orgType: "024"
      //         }
      //     })
      //     .then(res => {
      //         let orgAllNode = res.data;
      this.loading = true;
      const data = this.findParams;
      data.startTime =
        this.value6 && this.value6.length > 0 ? this.value6[0] : '';
      data.endTime =
        this.value6 && this.value6.length > 0 ? this.value6[1] : '';
      data.pageNum = this.currentPage;
      data.recPers = this.pblscr;
      data.orgNm = this.pblscrGroup;
      data.pageSize = this.pageSize;
      // data.villType = "0";
      // _self.findUseOrgArray = [];
      // _self.treeNodeArray.forEach(item => {
      //     if (item.id.length < 12) {
      //         orgAllNode.forEach(orgItem => {
      //             if (orgItem.id.startsWith(item.code)) {
      //                 _self.findUseOrgArray.push(orgItem.id);
      //             }
      //         });
      //     }
      //     _self.findUseOrgArray.push(item.id);
      // });
      //
      // if (_self.findUseOrgArray.length > 0) {
      //     data["orgIds"] = _self.findUseOrgArray.join(",");
      // } else {
      //     data["orgIds"] = "";
      // }

      getXskbzhProblemNew(data).then((res) => {
        this.loading = false;
        this.multipleSelection = [];
        if (res.success) {
          this.searchResult = res.data.list;
          this.total = res.data.total;
        } else {
          this.failInfo();
        }
      });
      // });
    },
    closeEditDialog() {
      this.changeSupervisionVisible = false;
      this.search();
    },
    async exportExcel() {
      this.exportLoading = true;
      await request
        .get('/dc/organization/base/getAllNode', {
          params: {
            userId: this.userId,
            orgType: '024',
          },
        })
        .then((res) => {
          const orgAllNode = res.data;
          const data = this.findParams;
          data.pageNum = this.currentPage;
          data.pageSize = this.pageSize;
          data.villType = '0';
          this.datas = JSON.stringify(data);
          this.treeNodeArray.forEach((item) => {
            console.log(item);
            if (item.id.length < 12) {
              orgAllNode.forEach((orgItem) => {
                if (orgItem.id.startsWith(item.id)) {
                  this.findUseOrgArray.push(orgItem.id);
                }
              });
            } else {
              this.findUseOrgArray.push(item.id);
            }
          });
        });
      const url = '/pdcApi/dc/insp/pblm/page/export';
      const type = 'post';
      const exportName = '小水库标准化问题列表.xls';
      const result = await exportModel(type, url, exportName, this.datas);
      this.exportLoading = result;
    },
    async exportWord() {
      this.exportLoading = true;
      await request
        .get('/dc/organization/base/getAllNode', {
          params: {
            userId: this.userId,
            orgType: '024',
          },
        })
        .then((res) => {
          const orgAllNode = res.data;
          const data = this.findParams;
          data.pageNum = this.currentPage;
          data.pageSize = this.pageSize;
          data.villType = '0';
          this.datas = data;
          this.treeNodeArray.forEach((item) => {
            if (item.id.length < 12) {
              orgAllNode.forEach((orgItem) => {
                if (orgItem.id.startsWith(item.id)) {
                  this.findUseOrgArray.push(orgItem.id);
                }
              });
            } else {
              this.findUseOrgArray.push(item.id);
            }
          });
        });
      // 下载word文档2
      await request
        .post('/rever/doc', this.datas)
        .then((res) => {
          if (res.success) {
            console.log(this.response);
            var a = document.createElement('a');
            a.href = `${this.hostUrl}${res.data.downloadPath}`;
            // 设置文件名称
            a.download = '小水库问题详情.doc';
            a.click();
            // window.open(`${this.hostUrl}${res.data.downloadPath}`)
            this.exportLoading = false;
          } else {
            this.$mesage.error(res.message);
          }
        })
        .catch((res) => {
          this.$mesage.error(res.message);
        });
    },
    downFile(blob, fileName) {
      // 非IE下载
      if ('download' in document.createElement('a')) {
        const link = document.createElement('a');
        link.href = window.URL.createObjectURL(blob); // 创建下载的链接
        link.download = fileName; // 下载后文件名
        link.style.display = 'none';
        document.body.appendChild(link);
        link.click(); // 点击下载
        window.URL.revokeObjectURL(link.href); // 释放掉blob对象
        document.body.removeChild(link); // 下载完成移除元素
      } else {
        // IE10+下载
        window.navigator.msSaveBlob(blob, fileName);
      }
    },
    async downloadTemplate() {
      const url =
        '/pdcApi/dc/imp/skpblm/download?userId=' + this.userId + '&orgType=024';
      const downloadName = '小水库问题.xls';
      const type = 'get';
      await exportModel(type, url, downloadName);
      this.uploadDisabled = false;
    },
    showPlDialog() {
      this.showShuiKuTianBaoPl = true;
    },
    closePlDialog(val) {
      this.showShuiKuTianBaoPl = false;
      this.search();
    },
    handleSizeChange(current, pageSize) {
      this.pageSize = pageSize;
      this.search();
    },

    // 新增
    getDuChaId() {
      // 新增中 获取督查对象id
      getSupervisdByID(this.userid, 1).then((res) => {
        if (res.success) {
          // alert(1)
          this.listobjId = res.data;
        } else {
          this.failInfo();
        }
      });
    },

    // 取消
    removeNewSupervision(arg) {
      this.gwComFiles = [];
      if (arg) {
        this.gwComFiles = arg;
        this.$refs.uploadFile.init();
      }
    },
    // 详情弹框
    showDetails(id) {
      this.currentProblemId = id;
      this.supervisionDetailsVisible = true;
    },
    // 删除弹窗
    removeSuperviseOne(id) {
      this.deleteId = id;
      this.problemDeleteVisible = true;
      // showDetailsXq(id).then(res => {
      //     // console.log("123" + res.data)
      //     this.persNameRen = res.data.persName;
      // });
    },
    deleteSuccess() {
      this.problemDeleteVisible = false;
      this.search();
      this.$emit('problemCount');
    },
    // 修改弹窗显示
    changeSup(id) {
      this.editId = id;
      this.changeSupervisionVisible = true;
    },
    // 提交修改信息
    changeSupervisionInfo() {
      this.$refs.changeSupFrom.validate((valid) => {
        if (valid) {
          this.$nextTick(() => {
            this.changeSupervisionVisible = true;
            this.buttonLoading = true;
            if (
              this.$refs.uploadFile.submitUpload(this.changeSupervision.pblmId)
            ) {
              this.removeNewSupervision();
            }
            setTimeout(() => {
              this.changeSupervision.inspPblmsName = this.wenTiLeiBie;
              this.changeSupervision.checkPoint = this.jianChaXiangMu;
              this.changeSupervision.inspPblmName = this.wenTiLeiBie; // 后台只需要这一个字段和问题id           inspPblmsName和checkPoint可不传
              this.changeSupervision.inspPlbmType = this.t2.sort2;
              this.changeSupervision.inspPblmCode = this.t3.sn;
              this.changeSupervision.pblmsTypeId = this.t3.guid;
              this.changeSupervision.gwComFiles = this.gwComFiles;
              const data = this.changeSupervision;
              updatelist(data).then((res) => {
                this.pblmId = res.data.pblmId;
                this.gwComFiles = res.data.gwComFiles;
                if (res.success) {
                  this.buttonLoading = false;
                  this.search();
                  this.changeSupervisionVisible = false;
                  this.addPicPaneconfirml = false;
                } else {
                  this.failInfo();
                }
              });
            }, 1000);
          });
        }
      });
    },
    // 删除图片文件
    removeFile(id, index) {
      this.$confirm({
        title: '提示',
        content: '此操作将永久删除该文件, 是否继续?',
        okType: 'warning',
        onOk: () => {
          deleteFileById(id, this.userId).then((res) => {
            if (res.success) {
              this.fileListLength = 0;
              this.fileList.forEach((item) => {
                if (
                  item.fileExt == 'mp3' ||
                  item.fileExt == 'MP3' ||
                  item.fileExt == 'm4a'
                ) {
                  this.audioArray.splice(index, 1);
                } else if (
                  item.fileExt == 'jpg' ||
                  item.fileExt == 'JPG' ||
                  item.fileExt == 'png' ||
                  item.fileExt == 'PNG' ||
                  item.fileExt == 'JPEG' ||
                  item.fileExt == 'jpeg'
                ) {
                  this.pictureArray.splice(index, 1);
                } else if (item.fileExt == 'mp4' || item.fileExt == 'MP4') {
                  this.videoArray.splice(index, 1);
                }
              });
              this.changeSup(this.updateIdXiuGai);
            } else {
              this.failInfo();
            }
          });
        },
      });
    },
    changeSupervisionVisiblefalse() {
      this.$nextTick(() => {
        if (this.flash) {
          this.flash = false;
          this.search();
        }
      });
      this.changeSupervisionVisible = false;
      this.changeSupervision = {
        dataStat: '',
        nm: '',
        endTime: '',
        pblmId: '',
        objId: '',
        objType: '',
        inspGroupId: '',
        // inspPblmCate: "",
        inspPblmName: '',
        inspPblmDesc: '',
        pblmLong: '',
        pblmLat: '',
        pblmStat: '',
        ifCasePblm: '',
        inspPblmOrgName: '',
        pblmPersName: '',
        reviOpin: '',
        reviConc: '',
        reviOrgGuid: '',
        collTime: '',
        recPers: '',
        note: '',
        gwComFiles: [
          {
            id: '',
            filePath: '',
            bizId: '',
          },
        ],
      };
      // this.$refs.uploadFile.init();
      this.addPicPanel = false;
    },
    addPic() {
      this.addPicPanel = !this.addPicPanel;
    },
    getproblemSmallType() {
      getXskBzhPblm()
        .then((res) => {
          if (res.success) {
            this.problemList = res.data;
          }
        })
        .catch((err) => {});
    },
    // getYanZhongChengDu() {
    //     request.post('/dc/insp/pblms/getByPblms', {
    //         inspPblmsName: this.wenTiLeiBie,
    //         checkPoint: this.jianChaXiangMu,
    //         pblmDesc: this.xiangqingmiaoshu
    //     }).then(res => {
    //         if (res.success) {
    //             console.log("验证" + res);
    //             this.changeSupervision.inspPblmCate = res.data.inspPblmCate;
    //         }
    //     })
    // },
    problemListChange: function (item) {
      this.wenTiLeiBie = item.inspPblmsName;
      this.currentCheckPointList = item.checkPoints;
    },
    currentCheckPointListChange: function (item) {
      this.jianChaXiangMu = item.checkPointName;
      this.currentProblemDescList = item.pblmDescs;
    },
    currentProblemDescListChange: function (item) {
      this.xiangqingmiaoshu = item.pblmDesc;
      console.log(item);
    },

    // fileUpErr(err, file, fileList){
    //   this.$message.error("上传出错，请修改文件！");
    //   this.fileList = [];
    // },
    // fileSuccess(item){
    //   this.fileList.push(item.data);
    //   console.log(this.fileList);
    // },
    onChangeDialog() {},
    //
    // addFile(file,fileList){
    //   this.fileListLength = fileList.length;
    //
    // },
    // UploadUrl:function(){
    //   return `/pdcApi/file/insert?bizId=${this.changeSupervision.pblmId}`
    // },
    // beforeAvatarUpload(file) {
    //   console.log(file);
    // }
  },
  watch: {
    codeId: function () {
      this.search();
    },
    // 't1': {
    //     handler: function (val, oldVal) {
    //         this.getYanZhongChengDu()
    //     },
    //     deep: true
    // },
    // 't2': {
    //     handler: function (val, oldVal) {
    //         this.getYanZhongChengDu()
    //     },
    //     deep: true
    // },
    // 't3': {
    //     handler: function (val, oldVal) {
    //         this.getYanZhongChengDu()
    //     },
    //     deep: true
    // },
    showExpandSearchPanel: function (val) {
      if (val) {
        this.tableHeight = window.innerHeight - 390;
      } else {
        this.tableHeight = window.innerHeight - 291;
      }
    },
  },
};
</script>

<style lang='less' scoped>
@import "./base.css";
@import url("/src/assets/iconfont/iconfont.css");
// @import url("/src/assets/css/mixin.less");

:deep(.ant-table-pagination) {
  float: left;
}

:deep(.ant-layout-sider),
:deep(.ant-layout-content) {
  background: #fff;
}

:deep(.ant-table-thead>tr>th),
:deep(.ant-table-tbody>tr>td) {
  padding: 0;
  height: 60px;
}

.ellipsis60 {
  display: block;
  width: 58px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.ellipsis70 {
  display: block;
  width: 68px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.ellipsis80 {
  display: block;
  width: 78px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.ellipsis110 {
  display: block;
  width: 108px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.ellipsis140 {
  display: block;
  width: 138px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.ellipsis160 {
  display: block;
  width: 158px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

:deep(.ant-table-scroll) {
  position: relative;
  z-index: 1;
}

:deep(.ant-table-fixed-left),
:deep(.ant-table-fixed-right) {
  z-index: 2;
}
.upload-container {
  width: 100%;
  position: relative;

  .image-uploader {
    width: 35%;
    float: left;
  }

  .image-preview {
    width: 200px;
    height: 200px;
    position: relative;
    border: 1px dashed #d9d9d9;
    float: left;

    // margin-left: 50px;
    .image-preview-wrapper {
      position: relative;
      width: 100%;
      height: 100%;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .image-preview-action {
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      cursor: default;
      text-align: center;
      color: #fff;
      opacity: 0;
      font-size: 20px;
      background-color: rgba(0, 0, 0, 0.5);
      transition: opacity 0.3s;
      cursor: pointer;
      text-align: center;
      line-height: 200px;

      .el-icon-delete {
        font-size: 36px;
      }
    }

    &:hover {
      .image-preview-action {
        opacity: 1;
      }
    }
  }

  .image-app-preview {
    margin-bottom: 10px;
    width: 40vh;
    height: 180px;
    position: relative;
    border: 1px dashed #d9d9d9;
    float: left;

    // margin-left: 50px;
    .app-fake-conver {
      height: 44px;
      position: absolute;
      width: 100%; // background: rgba(0, 0, 0, .1);
      text-align: center;
      line-height: 64px;
      color: #fff;
    }
  }
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}

#wenTiContainer_sk .el-tree-node {
  /* overflow: auto; */
}

#wenTiContainer_sk .el-tree-node>.el-tree-node__children {
  overflow: auto;
}

.shuiku .el-date-editor.el-input {
  min-width: 180px !important;
}

.shuiku .header {
  padding: 0px 10px;
}

.shuiku .el-row {
  margin-bottom: 5px;
}

.shuiku .content {
  margin: 10px;
}

/* .search .el-table>>>.el-tooltip {
      white-space: pre-wrap !important;
      line-height: 30px;
      font-size: 0;
  } */

// .shuiku .search>>>.el-table .el-button:nth-child(odd) {
//   margin-left: 0 !important;
// }

.custom_dialog .el-dialog {
  width: 60% !important;
}

.custom_dialog .scroll300 {
  max-height: 60vh !important;
}

.scroll300 .el-form {
  padding-top: 5px;
  padding-right: 5px;
}

.shuiku .el-tag+.el-tag {
  margin-left: 10px;
}

.shuiku .button-new-tag {
  margin-left: 10px;
  height: 28px;
  line-height: 28px;
  padding-top: 0;
  padding-bottom: 0;
}

.shuiku .input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}

.inspPblmCate {
  padding: 2px 10px;
  border-radius: 10px;
  color: #ffffff;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

#wenTiContainer_sk .el-select,
#wenTiContainer_sk .el-input {
  width: 140px !important;
}
</style>
