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

    <view class="myAppeal">
      <view class="myAppeal-conent">
        <view class="godd-replay-head">
          <text class="myAppeal-head-title" style="color: #333333">{{ List.title }}</text>
        </view>
        <view class="myAppeal-flex">
          <block v-for="(type, index) in typeList" :key="index">
            <view v-if="List.caseType + '' === type.value" class="myAppeal-type"
              :style="'background-color: ' + type.cssClass + ';'">{{ type.label }}</view>
          </block>
          <view>
            <text class="myAppeal-conent-block">{{ getDateTime(List.createTime) }}</text>
            <block v-for="(state, index) in statusList" :key="index">
              <text v-if="List.status + '' === state.value" class="myAppeal-conent-bg myAppeal-conent-block"
                :style="'background-color: ' + state.cssClass + ';'">
                {{ state.label }}
              </text>
            </block>
          </view>
        </view>
        <view class="myAppeal-title mt-21">{{ List.descInfo }}</view>
        <view class="myAppeal-subheading">{{ List.appealContent }}</view>
        <view class="myAppeal-imgage" v-if="List.pics !== null">
          <image mode="aspectFill" @tap="viewImage" data-name="pics" :data-item="item" :src="item"
            v-for="(item, index) in List.pics" :key="index"></image>
        </view>
        <view class="myAppeal-conent-block mt-21 uniline" v-if="List.address !== null">{{ List.address }}</view>
      </view>
    </view>

    <view class="myAppeal-process" v-if="casesProcessPageList.length">
      <view class="title flex">
        <text class="title-name">处理过程</text>
      </view>
      <view class="myAppeal-bg flex" v-for="(item, index) in casesProcessPageList" :key="index">
        <image class="title-img" src="/static/images/ic-success.png"></image>

        <view class="myAppeal-bg-conent flex1">
          <view class="myAppeal-bg-title text-lint-1">{{ item.mediatorName }}</view>
          <view class="myAppeal-bg-list">
            <view class="conent-top">
              <!-- <rich-text nodes=" {{ item.content }}"></rich-text> -->
              <mp-html class="rich-text" :content="item.content" />
            </view>
            <view class="conent-bottom flex flex-v-center flex-between">
              <text>{{ getDateTime(item.createTime) }}</text>
              <view>
                调解员：
                <text style="color: #333333">{{ item.mediatorName }}/{{ item.mediatorMobile }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<!-- <script module="toods" lang="wxs" src="@/wxs/util.wxs"></script> -->
<script>
  // const app = getApp();
  // const { enterprise, publicApi, peopleApi } = app.globalData.api;
  import * as peopleApi from '@/api/peopleApi';
  import * as publicApi from '@/api/publicApi';
  import * as enterprise from '@/api/enterprise';
  import utils from '@/utils/util.map.js';

  export default {
    components: {},
    data() {
      return {
        option: {},

        type: {
          value: '',
          cssClass: '',
          label: ''
        },

        status: 'people_cases_status',
        typeList: [],
        statusList: [],
        List: {},
        casesProcessPageList: [],

        state: {
          value: '',
          cssClass: '',
          label: ''
        }
      };
    },
    onLoad(option) {
      this.option = option
      this.getAppealApi();
      this.getTypeList();
      this.getStateList();
      this.casesProcessPageApi();
    },
    methods: {
      getDateTime(time,index){
        return utils.getDateTime(time,index)
      },
      // 获取类型字典
      async getTypeList() {
        const res = await publicApi.getDictDataApi({
          dictType: this.type
        });
        if (res.data) {
          this.typeList =  res.data.list
        }
      },

      // 获取状态字典
      async getStateList() {
        const res = await publicApi.getDictDataApi({
          dictType: this.status
        });
        if (res.data) {
          this.statusList =  res.data.list
        }
      },

      // 查看图片
      viewImage(event) {
        const url = event.currentTarget.dataset.item;
        const {
          name
        } = event.currentTarget.dataset;
        uni.previewImage({
          current: url,
          // 当前显示图片的http链接
          urls: this.List[name] // 需要预览的图片http链接列表
        });
      },

      // 获得诉求
      async getAppealApi() {
        const res = await peopleApi.getCasesIdApi({
          id: this.option.id
        });
        if (res.data) {
          this.List = res.data || {}
        }
      },

      // 获得案件处理过程分页
      async casesProcessPageApi() {
        const res = await publicApi.casesProcessPageApi({
          pageNo: 1,
          pageSize: 10,
          casesId: this.option.id
        });
        res.data.list.forEach((element) => {
          console.log(element);
          if (element.content) {
            element.content = element.content.replace(/(\<img|\<p|src=null)/gi, function($0, $1) {
              console.log($0, $1);
              return {
                '<img': '<img style="width:25%;height:auto;display:inline-block;margin:10rpx 0rpx 0 10rpx;" ',
                '<iframe': '<video style="width:100%;height:auto;display:block;" ',
                '</iframe': '/>',
                '<p': '<p',
                '<article': '<div',
                '</article': '</div',
                '<header': '<div',
                '</header': '</div'
              } [$1];
            });
          }
        });
        if (res.data) {
          this.casesProcessPageList = res.data.list
        }
      }
    }
  };
</script>
<style lang="less">
  page {
    background-color: #fff;
  }

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

  .mt-20 {
    margin-top: 40rpx;
  }

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

  .myAppeal {
    padding: 0rpx 32rpx 50rpx 40rpx;
  }

  .myAppeal>.myAppeal-title {
    position: relative;
    width: 175rpx;
    height: 10rpx;
    background: #ffe5e9;
    border-radius: 2rpx;
    line-height: 0;
    margin-top: 10px;

    text {
      position: absolute;
      top: -5px;
      text-align: center;
      width: 100%;
      font-size: 36rpx;
      font-weight: 500;
      color: #000000;
    }
  }

  .myAppeal-conent {
    margin-top: 37rpx;

    .godd-replay-head {
      display: flex;

      .myAppeal-head-title {
        font-size: 32rpx;
        font-weight: 500;
        color: #fe3b53;
      }

      image {
        width: 44rpx;
        height: 44rpx;
        border-radius: 50%;
        margin-right: 24rpx;
      }
    }

    .myAppeal-flex {
      margin-top: 32rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .myAppeal-type {
        width: 88rpx;
        height: 38rpx;
        line-height: 38rpx;
        text-align: center;
        color: #fff;
        box-shadow: 2px 2px 2px 0px rgba(12, 181, 207, 0.1);
        border-radius: 8rpx;
      }

      .myAppeal-conent-title {
        font-size: 32rpx;

        font-weight: 400;
        color: #fe3b53;
      }

      .myAppeal-conent-bg {
        padding: 5rpx 20rpx;
        height: 38rpx;
        text-align: center;
        color: #fff;
        line-height: 38rpx;
        box-shadow: 2px 2px 2px 0px rgba(254, 61, 85, 0.1);
        border-radius: 500rpx;
        margin-left: 39rpx;
      }
    }
  }

  .myAppeal-conent-block {
    font-size: 24rpx;
    font-weight: 400;
    color: #999999;
  }

  .myAppeal-title {
    font-size: 32rpx;
    font-weight: 500;
    color: #000000;
  }

  .myAppeal-subheading {
    font-size: 28rpx;
    font-weight: 400;
    color: #333333;
    margin-top: 24rpx;
  }

  .myAppeal-imgage {
    margin-top: 24rpx;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;

    image {
      width: 222rpx;
      height: 222rpx;
      border-radius: 10rpx;
      margin-right: 10rpx;
    }
  }

  .good-reply-title {
    position: relative;
    width: 175rpx;
    height: 10rpx;
    background: #ffced6;
    border-radius: 2rpx;
    line-height: 0;
    margin-top: 60rpx;

    text {
      position: absolute;
      top: -5px;
      text-align: center;
      width: 100%;
      font-size: 36rpx;
      font-weight: 500;
      color: #000000;
    }
  }

  .myAppeal-process {
    padding: 0 20rpx 0 40rpx;

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

      .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;
        }
      }
    }

    .myAppeal-bg {
      width: 100%;
      // height: 232rpx;
      padding-bottom: 18rpx;
      position: relative;

      &:not(:last-child)::before {
        content: '';
        position: absolute;
        top: 0;
        left: 16rpx;
        width: 0;
        height: 100%;
        border-left: 1px #efefef dashed;
        z-index: -1;
      }

      .title-img {
        width: 32rpx;
        height: 32rpx;
      }

      .myAppeal-bg-conent {
        // font-size: 28rpx;
        // background-color: #F7F7F7;
        // font-weight: 400;
        // color: #333333;
        // border-radius: 8rpx;

        .myAppeal-bg-title {
          font-size: 28rpx;
          font-weight: 400;
          color: #fe3b53;
          line-height: 40rpx;
          margin-left: 25rpx;
        }
      }
    }
  }

  .myAppeal-bg-list {
    margin-top: 16rpx;
    background: #f7f7f7;
    border-radius: 8rpx;

    .conent-top {
      font-size: 28rpx;
      font-weight: 400;
      color: #333333;
      line-height: 40rpx;
      padding: 20rpx 20rpx 20rpx 26rpx;
      text-align: justify;
    }

    .conent-bottom {
      font-size: 24rpx;
      font-weight: 400;
      color: #666666;
      line-height: 24rpx;
      width: 100%;
      height: 60rpx;
      background-color: #efefef;
      border-bottom-left-radius: 8rpx;
      border-bottom-right-radius: 8rpx;
      padding: 18rpx 18rpx 18rpx 26rpx;
    }
  }
</style>