<template>
  <a-modal
    class="custom_dialog"
    :open="supervisionDetailsVisible"
    title="问题整改复查情况"
    width="60%"
    @cancel="cancelHandler">
    <div class="wtzgfc_view_pblm" style="padding: 3px;" :style="{ 'height': testHeight + 'px', }">
      <div :style="{ 'height': testHeight + 'px', }" style="width:46%;float:left;border:1px solid #d5d5ff;margin-right:5px;">
        <p style="font-weight:bolder;background-color:#d5d5ff;padding:3px;">基本信息</p>
        <a-form
          :model="problemDetail"
          ref="problemDetail"
          :rules="rules"
          :label-col="{ span: 8 }"
          :wrapper-col="{ span: 16 }"
          :style="{ 'max-height': testHeight - 30 + 'px', }"
          style="overflow-y: auto;height:100%;margin:5px;">
          <p class="p_title">问题整改情况</p>
          <a-form-item label="问题描述">
            <p style="font-weight: bold;border-bottom:1px dashed rgb(198, 226, 255);">{{ problemDetail.pblmNote }}</p>
          </a-form-item>
          <a-form-item label="问题来源">
            <p style="font-weight: bold;border-bottom:1px dashed rgb(198, 226, 255);">
              {{ problemDetail.pblmSour }}</p>
          </a-form-item>
          <a-form-item label="问题下发时间">
            <p style="font-weight: bold;border-bottom:1px dashed rgb(198, 226, 255);">
              {{ problemDetail.pblmTm | formatterD }}</p>
          </a-form-item>
          <a-form-item label="当前问题状态">
            <p style="font-weight: bold;border-bottom:1px dashed rgb(198, 226, 255);;">
              {{ problemDetail.pblmState }}</p>
          </a-form-item>
          <a-form-item label="备注">
            <p style="font-weight: bold;border-bottom:1px dashed rgb(198, 226, 255);">{{ problemDetail.note }}</p>
          </a-form-item>
          <p class="p_title">复核情况</p>
          <a-form-item label="整改状态" style="text-align:left">
            <a-radio-group v-model:value="problemDetail.revwRectConc">
              <a-radio value="1">未整改</a-radio>
              <a-radio value="2">正在整改</a-radio>
              <a-radio value="3">整改完成</a-radio>
              <br />
              <br />
              <a-radio value="4">整改不到位</a-radio>
              <a-radio value="5">上报整改情况与实际不符</a-radio>
            </a-radio-group>
          </a-form-item>
          <a-form-item
            :label="problemDetail.revwRectConc == 3 ? '实际整改完成时间' : problemDetail.revwRectConc == 2 ? '计划整改完成时间' : ''"
            style="text-align:left"
            v-if="(Number(problemDetail.revwRectConc) === 2 || Number(problemDetail.revwRectConc) === 3) && problemDetail.revwRectConc">
            <a-date-picker
              v-model:value="problemDetail.realPlanDt"
              v-if="(Number(problemDetail.revwRectConc) === 2 || Number(problemDetail.revwRectConc) === 3) && problemDetail.revwRectConc"
              placeholder="选择日期"
              class="w30"></a-date-picker>
          </a-form-item>
          <a-form-item label="复核整改备注">
            <a-textarea :rows="4" placeholder="请输入" v-model:value="problemDetail.revwRectPblm" class="w30" />
          </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-tabs style="margin:0px 5px">
          <a-tab-pane :tab="picturetabName" key="1">
            <a-row style="text-align:right;">
              <a-button
                :v-if="!addPicPanel ? addPicPanel : addPicPanel"
                size="small"
                type="link"
                :icon="!addPicPanel ? 'plus-circle' : 'minus-circle'"
                @click="addPic">
                {{ !addPicPanel ? "添加" : "取消" }}
              </a-button>
            </a-row>
            <!-- <a-row v-show="addPicPanel">
              <upload
                ref="uploadFile"
                :url="`/pdcApi/file/insert?bizType=MEND_EXTRA&bizId=`"
                @uploadOver="removeNewSupervision">
              </upload>
            </a-row> -->
            <a-row v-show="addPicPanel">
              <div >
              <a-upload-dragger 
              multiple
              :file-list="fileList"
              :remove="handleRemove"
              :before-upload="beforeUpload"
              v-show="addPicPanel"
              ref="upload"
              class="upload-demo">
              <p class="ant-upload-drag-icon">
                <a-icon type="inbox" />
              </p>
              <p class="ant-upload-text">
                将文件拖到此处，或<em>点击上传</em>
              </p>
            </a-upload-dragger></div>
            </a-row>
            
            
            <a-row>
              <div style="overflow-y:auto;overflow-x:hidden;max-height:30vh;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 :tab="audiotabName" key="2">
            <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>
      </div>
    </div>
    <span slot="footer">
      <a-button type="primary" @click="problemDetailInfo('problemDetail')" :loading="buttonLoading">保存</a-button>
      <a-button @click="cancelHandler">取消</a-button>
    </span>
  </a-modal>
</template>

<script>
import { deleteFileById } from '../../../api/duChaAPI';
import { hostUrl } from '../../../utils/global_variable.js';
import request from '../../../utils/gw_ajax_request';
import { dateFormat } from '../../../utils/gw_date.js';
import elaudio from '../../../widgets/elAudio.vue';
import upload from '../../../widgets/uploadFile.vue';
export default {
  props: ['details', 'problemId', 'objType'],
  data() {
    return {
      testHeight: window.innerHeight * 0.6,
      activeName: '0',
      superviseinspect: {},
      fileList: [],
      groupingList: [],
      fileListloading: false,
      groupListloading: false,
      problemDetail: {
        pblmDesc: '', // 问题描述 ,
        pblmLevl: '', // 问题等级 ,
        pblmOption: '', // 检查项目 ,
        pblmSn: '', // 问题序号 ,
        pblmType: '', // 问题类别 ,
        proName: '', // 省 ,
        realPlanDt: '', // 实际/计划整改完成时间 ,
        rectConc: '', // 整改状态(1:未整改;2:正在整改;3:已整改) ,
        rectMsrs: '', // 整改措施 ,
        revwInfo: '', // 复核情况 ,
        revwRectConc: '', // 复核整改状态(1:未整改;2:正在整改;3:整改完成;4:整改不到位;5:上报整改情况与实际不符) ,
        revwRectPblm: '', // 复核整改问题 ,
        revwState: '', // 复核填报状态(0:未填报;1:填报中;2:已填报) ,
        rgstrId: '', // 登记表ID ,
        rsCode: '', // 水库编码 ,
        rsName: '', // 水库名称 ,
        safeComment: '', // 工况总体评价 ,
        unit: '', // 管理单位 ,
        uptm: '', // 修改时间 ,
        year: '', // 年度
        gwComFiles: [],
      },
      fileList: [],
      rules: {
        revwRectPblm: [
          {
            required: true,
            message: '请填写备注',
            trigger: 'blur',
          },
        ],
      },
      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],
        labelName: '',
        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"
          },
        ],
      },
      buttonLoading: false,
      supervisionDetailsVisible: true,
      addPicPanel: false,
      gwComFiles: [],
      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',
        },
      ],
    };
  },
  components: {
    upload,
    elaudio,
  },
  computed: {
    hostUrl() {
      return hostUrl;
    },
  },
  mounted: function () {
    this.problemDetail = {};
    this.pictureArray = [];
    this.audioArray = [];
    this.videoArray = [];
    this.fileArray = [];
    this.showDetails();
  },
  filters: {
    formatterD(value) {
      if (value == null || value == '') {
        return '';
      }
      var date = new Date(parseInt(value));
      var Y = date.getFullYear() + '-';
      var M =
        (date.getMonth() + 1 < 10
          ? '0' + (date.getMonth() + 1)
          : date.getMonth() + 1) + '-';
      var D = date.getDate() + ' ';
      return Y + M + D;
    },
    zgqk(val) {
      switch (val) {
        case '0':
          return '未整改';
        case '1':
          return '整改中';
        case '2':
          return '已整改';
      }
    },
    inspPblmCate(val) {
      if (!val || val == '') {
        return '';
      }
      if (val == '0') {
        return '一般';
      } else if (val == '1') {
        return '较重';
      } else if (val == '2') {
        return '严重';
      } else {
        return val;
      }
    },
  },
  watch: {
    problemId: function () {
      this.problemDetail = {};
      this.pictureArray = [];
      this.audioArray = [];
      this.videoArray = [];
      this.fileArray = [];
      this.showDetails();
    },
  },
  methods: {
    handleRemove(file) {
      const index = this.fileList.indexOf(file);
      const newFileList = this.fileList.slice();
      newFileList.splice(index, 1);
      this.fileList = newFileList;
    },
    beforeUpload(file) {
      this.fileList = [...this.fileList, file];
      return false;
    },
    init() {
      this.activeName = '0';
    },
    showDetails() {
      request.get(`/bis/insp/prjchk/pblm/` + this.problemId).then((res) => {
        this.problemDetail = res.data;
        this.problemDetail.realPlanDt = res.data.realPlanDt
          ? dateFormat(res.data.realPlanDt, 'yyyy-MM-dd')
          : '';
        this.gwComFiles = this.problemDetail.gwComFiles;
        console.log(this.hostUrl);
        if (res.data.gwComFiles) {
          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'
            ) {
              this.pictureArray.push(item);
            } else if (item.fileExt == 'mp4' || item.fileExt == 'MP4') {
              this.videoArray.push({
                height: '350',
                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}`,
                  },
                ],
                item: item,
              });
            } else {
              this.fileArray.push(item);
            }
          });
        }
        this.filetabName = this.fileArray.length
          ? '佐证材料(' + this.fileArray.length + ')'
          : '佐证材料';
        this.picturetabName = this.pictureArray.length
          ? '图片资料(' + this.pictureArray.length + ')'
          : '图片资料';
        this.audiotabName = this.pictureArray.length
          ? '音频资料(' + this.audioArray.length + ')'
          : '音频资料';
        this.videotabName = this.videoArray.length
          ? '视频资料(' + this.videoArray.length + ')'
          : '视频资料';
      });
    },
    // 文件上传
    submitUpload2() {
      // this.$refs.upload.submit()
      console.log(this.fileList);
      console.log('pblmid ====', this.problemDetail.id);
      const { fileList } = this;
      fileList.forEach((file) => {
        const formData = new FormData();
        formData.append('file', file);
        request
          .post(
            `/file/insert?bizId=${this.problemDetail.id}&bizType=MEND_EXTRA`,
            formData,
          )
          .then((res) => {
            if (res.success) {
              console.log(res, 'xxxxxx');
            } else {
              this.$message.error(res.message);
            }
          })
          .catch(() => {
            this.$message.error('上传文件失败!');
          });
      });
      return true;
    },
    // 提交修改信息
    problemDetailInfo(problemDetail) {
      console.log('problemDetail', this.$refs[this.problemDetail]);
      console.log('problemDetail', this.$refs.problemDetail);

      this.$refs.problemDetail.validate((valid) => {
        console.log(valid);
        if (valid) {
          this.buttonLoading = true;
          this.$nextTick(() => {
            // if (this.$refs.uploadFile.submitUpload(this.problemDetail.id)) {
            if (this.submitUpload2()) {
              this.removeNewSupervision();
            }
            setTimeout(() => {
              this.problemDetail.gwComFiles = this.gwComFiles;
              request
                .post(`/bis/insp/prjchk/pblm`, this.problemDetail)
                .then((res) => {
                  if (res.success) {
                    this.$message.success('保存成功');
                    this.buttonLoading = false;
                    this.$emit('cancelHandler', true);
                  } else {
                    this.buttonLoading = false;
                    this.$message.warning(res.message);
                  }
                })
                .catch((err) => {
                  this.buttonLoading = false;
                  console.log(err);
                });
            }, 1000);
          });
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    cancelHandler() {
      this.$emit('cancelHandler');
      this.$refs.uploadFile.init();
      this.addPicPanel = false;
    },
    timestampToTime(detail) {
      if (detail) {
        var date = new Date(detail);
        var Y = date.getFullYear() + '-';
        var M =
          (date.getMonth() + 1 < 10
            ? '0' + (date.getMonth() + 1)
            : date.getMonth() + 1) + '-';
        var D =
          (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
        var h =
          (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) +
          ':';
        var m =
          date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();
        return Y + M + D + h + m;
      } else {
        return '';
      }
    },
    removeNewSupervision(arg) {
      if (arg) {
        var args = this.gwComFiles.concat(arg);
        this.gwComFiles = args;
      }
      // this.gwComFiles = [];
    },
    addPic() {
      this.addPicPanel = !this.addPicPanel;
    },
    // 删除图片文件
    removeFile(id, index) {
      this.$confirm({
        title: '提示',
        content: '此操作将永久删除该文件, 是否继续?',
        okType: 'warning',
        onOk: () => {
          deleteFileById(id, this.persId).then((res) => {
            if (res.success) {
              this.problemDetail.gwComFiles.forEach((item) => {
                if (
                  item.fileExt == 'mp3' ||
                  item.fileExt == 'MP3' ||
                  item.fileExt == 'm4a'
                ) {
                  this.audiotabName.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);
                } else {
                  this.fileArray.splice(index, 1);
                }
              });
              this.showDetails();
            } else {
              this.$message.error(res.message);
            }
          });
        },
      });
    },
  },
};
</script>

<style lang='less' scoped>
.wtzgfc_view_pblm {
  .el-form-item {
    width: 100%;
    margin-bottom: 0;
  }

  p.p_title {
    text-align: left;
    font-weight: bold;
  }

  .el-radio {
    margin-bottom: 15px;
  }

  .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>
