<template>
  <view>
    <custom-nav-bar position="fixed" color="black" :left-text="options.name" left-arrow />

    <view class="mediate-select-search">
      <view class="flex flex-between search-input">
        <input class="input" :value="searchValue" type="text" confirm-type="search"
          placeholder-class="placeholder-style" placeholder="请输入搜索调解员名称" @input="onSearch" @confirm="onChange" />
        <view class="search-icon flex flex-center">
          <image class="search-icon-img" src="/static/images/search.png"></image>
        </view>
      </view>
    </view>

    <view class="mediate-select-section">
      <view class="title flex">
        <text class="title-name">{{ options.name }}</text>
      </view>
      <view class="mediate-select-list">
        <view class="mediate-select-item flex" :data-id="item.id" @tap="jumpDetail"
          v-for="(item, index) in mediatorPageList" :key="index">
          <view class="select-left">
            <image :src="item.photo" class="mediate-head"></image>
          </view>

          <view class="select-right flex1 flex flex-col flex-between">
            <view class="select-title flex flex-v-center flex-between">
              <text class="name">{{ item.name }}</text>
              <van-rate readonly icon="/src/images/rate-icon.png" void-icon="/src/images/void-icon2.png" :value="item.star" />
            </view>
            <view class="select-msg text-line-3">
              {{ item.resume }}
            </view>
            <view class="select-tag">调查案件数：{{ item.caseCount }}</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  // const app = getApp();
  // const {
  //   peopleApi
  // } = app.globalData.api;
  import * as peopleApi from '@/api/peopleApi';
  import * as publicApi from '@/api/publicApi';
  import * as enterprise from '@/api/enterprise';
  export default {
    components: {},
    data() {
      return {
        searchValue: '',
        options: {
          name: ''
        },
        mediatorPageList: [],
        pageNo: 1,
        pageSize: 10,
        total: 0
      };
    },
    onLoad(options) {
      this.options = options
      this.mediatorPageApi();
    },
    onReachBottom() {
      if (this.mediatorPageList.length === this.total) {
        return;
      }
      this.mediatorPageApi(false);
    },
    methods: {
      /**
       * 接口
       */
      async mediatorPageApi(reset = true) {
        const params = this.generalQueryData(reset);
        let _goodsList = []
        params.attachType = this.options.type;
        const res = await peopleApi.mediatorPageApi(params);
        if (res.data) {
          const {
            list = [], total = 0
          } = res.data;
          if (reset) {
            _goodsList = list;
          } else {
            _goodsList = this.mediatorPageList.concat(list);
          }
          this.pageNo = params.pageNo || 1;
          this.total = total;
          this.mediatorPageList = _goodsList
        }
      },

      /**
       * 页面事件
       */
      onChange(e) {
        this.searchValue = e.detail.value
        this.mediatorPageApi();
      },

      onSearch(e) {
        if (e.detail.value !== '') {
          return;
        }
        this.searchValue = e.detail.value
        this.mediatorPageApi();
      },

      // 分页参数处理事件
      generalQueryData(reset = false) {
        const {
          pageNo,
          pageSize,
          searchValue,
          options
        } = this;
        const params = {
          pageNo: 1,
          pageSize: 10
        };
        if (searchValue) {
          params.name = searchValue;
        }
        if (options.categoryId) {
          params.categoryId = options.categoryId;
        }
        if (reset) {
          return params;
        }
        return {
          ...params,
          pageNo: pageNo + 1,
          pageSize
        };
      },

      jumpDetail(event) {
        const id = event.currentTarget.dataset.id;
        uni.navigateTo({
          url: `/packages/people/pages/mediate-detail/mediate-detail?id=${id}`
        });
      }
    }
  };
</script>
<style lang="less">
  page {
    --rate-icon-size: 26rpx; // 评分大小
    --rate-icon-full-color: var(--item-dominant-color); // 评分选中颜色
    --rate-icon-gutter: 4rpx; // 评分图标之前的距离
  }

  .mediate-select-search {
    padding: 10rpx 30rpx 0;

    .search-input {
      height: 64rpx;
      line-height: 64rpx;
      background: #f9f9f9;
      border-radius: 35rpx;
      border: 1px solid #e1e1e1;
      text-align: center;
      position: relative;
      box-sizing: content-box;

      .input {
        width: 100%;
        height: 64rpx;
        line-height: 64rpx;
        text-decoration: 20rpx;
        padding: 0 64rpx;
        font-size: 26rpx;
        font-weight: 400;
      }

      .placeholder-style {
        text-align: center;
        color: #c1c1c1;
      }
    }

    .search-icon {
      width: 64rpx;
      height: 64rpx;
      background: #ffffff;
      border-radius: 35rpx;
      border: 1px solid #e1e1e1;
      position: absolute;
      right: -1px;
      top: 0;
      z-index: 1;

      .search-icon-img {
        width: 32rpx;
        height: 32rpx;
      }
    }

    .life-tabs {
      margin-top: 40rpx;

      .van-tabs__wrap {
        border-bottom: 1px solid #c1c1c1;
      }

      .life-tabs-flex {
        margin-top: 50rpx;

        .life-tabs-icon {
          width: 70rpx;
          height: 70rpx;
          background: linear-gradient(180deg, #ff5f7a 0%, #fe3b53 100%);
          box-shadow: 0px 6px 4px 0px rgba(254, 80, 107, 0.1);
          border-radius: 500rpx;

          .icon {
            width: 44rpx;
            height: 44rpx;
          }
        }

        .life-iocn-title {
          margin-left: 32rpx;
          font-size: 34rpx;
          font-weight: 400;
          color: #333333;
          line-height: 34rpx;
        }
      }
    }
  }

  .mediate-select-section {
    padding: 0 30rpx;

    .title {
      margin-top: 55rpx;
      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;
        }
      }
    }
  }

  .mediate-select-list {
    margin-top: 16rpx;
    width: 100%;

    .mediate-select-item {
      padding: 24rpx 0;
      border-bottom: 1px solid #e1e1e1;

      .select-left {
        width: 218rpx;
        height: 218rpx;

        .mediate-head {
          width: 100%;
          height: 100%;
          border-radius: 8rpx;
        }
      }

      .select-right {
        margin-left: 20rpx;

        .select-title {
          .name {
            font-size: 32rpx;
            font-weight: 400;
            color: var(--item-dominant-color);
            line-height: 32rpx;
          }
        }

        .select-msg {
          align-self: flex-start;
          height: 100%;
          font-size: 26rpx;
          font-weight: 400;
          color: #333333;
          line-height: 40rpx;
          margin-top: 24rpx;
        }

        .select-tag {
          margin-top: 9rpx;
          width: 200rpx;
          height: 32rpx;
          background: linear-gradient(270deg, #f38a36 0%, #ff9d4f 100%);
          border-radius: 4rpx;
          font-size: 20rpx;
          font-weight: 400;
          color: #ffffff;
          line-height: 32rpx;
          padding-left: 15rpx;
        }
      }
    }
  }
</style>