<template>
  <div class="container">
    <div
      class="searchBox"
      :style="{ height: localHeight + 'px', paddingTop: top + 'px' }"
    >
      <div class="searchBox_add">
        <div class="searchBox_left">
          <u-icon
            bold
            color="#000"
            size="40"
            name="arrow-left"
            @click="back"
          ></u-icon>
        </div>
        <div class="searchBox_mid">报修信息</div>
        <div class="searchBox_right"></div>
      </div>
    </div>

    <div class="repairMsg">
      <div :class="['orderItemTit', statusType[info.status].style]">
        <div class="orderItemTit_left">工单编号：{{ info.order_code }}</div>
        <div class="orderItemTit_right">{{ statusType[info.status].desc }}</div>
      </div>

      <div class="row">
        <div class="row_label">小区房源名称</div>
        <div class="row_con">{{ info.room.name }}</div>
      </div>

      <div class="row">
        <div class="row_label">报修类型</div>
        <div class="row_con">{{ info.ac.category_name }}</div>
      </div>

      <div class="row">
        <div class="row_label">问题描述</div>
        <div class="row_con">{{ info.problem_description }}</div>
      </div>

      <div class="row">
        <div class="row_label">联系人</div>
        <div class="row_con">{{ info.contact_name }}</div>
      </div>

      <div class="row">
        <div class="row_label">联系电话</div>
        <div class="row_con">{{ info.contact_phone }}</div>
      </div>

      <div class="row">
        <div class="row_label">上门时间</div>
        <div class="row_con">{{ info.service_time }}</div>
      </div>
    </div>

    <div class="repairMsg">
      <div class="row">
        <div class="row_label df">图片</div>
        <div class="row_con">
					<view v-if="info.imagesList && info.imagesList.length == 0">暂无图片</view>
          <image
						v-else
            v-for="(item, index) in info.imagesList"
            :key="index"
            :src="item"
            mode="aspectFill"
          >
          </image>
        </div>
      </div>

      <div class="row">
        <div class="row_label df">视频</div>
        <div class="row_con">
					<view v-if="info.videosList && info.videosList.length == 0">暂无视频</view>
          <image
						v-else
						v-for="(item, index) in info.videosList"
            :key="index"
            :src="item"
            mode="aspectFill"
          ></image>
        </div>
      </div>

      <div class="row" v-if="info.assign_time">
        <div class="row_label">指派时间</div>
        <div class="row_con noneBor">{{ info.assign_time }}</div>
      </div>
    </div>

    <div class="repairMsg" v-if="info.reporter_worker">
      <div class="row">
        <div class="row_label">维修师傅</div>
        <div class="row_con">{{ info.reporter_worker.name }}</div>
      </div>

      <div class="row">
        <div class="row_label">师傅手机号</div>
        <div class="row_con">{{info.reporter_worker.mobile}}</div>
      </div>

      <div class="row">
        <div class="row_label">师傅工号</div>
        <div class="row_con noneBor">{{info.reporter_worker.emp_no}}</div>
      </div>
    </div>

    <div class="repairMsg" v-if="info.repair_images || info.repair_videos || info.repair_description">
      <div class="row">
        <div class="row_label df">维修图片</div>
        <div class="row_con">
          <image
            v-for="(item, index) in info.repair_images"
            :key="index"
            :src="item"
            mode="aspectFill"
          >
          </image>
        </div>
      </div>

      <div class="row">
        <div class="row_label df">维修视频</div>
        <div class="row_con">
          <image
						v-for="(item, index) in info.repair_images"
            :key="index"
						:src="item"
            mode="aspectFill"
          ></image>
        </div>
      </div>

      <div class="row">
        <div class="row_label">维修描述</div>
        <div class="row_con noneBor">{{info.repair_description}}</div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  request,
  picUrl,
  NavgateTo,
  menuButtonInfo,
} from "../../../utils";
import { apiArr } from "../../../api/v2Community";
export default {
  data() {
    return {
      active: "1",
      top: "",
      localHeight: "",
      info: {},
      // 状态枚举类型
      statusType: {
        1: {
          desc: "待指派",
          style: "orderItemTit_state1",
        },
        2: {
          desc: "进行中",
          style: "orderItemTit_state2",
        },
        4: {
          desc: "已完成",
          style: "orderItemTit_state4",
        },
        3: {
          desc: "已作废",
          style: "orderItemTit_state3",
        },
      },
    };
  },
  methods: {
    back() {
      uni.navigateBack({
        delta: 1,
      });
    },
    changeAct(e) {
      this.active = e;
    },
    async init(id) {
      const res = await request(apiArr.workOrderCrudInfo, "POST", {
        id: Number(id),
      });
			const newRes = {
				...res,
				imagesList: res.images !== '' ? res.images.split(',').map(url => `picUrl${url}`) : [],
				videosList: res.videos !== '' ? res.videos.split(',').map(url => `picUrl${url}`) : [],
			}
			console.log('222222', res.videos !== '' ? 222 : []);
			console.log('newRes', newRes);
      this.info = newRes;
    },
  },

  onLoad(options) {
    console.log("1111", options);
    const meun = menuButtonInfo();
    this.top = meun.top;
    this.localHeight = meun.height;
    this.init(options.id);
  },

  onShow() {},
};
</script>

<style>
@import url("./index.css");
</style>
