<template>
  <div class="workorderInfo">
    <!-- 返回和 -->
    <div class="workorderInfo__h">
      <p class="workorderInfo__h__fanhui" @click="$router.back(-1)">&lt;&nbsp;{{$t('workorderinfo1')}}</p> <span class="workorderInfo__h__line"></span> <p class="workorder__h--p"> {{ $t('workorderinfo4') }} </p>
    </div>
    <div class="workorderInfo__box">
      <div class="workorderInfo__box__left">
        <!-- <img :src="infoData.status == 1 ?' ../../assets/images/alarmclock.png ': '../../assets/images/accomplish.png'" alt=""> -->
        <div class="workorderInfo__box__left-img">
          <img v-if="infoData.status ==1||infoData.status ==2" src="http://pro-test.api.yesapi.cn/uploads/20210129/171838_f93617f6ff8822f8fe10894de388a992.png" alt="">
          <img v-else src="http://pro-test.api.yesapi.cn/uploads/20210129/171838_bd66c8ad97b82d7414fb2ad5aeefb471.png" alt="">
        </div>
        <div class="workorderInfo__box__left-box">
          <div class="workorderInfo__box__left-box-status" style="font-size: 16px;font-weight: bold;"><span style="color: black;">{{$t('workorderinfo13')}}：</span> <span style="color: #486DBE;">{{statusArr[infoData.status]}}</span></div>
          <p style="margin-bottom: 15px;">{{$t('workorderlist11')}}：{{infoData.order_no}}</p>
          <div class="workorderInfo__box__left-box-result">
            <div class="workorderInfo__box__left-box-result-circle">
              <div class="workorderInfo__box__left-box-result-circle-box" style=""></div>
              <div class="workorderInfo__box__left-box-result-circle-box" style=""></div>
              <div class="workorderInfo__box__left-box-result-circle-line"></div>
            </div>
            <div class="workorderInfo__box__left-box-result-text">
              <div>
                <p>{{$t('workorderinfo2')}}</p>
                <p>{{infoData.add_time}}</p>
              </div>
              <p>{{statusArr[infoData.status]}}</p>
            </div>
          </div>
          <Button type="primary" v-if="infoData.status != 3 && infoData.status != 4" @click="endWorkOrder">{{$t('workorderinfo3')}}</Button>
        </div>
      </div>
      <div class="workorderInfo__box__right">
        <h3 style="padding: 0 50px;">{{$t('workorderinfo14')}}{{infoData.title}}</h3>
        <div class="workorderInfo__box__right-info">
          <p class="workorderInfo__box__right-info-title">{{$t('workorderinfo4')}}</p>
          <p>{{infoData.problem_desc}}</p>
        </div>
        <div class="workorderInfo__box__right-accessory">
          <p class="workorderInfo__box__right-info-title">{{$t('workorderinfo5')}}</p>
          <div class="workorderInfo__box__right-accessory-box">
            <!-- <img src="" alt=""> -->
            <div class="workorderInfo__box__right-accessory-box-img" v-for="item in file_ids" :key="item.id">
              <img v-if="item.file_type_simple == 'image'" :src="item.web_url" alt="" style="width: 100px;height:100px;object-fit: contain;" @click="onPreviewSrc(item.web_url)">
              <img v-else src="http://pro-test.api.yesapi.cn/uploads/20210129/171940_659b9e0eae0c206191b6c23d5613f0c1.png" alt="" style="width: 100px;height:100px;">
              <!-- 预览图 -->
              <Modal v-model="preview" width="1000">
                <div style="text-align:center">
                    <img :src="previewSrc" alt="" srcset="" style="width:100%;height:100%">
                </div>
              </Modal>
              <a v-if="item.file_type_simple != 'image'" :href="item.web_url" target="_blank" rel="noopener noreferrer">{{$t('workorderinfo16')}}</a>
            </div>
            <div v-if="file_ids.length == 0 " class="workorderInfo__box__right-accessory-box-img">
              <p style="color: #999;">{{$t('workorderinfo6')}}</p>
            </div>
          </div>
        </div>
        <div class="workorderInfo__box__right-reply">
          <p class="workorderInfo__box__right-info-title">{{$t('workorderinfo7')}}</p>
          <div class="workorderInfo__box__right-reply-box">
            <div class="workorderInfo__box__right-reply-box-msg" v-for="item in chat_recode" :key="item.date">
              <div style="border-radius: 50%;width: 30px;height: 30px;overflow: hidden;margin-right: 20px;">
                <img src="http://pro-test.api.yesapi.cn/uploads/20210129/171727_8479087aa4501960d5b8324eb1f78f5a.jpg" alt="" style="width: 30px;height: 30px;">
              </div>
              <div>
                <p>{{item.mobile}} <span>{{item.date}}</span> </p>
                <p>{{item.chat_recode}}</p>
                <div v-if="item.chat_recode_file_arr.length > 0" style="display: flex;flex-wrap:wrap;align-items: center;">
                  <div v-for="recodeItem in item.chat_recode_file_arr" :key="recodeItem.web_url" style="margin: 0 10px;">
                    <img v-if="recodeItem.file_type == 'image'" :src="recodeItem.web_url" alt="" style="width: 100px;height:100px;object-fit: contain;" @click="onPreviewSrc(recodeItem.web_url)" >
                    <div v-else style="display: flex;flex-direction: column;align-items: center;justify-content: center;">
                      <img src="http://pro-test.api.yesapi.cn/uploads/20210129/171940_659b9e0eae0c206191b6c23d5613f0c1.png" alt="" style="width: 100px;height:100px;">
                      <a :href="recodeItem.web_url" target="_blank" rel="noopener noreferrer">{{$t('workorderinfo16')}}</a>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- 回复 -->
            <Input v-if="infoData.status != 3 && infoData.status != 4" v-model="revert" type="textarea" :autosize="{minRows: 3,maxRows: 6}" placeholder="" style="width: 500px;display: block;margin:30px 0 10px;" />
            <Upload
              v-if="infoData.status != 3 && infoData.status != 4"
              action="/api/platform.php?s=Platform.File.Upload"
              :multiple="true"
              :data="{ access_token: token }"
              :max-size="4096"
              :show-upload-list="isMultiple"
              :format="uploadType"
              :before-upload="uploadList"
              :on-success="handleUploadLogo"
              :on-format-error="handleFormatError"
              :on-exceeded-size="handleMaxSize"
              :on-remove="removeUploadItem"
              style="width: 500px;margin-bottom: 20px;"
            >
              <Button icon="ios-cloud-upload-outline">{{
                $t("addworkorder18")
              }}</Button>
              <span style="color: #989898">{{ $t("addworkorder17") }}</span>
            </Upload>
            <Button v-if="infoData.status != 3 && infoData.status != 4" type="primary" @click="onUpdateWorkOrder">{{$t('workorderinfo8')}}</Button>
          </div>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
import { DetailWorkOrder, UpdateChatRecodeWorkOrder, UploadType, UploadImg } from '@/api/workorder'
import { getToken } from '@/libs/util'
export default {
  data () {
    return {
      token: getToken(),
      id: 0,
      statusArr: [this.$t('workorderlist6'), this.$t('workorderlist7'), this.$t('workorderlist71'), this.$t('workorderlist8'), this.$t('workorderlist9')],
      infoData: {},
      chat_recode: [],
      file_ids: [],
      revert: '',
      uploadImgList: [],
      uploadImgListSrc: [],
      uploadType: [],
      file_img: [], // 上传的图片
      // 预览图
      preview: false,
      previewSrc: '',
      isMultiple: true,
      uploadMaxNum: true
    }
  },
  created () {
    this.id = this.$route.query.id
    this.getWorkOrderInfo()
  },
  methods: {
    getWorkOrderInfo () {
      let _this = this
      const data = new FormData()
      data.append('access_token', _this.token)
      data.append('id', _this.id)
      DetailWorkOrder(data).then(res => {
        _this.infoData = res.data
        _this.chat_recode = res.data.chat_recode // 回复内容
        _this.file_ids = res.data.file_arr // 附件
      })
    },
    onUpdateWorkOrder () {
      let _this = this
      if (_this.revert === '') {
        _this.$Message.info({
          content: _this.$t('workorderinfo9'),
          duration: 5,
          closable: true
        })
      } else {
        const data = new FormData()
        // _this.uploadImgListSrc = []
        data.append('access_token', _this.token)
        data.append('id', _this.id)
        data.append('chat_recode', _this.revert)
        if (_this.uploadImgList.length > 0) {
          _this.uploadImgList.forEach(item => {
            _this.uploadImgListSrc.push(item.response.data.url)
          })
          console.log(_this.uploadImgListSrc, JSON.stringify(_this.uploadImgListSrc), '_this.uploadImgListSrc')
          data.append('chat_recode_file', JSON.stringify(_this.uploadImgListSrc))
        }
        UpdateChatRecodeWorkOrder(data).then(res => {
          if (res.ret === 200) {
            _this.$Message.success(_this.$t('workorderinfo10'))
            _this.revert = ''
            _this.isMultiple = false
            _this.getWorkOrderInfo()
          } else {
            _this.$Message.error(res.msg)
          }
        })
      }
    },
    // 打开预览图
    onPreviewSrc (val) {
      this.preview = true
      this.previewSrc = val
      console.log(val, this.preview, this.previewSrc, '000000000')
    },
    uploadList (val) {
      let _this = this
      if (_this.uploadImgList.length >= 5) {
        _this.$Message.error(_this.$t('addworkorder15'))
        return false
      } else {
        _this.uploadImgList.push(val)
        // _this.uploadimg(val)
      }
      // console.log(_this.file_img, '_this.file_img_this.file_img')
      // return false
    },
    // uploadimg (val) {
    //   let _this = this
    //   const data = new FormData()
    //   // const file_img = ''
    //   data.append('access_token', _this.token)
    //   data.append('file', val)
    //   UploadImg(data).then(res => {
    //     console.log(res, '========')
    //     _this.file_img.push(res.data.url)
    //     console.log(_this.file_img, '_this.file_img_this.file_img')
    //   })
    //   // return file_img
    // },
    removeUploadItem (file, fileList) {
      this.uploadImgList = fileList
      console.log(file, this.uploadImgList, 'this.uploadImgList')
    },
    handleUploadLogo (response, file, fileList) {
      this.isMultiple = true
      this.uploadImgList = fileList
      console.log(this.uploadImgList, 'this.uploadImgListchengg')
    },
    endWorkOrder () {
      let _this = this
      _this.$Modal.confirm({
        title: _this.$t('place_23'),
        content: _this.$t('workorderinfo11'),
        onOk: () => {
          const data = new FormData()
          data.append('access_token', _this.token)
          data.append('id', _this.id)
          data.append('status', 3)
          UpdateChatRecodeWorkOrder(data).then(res => {
            if (res.ret === 200) {
              _this.getWorkOrderInfo()
              _this.$Message.success(_this.$t('workorderinfo10'))
            }
          })
        },
        onCancel: () => {
          _this.$Message.info(_this.$t('workorderinfo12'))
        }
      })
    },
    // 获取上传类型UploadType
    getUploadType () {
      let _this = this
      UploadType({ 'access_token': _this.token }).then(res => {
        _this.uploadType = res.data
      })
    },
    handleFormatError (file) {
      this.$Notice.warning({
        title: this.$t('document_format_error'),
        desc: this.$t('document_format_error_content')
      })
    },
    handleMaxSize (file) {
      this.$Notice.warning({
        title: this.$t('file_too_large'),
        desc: this.$t('file_too_large_error_content')
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .workorderInfo {
    background-color: #FFFFFF;
    border-radius: 10px;
    &__h{
      height:72px;
      border-radius:10px;
      display: flex;
      align-items: center;
      margin-bottom: 20px;
      padding: 30px;
      &__line {
        display: block;
        width: 1px;
        height: 10px;
        background-color: #999;
        margin: 0 20px;
      }
      &__fanhui {
        color: #486DBE;
        font-size: 14px;
        cursor: pointer;
      }
      &--p{
        font-size:16px;
        font-family:PingFangSC-Medium,PingFang SC;
        font-weight:500;
        color:rgba(35,35,42,1);
      }
    }
    &__box {
      font-size: 14px;
      border-top: 1px solid #c8c8c8;
      padding: 0 30px;
      display: flex;
      &__left {
        width: 25%;
        border-right: 1px solid #c8c8c8;
        display: flex;
        padding: 30px 0;
        &-img {
          display: flex;
          align-items: flex-start;
          margin-right: 20px;
        }
        &-box {
          &-status {
            margin-bottom: 15px;
          }
          &-result {
            display: flex;
            margin-bottom: 15px;
            &-circle {
              position: relative;
              display: flex;
              flex-direction: column;
              justify-content: space-between;
              margin-right: 20px;
              padding: 5px 0;
              &-box {
                width: 10px;
                height: 10px;
                border-radius: 50%;
                background-color: #333;
              }
              &-line {
                // height: 50px;
                background-color: #333;
                width: 1px;
                position: absolute;
                height: calc(100% - 10px);
                left: 5px;
                top: 5px;
              }
            }
            &-text {
              div{
                margin-bottom: 30px;
              }
            }
          }
        }
      }
      &__right {
        // margin-left: 50px;
        // padding: 30px 0 30px 50px;
        margin-top: 30px;
        flex: 1;
        &-info {
          margin-bottom: 30px;
          padding: 20px 0 20px 50px;
          border-bottom: 1px solid #c8c8c8;
          &-title::before {
            content: '';
            width: 2px;
            height: 10px;
            display: block;
            background-color: #486DBE;
            margin-right: 5px;
          }
          &-title {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
          }
        }
        &-accessory {
          padding: 20px 0 20px 50px;
          border-bottom: 1px solid #c8c8c8;
          margin-bottom: 30px;
          &-box{
            display: flex;
            &-img {
              width: 100px;
              height: 100px;
              margin-right: 10px;
            }
          }
        }
        &-reply {
          padding: 20px 0 20px 50px;
          border-bottom: 1px solid #c8c8c8;
          margin-bottom: 30px;
          &-box {
            &-msg {
              margin-bottom: 15px;
              display: flex;
            }
          }
        }
      }
    }
  }
</style>
