<template>
  <a-layout>
    <div style="min-width: 79%; height: 100%;background-color: #ffffff">
      <div class="content" :style="{ height: dxdcAsideHeight + 'px' }">
        <div class="content-item">
          <div class="content-item-box">
            <div class="item-h">问题详情</div>
            <div class="item-c">
              <p><span>问题编码：</span><span>{{ currentRow.fileNoNumber }}</span></p>
              <p><span>问题印发文件名：</span><span>{{ currentRow.zgMemo }}</span></p>
              <p><span>问题印发文号：</span><span>{{ currentRow.zgWjName }}</span></p>
              <p><span>工程名称：</span><span>{{ currentRow.nm }}</span></p>
              <p><span>行政区划：</span><span>{{ currentRow.adName }}</span></p>
              <p><span>问   题：</span><span>{{ currentRow.inspPblmDesc }}</span></p>
              <p><span>问题来源：</span><span>{{ currentRow.pblmSource}}</span></p>
              <p><span>问题归类：</span><span>{{ currentRow.objType }}</span></p>
              <p><span>问题详情：</span><span>{{ currentRow.problemDetails }}</span></p>
              <p><span>整改要求：</span><span>{{ currentRow.pblmSggtn }}</span></p>
              <p><span>当前要求整改时限：</span><span>{{ currentRow.zgDate }}</span></p>
              <p><span>最新申请延期年月：</span><span>{{ currentRow.psDlyTm }}</span></p>
              <p><span>超期整改记录：</span><span>{{ currentRow.overdueRecord }}</span></p>
              <p><span>是否稽察问题：</span><span>{{ currentRow.isJcFlow==1?'是':'否'}}</span></p>
              <p><span>业务处室：</span><span>{{ currentRow.dutyDept}}</span></p>
              <p><span>备注：</span><span>{{ currentRow.note}}</span></p>
            </div>
          </div>
          <div class="content-item-box">
            <div class="item-h">问题多媒体信息</div>
            <div class="item-c">
              <a-tabs v-model="tab1" style="margin:5px;" :style="{'max-height':tabHeight +'px',}">
                <a-tab-pane :tab="picturetabName" key="1" style="height: 240px;">
                  <div class="upload-container">
                    <div class="image-preview image-app-preview">
                      <viewer class="image-preview-wrapper" :images="pictureArray">
                        <img title="点击查看大图" v-for="item in pictureArray" :key="item.id" :src="`${hostUrl}${item.filePath}`" >
                      </viewer>
                    </div>
                  </div>
                </a-tab-pane>
                <a-tab-pane :tab="audiotabName" key="2">
                  <elaudio
                          v-for="(audio,index) in audioArray"
                          :key="index"
                          style="margin-left:15%"
                          :theUrl="`${hostUrl}/${audio.filePath}`"></elaudio>
                  <p v-if="audioArray.length==0">暂无音频信息</p>
                </a-tab-pane>
                <a-tab-pane :tab="videotabName" key="3">
                  <a-carousel autoplay style="height:240px;">
                    <div v-for="(item,index) in videoArray" :key="index">
                      <video-player class="vjs-custom-skin" ref="videoPlayer" :options="item" :playsinline="true">
                      </video-player>
                    </div>
                    <div v-if="videoArray.length==0">
                      <p>暂无视频信息</p>
                    </div>
                  </a-carousel>
                </a-tab-pane>
                <a-tab-pane :tab="filetabName" key="4">
                  <a-table :columns="fileArrayColumns" bordered :data-source="fileArray" style="width: 100%;margin: 0 auto;">
                  <span slot="action" slot-scope="text">
                    <a-button size="small" @click="downloadFiles(text.id,text.fileName)">下载</a-button>
                  </span>
                  </a-table>
                </a-tab-pane>
              </a-tabs>
            </div>
          </div>
        </div>
        <div class="content-item">
          <div class="content-item-box" style="height:30%;">
            <div class="item-h">超期整改记录</div>
            <div class="item-c">
                {{overData.zgNotes}}
            </div>
          </div>
          <div class="content-item-box" style="height:70%;">
            <div class="item-h">问题整改流程</div>
            <div class="item-c">
              <pblmRectifyTimeLine v-if="currentRow.pblmId && currentRow.workflowStat" :pblmId="currentRow.pblmId"  :pblmCurrentWorkflowStat="currentRow.workflowStat"/>
            </div>
          </div>
        </div>
        <div class="content-item">
          <div class="content-item-box" style="height:30%;">
            <div class="item-h">申诉说明</div>
            <div class="item-c" style="height: calc(100% - 50px);">
              <p>{{ appealContent }}</p>
              <div v-for="item in gwComFiles" :key="item.id">
                <a @click="downloadFiles(item.id, item.fileName)">{{ item.fileName }}</a>
              </div>
            </div>
          </div>
          <div class="content-item-box" style="height:55%;">
            <div class="item-h">申诉流程</div>
            <div class="item-c" style="height: calc(100% - 50px);">
            <a-timeline>
              <a-timeline-item v-for="(item, index) in appealRecordLine" :key="index" :color="item.color">
                <a-icon slot="dot" :type="item.type" :style="{color: item.color}" style="font-size: 16px;" />
                <p>{{ item.timestamp }}</p>
                <a-card style="position: relative">
                  <h5>{{ item.workflowStatName }}</h5>
                  <p style="font-size: 12px;padding-top: 5px;">{{ item.content }}</p>
                </a-card>
              </a-timeline-item>
            </a-timeline>
            </div>
          </div>
          <div class="content-item-box" style="height:15%;" v-if="!isNotShow">
            <a-input v-model:value="opinionNote" type="textarea" placeholder="请输入审核意见" :disabled="!prefix"></a-input>
            <img src="@/assets/images/publish.png" v-if="opinionNote" @click="submitAgreeBack"/>
            <p style="text-align: center;margin: 0;padding: 0;margin-top: 5px">
              <a-button  @click="agreeProcess" :loading="btnLoading" type="primary" style="margin-right: 20px">同意</a-button>
              <a-button  @click="backProcess" :loading="btnLoading" type="danger">不同意</a-button>
            </p>
            <p style="color:red;font-size: 12px;text-align: center">{{zgNote}} </p>
          </div>
        </div>
      </div>
    </div>
    <a-modal
      title="审核意见"
      v-model="open"
      @cancel="open = false"
      width="500px">
      <div style="display: flex; align-items: center; justify-content: center;padding: 10px;">
        <span style="width: 80px;">审核意见:</span>
        <a-input v-model:value="form.auditidea" type="textarea" placeholder="请输入审核意见" />
      </div>
      <span slot="footer">
        <a-button @click="submit" type="primary">确定</a-button>
        <a-button @click="open = false">取消</a-button>
      </span>
    </a-modal>
    <a-modal
        title="指定责任处室（单位）"
        v-model="open_1"
        @cancel="open_1 = false"
        width="500px">
      <div style="padding: 10px;">
        <p>
          <span style="width: 80px;">责任处室（单位）:</span>
          <a-select v-model:value="form.dutyDept" placeholder="请选择责任处室（单位）" show-search allow-clear style="width:200px">
            <a-select-option v-for="(item, index) in ywcsList" :key="index" :value="item">{{ item }}</a-select-option>
          </a-select>
        </p>
        <p>
          <span style="width: 80px;">备注:</span>
          <a-input v-model:value="form.auditidea" type="textarea" placeholder="请输入备注" style="width: 300px !important;"/>
        </p>
      </div>
      <span slot="footer">
        <a-button @click="submitDept" type="primary">确定</a-button>
        <a-button @click="open_1 = false">取消</a-button>
      </span>
    </a-modal>
    <a-modal
      title="操作意见"
      v-model="open_2"
      @cancel="open_2 = false"
      width="500px">
      <a-form :model="form" :label-col="{span: 6}" :wrapper-col="{span: 18}" ref="form">
        <a-form-item label="延期至">
            <a-date-picker v-model:value="form.isPdTmTemp" format="YYYY-MM-DD" value-format="YYYY-MM-DD" placeholder="选择日期" style="width: 100%;"/>
        </a-form-item>
        <a-form-item label="意见">
          <a-textarea v-model:value="form.auditidea" :rows="8" type="textarea" placeholder="意见" />
        </a-form-item>
      </a-form>
      <span slot="footer">
        <a-button @click="submitDly" type="primary">确定</a-button>
        <a-button @click="open_2 = false">取消</a-button>
      </span>
    </a-modal>
    <a-modal
      title="操作意见"
      v-model="open_3"
      @cancel="open_3 = false"
      width="500px">
      <a-form :model="form" :label-col="{span: 6}" :wrapper-col="{span: 18}" ref="form">
        <a-form-item label="重新明确至">
          <a-date-picker v-model:value="form.isPdTmTemp" format="YYYY-MM-DD" value-format="YYYY-MM-DD" placeholder="选择日期" style="width: 100%;"/>
        </a-form-item>
        <a-form-item label="意见">
          <a-textarea v-model:value="form.auditidea" :rows="8" type="textarea" placeholder="意见" />
        </a-form-item>
      </a-form>
      <span slot="footer">
        <a-button @click="submitDly" type="primary">确定</a-button>
        <a-button @click="open_3 = false">取消</a-button>
      </span>
    </a-modal>
  </a-layout>
</template>

<script>
import { transferProcStatCodeToName } from '../../../api/duChaProcAPI.js';
import { hostUrl } from '../../../utils/global_variable.js';
import request from '../../../utils/gw_ajax_request.js';
import {
  dateFormat,
  formatDateTime,
  formatDateTime2,
} from '../../../utils/gw_date';
import elaudio from '../../../widgets/elAudio.vue';
import pblmRectifyTimeLine from '../../PblmRectify/Components/pblmRectifyTimeLine.vue';
export default {
  props: ['msgNo', 'isNotShow', 'isModel'],
  data() {
    return {
      tabHeight: 350,
      dxdcMainHeight: window.innerHeight - 197,
      dxdcAsideHeight: window.innerHeight - 140,
      globalNo: this.$route.query.globalNo,
      tab1: '1',
      tab2: '1',
      ywcsList: [],
      pictureArray: [],
      audioArray: [],
      videoArray: [],
      fileArray: [],
      audiotabName: '音频(0)',
      videotabName: '视频(0)',
      picturetabName: '图片(0)',
      filetabName: '文件(0)',
      zgPictureArray: [],
      zgAudioArray: [],
      zgVideoArray: [],
      zgFileArray: [],
      zgPictureTabName: '',
      zgAudioTabName: '',
      zgVideoTabName: '',
      zgFileTabName: '',
      dyPictureArray: [],
      dyAudioArray: [],
      dyVideoArray: [],
      dyFileArray: [],
      dyPictureTabName: '',
      dyAudioTabName: '',
      dyVideoTabName: '',
      dyFileTabName: '',
      loading: false,
      open: false,
      open_1: false,
      open_2: false,
      open_3: false,
      tableData: [],
      overData: {},
      appealContent: '',
      btnLoading: false,
      prefix: '',
      zgNote: '',
      opinionNote: '',
      userInput: '',
      currentAgree: undefined,
      appealRecordLine: [],
      gwComFiles: [],
      appealRecordData: {},
      form: {
        auditidea: '',
        isag: '',
        flowType: '2',
        dutyDept: '',
        pblmId: '',
        isPdTmTemp: '',
      },
      currentRow: {},
      total: 0,
      fileArrayColumns: [
        {
          title: '文档',
          dataIndex: 'fileName',
          align: 'center',
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
        },
      ],
      columns5: [
        {
          title: '处理人',
          dataIndex: 'moduserid',
          width: 60,
          align: 'center',
          ellipsis: true,
        },
        {
          title: '处理环节',
          dataIndex: 'workflowStat',
          width: 60,
          align: 'center',
          ellipsis: true,
        },
        {
          title: '处理动作',
          dataIndex: 'isag',
          width: 60,
          align: 'center',
          ellipsis: true,
        },
        {
          title: '处理意见',
          dataIndex: 'auditidea',
          width: 60,
          align: 'center',
          ellipsis: true,
        },
        {
          title: '处理时间',
          dataIndex: 'moddate',
          width: 120,
          align: 'center',
          ellipsis: true,
        },
      ],
    };
  },
  components: {
    elaudio,
    pblmRectifyTimeLine,
  },
  computed: {
    persId() {
      return localStorage.getItem('persId')
        ? localStorage.getItem('persId')
        : '';
    },
    hasPriv() {
      return this.ownPriv('manage');
    },
    organCode() {
      return localStorage.getItem('currentRlcode')
        ? localStorage.getItem('currentRlcode')
        : '';
    },
    organNm() {
      return localStorage.getItem('currentOrgNm')
        ? localStorage.getItem('currentOrgNm')
        : '';
    },
    isNational() {
      return this.organCode.indexOf('00') == 0;
    },
    orgId() {
      return localStorage.getItem('currentOrgId')
        ? localStorage.getItem('currentOrgId')
        : '';
    },
    hostUrl() {
      return hostUrl;
    },
    formatDateTime() {
      return formatDateTime2;
    },
  },
  created() {
    setTimeout(() => {
      this.getDutyDept();
      this.zgNote = '';
    }, 1000);
  },
  mounted() {
    setTimeout(() => {
      this.getPblmId();
      this.getOverData();
    }, 1000);
  },
  watch: {
    opinionNote(newVal) {
      if (!newVal.startsWith(this.prefix)) {
        // 使用正则移除所有开头的“同意-”，然后重新添加一个
        const regex = new RegExp(`^(${this.prefix})*`);
        const cleanValue = newVal.replace(regex, '');
        if (newVal === this.prefix.replace('-', '')) {
          this.opinionNote = this.prefix;
        } else {
          this.opinionNote = this.prefix + cleanValue;
        }
      }
    },
  },
  methods: {
    agreeProcess() {
      this.zgNote = '';
      this.currentAgree = 1;
      this.prefix = '同意-';
      this.opinionNote = this.prefix;
      this.getNote(1);
    },
    backProcess() {
      this.zgNote = '';
      this.currentAgree = 0;
      this.prefix = '不同意-';
      this.opinionNote = this.prefix;
      this.getNote(0);
    },
    getNote(f) {
      const params = {
        id: this.appealRecordData.id,
        isAgree: f,
      };
      request
        .post(`/bis/insp/BisInspZgPblmRecord/getNextStat`, params)
        .then((res) => {
          if (res.success) {
            this.prefix = res.data.opinionNote;
            this.opinionNote = this.prefix;
            this.zgNote = res.data.zgNotes;
          } else {
            this.$message.error(res.message);
          }
        });
    },
    submitAgreeBack() {
      if (this.currentAgree === 1) {
        this.agreeAppeal();
      }
      if (this.currentAgree === 0) {
        if (this.opinionNote == this.prefix) {
          this.$message.warning('请输入不同意的意见！');
          return false;
        }
        this.backAppeal();
      }
    },
    agreeAppeal() {
      const params = {
        id: this.appealRecordData.id,
        isAgree: 1,
        opinionNote: this.opinionNote,
      };
      if (this.opinionNote && this.opinionNote === '送监督处-') {
        params.opinionNote = this.opinionNote + '同意';
      }
      if (this.opinionNote && this.opinionNote === '送业务处-') {
        params.opinionNote = this.opinionNote;
      }
      this.btnLoading = true;
      request
        .post(`/bis/insp/BisInspZgPblmRecord/auditAppeal`, params)
        .then((res) => {
          this.btnLoading = false;
          if (res.success) {
            this.$message.success('同意申诉成功!');
            if (this.isModel) {
              this.$emit('closeModel');
              this.$eventBus.emit('affairs-center', {
                type: 'closeModal',
                data: {},
              });
            }
          } else {
            this.$message.error(res.message);
          }
        });
    },
    backAppeal() {
      this.$confirm({
        title: '提示',
        content: '确认退回吗?',
        okType: 'warning',
        onOk: () => {
          this.btnLoading = true;
          const params = {
            id: this.appealRecordData.id,
            isAgree: 0,
            opinionNote: this.opinionNote,
          };
          request
            .post(`/bis/insp/BisInspZgPblmRecord/auditAppeal`, params)
            .then((res) => {
              this.btnLoading = false;
              if (res.success) {
                this.$message.success('退回成功!');
                if (this.isModel) {
                  this.$emit('closeModel');
                  this.$eventBus.emit('affairs-center', {
                    type: 'closeModal',
                    data: {},
                  });
                }
              } else {
                this.$message.error(res.message);
              }
            });
        },
      });
    },
    getDutyDept() {
      request.get(`/bis/insp/zg/pblm/getDutyDept`).then((res) => {
        if (res.success) {
          this.ywcsList = res.data;
        }
      });
    },
    transferProcStatCodeToName(ActCode) {
      return transferProcStatCodeToName(ActCode);
    },
    submitDept() {
      if (!this.form.dutyDept) {
        this.$message.warning('请选择责任处室（单位）！');
        return false;
      }
      this.submit();
    },
    submit() {
      if (this.form.isag === 1) {
        this.form.auditidea = !this.form.auditidea
          ? '同意'
          : this.form.auditidea;
      } else {
        if (!this.form.auditidea) {
          this.$message.warning('请输入意见！');
          return false;
        }
      }
      const params = { ...this.currentRow, ...this.form };
      params.dutyDept = this.form.dutyDept
        ? this.form.dutyDept
        : this.currentRow.dutyDept;
      request.post(`/dc/insp/pblm/AddPblmZg`, [params]).then((res) => {
        if (res.success) {
          this.$message.success('提交成功');
          this.$eventBus.emit('affairs-center', {
            type: 'closeModal',
            data: {},
          });
          this.open = false;
        } else {
          this.$message.error(res.message);
        }
      });
    },
    submitDly() {
      if (this.form.isag === 1) {
        if (!this.form.isPdTmTemp) {
          this.$message.warning('请选择延期日期！');
        }
        this.form.auditidea = !this.form.auditidea
          ? '同意'
          : this.form.auditidea;
      } else {
        if (!this.form.isPdTmTemp) {
          this.$message.warning('请选择重新明确日期！');
          return false;
        }
        if (!this.form.auditidea) {
          this.$message.warning('请输入意见！');
          return false;
        }
      }
      const params = { ...this.currentRow, ...this.form };
      params.dutyDept = this.form.dutyDept
        ? this.form.dutyDept
        : this.currentRow.dutyDept;
      params.isPdTmTemp = this.form.isPdTmTemp
        ? this.form.isPdTmTemp
        : this.currentRow.isPdTmTemp;
      request.post(`/dc/insp/pblm/AddPblmZg`, [params]).then((res) => {
        if (res.success) {
          this.$message.success(this.form.isag == 1 ? '提交成功' : '退回成功');
          this.$eventBus.emit('affairs-center', {
            type: 'closeModal',
            data: {},
          });
          this.open = false;
        } else {
          this.$message.error(res.message);
        }
      });
    },
    getPblmId() {
      const msgNo = this.msgNo.endsWith(localStorage.getItem('persId'))
        ? this.msgNo.slice(0, -localStorage.getItem('persId').length)
        : this.msgNo;
      request
        .post(`/bis/insp/BisInspZgPblmRecord/getPblmId`, { id: msgNo })
        .then((res) => {
          this.getPblmDetail(res.data.pblmId);
        });
    },
    getOverData() {
      const msgNo = this.msgNo.endsWith(localStorage.getItem('persId'))
        ? this.msgNo.slice(0, -localStorage.getItem('persId').length)
        : this.msgNo;
      request
        .post(`/bis/insp/BisInspZgPblmRecord/getAuditListInfo`, { id: msgNo })
        .then((res) => {
          this.overData = res.data;
          this.appealRecordData = res.data;
          res.data.adjustAudits.forEach((item) => {
            if (item.opStatus !== '正在进行中') {
              this.appealRecordLine.push({
                id: item.id,
                timestamp: formatDateTime2(item.intm),
                type: 'check-circle',
                color: '#0bbd87',
                workflowStatName: item.workflowStatName,
                content: `${item.auditPersName} - ${item.adjustRcord}`,
              });
            } else {
              this.appealRecordLine.push({
                timestamp: formatDateTime(new Date()),
                type: 'ellipsis',
                workflowStatName: item.workflowStatName,
                content: '正在进行中',
              });
            }
          });
          this.appealContent = res.data.appealContent || '';
          this.gwComFiles = res.data.gwComFiles;
          res.data.gwComFiles?.forEach((item) => {
            if (
              item.fileExt === 'mp3' ||
              item.fileExt === 'MP3' ||
              item.fileExt === 'm4a'
            ) {
              this.zgAudioArray.push(item);
            } else if (
              item.fileExt === 'jpg' ||
              item.fileExt === 'JPG' ||
              item.fileExt === 'png' ||
              item.fileExt === 'PNG' ||
              item.fileExt === 'JPEG' ||
              item.fileExt === 'jpeg'
            ) {
              this.zgPictureArray.push(item);
            } else if (item.fileExt === 'mp4' || item.fileExt === 'MP4') {
              this.zgVideoArray.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.zgFileArray.push(item);
            }
          });

          this.zgPictureTabName =
            '图片资料(' + this.zgPictureArray.length + ')';
          this.zgAudioTabName = '音频资料(' + this.zgAudioArray.length + ')';
          this.zgVideoTabName = '视频资料(' + this.zgVideoArray.length + ')';
          this.zgFileTabName = '其它资料(' + this.zgFileArray.length + ')';
        });
    },
    getPblmDetail(id) {
      this.loading = true;
      request.get(`/bis/insp/zg/pblm/${id}`).then((res) => {
        if (res.success) {
          this.currentRow = res.data;
          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 + ')';
        } else {
          this.$message.error(res.message);
        }
      });
    },
    formatDate(tm) {
      return dateFormat(tm, 'yyyy-MM-dd HH:mm:ss');
    },
    downloadFiles(id, fileName) {
      request
        .get(`file/downFile/` + id, { responseType: 'arraybuffer' })
        .then((res) => {
          const blob = new Blob([res], { type: 'application/vnd.ms-excel' });
          const objectUrl = URL.createObjectURL(blob);
          // window.location.href = objectUrl;
          const link = document.createElement('a');
          link.href = objectUrl;
          link.download = fileName; // 文件名
          link.click(); // 下载文件
          URL.revokeObjectURL(objectUrl); // 释放内存
        });
    },
  },
};
</script>

<style lang='less' scoped>
  .search-wrapper {
    padding: 10px;
    font-weight: bold;
    font-size: 15px;
    span{
      margin-left: 50px;
    }
  }
  .content{
    width: 100%;
    height:calc(100% - 200px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding:10px;
    .content-item-box{
       width: 100%;
       height:50%;
       position: relative;
       img{
         position: absolute;
         width: 20px;
         height: 20px;
         right:10px;
         top:20px;

       }
    }
    .content-item{
      width: calc(33.33% - 15px);
      border:1px solid #e9e9e9;
      height:100%;
      .item-h{
        width:100%;
        height:40px;
        background: #e9e9e9;
        display: flex;
        font-size:15px;
        align-items: center;
        text-indent: 10px;
        font-weight: bold;
      }
      .item-c{
        width:100%;
        height:calc(100% - 40px);
        overflow: auto;
        padding:5px;
        p{
          span:first-child{
            color: rgba(0, 0, 0, 0.85);
            font-weight: bold;
          }
        }
      }
    }
  }
  .upload-container {
    width: 100%;
    max-height: 100%;
    overflow: auto;
    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%;
          cursor: pointer;
        }
      }

      .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: 100%;
      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>
