<template>
  <view class="container-main">
    <u-sticky :offset-top="10">
      <view class="search-input">
        <view class="input-icon">
          <image
            :src="baseImgUrl + 'liao-ning/icon_search.png'"
            mode=""
          ></image>
        </view>
        <view class="input-middle">
          <u-input
            v-model="queryParams.name"
            type="text"
            placeholder-style="color:#C4CCD8;font-size:30rpx"
            :border="false"
            placeholder="请输入关键字搜索"
          />
        </view>
        <view class="input-btn" @click="searchList()">搜索</view>
      </view>
    </u-sticky>
    <view class="result-list">
      <view
        class="list-item"
        v-for="(item, index) in enterpriseList"
        :key="item.id"
        @click="clickRows(index)"
      >
        <view>
          <view class="enterprise-type">{{ item.name }}</view>
          <view class="enterprise-name">调兵山市食厨烤骨头饭店</view>
        </view>
        <view class="active-rows">
          <u-icon
            name="checkbox-mark"
            color="#3976F1"
            v-show="index == currentIndex"
          ></u-icon>
        </view>
      </view>
    </view>
    <fixedButton title="开始理赔" @click="addForm" />
    <u-toast ref="uToast" />
    <u-loadmore :status="status" :load-text="loadText" />
  </view>
</template>

<script>
import { getCompanyList } from "@/api/shianliaoning/clasims.js";
import fixedButton from "@/components/fixedButton/fixedButton.vue";

export default {
  components: {
    fixedButton,
  },
  data() {
    return {
      baseImgUrl: getApp().globalData.config.iamgeBaseUrl,
      status: "nomore",
      loadText: {
        loading: "努力加载中",
        nomore: "已经到底了~",
      },
      currentIndex: null,
      keyWord: "",
      enterpriseList: [],
      queryParams: {
        name: "",
        pageNum: 1,
        pageSize: 10,
      },
      total: 0,
      loading: false,
      enterpriseParams: {
        id: "",
        name: "",
      },
    };
  },
  onLoad(option) {
    this.getList();
  },
  onReachBottom(e) {
    if (this.queryParams.pageNum < this.total) {
      if (this.loading == true) {
        this.status = "nomore";
        return;
      }
      this.queryParams.pageNum = this.queryParams.pageNum + 1;
      this.getList();
    }
  },
  methods: {
    //申请理赔
    addForm() {
      if (this.enterpriseParams.id == "") {
        this.$refs.uToast.show({
          title: "请先选择保险公司！",
          type: "warning",
        });
        return;
      }
      uni.navigateTo({
        url: `/sub-public/shenqing-lipei/form?enterprise_name=${this.enterpriseParams.name}&enterpriseId=${this.enterpriseParams.id}`,
      });
    },
    //选择理赔企业
    clickRows(index) {
      if (index == this.currentIndex) return;
      this.enterpriseParams = {
        id: this.enterpriseList[index].id,
        name: this.enterpriseList[index].name,
      };
      this.currentIndex = index;
    },
    //关键字搜索
    searchList() {
      // if (!this.queryParams.name) {
      // 	this.$refs.uToast.show({
      // 		title: '请先输入关键字!',
      // 		type: 'warning',
      // 	})
      // 	return
      // }
      this.enterpriseList = [];
      this.getList();
    },
    getList() {
      this.loading = true;
      this.status = "loading";
      getCompanyList(this.queryParams).then((res) => {
        this.enterpriseList = [...this.enterpriseList, ...res.rows];
        this.total = Math.ceil(res.total / this.queryParams.pageSize) || 1;
        this.status = "nomore";
        this.loading = false;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.container-main {
  box-sizing: border-box;
  padding: 20rpx;
  padding-bottom: 128rpx;
}

.search-input {
  display: flex;
  align-items: center;
  background: #fff;
  box-shadow: 0px 0px 20rpx 0px rgba(57, 118, 241, 0.0588);
  border-radius: 16rpx;
  box-sizing: border-box;
  padding: 10rpx 25rpx;

  .input-icon {
    height: 30rpx;
    width: 30rpx;
    margin-right: 20rpx;

    image {
      height: 100%;
      width: 100%;
    }
  }

  .input-middle {
    flex: 1;
  }

  .input-btn {
    font-size: 32rpx;
    font-weight: 500;
    color: #3976f1;
  }
}

.result-list {
  margin-top: 20rpx;
}

.list-item {
  border-radius: 16rpx;
  background-color: #fff;
  box-sizing: border-box;
  padding: 40rpx 30rpx;
  margin-bottom: 20rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .enterprise-type {
    font-size: 30rpx;
    font-family: PingFang SC-中黑体, PingFang SC;
    font-weight: 520;
    color: #34373b;
    margin-bottom: 20rpx;
  }

  .enterprise-name {
    font-size: 30rpx;
    font-weight: 400;
    color: #616367;
  }
}
</style>
