<template>
  <view class="container">
    <view class="searchBox" :style="{ height: localHeight + 'px', paddingTop: top + 'px' }">
      <view class="searchBox_add">
        <view class="searchBox_left">
          <u-icon bold color="#000" size="40" name="arrow-left" @click="headerBackClick"></u-icon>
        </view>
        <view class="searchBox_mid">工单详情</view>
        <view class="searchBox_right"></view>
      </view>
    </view>

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

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

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

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

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

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

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

    <view class="repairMsg">
      <view class="row">
        <view class="row_label df">图片</view>
        <view 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=""
            @click="handlerPreviewImageClick(item)">
          </image>
        </view>
      </view>

      <view class="row">
        <view class="row_label df">视频</view>
        <view class="row_con">
          <view v-if="info.videosList && info.videosList.length == 0">暂无视频</view>
          <view v-else v-for="(item, index) in info.videosList" :key="index" class="videoBOX">
            <video id="myVideo" :src="item" playsinline webkit-playsinline></video>
          </view>
        </view>
      </view>

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

    <!-- 维修状态非带指派 -->
    <view class="repairMsg" v-if="info.status !== 1">
      <view class="row">
        <view class="row_label">维修师傅</view>
        <view class="row_con">{{ info.repairman_worker.name }}</view>
      </view>

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

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

    <!-- 工单状态非带指派或者进行中 -->
    <view class="repairMsg" v-if="info.status !== 1 && info.status !== 2">
      <view class="row">
        <view class="row_label df">维修图片</view>
        <view class="row_con">
          <view v-if="info.repairImagesList && info.repairImagesList.length == 0">暂无图片</view>
          <image v-for="(item, index) in info.repairImagesList" :key="index" :src="item" mode=""
            @click="headerRepairImagesClick(item)" />
        </view>
      </view>

      <view class="row">
        <view class="row_label df">维修视频</view>
        <view class="row_con">
          <view v-if="info.repairVideosList && info.repairVideosList.length == 0">暂无视频</view>
          <view v-else v-for="(item, index) in info.repairVideosList" :key="index" class="videoBOX">
            <video id="myVideo" :src="item" playsinline webkit-playsinline></video>
          </view>
        </view>
      </view>

      <view class="row">
        <view class="row_label">维修描述</view>
        <view class="row_con noneBor">{{ info.repair_description || '暂无描述' }}</view>
      </view>
    </view>
    <view class="repairMsg" v-if="type === 'edit'">
      <view class="repairMedia">
        <view class="edit_row df">
          <view class="row_label">维修图片</view>
          <view class="row_con2">
            <u-upload :fileList="imgList" name="imgList" @afterRead="afterReadImg" @delete="deletePic" multiple
              :maxCount="10">
              <view class="imgCon">
                <image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_imageImg.png"
                  mode="widthFix"></image>
                上传图片
              </view>
            </u-upload>
          </view>
        </view>

        <view class="edit_row df">
          <view class="row_label">上传视频</view>
          <view class="row_con2">
            <u-upload v-if="!videoList.url" :fileList="videoList" @afterRead="afterReadVideo" @delete="deleteVideo"
              name="videoList" :maxCount="1" accept="video">
              <view class="imgCon">
                <image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_videoImg.png"
                  mode="widthFix"></image>
                上传视频
              </view>
            </u-upload>

            <view v-if="videoList.url" class="videoBOX">
              <video id="myVideo" :src="videoList.url" playsinline webkit-playsinline></video>
              <view class="mask" @click="playFullScreenVideo">
                <!-- <view class="mask_con">
                      <image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/local_play.png" mode="widthFix"></image>
                  </view> -->
                <view class="mask_cancel" @click="cancels">删除</view>
              </view>
            </view>
          </view>
        </view>
      </view>

      <view class="edit_row">
        <view class="row_label">维修描述</view>
        <textarea placeholder="请输入维修描述" :value="repairRemarks" data-name="repairRemarks" @input="handlerInputClick"
          auto-height />
      </view>
    </view>
    <view class="white_container" v-if="info.status == 2 && type === 'edit'" @click="headerChangeStateClick">
      <view style="display: flex; justify-content: space-between">
        <view style="display: flex">
          <view class="white_label">工单状态</view>
          <view class="whit_desc">
            {{ orderState.desc }}
          </view>
        </view>
        <u-icon name="arrow-up" v-if="!orderSelect" />
        <u-icon name="arrow-down" v-if="orderSelect" />
      </view>

      <view class="statePupop" v-if="orderSelect">
        <view class="statePopop_label" v-for="(item, index) in orderStateList" :key="index"
          @click.stop="headerSelectClick(item)">{{ item.desc }}</view>
      </view>
    </view>

    <view class="btn_view">
      <view v-if="info.status == 1 && order_dispatch_permission">
        <view class="btn_view_btn" @click="headerSelectMasterClick">派单</view>
      </view>
      <view v-if="info.status == 1 && work_order_permission && allow_grab_order">
        <view class="btn_view_btn" @click="headerTakeClick">接单</view>
      </view>
    </view>
    <!-- 待派单状态 无派单权限按钮 -->
    <!-- <view class="btn" v-else-if="info.status == 1" @click="headerTakeClick">接单</view> -->
    <!-- 进行中状态编辑维修信息 -->
    <view class="btn" v-if="info.status == 2" @click="headerEditClick">
      {{ type === "edit" ? "确定" : "编辑" }}
    </view>

    <u-popup :show="show" @close="close" round="50rpx" style="height: 50%; overflow: hidden">
      <view class="master_popup">
        <view class="master_popup_title">
          <view></view>
          <view class="master_popup_title_text">请选择维修师傅</view>
          <view class="master_popup_title_btn" @click="headerConfirmClick">确定</view>
        </view>
        <view class="master_popup_main">
          <view class="master_list" v-for="(item, index) in communityMasterList" :key="index">
            <u-line margin="30rpx 0" />
            <view class="master_popup_tabel">
              <view class="master_popup_tabel_left">
                <view class="master_popup_label">
                  <view class="label">师傅名称</view>
                  <view>{{ item.name }}</view>
                </view>
                <view class="master_popup_label">
                  <view class="label">师傅手机号</view>
                  <view>{{ item.mobile }}</view>
                </view>
              </view>
              <radio :value="item.worker_id" @click="headerRadioClick" :data-name="item.worker_id"
                :checked="checked === item.worker_id" />
            </view>
          </view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import {
  request,
  picUrl,
  upload,
  uploadVideo,
  menuButtonInfo,
} from "../../../utils";
import { apiArr } from "../../../api/v2Community";
export default {
  data() {
    return {
      active: "1",
      top: "",
      localHeight: "",
      type: "",
      checked: "",
      orderSelect: false,
      orderStateList: [
        {
          desc: "进行中",
          state: 2,
        },
        {
          desc: "已作废",
          state: 4,
        },
        {
          desc: "已完成",
          state: 3,
        },
      ],
      orderState: {
        desc: '进行中',
        state: 2
      }, // 工单状态
      info: {},
      // 状态枚举类型
      statusType: {
        1: {
          desc: "待指派",
          style: "orderItemTit_state1",
        },
        2: {
          desc: "进行中",
          style: "orderItemTit_state2",
        },
        3: {
          desc: "已完成",
          style: "orderItemTit_state3",
        },
        4: {
          desc: "已作废",
          style: "orderItemTit_state4",
        },
      },
      show: false,
      communityMasterList: [],
      order_dispatch_permission: false,
      work_order_permission: false,
      allow_grab_order: false,

      repairRemarks: '', // 维修备注信息
      imgList: [],
      videoList: {},

    };
  },
  methods: {
    headerBackClick() {
      uni.navigateBack({
        delta: 1,
      });
    },
    // 接单按钮点击
    async headerTakeClick() {
      const res = await request(apiArr.workOrderCrudAccept, 'POST', {
        id: this.info.id
      })
      uni.showToast({
        title: '接单成功',
        icon: 'success',
        mask: true
      })
      setTimeout(() => {
        uni.navigateBack({
          delta: 1
        })
      }, 2000)
    },
    // 派单按钮点击 获取师傅列表并打开弹窗
    async headerSelectMasterClick() {
      const res = await request(apiArr.workMasterLick, "POST", {
        community_id: this.info.community_id,
      });

      this.communityMasterList = res.rows;
      this.show = true;
    },

    // 上传图片
    async afterReadImg(e) {
      const { file } = e;
      console.log(e);
      file.forEach(item => {
        upload(item.url, res => {
          console.log(res.data.path);
          this.imgList.push({
            url: picUrl + res.data.path,
            picUrl: res.data.path,
          })
        })
      })
      uni.hideLoading();
      uni.showToast({
        title: '上传成功',
        icon: 'success'
      });
    },
    deletePic(e) {
      this.imgList.splice(e.index, 1);
    },
    afterReadVideo(e) {
      uploadVideo(e.file.url, res => {
        this.videoList = {
          url: picUrl + res.data.url,
          videos: res.data.url
        }
      })
    },
    deleteVideo() {
      this.videoList = {};
    },
    playFullScreenVideo() {
      this.videoContext = this.videoContext || wx.createVideoContext('myVideo')
      this.videoContext.requestFullScreen() // 请求全屏
    },
    cancels(e) {
      this.videoList = {};
    },

    // 进行中订单 按钮触发方法
    async headerEditClick() {
      if (this.type === "edit") {
        this.type = '';
        const res = await request(apiArr.workOrderCrudUpdate, 'POST', {
          id: this.info.id,
          status: this.orderState.state, // 工单状态
          repair_description: this.repairRemarks, // 维修描述
          repair_images: this.imgList.length !== 0 ? this.imgList.map(item => item.picUrl).join(',') : '', // 维修图片
          repair_videos: this.videoList.videos || '', // 维修视频
          repair_remarks: '', // 维修备注
          repair_time: '', // 维修时间
        })
        uni.showToast({
          title: '修改工单状态完成',
          icon: 'none'
        });
        setTimeout(() => {
          uni.navigateBack({
            delta: 1
          })
        }, 2000)

      } else {
        this.type = "edit";
      }
    },
    // input 输入公共方法
    handlerInputClick(e) {
      const { name } = e.currentTarget.dataset;
      this[name] = e.detail.value
    },

    // 修改工单状态
    headerChangeStateClick() {
      this.orderSelect = true;
    },

    // 工单状态选择时间
    headerSelectClick(item) {
      this.orderState = item;
      this.orderSelect = false;
    },
    // 派单确定按钮
    async headerConfirmClick() {
      if (!this.checked) {
        uni.showToast({
          title: '请选择维修师傅',
          icon: 'none'
        })
        return;
      }
      console.log('this.chec', this.checked);
      const res = await request(apiArr.workOrderCrudDispatch, 'POST', {
        worker_id: this.checked,
        id: this.info.id,
      })
      uni.showToast({
        title: '派单成功',
        icon: 'success',
        mask: true
      })
      setTimeout(() => {
        uni.navigateBack({
          delta: 1
        })
      }, 2000)
    },

    // 打开图片预览
    handlerPreviewImageClick(item) {
      uni.previewImage({
        urls: this.info.imagesList,
        current: item,
      });
    },
    headerRepairImagesClick(item) {
      uni.previewImage({
        urls: this.info.repairImagesList,
        current: item,
      });
    },

    // 师傅选择事件
    headerRadioClick(e) {
      console.log('e', e);
      const { name } = e.currentTarget.dataset;
      this.checked = name;
    },
    close() {
      this.show = false;
    },
    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}`) : [], // 上报视频
        repairImagesList: res.repair_images !== "" ? res.repair_images.split(",").map((url) => `${picUrl}${url}`) : [], // 上报图片
        repairVideosList: res.repair_videos !== "" ? res.repair_videos.split(",").map((url) => `${picUrl}${url}`) : [], // 上报图片

      };
      this.info = newRes;
    },
  },

  onLoad(options) {
    console.log("1111", options);
    const order_dispatch_permission = uni.getStorageSync('order_dispatch_permission');
    this.order_dispatch_permission = order_dispatch_permission;
    const work_order_permission = uni.getStorageSync('work_order_permission');
    this.work_order_permission = work_order_permission;
    const allow_grab_order = uni.getStorageSync('allow_grab_order');
    this.allow_grab_order = allow_grab_order;

    const meun = menuButtonInfo();
    this.top = meun.top;
    this.localHeight = meun.height;
    this.init(options.id);
  },

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

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