<template>
  <div class="panel panel-info auto">
    <table class="table table-striped table-bordered">
      <thead>
        <tr>
          <th colspan='7' style="font-weight: normal; text-align: center;">
            <b>工单各环节流转信息</b>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td style="text-align: center;border: #E9E9E9 solid 1px;">序号</td>
          <td style="text-align: center;border: #E9E9E9 solid 1px;">处理步骤</td>
          <td style="text-align: center;border: #E9E9E9 solid 1px;">签名</td>
          <td style="text-align: center;border: #E9E9E9 solid 1px;">操作</td>
          <td style="text-align: center;border: #E9E9E9 solid 1px;">开始日期</td>
          <td style="text-align: center;border: #E9E9E9 solid 1px;">结束日期</td>
          <td style="text-align: center;border: #E9E9E9 solid 1px;">备注</td>
        </tr>
        <tr v-for="row in model.steps">
          <td  style="text-align: center;border: #E9E9E9 solid 1px;">{{$index + 1}}</td>
          <td  style="text-align: center;border: #E9E9E9 solid 1px;">{{row.stepName}}</td>
          <td  style="text-align: center;border: #E9E9E9 solid 1px;">{{row.stepOwner}}</td>
          <td  style="text-align: center;border: #E9E9E9 solid 1px;">{{row.Action}}</td>
          <td  style="text-align: center;border: #E9E9E9 solid 1px;">{{row.receiveAt}}</td>
          <td  style="text-align: center;border: #E9E9E9 solid 1px;">{{row.finishAt}}</td>
          <td  style="text-align: center;border: #E9E9E9 solid 1px;">{{row.Comments}}</td>
        </tr>
      </tbody>
    </table>

    <table class="table table-striped table-bordered">
      <thead>
        <tr>
          <th colspan='7' style="font-weight: normal; text-align: center;">
            <b>维修前后照片</b>
          </th>
        </tr>
        </thead>
        <tbody>
        <tr>
          <td style="text-align: center;border: #E9E9E9 solid 1px;width: 50%">维修前照片</td>
          <td style="text-align: center;border: #E9E9E9 solid 1px;width: 50%">维修后照片</td>
        </tr>
        <tr>
          <td style="text-align: center;border: #E9E9E9 solid 1px;width: 50%">
            <div style="float:none;width:max-content;margin:auto;">
              <div v-for="item in BeforePhoto" style="float: left;">
                <img-self v-if="item" :src="item" :width="100" :height="100" style="padding: 8px"></img-self>
              </div>
            </div>
          </td>
          <td style="text-align: center;border: #E9E9E9 solid 1px;width: 50%">
            <div style="float:none;width:max-content;margin:auto;">
              <div v-for="item in AfterPhoto" style="float: left;">
                <img-self v-if="item" :src="item" :width="100" :height="100" style="padding: 8px"></img-self>
              </div>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
  import {HttpResetClass} from 'vue-client'
  export default {
    data () {
      return {
        model: {},
        BeforePhoto:[],
        AfterPhoto:[],
        /**
         * Method：方法名，不可变
           Sign：外部系统标识，不可变
           Sn：工单编号，可变
         */
        link:{
          method :'GetLCJD',
          sign :'567A58E0-1B91-48A9-AAF3-0A5A9C96CC39',
          sn :'',
          fileid :''
        }
      }
    },
    title: '工单各环节流转信息',
    props: ['data','ordersn'],
    ready () {
      this.getServiceRepair()
    },
    methods: {
      async getServiceRepair () {
        if(this.data && this.data.f_userinfo_code){
          console.log('==OrderSN==:',this.ordersn)
          this.link.sn = this.ordersn
          var url = 'gdServices/api/cc/WorkOrder.ashx?method=' + this.link.method + '&sign=' + this.link.sign + '&sn=' + this.link.sn
          let http = new HttpResetClass()
          let res = await http.load('GET', url, {}, {resolveMsg: null, rejectMsg: '获取工单各环节流转信息失败'})
          this.model = res.data.children[0]
          console.log('看看维修前后照片编号',this.model.BeforePhoto,this.model.AfterPhoto)
          if (this.model.BeforePhoto!=null){
            let before = this.photoCut(this.model.BeforePhoto)
            before.forEach((item) => {
              this.BeforePhoto.push(this.photoList(item))
            })
          }
          if(this.model.AfterPhoto!=null){
            let after = this.photoCut(this.model.AfterPhoto)
            after.forEach((item) => {
              this.AfterPhoto.push(this.photoList(item))
            })
          }
          console.log('看看工单流转信息',res.data,this.model)
          console.log('看看拼接后照片地址',this.BeforePhoto,this.AfterPhoto)
        }
      },
      //照片id字符串转数组
      photoCut(str){
        let phs = str.split(";")
        return phs
      },
      //拼接维修前后照片地址
      photoList(item){
        this.link.method = 'Download'
        this.link.fileid = item
        let imgsrc = 'http://39.98.189.166:9002/api/cc/WorkOrder.ashx?method=' + this.link.method + '&fileid=' +this.link.fileid + '&sign=' +this.link.sign
        console.log('imgsrc:',imgsrc)
        return imgsrc
      }
    },
    watch: {
    }

  }
</script>
