<template>
  <view class="container">
    <Page_select_organization />
    <infiniteScroll ref="infiniteScroll"
                    :fetchItems="getDatelist"
                    :hasMore="hasMore">
      <tui-card v-for="(item,index) in dataList"
                :key="index"
                :image="{url:'/static/images/dian.png'}"
                :title="{text:levelArr[item.find_problem_level]}"
                :tag="{text:item.find_problem_time}">
        <template v-slot:body>
          <view class="tui-default">
            {{item.find_problem_description}}
          </view>
        </template>
        <template v-slot:footer>
          <view>
            <CardMainValue :videoUrl="!!item.find_problem_video?item.find_problem_video.url:null"
                           :taskId="item.id" />
            <view v-if="item.the_problem_is_deal==3"
                  style="margin:20rpx;">
              <tui-button height="60rpx">无需处理
              </tui-button>
            </view>
            <view v-else-if="item.the_problem_is_distribution==2"
                  style="margin:20rpx;">
              <tui-button height="60rpx">已分配(处理责任人：({{item.deal_problem_person_name}})
              </tui-button>
            </view>
            <view v-else
                  style="display:flex;justify-content: space-around;margin: 20rpx;">
              <tui-button height="60rpx"
                          margin="0 20rpx 0 0"
                          @click="isOk(item.id)">无需处理</tui-button>
              <tui-button height="60rpx"
                          @click="setPersonOrgetAllUser(item.id)">分配处理人</tui-button>
            </view>
          </view>
        </template>
      </tui-card>
      <tui-nomore text="没有更多了"
                  v-if="noData"></tui-nomore>
    </infiniteScroll>

    <tui-bottom-popup :zIndex="1002"
                      :maskZIndex="1001"
                      :show="personShow"
                      @close="hiddenPerson">
      <view class="person-tit">责任人列表</view>
      <view class="person-close"
            @click="hiddenPerson"><tui-icon name="close"
                  :size="26"></tui-icon></view>
      <view class="person-list">
        <view class="person-list-box">
          <tui-searchbar radius="40rpx"
                         height="60rpx"
                         placeholder="搜索"
                         @search="usearch"></tui-searchbar>
          <tui-table>
            <tui-tr>
              <tui-td bold
                      v-for="(item,index) in header"
                      :key="index"
                      :span="8">{{item.title}}</tui-td>
            </tui-tr>
            <tui-tr v-for="(item, index) in personList"
                    :key="index">
              <tui-td :span="8"
                      style="font-size:26rpx;">{{item.nickname}}</tui-td>
              <tui-td :span="8"
                      style="font-size:26rpx;">{{item.mobile}}</tui-td>
              <tui-td :span="8">
                <tui-icon name="edit"
                          @click="toSetPerson(item)"
                          color="blue"
                          :size="18"></tui-icon>
                <text class="cherbut"
                      @click="toSetPerson(item)">
                  选择
                </text>
              </tui-td>
            </tui-tr>
          </tui-table>
          <tui-pagination :total="utotal"
                          :current="searchPerson.page"
                          @change="changePage"></tui-pagination>
        </view>
      </view>
    </tui-bottom-popup>
  </view>
</template>

<script>
import infiniteScroll from "@/components/infiniteScroll/infiniteScroll.vue";
import CardMainValue from "@/pages/template/bomb/common/cardMainValue.vue";
import Page_select_organization from "@/components/Select-Organization/Page_select_organization.vue";
export default {
  components: { infiniteScroll, CardMainValue, Page_select_organization },
  data() {
    return {
      hasMore: true,
      pageSize: 20,
      searchForm: {
        id: "",
        limit: 5,
        page: 1,
      },
      dataList: [],
      Tatol: 0,
      levelArr: ["", "轻度", "中度", "重度"],
      noData: false,
      personList: [],
      utotal: 0,
      searchPerson: {
        nickname: "",
        name: "",
        limit: 10,
        page: 1,
      },
      personShow: false,
      header: [
        { title: "姓名", key: "nickname" },
        { title: "电话", key: "mobile" },
        { title: "操作", key: "address" },
      ],
      tid: "",
    };
  },
  computed: {},
  onLoad() {
    this.searchForm.id = this.userId;
    this.getDatelist();
  },
  onPullDownRefresh() {
    this.dataList = [];
    this.getDatelist();
  },
  methods: {
    async getDatelist() {
      const { data } = await this.$request.get(
        "risk/DistributionProblem/index",
        {
          params: {
            ...this.search,
            page: Math.ceil(this.dataList.length / this.pageSize) + 1,
            limit: this.pageSize,
          },
        }
      );
      this.dataList = [...this.dataList, ...data.data];
      console.log("this.", this.dataList);
      if (data.data.length < this.pageSize) {
        this.hasMore = false;
      }
    },
    async isOk(tid) {
      let res = await this.$request.get(
        "risk/DistributionProblem/setProblemDeal",
        {
          params: { tid: tid },
        }
      );
      if (res.code == 0) {
        uni.showToast({
          title: res.msg,
          icon: "success",
        });
        this.dataList = [];
        this.getDatelist();
      }
    },
    async setPersonOrgetAllUser(id) {
      this.tid = id;
      let res = await this.$request.get("risk/DistributionProblem/getAllUser", {
        params: this.searchPerson,
      });
      if (res.code == 0) {
        this.personList = res.data.data;
        this.utotal = res.data.total;
        this.personShow = true;
      }
    },
    async toSetPerson(item) {
      let data = { id: item.id, name: item.nickname, tid: this.tid };
      let res = await this.$request.get(
        "risk/DistributionProblem/setDistributionProblemPerson",
        {
          params: data,
        }
      );
      if (res.code == 0) {
        uni.showToast({
          title: "设置处理人成功",
          icon: "success",
        });
        this.dataList = [];
        this.getDatelist();
        this.personShow = false;
      } else {
        uni.showToast({
          title: res.msg,
          icon: "error",
        });
      }
    },
    hiddenPerson() {
      this.personShow = false;
    },
    changePage(e) {
      this.searchPerson.page = e.current;
      this.setPersonOrgetAllUser(this.tid);
    },
    usearch(e) {
      this.searchPerson.nickname = e.value;
      this.setPersonOrgetAllUser(this.tid);
    },
  },
  onReachBottom: function () {
    // this.$refs.infiniteScroll.reachBottom();
    if (!this.hasMore) return;
    this.getDatelist();
  },
};
</script>

<style lang="scss" scoped>
.container {
  .tui-card {
    margin-top: 20rpx;
  }

  .tui-default {
    padding: 20rpx 30rpx;
  }
  .person-tit {
    text-align: center;
    font-size: 30rpx;
    padding: 20rpx 0;
  }
  .person-close {
    position: absolute;
    right: 10rpx;
    top: 10rpx;
  }
  .person-list-box {
    padding: 10rpx;
  }
  .cherbut {
    color: blue;
    font-size: 26rpx;
  }
}
</style>