<template>
  <div class="edit-add-detail detail">
    <div class="edit-add-detail-new-content">
      <div class="form-content">
        <el-form ref="formInfo" :model="detailForm" class="detail-form" label-position="left" label-suffix="：">
          <div class="rows">
            <div class="rows-left">
              <div class="rows-hr"></div>
            </div>
            <div class="rows-title">
              <div class="text-overflow">回访信息</div>
            </div>
          </div>
          <el-row :gutter="24" style="flex-wrap: wrap;margin-left: 80px" type="flex">
            <el-col :span="8">
              <el-form-item label="救援单号">
                <span :title="detailForm.rescueNo" class="text">
                  {{ detailForm.rescueNo || '-' }}
                </span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="回访时间">
                <span :title="detailForm.rescueTel" class="text">
                  {{ detailForm.revisitTime || '-' }}
                </span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24" style="flex-wrap: wrap;margin-left: 80px" type="flex">
            <el-col :span="8">
              <el-form-item label="回访结果">
                <span :title="detailForm.revisitResult" class="text">
                  {{ dictionaryEscape('hfjg', String(detailForm.revisitResult)) }}
                </span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24" style="flex-wrap: wrap;margin-left: 80px" type="flex">
            <el-col :span="8">
              <el-form-item label="收费相关附件">
                <el-upload
                  ref="upload"
                  :action="actionUrl + '/file/v1/fileUpload'"
                  :data="{
                    file: JSON.stringify({storeType: 'minio'}),
                  }"
                  :file-list="detailForm.rescueFiles"
                  :multiple="false"
                  :on-preview="handlePreview"
                  disabled
                  name="files"
                >
                </el-upload>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24" style="flex-wrap: wrap;margin-left: 80px" type="flex">
            <el-col :span="8">
              <el-form-item label="其他附件">
                <el-upload
                  ref="upload"
                  :action="actionUrl + '/file/v1/fileUpload'"
                  :data="{
                    file: JSON.stringify({storeType: 'minio'}),
                  }"
                  :file-list="detailForm.appraiseFiles"
                  :multiple="false"
                  :on-preview="handlePreview"
                  disabled
                  name="files"
                >
                </el-upload>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24" style="flex-wrap: wrap;margin-left: 80px" type="flex">
            <el-col :span="8">
              <el-form-item label="回访备注">
                <span :title="detailForm.revisitMemo" class="text">
                  {{ detailForm.revisitMemo || '-' }}
                </span>
              </el-form-item>
            </el-col>
          </el-row>
          <div v-if="resultShow()" class="rows">
            <div class="rows-left">
              <div class="rows-hr"></div>
            </div>
            <div class="rows-title">
              <div class="text-overflow">评价信息</div>
            </div>
          </div>
          <el-row v-if="resultShow()" :gutter="24" style="flex-wrap: wrap;margin-left: 80px" type="flex">
            <el-col :span="8">
              <el-form-item label="评价时间">
                <span :title="detailForm.appraiseTime" class="text">
                  {{ detailForm.appraiseTime || '-' }}
                </span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row v-if="resultShow()" :gutter="24" style="flex-wrap: wrap;margin-left: 80px" type="flex">
            <el-col :span="8">
              <el-form-item label="评价分数">
                <el-rate v-model="detailForm.appraiseScore" class="appraiseScore" disabled
                         disabled-void-color="#43a1ff" disabled-void-icon-class="el-icon-star-off">
                </el-rate>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row v-if="resultShow()" :gutter="24" style="flex-wrap: wrap;margin-left: 80px" type="flex">
            <el-col :span="8">
              <el-form-item label="评价手机号">
                <span :title="detailForm.appraiseTel" class="text">
                  {{ detailForm.appraiseTel || '-' }}
                </span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row v-if="resultShow()" :gutter="24" style="flex-wrap: wrap;margin-left: 80px" type="flex">
            <el-col :span="8">
              <el-form-item label="是否投诉">
                <span :title="detailForm.isComplain" class="text">
                  {{ detailForm.isComplain ? '是' : '否' }}
                </span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row v-if="resultShow()" :gutter="24" style="flex-wrap: wrap;margin-left: 80px" type="flex">
            <el-col v-if="detailForm.isComplain" :span="8">
              <el-form-item label="投诉是否有效">
                <span :title="detailForm.isCost" class="text">
                  {{ detailForm.isCost ? '是' : '否' }}
                </span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row v-if="resultShow()" :gutter="24" style="flex-wrap: wrap;margin-left: 80px" type="flex">
            <el-col :span="8">
              <el-form-item label="是否出示收费标准">
                <span :title="detailForm.isInvoice" class="text">
                  {{ detailForm.isInvoice ? '是' : '否' }}
                </span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row v-if="resultShow()" :gutter="24" style="flex-wrap: wrap;margin-left: 80px" type="flex">
            <el-col :span="8">
              <el-form-item label="是否满意服务态度">
                <span :title="detailForm.isService" class="text">
                  {{ detailForm.isService ? '满意' : '不满意' }}
                </span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row v-if="resultShow()" :gutter="24" style="flex-wrap: wrap;margin-left: 80px" type="flex">
            <el-col :span="8">
              <el-form-item label="评价建议">
                <span :title="detailForm.appraiseInfo" class="text">
                  {{ detailForm.appraiseInfo || '-' }}
                </span>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import {dictionaryEscape} from '@/utils/dictionary'
import {tableDetail} from '@/api/patrolAndRescue/obstacleClearingRescue/rescueFollowUp'
import PubSub from 'pubsub-js'
import {mapState} from 'vuex'

export default {
  name: 'DetailPage',
  props: {
    componentName: {
      default: 'TablePage',
      type: String
    }
  },
  components: {},
  data() {
    return {
      detailForm: {},
      pubSub: null,
      eventStatus: 0,
      confirmLoading: false,
      reverse: true,
      activities: [{
        content: '活动按期开始',
        timestamp: '2018-04-15'
      }, {
        content: '通过审核',
        timestamp: '2018-04-13'
      }, {
        content: '创建成功',
        timestamp: '2018-04-11'
      }],
      eventNode: '登记',
      url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
      srcList: [
        'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
        'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
      ]
    }
  },
  computed: {
    actionUrl: (_) => window.context.portal,
    previewUrl: (_) =>
      window.context.portal + '/file/onlinePreviewController/v1/getFileById_',
    downloadUrl: (_) => window.context.portal + '/file/v1/downloadFile?fileId=',
    ...mapState({
      headers: (state) => ({
        Authorization: `Bearer ${state.login.currentUser.token}`
      })
    })
  },
  watch: {
    componentName: {
      handler(newVal) {
        if (newVal === this.$options.name) {
          this.openPage()
        } else {
          this.closePage()
        }
      }
    }
  },
  mounted() {
    this.pubSub = PubSub.subscribe('DetailPage', (_, data) => {
      if (data.id) {
        this.eventStatus = data.status
        this.getDetail(data.appraiseId)
      }
    })
  },
  methods: {
    dictionaryEscape,
    // 已上传文件点击
    async handlePreview(file) {
      console.log(file, '-----------')
      const fileId = file.fileId || file.response.fileId || '' // 文件ID
      const fileName = file.filePath || '' // 文件名
      if (!(fileId && fileName))
        return this.$message.warning('文件错误，请删除后重新上传')
      const browserOperablePattern = /\.(jpg|jpeg|png|gif|bmp|webp|pdf)$/i
      if (browserOperablePattern.test(fileName)) {
        window.open(this.previewUrl + fileId, '_blank')
      } else {
        window.open(this.downloadUrl + fileId, '_blank')
      }
    },
    resultShow() {
      return !(this.detailForm.revisitResult === 2 || this.detailForm.revisitResult === 3)
    },
    // 打开页面执行
    openPage() {
      // this.$refs.mineMap?.map?.resize()
    },
    changePage(pageName = '', type = '') {
      if (!pageName) return
      this.$emit('changePage', pageName, _ => {
        PubSub.publish(pageName, {type})
      })
    },
    // 关闭页面执行
    closePage() {
      // 重置组件数据
      Object.assign(this.$data, this.$options.data.call(this), {pubSub: this.pubSub})
      this.$nextTick(_ => {
        this.$refs.formInfo.$el.scrollTop = 0
      })
    },
    // 获取详情
    async getDetail(id) {
      const {...detailForm} = await tableDetail(id)
      this.detailForm = {
        ...detailForm
      }
      this.detailForm.rescueFiles = this.detailForm.rescueFiles ? this.detailForm.rescueFiles : []
      this.detailForm.appraiseFiles = this.detailForm.appraiseFiles ? this.detailForm.appraiseFiles : []
      if (this.detailForm.appraiseFiles.length > 0) {
        this.detailForm.appraiseFiles = this.detailForm.appraiseFiles.map(item => {
          return {
            name: item.fileName,
            url: item.filePreviewUrl,
            ...item
          }
        })
      }
      if (this.detailForm.rescueFiles.length > 0) {
        this.detailForm.rescueFiles = this.detailForm.rescueFiles.map(item => {
          return {
            name: item.fileName,
            url: item.filePreviewUrl,
            ...item
          }
        })
      }
    }
  },
  beforeDestroy() {
    // 在组件销毁之前 清除订阅消息
    PubSub.unsubscribe(this.pubSub)
  }
}
</script>

<style lang="scss" scoped>
.edit-add-detail-new-content {
  width: 100%;
  display: flex;
  height: 0;
  flex: 1;
  column-gap: 20px;

  .form-content {
    flex: 4;
  }

  .map-content {
    flex: 3;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: $--system-border-color3 0.5px 0.5px 5px 1px;

    ::v-deep.marker-tip {
      position: relative;
      background-image: url('~@/assets/img/patrolAndRescue/inspection-points-icon.png');
      background-size: cover;
      width: 48px !important;
      height: 48px !important;
      z-index: 999;

      &::after {
        position: absolute;
        content: '救援点位置';
        left: 100%;
        top: 8px;
        width: 80px;
        height: 25px;
        font-size: 16px;
        color: $--color-warning;
        text-align: center;
        line-height: 25px;
        padding: 5px 10px;
        background-color: rgba(darken($--color-warning, 70%), 0.9);
        border-radius: 3px;
        box-shadow: 0 0 6px rgba($--color-warning, 0.8);
        border: none;
        z-index: 999;
      }
    }
  }
}

.flow-box {
  ::v-deep.el-timeline-item__timestamp {
    font-size: 16px;
    color: #fff;
  }

  .el-card {
    background-color: #144871;
    border-radius: 5px;
  }

  .header {
    display: flex;
    justify-content: space-between;
  }

  .event-detail {
    padding: 10px 0;
  }

  .dispose-img {
    display: flex;
    gap: 10px;

    .el-image {
      border-radius: 5px;
      box-sizing: border-box;
    }
  }

}

::v-deep.el-backtop {
  background: transparent;
}

::v-deep.top-box {
  background: rgba(10, 38, 61, .5);
}
</style>
