<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" 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" 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" v-if="isThirdLevelProblem">
            <a-select v-model:value="t3" 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 v-model:value="changeSupervision.inspPblmDesc" allow-clear :row="2" />
          </a-form-item>
          <!-- <a-form-item label="是否为典型问题">
            <a-select v-model:value="changeSupervision.ifCasePblm" placeholder="请选择" allow-clear>
              <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="严重程度">
            <a-select v-model:value="changeSupervision.inspPblmCate" placeholder="请选择" allow-clear disabled>
              <a-select-option v-for="(item) in supervisionState" :key="item.value" :value="item.value">
                {{ item.label }}
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="备注" prop="note">
            <a-textarea v-model.trim="changeSupervision.note" :rows="2" allow-clear />
          </a-form-item>
          <a-form-item label="上报人" prop="persName">
            <a-input v-model.trim="changeSupervision.persName" allow-clear readonly :rows="3" />
          </a-form-item>
          <a-form-item label="上报时间" prop="collTime">
            <a-date-picker v-model:value="changeSupervision.collTime" readonly></a-date-picker>
          </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 key="1" :tab="picturetabName">
            <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>
            <a-row>
              <upload
                v-show="addPicPanel"
                ref="uploadFile"
                :url="`/pdcApi/file/insert?bizId=`"
                @uploadOver="removeNewSupervision">
              </upload>
            </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 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>
      </div>
    </div>
    <span slot="footer">
      <a-button type="primary" @click="changeSupervisionInfo">保存</a-button>
      <a-button @click="changeSupervisionVisiblefalse">取消</a-button>
    </span>
  </a-modal>
</template>

<script>
import {
  deleteFileById,
  showDetailsXq,
  updatelist,
} from '../../api/duChaAPI.js';
import { hostUrl } from '../../utils/global_variable';
import request from '../../utils/gw_ajax_request.js';
import upload from '../../widgets/uploadFile.vue';
export default {
  props: ['editId', 'pType', 'objId'],
  data() {
    return {
      isThirdLevelProblem: true,
      changeSupervisionVisible: true,
      changeSupervisionLoading: false,
      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',
          },
        ],
      },
      supervisionState: [
        {
          value: '0',
          label: '一般',
        },
        {
          value: '1',
          label: '较重',
        },
        {
          value: '2',
          label: '严重',
        },
        {
          value: '3',
          label: '特别严重',
        },
      ],
      supervision: [
        {
          value: '1',
          label: '是',
        },
        {
          value: '0',
          label: '否',
        },
      ],
      addPicPanel: false,
      gwComFiles: [],
      picturetabName: '',
      audiotabName: '',
      videotabName: '',
      pictureArray: [],
      audioArray: [],
      videoArray: [],
      fileArray: [],
      updateIdXiuGai: '',
      pblmId: '',
      t1: {},
      t2: {},
      t3: {},
      problemList: [],
      currentCheckPointList: [],
      currentProblemDescList: [],
      xiangqingmiaoshu: '',
      wenTiLeiBie: '',
      jianChaXiangMu: '',
      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,
  },
  computed: {
    hostUrl() {
      return hostUrl;
    },
    persId() {
      return localStorage.getItem('persId')
        ? localStorage.getItem('persId')
        : '1098101939614724096';
    },
  },
  mounted() {
    this.showLine();
    this.getproblemSmallType();
  },
  methods: {
    showLine() {
      if (this.pType === '52') {
        this.isThirdLevelProblem = false;
      }
    },
    // 修改弹窗显示
    changeSup(id, deleteUpdate) {
      this.pictureArray = [];
      this.audioArray = [];
      this.videoArray = [];
      this.fileArray = [];
      this.updateIdXiuGai = id;
      showDetailsXq(this.updateIdXiuGai).then((res) => {
        // if(this.usersId==)
        this.changeSupervision = res.data;
        this.t1['inspPblmsName'] = this.changeSupervision.inspPblmsName;
        this.problemList.forEach((ele) => {
          if (ele.inspPblmsName == this.t1.inspPblmsName) {
            this.problemListChange(ele);
          }
        });
        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;
        // 当删掉最后一个多媒体文件后，更新一下提交信息（解决删掉多媒体文件后台没有更改状态的问题  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 + ')';
      });
    },
    // 提交修改信息
    changeSupervisionInfo() {
      console.log(this);
      this.$refs.changeSupFrom.validate((valid) => {
        if (valid) {
          this.changeSupervisionLoading = true;
          this.changeSupervision.pblmDesc = 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;
          const data = this.changeSupervision;
          updatelist(data).then((res) => {
            this.pblmId = res.data.pblmId;
            this.gwComFiles = res.data.gwComFiles;
            if (res.success) {
              if (this.$refs.uploadFile.submitUpload(data.pblmId)) {
                this.removeNewSupervision();
                this.successInfo();
                this.addPicPanel = false;
                this.changeSupervisionLoading = false;
              }
            } else {
              this.failInfo();
              this.$emit('closeEditDialog');
            }
          });
        }
      });
    },
    removeNewSupervision(arg) {
      if (arg) {
        var args = this.gwComFiles.concat(arg);
      }
      this.changeSup(this.editId);
      this.gwComFiles = [];
      this.$emit('closeEditDialog', 'success');
    },
    changeSupervisionVisiblefalse() {
      this.$emit('closeEditDialog');
      this.$refs.uploadFile.init();
      this.addPicPanel = false;
    },
    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.changeSupervision.gwComFiles.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, 'deleteUpdate');
            } else {
              this.failInfo();
            }
          });
        },
      });
    },
    // 操作成功反馈
    successInfo() {
      this.$message.success('操作成功!');
    },
    // 操作失败反馈
    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,
            objId: this.objId,
          },
        })
        .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['sort1'] = ele.sort1;
                haveinspPblmsObj['checkPoints'] = [
                  {
                    checkPointName: ele.checkPoint,
                    sort2: ele.sort2,
                    pblmDescs: [
                      {
                        pblmDesc: ele.pblmDesc,
                        sn: ele.sn,
                        guid: ele.guid,
                      },
                    ],
                  },
                ];
                result.push(haveinspPblmsObj);
              }
            });

            this.problemList = result;
            this.changeSup(this.editId);
          }
        });
    },
    getYanZhongChengDu() {
      request
        .post('/dc/insp/pblms/getByPblms', {
          inspPblmsName: this.wenTiLeiBie,
          checkPoint: this.jianChaXiangMu,
          pblmDesc: this.xiangqingmiaoshu,
        })
        .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;
      console.log(item);
    },
  },
  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>
