<template>
  <a-modal
    :open="changeSupervisionVisible"
    width="60%"
    class="outerDialog custom_dialog"
    title="修改督查问题"
    @cancel="closeModal">
    <div class="scroll_wrapper">
      <div style="width:49%;overflow-y:auto;max-height:58vh;float:left;border:1px solid #d5d5ff;margin-right:5px;">
        <p style="font-weight:bolder;background-color:#d5d5ff;padding:3px;">基本信息</p>
        <a-form
          ref="changeSupFrom"
          :rules="rules1"
          :model="changeSupervision"
          :label-col="{span: 6}"
          :wrapper-col="{span: 18}">
          <a-form-item label="督查对象名称" prop="nm">
            <a-input v-model:value="changeSupervision.nm" allow-clear readOnly />
          </a-form-item>
          <a-form-item label="问题类别" prop="inspPblmsName">
            <a-select v-model:value="t1" label-in-value placeholder="请选择" @change="problemListChange">
              <a-select-option
                v-for="(item,index) in problemList"
                :key="item.inspPblmsName"
                :value="item.inspPblmsName">{{
                  item.inspPblmsName }}</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="检查项目" prop="checkPoint" style="text-align:left">
            <a-select v-model:value="t2" label-in-value placeholder="请选择" @change="currentCheckPointListChange">
              <a-select-option
                v-for="(item,index) in currentCheckPointList"
                :key="item.checkPointName"
                :value="item.checkPointName">{{ item.checkPointName }}
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="问题描述" prop="pblmDesc" style="text-align:left">
            <a-select v-model:value="t3" label-in-value placeholder="请选择" @change="currentProblemDescListChange">
              <a-select-option
                v-for="(item,index) in currentProblemDescList"
                :key="item.pblmDesc"
                :value="item.pblmDesc">
                {{ item.pblmDesc }}
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="详细描述" prop="inspPblmDesc">
            <a-textarea :rows="2" v-model:value="changeSupervision.inspPblmDesc" allow-clear />
          </a-form-item>
          <a-form-item label="备注" prop="note">
            <a-textarea :rows="2" v-model:value="changeSupervision.note" allow-clear />
          </a-form-item>
          <!-- <a-form-item label="是否为典型问题">
            <a-select v-model:value="changeSupervision.ifCasePblm" placeholder="请选择" allow-clear>
              <a-select-option v-for="(item,index) in supervision" :key="item.value" :value="item.value">
                {{ item.label }}
              </a-select-option>
            </a-select>
          </a-form-item> -->
          <a-form-item label="上报人" prop="persName">
            <a-input resize="none" :rows="3" readOnly placeholder="请输入" v-model:value="changeSupervision.persName" />
          </a-form-item>
          <a-form-item label="上报时间" prop="collTime">
            <a-date-picker :default-value="moment(changeSupervision.collTime)" disabled></a-date-picker>
          </a-form-item>
          <a-form-item label="是否已立行立改">
            <a-checkbox :checked="offlineCancellation == 1" @change="onChangeOffline"></a-checkbox>
            <a-textarea v-model:value="changeSupervision.lxlgxx" :rows="2" allow-clear></a-textarea>
          </a-form-item>
          <a-form-item label="建议整改时限">
            <a-date-picker v-model:value="changeSupervision.proposeZgDate" :disabled-date="disabledDate" format="YYYY-MM-DD" value-format="YYYY-MM-DD" placeholder="建议整改时限"></a-date-picker>
          </a-form-item>
          <a-form-item label="建议整改要求" prop="proposeZgZgxx">
            <a-textarea :rows="2" v-model:value="changeSupervision.proposeZgZgxx" allow-clear />
          </a-form-item>
        </a-form>
      </div>
      <div
        style="width: 49%;float: left;border: 1px solid rgb(213, 213, 255);margin-right: 5px;overflow-y: auto;max-height: 58vh;">
        <p style="font-weight:bolder;background-color:#d5d5ff;padding:3px;">多媒体信息</p>
        <a-row style="text-align: right;">
          <a-button
            v-if="!addPicPanel?!addPicPanel:addPicPanel"
            size="small"
            type="link"
            :icon="!addPicPanel?'plus-circle':'close-circle'"
            @click="addPic">{{ !addPicPanel?"添加":"取消" }}
          </a-button>
        </a-row>
        <!-- 该上传组件之前用v-if="addPicPanel 控制显示隐藏,发现在点击编辑问题时,如果不上传图片,之间点击确认时会报错 add by lch -->
        <a-row v-show="addPicPanel">
          <upload ref="uploadFile" :url="`/pdcApi/file/insert?bizId=`" @uploadOver="removeNewSupervision"></upload>
        </a-row>
        <a-tabs style="margin:0px 5px">
          <a-tab-pane key="1" :tab="picturetabName">
            <a-row>
              <div style="overflow-y:auto;overflow-x:hidden;max-height:300px;padding:10px;">
                <div class="upload-container">
                  <div v-for="(item, index) in pictureArray" :key="index" class="image-preview image-app-preview">
                    <div class="image-preview-wrapper">
                      <img :src="`${hostUrl}/${item.filePath}`">
                      <div class="image-preview-action">
                        <a-icon type="delete" @click="removeFile(item.id)" />
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </a-row>
          </a-tab-pane>
          <a-tab-pane key="2" :tab="audiotabName">
            <a-table bordered :data-source="audioArray" :columns="columns" style="width: 100%;margin: 0 auto;">
              <span slot="audio" slot-scope="text">
                <elaudio style="margin-left:15%;width:100px;height:30px;" :theUrl="`${hostUrl}/${text.filePath}`">
                </elaudio>
              </span>
              <span slot="action" slot-scope="text, record, index">
                <a-button size="small" @click="removeFile(text.id, index)" type="danger">删除</a-button>
              </span>
            </a-table>
          </a-tab-pane>
          <a-tab-pane key="3" :tab="videotabName">
            <a-table bordered :data-source="videoArray" :columns="columns1" style="width: 100%;margin: 0 auto;">
              <span slot="video" slot-scope="text">
                <video-player class="vjs-custom-skin" ref="videoPlayer" :options="text" :playsinline="true">
                </video-player>
              </span>
              <span slot="action" slot-scope="text, record, index">
                <a-button size="small" @click="removeFile(text.id, index)" type="danger">删除</a-button>
              </span>
            </a-table>
          </a-tab-pane>
          <a-tab-pane key="4" :tab="filetabName">
            <a-table bordered :data-source="videoArray" :columns="columns2" style="width: 100%;margin: 0 auto;">
              <span slot="txt" slot-scope="text">
                <a :href="`${hostUrl}/${text.filePath}`" target="_blank" rel="noopener noreferrer">
                  {{ text.fileName }}
                </a>
              </span>
              <span slot="action" slot-scope="text, record, index">
                <a-button size="small" @click="removeFile(text.id, index)" type="danger">删除</a-button>
              </span>
            </a-table>
          </a-tab-pane>
        </a-tabs>
        <p v-if="offlineCancellation == '1'" style="font-weight:bolder;background-color:#d5d5ff;padding:3px;">立行立改信息</p>
        <a-row v-if="offlineCancellation == '1'" style="text-align: right;">
          <a-button
            v-if="!addPicPanel1 ? !addPicPanel1 : addPicPanel1"
            size="small"
            type="link"
            :icon="!addPicPanel1 ? 'plus-circle' : 'close-circle'"
            @click="addPic1">{{ !addPicPanel1 ? "添加"
              : "取消"
            }}
          </a-button>
        </a-row>
        <a-row v-show="addPicPanel1 && offlineCancellation == '1'">
          <a-upload-dragger
            multiple
            :headers="header"
            :file-list="gwComFiles2"
            :remove="handleRemove"
            :before-upload="beforeUpload"
            ref="upload">
            <p class="ant-upload-drag-icon">
              <a-icon type="inbox" />
            </p>
            <p class="ant-upload-text">
              将文件拖到此处，或<em>点击添加</em>
            </p>
          </a-upload-dragger>
        </a-row>
        <a-tabs v-if="offlineCancellation == '1'" style="margin:0px 5px">
          <a-tab-pane key="1" :tab="picturetabName1">
            <a-row>
              <div style="overflow-y:auto;overflow-x:hidden;max-height:200px;padding:10px;">
                <div class="upload-container">
                  <div
                    v-for="(item, index) in pictureArray1"
                    :key="index"
                    class="image-preview image-app-preview">
                    <div class="image-preview-wrapper">
                      <a :href="`${hostUrl}/${item.filePath}`" target="_blank">
                        <img :src="`${hostUrl}/${item.filePath}`">
                      </a>
                      <div class="image-preview-action">
                        <a-icon type="delete" @click.stop="removeFile(item.id)" />
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </a-row>
          </a-tab-pane>
          <a-tab-pane key="2" :tab="audiotabName1">
            <a-table
              bordered
              :data-source="audioArray1"
              :columns="columns"
              style="width: 100%;margin: 0 auto;">
              <span slot="audio" slot-scope="text">
                <elaudio
                  style="margin-left:15%;width:100px;height:30px;"
                  :theUrl="`${hostUrl}/${text.filePath}`">
                </elaudio>
              </span>
              <span slot="action" slot-scope="text, record, index">
                <a-button size="small" @click="removeFile(text.id, index)" type="danger">删除</a-button>
              </span>
            </a-table>
          </a-tab-pane>
          <a-tab-pane key="3" :tab="videotabName1">
            <a-table
              bordered
              :data-source="videoArray1"
              :columns="columns1"
              style="width: 100%;margin: 0 auto;">
              <span slot="video" slot-scope="text">
                <video-player class="vjs-custom-skin" ref="videoPlayer" :options="text" :playsinline="true">
                </video-player>
              </span>
              <span slot="action" slot-scope="text, record, index">
                <a-button size="small" @click="removeFile(text.id, index)" type="danger">删除</a-button>
              </span>
            </a-table>
          </a-tab-pane>
          <a-tab-pane key="4" :tab="filetabName1">
            <a-table
              bordered
              :data-source="fileArray1"
              :columns="columns2"
              style="width: 100%;margin: 0 auto;">
              <span slot="txt" slot-scope="text">
                <a :href="`${hostUrl}/${text.filePath}`" target="_blank" rel="noopener noreferrer">
                  {{ text.fileName }}
                </a>
              </span>
              <span slot="action" slot-scope="text, record, index">
                <a-button size="small" @click="removeFile(text.id, index)" type="danger">删除</a-button>
              </span>
            </a-table>
          </a-tab-pane>
        </a-tabs>
      </div>
    </div>
    <span slot="footer">
      <a-button type="primary" @click="changeSupervisionInfo" :loading="buttonLoading">保存</a-button>
      <a-button @click="changeSupervisionVisiblefalse">取消</a-button>
    </span>
  </a-modal>
</template>

<script>
import moment from 'moment';
import {
  deleteFileById,
  showDetailsXq,
  updatelist,
} from '../../api/duChaAPI.js';
import { hostUrl } from '../../utils/global_variable.js';
import request from '../../utils/gw_ajax_request.js';
import elaudio from '../../widgets/elAudio.vue';
import upload from '../../widgets/uploadFile.vue';
export default {
  props: ['editId', 'pType'],
  data() {
    return {
      moment,
      changeSupervisionVisible: true,
      changeSupervision: {},
      rules1: {
        inspPblmName: [
          {
            required: true,
            message: '请输入问题名称',
            trigger: 'blur',
          },
          {
            min: 1,
            max: 999,
            message: '不超过100字符',
            trigger: 'blur',
          },
        ],
        inspPblmDesc: [
          {
            required: true,
            message: '请输入问题描述',
            trigger: 'blur',
          },
        ],
        recPers: [
          {
            required: true,
            message: '请输入记录人',
            trigger: 'blur',
          },
          {
            min: 1,
            max: 999,
            message: '不超过100字符',
            trigger: 'blur',
          },
        ],
        objType: [
          {
            required: true,
            message: '请选择督查对象类型',
            trigger: 'change',
          },
        ],
        objId: [
          {
            required: true,
            message: '请选择督查对象类型',
            trigger: 'change',
          },
        ],
        inspPblmType: [
          {
            required: true,
            message: '请选择督查问题类型',
            trigger: 'change',
          },
        ],
        dataStat: [
          {
            required: true,
            message: '请选择数据状态',
            trigger: 'change',
          },
        ],
        collTime: [
          {
            required: true,
            message: '请选择采集时间',
            trigger: 'change',
          },
        ],
        ifCasePblm: [
          {
            required: true,
            message: '请选择是否典型',
            trigger: 'change',
          },
        ],
        pblmStat: [
          {
            required: true,
            message: '请选择问题类型',
            trigger: 'change',
          },
        ],
        inspPblmCate: [
          {
            required: true,
            message: '请选择问题程度',
            trigger: 'change',
          },
          {
            trigger: 'change',
          },
        ],
        proposeZgZgxx: [
          {
            required: true,
            message: '请选择建议整改要求',
            trigger: 'change',
          },
        ],
      },
      supervisionState: [
        {
          value: '0',
          label: '一般',
        },
        {
          value: '1',
          label: '较重',
        },
        {
          value: '2',
          label: '严重',
        },
        {
          value: '3',
          label: '特别严重',
        },
      ],
      supervision: [
        {
          value: '1',
          label: '是',
        },
        {
          value: '0',
          label: '否',
        },
      ],
      addPicPanel: false,
      addPicPanel1: false,
      gwComFiles: [],
      gwComFiles2: [],
      picturetabName: '',
      audiotabName: '',
      videotabName: '',
      filetabName: '',
      pictureArray: [],
      audioArray: [],
      videoArray: [],
      fileArray: [],
      picturetabName1: '',
      audiotabName1: '',
      videotabName1: '',
      filetabName1: '',
      pictureArray1: [],
      audioArray1: [],
      videoArray1: [],
      fileArray1: [],
      updateIdXiuGai: '',
      pblmId: '',
      t1: {},
      t2: {},
      t3: {},
      problemList: [],
      currentCheckPointList: [],
      currentProblemDescList: [],
      xiangqingmiaoshu: '',
      wenTiLeiBie: '',
      jianChaXiangMu: '',
      buttonLoading: false,
      columns: [
        {
          title: '音频',
          dataIndex: 'audio',
          align: 'center',
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
        },
      ],
      columns1: [
        {
          title: '视频',
          dataIndex: 'video',
          align: 'center',
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
        },
      ],
      columns2: [
        {
          title: '文档',
          dataIndex: 'txt',
          align: 'center',
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
        },
      ],
      offlineCancellation: false,
      header: {
        persId: localStorage.getItem('persId'),
        orgId: localStorage.getItem('currentOrgId'),
        accessToken: localStorage.getItem('accessToken'),
      },
    };
  },
  components: {
    upload,
    elaudio,
  },
  computed: {
    hostUrl() {
      return hostUrl;
    },
    persId() {
      return localStorage.getItem('persId')
        ? localStorage.getItem('persId')
        : '1098101939614724096';
    },
  },
  created() {
    console.log(this.editId, this.pType, 'created');
  },
  mounted() {
    this.getproblemSmallType();
    this.addPicPanel = false;
    this.addPicPanel1 = false;
  },
  methods: {
    disabledDate(current) {
      return current && current < moment().endOf('day').add(11, 'days');
    },
    // 修改弹窗显示
    changeSup(id, deleteUpdate) {
      this.pictureArray = [];
      this.audioArray = [];
      this.videoArray = [];
      this.fileArray = [];
      this.pictureArray1 = [];
      this.audioArray1 = [];
      this.videoArray1 = [];
      this.fileArray1 = [];
      this.updateIdXiuGai = id;
      this.gwComFiles = [];
      this.gwComFiles2 = [];
      showDetailsXq(this.updateIdXiuGai).then((res) => {
        // if(this.usersId==)
        this.changeSupervision = res.data;
        this.offlineCancellation = res.data.offlineCancellation;
        this.changeSupervision.proposeZgDate = this.changeSupervision
          .proposeZgDate
          ? moment(this.changeSupervision.proposeZgDate).format('YYYY-MM-DD')
          : null;
        this.gwComFiles = this.changeSupervision.gwComFiles;
        this.t1['inspPblmsName'] = this.changeSupervision.inspPblmsName;
        this.t1['key'] = this.changeSupervision.inspPblmsName;
        this.t1['value'] = this.changeSupervision.inspPblmsName;

        this.t1['pblmsTypeId'] = this.changeSupervision.guid;
        this.problemList.forEach((ele) => {
          if (ele.inspPblmsName == this.t1.inspPblmsName) {
            this.problemListChange(ele);
          }
        });

        this.t2['key'] = this.changeSupervision.checkPoint;
        this.t2['value'] = this.changeSupervision.checkPoint;
        this.t2['checkPointName'] = this.changeSupervision.checkPoint;
        this.currentCheckPointList.forEach((ele) => {
          if (ele.checkPointName == this.t2.checkPointName) {
            this.currentCheckPointListChange(ele);
          }
        });
        this.t3['pblmDesc'] = this.changeSupervision.pblmDesc;
        this.t3['value'] = this.changeSupervision.pblmDesc;
        this.t3['key'] = this.changeSupervision.pblmDesc;

        // 当删掉最后一个多媒体文件后，更新一下提交信息（解决删掉多媒体文件后台没有更改状态的问题  record by wby）
        if (deleteUpdate && !res.data.gwComFiles.length) {
          this.changeSupervisionInfo();
        }
        res.data.gwComFiles.forEach((item) => {
          if (
            item.fileExt == 'mp3' ||
            item.fileExt == 'MP3' ||
            item.fileExt == 'm4a'
          ) {
            this.audioArray.push(item);
          } else if (
            item.fileExt == 'jpg' ||
            item.fileExt == 'JPG' ||
            item.fileExt == 'png' ||
            item.fileExt == 'PNG' ||
            item.fileExt == 'JPEG' ||
            item.fileExt == 'jpeg'
          ) {
            this.pictureArray.push(item);
          } else if (item.fileExt == 'mp4' || item.fileExt == 'MP4') {
            this.videoArray.push({
              id: item.id,
              bizId: item.bizId,
              width: '130',
              height: '130',
              autoplay: false,
              muted: true,
              language: 'en',
              playbackRates: [0.7, 1.0, 1.5, 2.0],
              sources: [
                {
                  type: 'video/mp4',
                  src: this.hostUrl + item.filePath,
                },
              ],
            });
          } else {
            this.fileArray.push(item);
          }
        });

        this.picturetabName = '图片资料(' + this.pictureArray.length + ')';
        this.audiotabName = '音频资料(' + this.audioArray.length + ')';
        this.videotabName = '视频资料(' + this.videoArray.length + ')';
        this.filetabName = '其它资料(' + this.fileArray.length + ')';

        res.data.gwComFiles2.forEach((item) => {
          if (
            item.fileExt == 'mp3' ||
            item.fileExt == 'MP3' ||
            item.fileExt == 'm4a'
          ) {
            this.audioArray1.push(item);
          } else if (
            item.fileExt == 'jpg' ||
            item.fileExt == 'JPG' ||
            item.fileExt == 'png' ||
            item.fileExt == 'PNG' ||
            item.fileExt == 'JPEG' ||
            item.fileExt == 'jpeg'
          ) {
            this.pictureArray1.push(item);
          } else if (item.fileExt == 'mp4' || item.fileExt == 'MP4') {
            this.videoArray1.push({
              id: item.id,
              bizId: item.bizId,
              width: '130',
              height: '130',
              autoplay: false,
              muted: true,
              language: 'en',
              playbackRates: [0.7, 1.0, 1.5, 2.0],
              sources: [
                {
                  type: 'video/mp4',
                  // mp4
                  src: this.hostUrl + item.filePath,
                  // webm
                  // src: "https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm"
                },
              ],
            });
          } else {
            this.fileArray1.push(item);
          }
        });

        this.picturetabName1 = '图片资料(' + this.pictureArray1.length + ')';
        this.audiotabName1 = '音频资料(' + this.audioArray1.length + ')';
        this.videotabName1 = '视频资料(' + this.videoArray1.length + ')';
        this.filetabName1 = '其它资料(' + this.fileArray1.length + ')';
      });
    },
    // 提交修改信息
    changeSupervisionInfo() {
      if (this.offlineCancellation == 1 && !this.changeSupervision.lxlgxx) {
        return this.$message.info('请输入立行立改描述！');
      }
      if (
        this.offlineCancellation == 1 &&
        this.changeSupervision.gwComFiles2.length < 1 &&
        this.gwComFiles2.length < 1
      ) {
        return this.$message.info('请上传立行立改附件！');
      }
      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();
            }
            this.submitGw2();
            setTimeout(() => {
              this.changeSupervision.inspPblmsName = this.xiangqingmiaoshu;
              this.changeSupervision.checkPoint = this.jianChaXiangMu;
              this.changeSupervision.inspPblmName = this.wenTiLeiBie;
              this.changeSupervision.inspPlbmType = this.t2.sort2;
              this.changeSupervision.inspPblmCode = this.t3.sn;
              this.changeSupervision.pblmsTypeId = this.t3.guid;
              this.changeSupervision.gwComFiles = this.gwComFiles;
              this.changeSupervision.offlineCancellation =
                this.offlineCancellation;
              const data = this.changeSupervision;
              console.log(data, 'xxxxxxx');
              updatelist(data).then((res) => {
                this.pblmId = res.data.pblmId;
                this.gwComFiles = res.data.gwComFiles;
                if (res.success) {
                  this.buttonLoading = false;
                  this.successInfo();
                  this.addPicPanel = false;
                  this.addPicPanel1 = false;
                  this.initGw2();
                } else {
                  this.failInfo();
                  this.$emit('closeEditDialog');
                }
              });
            }, 1000);
          });
        }
      });
    },
    removeNewSupervision(arg) {
      if (arg) {
        var args = this.gwComFiles.concat(arg);
        this.gwComFiles = args;
      }
    },
    changeSupervisionVisiblefalse() {
      this.$emit('closeEditDialog');
      this.$refs.uploadFile.init();
      this.addPicPanel = false;
    },
    addPic() {
      this.addPicPanel = !this.addPicPanel;
    },
    addPic1() {
      this.addPicPanel1 = !this.addPicPanel1;
    },
    // 删除图片文件
    removeFile(id, index) {
      this.$confirm({
        title: '提示',
        content: '此操作将永久删除该文件, 是否继续?',
        okType: 'warning',
        onOk: () => {
          deleteFileById(id, this.persId).then((res) => {
            if (res.success) {
              this.changeSup(this.updateIdXiuGai);
            } else {
              this.failInfo();
            }
          });
        },
      });
    },
    // 操作成功反馈
    successInfo() {
      this.$message.success('操作成功!');
      this.$emit('closeEditDialog');
    },
    // 操作失败反馈
    failInfo(val) {
      this.$message.error(val);
    },
    // 文件上传
    submitUpload() {
      this.$refs.upload.submit();
    },
    closeModal() {
      this.$emit('closeEditDialog');
    },
    getproblemSmallType() {
      const result = [];
      request
        .get('/dc/insp/pblms/getPblmType', {
          params: {
            type: this.pType,
            pguid: '00000000000000000000000000000000',
          },
        })
        .then((res) => {
          if (res.success) {
            res.data.forEach((ele) => {
              let haveinspPblmsName = false;
              result.forEach((inspPblm) => {
                if (inspPblm['inspPblmsName'] == ele.inspPblmsName) {
                  //
                  let havechekPoint = false;
                  inspPblm['checkPoints'].forEach((chekPoint) => {
                    if (chekPoint['checkPointName'] == ele.checkPoint) {
                      //
                      chekPoint['pblmDescs'].push({
                        pblmDesc: ele.pblmDesc,
                        sn: ele.sn,
                        guid: ele.guid,
                      });
                      havechekPoint = true;
                    }
                  });
                  if (!havechekPoint) {
                    const newCheckPoint = {};
                    newCheckPoint['checkPointName'] = ele.checkPoint;
                    newCheckPoint['sort2'] = ele.sort2;
                    newCheckPoint['pblmDescs'] = [
                      {
                        pblmDesc: ele.pblmDesc,
                        sn: ele.sn,
                        guid: ele.guid,
                      },
                    ];
                    inspPblm['checkPoints'].push(newCheckPoint);
                  }
                  haveinspPblmsName = true;
                }
              });
              if (!haveinspPblmsName) {
                const haveinspPblmsObj = {};
                haveinspPblmsObj['inspPblmsName'] = ele.inspPblmsName;

                haveinspPblmsObj['key'] = ele.inspPblmsName;
                haveinspPblmsObj['value'] = ele.inspPblmsName;

                haveinspPblmsObj['sort1'] = ele.sort1;
                haveinspPblmsObj['checkPoints'] = [
                  {
                    checkPointName: ele.checkPoint,
                    key: ele.checkPoint,
                    value: ele.checkPoint,
                    sort2: ele.sort2,
                    pblmDescs: [
                      {
                        pblmDesc: ele.pblmDesc,
                        key: ele.pblmDesc,
                        value: ele.pblmDesc,
                        sn: ele.sn,
                        guid: ele.guid,
                      },
                    ],
                  },
                ];
                result.push(haveinspPblmsObj);
              }
            });

            this.problemList = result;
            this.changeSup(this.editId);
          }
        });
    },
    getYanZhongChengDu() {
      request
        .post('/dc/insp/pblms/getPblmsByType', {
          inspPblmsName: this.wenTiLeiBie,
          checkPoint: this.jianChaXiangMu,
          pblmDesc: this.xiangqingmiaoshu,
          type: '29',
        })
        .then((res) => {
          if (res.success) {
            this.changeSupervision.inspPblmCate = res.data.inspPblmCate;
          }
        });
    },
    problemListChange: function (item) {
      this.t1 = 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;
    },

    onChangeOffline(e) {
      if (e.target.checked) {
        this.offlineCancellation = 1;
      } else {
        this.offlineCancellation = 0;
      }
    },
    handleRemove(file) {
      const index = this.gwComFiles2.indexOf(file);
      const newFileList = this.gwComFiles2.slice();
      newFileList.splice(index, 1);
      this.gwComFiles2 = newFileList;
    },
    beforeUpload(file) {
      this.gwComFiles2 = [...this.gwComFiles2, file];
      return false;
    },
    submitGw2() {
      this.gwComFiles2.forEach((file, index) => {
        const formData = new FormData();
        formData.append('file', file);
        request
          .post(
            `/file/insert?bizType=pblm_ylxlg&bizId=${this.changeSupervision.pblmId}`,
            formData,
          )
          .then((res) => {
            if (res.success) {
            } else {
              this.$message.error(res.message);
            }
          })
          .catch(() => {
            this.$message.error('上传文件失败!');
          });
      });
    },
    initGw2() {
      this.gwComFiles2 = [];
    },
  },
  watch: {
    editId(val) {
      this.changeSup(val);
    },
    t3: {
      handler: function (val, oldVal) {
        this.getYanZhongChengDu();
      },
      deep: true,
    },
  },
};
</script>

<style lang='less' scoped>
.scroll_wrapper {
  overflow: hidden;
}

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

.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;
      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;
    }
  }
}
</style>
