<template>
  <view>
    <custom-nav-bar position="fixed" color="black" left-text="接单详情" left-arrow />

    <view class="thenMesses">
      <view class="thenMesses-bg bg-violet">
        <view class="mb-2 thenMesses-title hide">{{ messsDetail.title }}</view>
        <view class="absolute1 mb-2">
          <block v-for="(t, index) in seekHelptype"
          :key="index">
          <text v-if="messsDetail.type + '' === t.value" >{{ t.label }}</text>
        </block>
        </view>

        <view class="flex flex-v-center flex-between thenMesses-image">
          <view class="head">
            <image class="head-img" :src="messsDetail.avatar"></image>
          </view>
          <view class="thenMesses-image-flex">
            <view class="hide thenMesses-title">{{ messsDetail.name }}</view>
            <text class="hide thenMesses-block">{{ messsDetail.orgName }}</text>
          </view>
        </view>
        <view :class="
                        'thenMesses-hint ' +
                        (messsDetail.status === 1
                            ? 'hint-orange'
                            : messsDetail.status === 2
                            ? 'hint-orange'
                            : messsDetail.status === 3
                            ? 'hint-green'
                            : messsDetail.status === 4
                            ? 'hint-purple'
                            : messsDetail.status === 5
                            ? 'hint-green'
                            : 'hint-orange')
                    ">
          {{
                        messsDetail.status === 1
                            ? '待认领'
                            : messsDetail.status === 2
                            ? '待接单'
                            : messsDetail.status === 3
                            ? '待评价'
                            : messsDetail.status === 4
                            ? '已完结'
                            : messsDetail.status === 5
                            ? '已接单'
                            : '暂无'
                    }}
        </view>
      </view>
      <!-- 内容 -->
      <view class="thenMesses-content thenMesses-title">
        <rich-text class="rich-text" space="emsp" :nodes="messsDetail.content"></rich-text>
      </view>
      <view class="thenMesses-content-image">
        <block v-for="(item, index) in messsDetail.images" :key="index">
          <image class="content-image-item" @tap="previewImage" :data-src="item" :src="item"></image>
        </block>
      </view>
      <view class="thenMesses-block pd-24">
        <van-icon name="location" color="#999999" />
        {{ messsDetail.address }}
        <view class="createTime" v-if="messsDetail.createTime">
          <text>{{ getDateTime(messsDetail.createTime) }}</text>
        </view>
      </view>
      <text class="slot"></text>
    </view>

    <view class="inquiry" v-if="messsDetail.replyFlag">
      <view class="title flex">
        <text class="title-name">回复消息</text>
      </view>
      <view class="view">
        <view class="flex flex-v-center">
          <image class="inquiry-icon" v-if="replyInfo" :src="replyInfo.doctorPhoto" />
          <view class="inquiry-label">
            <text class="inquiry-title" v-if="replyInfo">{{ replyInfo.replyUserName }}</text>
            <text class="time">{{ getDateTime(replyInfo.createTime) }}</text>
          </view>
        </view>
        <view class="inquiry-conent">{{ replyInfo.replyContent }}</view>
        <view class="inquiry-image">
          <image class="image" :src="item" v-for="(item, index) in replyInfo.replyImages" :key="index"></image>
        </view>
      </view>
    </view>

    <view class="detail-appraise" v-if="messsDetail.status === 4">
      <view class="title flex">
        <text class="title-name">点单评价</text>
      </view>
      <view class="flex detail-appraise-title flex-v-center">
        <view>满意度：</view>
        <van-rate readonly :value="messsDetail.appraiseStar" :size="12" gutter="2rpx" icon="/src/images/rate-icon.png"
          void-icon="/src/images/void-icon2.png" />
      </view>
      <view class="mt-28">
        <view>{{ messsDetail.appraiseContent }}</view>
        <view class="detail-appraise-image" v-if="messsDetail">
          <image :src="item" v-for="(item, index) in messsDetail.appraiseImage" :key="index"></image>
        </view>
      </view>
    </view>

    <view class="bottomHeight"></view>

    <view class="thenMesses-button flex flex-between" v-if="messsDetail.status !== 4">
      <button class="bth bg-blue" @tap="healedphone" :data-item="messsDetail">给TA打电话</button>
      <button class="bth bg-red" v-if="messsDetail.status === 1 || messsDetail.status === 2" @tap="appraise"
        :data-item="messsDetail">接单</button>
      <!-- <button wx:if="{{messsDetail.status === 3}}" class="bth bg-smoke" data-item="{{messsDetail}}">已接单</button> -->
      <button v-if="messsDetail.status === 3 && !messsDetail.replyFlag" class="bth bg-red" :data-item="messsDetail"
        data-type="reply" @tap="handrReply">回复</button>
      <button v-if="messsDetail.status === 3 && messsDetail.replyFlag" class="bth bg-green" :data-item="messsDetail"
        data-type="updata" @tap="handrReply">修改回复</button>
    </view>

    <van-dialog use-slot :show="show" confirm-button-color="#0090FC" show-cancel-button
      @confirm="healedOrder($event, { item: messsDetail })" :data-item="messsDetail"
      @close="onClose($event, { item: messsDetail })" @getuserinfo="getUserInfo($event, { item: messsDetail })">
      <view class="dialog">
        <view>确认接单吗？</view>
        <view>确认后将无法撤回</view>
      </view>
    </van-dialog>
  </view>
</template>
<!-- <script module="toods" lang="wxs" src="@/wxs/util.wxs"></script> -->
<script>
  // const app = getApp();
  // const { peopleApi, publicApi, myApi } = app.globalData.api;
  import * as myApi from '@/api/myApi';
  import * as peopleApi from '@/api/peopleApi';
  import * as publicApi from '@/api/publicApi';
  import utils from '@/utils/util.map'
  export default {
    components: {},
    data() {
      return {
        messsDetail: {
          title: '',
          type: '',
          avatar: '',
          name: '',
          orgName: '',
          status: 0,
          content: '',
          images: [],
          createTime: '',
          replyFlag: '',
          appraiseStar: '',
          appraiseContent: '',
          appraiseImage: []
        },

        pageId: '',
        seekHelptype: [],
        show: false,
        userInfoCount: null,
        replyInfo: {},

        t: {
          value: '',
          label: ''
        }
      };
    },
    onLoad(val) {
      this.pageId = val.id,
      this.userInfoCount =uni.getStorageSync('userInfoCount')
      this.seekHelpGetApi(val.id);
      this.getTypeApi();
    },
    methods: {
      getDateTime(time){
        return utils.getDateTime(time)
      },
      async seekHelpGetApi(id) {
        let params = {
          id
        };
        const res = await peopleApi.seekHelpGetApi(params);
        if (res.data) {
          if (res.data.replyFlag) {
            this.replyCreateGetApi(res.data.replyId);
          }
          // res.data.createTime = app.globalData.util.timeFormat(res.data.createTime);
          res.data.name = res.data.name.substring(0, 1) + new Array(res.data.name.length).join('*');
          this.messsDetail = res.data
        }
      },

      //  获取群众点单字典
      async getTypeApi() {
        const res = await publicApi.getDictDataApi({
          dictType: 'people_seek_help_type'
        });
        if (res.data) {
          this.seekHelptype = res.data.list
        }
      },

      /**
       * 页面事件
       */
      async orderReceiving(e) {
        // 接单
        let params = JSON.parse(JSON.stringify(this.messsDetail));
        params.status = 2;
        const res = await peopleApi.massesDetailUpdate(params);
        if (res.data) {
          uni.showToast({
            title: '接单成功',
            icon: 'none'
          });
          this.seekHelpGetApi(this.pageId);
        }
      },

      async replyCreateGetApi(id) {
        const res = await myApi.replyCreateGetApi({
          id
        });
        if (res.data) {
          this.replyInfo = res.data
        }
      },

      async toSeekHelp() {
        let params = {
          id: this.messsDetail.id
        };
        const res = await peopleApi.seekHelpApi(params);
        if (res.data) {
          uni.showToast({
            title: '成功',
            icon: 'none'
          });
          this.seekHelpGetApi(this.pageId);
        }
      },

      previewImage: function(e) {
        // 预览图片
        // const current = e.target.dataset.src;
        // const imgList = [];
        // for (let i = 0; i < this.data.TheMassesImageList.length; i++) {
        //   imgList.push(this.data.baseUrl + this.data.TheMassesImageList[i].filePath);
        // }
        // wx.previewImage({
        //   current: current, //当前点击的图片链接
        //   urls: imgList //图片数组
        // })
      },

      //  点击接单
      appraise(event) {
        // const { item } = event.currentTarget.dataset
        if (this.userInfoCount.partyMemberFlag === 0) {
          uni.navigateTo({
            url: '/packages/my/pages/party-member-auth/party-member-auth'
          });
        } else {
          this.show= true
        }
      },

      handrReply(event) {
        console.log(event)
        const {
          item,
          type
        } = event.currentTarget.dataset;
        if (type === 'reply') {
          uni.navigateTo({
            url: `./my-masses-appraise?id=${item.id}&type=${type}&superId=${this.pageId}`
          });
        }
        if (type === 'updata') {
          uni.navigateTo({
            url: `./my-masses-appraise?id=${item.id}&replyId=${item.replyId}&type=${type}&superId=${this.pageId}`
          });
        }
      },

      // 拨打电话
      healedphone(event) {
        const {
          item
        } = event.currentTarget.dataset;
        uni.makePhoneCall({
          phoneNumber: item.mobile + '' //仅为示例，并非真实的电话号码
        });
      },

      async healedOrder(event, _dataset) {
        console.log(event)
        console.log(_dataset)
        /* ---处理dataset begin--- */
        // this.handleDataset(event, _dataset);
        /* ---处理dataset end--- */
        const res = await peopleApi.seekHelpApi({
          id: item.id
        });
        if (res.data) {
          uni.showToast({
            title: '接单成功',
            icon: 'none'
          });
          this.seekHelpGetApi(item.id);
        } else {
          uni.showToast({
            title: res.msg,
            icon: 'none'
          });
        }
      },

      onClose(e, _dataset) {
        /* ---处理dataset begin--- */
        this.handleDataset(e, _dataset);
        /* ---处理dataset end--- */
        this.show= true
      },

      getUserInfo(e, _dataset) {
        /* ---处理dataset begin--- */
        this.handleDataset(e, _dataset);
        /* ---处理dataset end--- */
        console.log('占位：函数 getUserInfo 未声明');
      }
    }
  };
</script>
<style lang="less">
  /* packages/resident/pages/resident-plaza.wxss */
  page {
    background-color: #fff;
    padding: 0;
    margin: 0;
  }

  .m-2 {
    margin: 0 0 20rpx 50rpx;
  }

  .mb-2 {
    margin-bottom: 20rpx;
  }

  .mt-28 {
    margin-top: 28rpx;
  }

  .ml-16 {
    margin-left: 16rpx;
  }

  .resident-tabs {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 40rpx 15rpx;
  }

  .resident-tabs>view {
    width: 47.5%;
    height: auto;
    padding: 11rpx 0rpx 11rpx 11rpx;
    border-radius: 16rpx;
  }

  .pd-24 {
    padding: 24rpx 24rpx;
  }

  .bg-orange {
    background: linear-gradient(180deg, #fef6e9 0%, #ffffff 100%, #ffffff 100%);
  }

  .bg-violet {
    background: linear-gradient(180deg, #f6f3ff 0%, #ffffff 100%);
  }

  .hint-orange {
    background: #f38a36;
  }

  .hint-green {
    background: linear-gradient(270deg, #1aa53c 0%, #1aa53b 100%);
  }

  .hint-purple {
    background: linear-gradient(180deg, #102ebd 0%, #571fc8 100%);
  }

  .thenMesses-flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  /* 文字省略点 */
  .hide {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
  }

  .hide3 {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
  }

  .thenMesses {
    padding: 20rpx 15rpx 0 15rpx;
  }

  .bottomHeight {
    height: 130rpx;
  }

  .thenMesses-bg {
    padding: 26rpx 0 26rpx 25rpx;
    position: relative;
  }

  .thenMesses-hint {
    position: absolute;
    top: 0;
    right: 0;
    width: 130rpx;
    height: 48rpx;
    line-height: 48rpx;
    text-align: center;
    font-size: 24rpx;
    color: #fff;
    font-weight: 400;
    border-radius: 0px 16rpx 0px 40rpx;
  }

  .absolute1 {
    margin-top: 24rpx;
    width: 109rpx;
    height: 32rpx;
    font-size: 20rpx;
    font-weight: 400;
    text-align: center;
    color: #ffffff;
    border-radius: 8rpx;
    line-height: 32rpx;
    background: #f38a36;
  }

  .head-img {
    width: 80rpx;
    height: 80rpx;
    border-radius: 50%;
  }

  .thenMesses-image {
    .head {
      position: relative;
      width: 80rpx;

      .absolute {
        position: absolute;
        top: -10%;
        left: 50%;
        width: 69rpx;
        height: 32rpx;
        line-height: 32rpx;
        border-radius: 300rpx;
        font-size: 22rpx;
        text-align: center;
        color: #fff;
      }

      .violet {
        background-color: #6e63f9;
      }

      .orange {
        background-color: orange;
      }
    }

    .thenMesses-image-flex {
      flex: 1;
      margin-left: 30rpx;
    }

    .thenMesses-title {
      font-size: 32rpx;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #333333;
    }
  }

  .thenMesses-block {
    font-size: 26rpx;
    font-weight: 400;
    color: #999999;
  }

  .thenMesses-content {
    padding: 20rpx 25rpx;
  }

  .thenMesses-content-red {
    font-size: 28rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #e50113;
  }

  .thenMesses-content-image {
    display: flex;
    flex-wrap: wrap;
    padding: 0rpx 24rpx;
    margin-top: 24rpx;

    .content-image-item {
      width: 31%;
      height: 200rpx;
      margin-top: 10rpx;
      margin-right: 10rpx;
      border-radius: 10rpx;
    }
  }

  .slot {
    display: block;
    width: 95%;
    height: 1rpx;
    background-color: #efefef;
    margin: 25rpx auto;
  }

  .thenMesses-info {
    padding: 0 20rpx;
    color: rgba(51, 51, 51, 1);
    font-size: 24rrpx;
    text-align: left;
    font-weight: 400;

    .contact-bold {
      color: var(--item-dominant-color);
      font-size: 32rpx;
      text-align: left;
      font-weight: 500;
    }
  }

  .thenMesses-button {
    padding: 25rpx 36rpx;

    .bth {
      width: 49%;
      height: 80rpx;
      font-size: 32rpx;
      font-weight: 500;
      color: #ffffff;
      line-height: 80rpx;
      text-align: center;
      background: #c1c1c1;
      border-radius: 8rpx;
    }

    .bg-blue {
      background: #007bd7;
    }

    .bg-red {
      background: #fe3b53;
    }

    .bg-smoke {
      color: #333333;
      background: #d9e2ee;
    }

    .bg-green {
      background: #1aa53c;
    }
  }

  .thenMesses-button {
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: #fff;
  }

  .createTime {
    font-size: 26rpx;
    font-weight: 400;
    color: #333333;
    line-height: 26rpx;
    margin-top: 20rpx;
  }

  .masses-order {
    margin-top: 30rpx;
    height: 120rpx;
    background: linear-gradient(270deg, #ffe9e9 0%, #ffcecf 100%);
  }

  .detail-appraise {
    padding: 40rpx 40rpx 0 40rpx;

    .detail-appraise-title {
      margin-top: 40rpx;
      font-size: 32rpx;
      font-weight: 400;
      color: #333333;
    }
  }

  .title {
    font-size: 36rpx;
    font-weight: 500;
    color: #000000;
    line-height: 36rpx;
    padding-left: 6rpx;

    .title-name {
      position: relative;

      &::after {
        content: '';
        position: absolute;
        left: -6rpx;
        bottom: 0;
        z-index: -1;
        // width: 175rpx;
        width: 115%;
        height: 10rpx;
        background: var(--title-guides-color);
        border-radius: 2rpx;
      }
    }
  }

  .detail-appraise-image {
    margin-top: 24rpx;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    padding-bottom: 83rpx;

    image {
      width: 218rpx;
      height: 200rpx;
      border-radius: 8rpx;
      margin-right: 10rpx;
      margin-top: 10rpx;
    }
  }

  .dialog {
    text-align: center;
    padding: 66rpx 86rpx 76rpx 86rpx;
    font-size: 40rpx;
    font-weight: 400;
    line-height: 60rpx;
    color: #333333;
  }

  .inquiry {
    padding: 40rpx 40rpx 0 40rpx;

    .view {
      padding-top: 40rpx;
    }

    .inquiry-icon {
      width: 68rpx;
      height: 68rpx;
      border-radius: 40px;
      background-color: red;
    }

    .inquiry-conent {
      font-size: 30rpx;
      font-weight: 400;
      color: #333333;
      line-height: 50rpx;
      margin-bottom: 22rpx;
    }

    .inquiry-image {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      grid-gap: 10rpx;
      margin-bottom: 24rpx;

      .image {
        width: 218rpx;
        height: 200rpx;
        border-radius: 8rpx;
      }
    }

    .inquiry-label {
      display: flex;
      flex-direction: column;
      margin-left: 22rpx;

      .inquiry-title {
        font-size: 32rpx;
        font-weight: 500;
        color: #fe3b53;
        line-height: 32rpx;
      }

      .time {
        margin-top: 12rpx;
        font-size: 26rpx;
        font-weight: 400;
        color: #999999;
        line-height: 26rpx;
      }
    }
  }
</style>