<template>
  <view class="container">
    <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.url"
                           :taskId="item.id" />
            <view style="margin:20rpx;">
              <tui-button v-if="item.the_problem_is_deal==2"
                          height="60rpx">已提交整改</tui-button>
              <tui-button v-else-if="item.the_problem_is_deal==1"
                          height="60rpx"
                          @click="setRectification(item.id)">立即整改</tui-button>
            </view>
          </view>
        </template>
      </tui-card>
    </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-form ref="form"
                    :show-message="false">
            <tui-card :title="{text:'整改描述'}"
                      style="margin-top:0;margin-bottom:20rpx;">
              <template v-slot:body>
                <tui-textarea placeholder="请输入整改描述"
                              v-model="form.deal_problem_description"></tui-textarea>
              </template>
            </tui-card>
            <tui-card :title="{text:'整改视频'}"
                      style="margin-top:0;">
              <template v-slot:body>
                <view style="padding:20rpx;display:flex;flex-wrap:wrap;">
                  <view class="unloadlist"
                        v-for="(m,n) in voideList"
                        :key="n">
                    <video :src="m"
                           controls></video>
                  </view>
                  <view class="unloadbut"
                        @click="upload">
                    <tui-icon name="plus"
                              :size="38"></tui-icon>
                  </view>
                </view>
              </template>
            </tui-card>
            <view class="tui-btn__box">
              <tui-button width="400rpx"
                          height="84rpx"
                          bold
                          @click="submit">提交</tui-button>
            </view>
          </tui-form>
        </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 { mapState } from "vuex";
export default {
  components: {
    infiniteScroll,
    CardMainValue,
  },
  data() {
    return {
      hasMore: true,
      pageSize: 20,
      searchForm: {
        userId: null,
      },
      dataList: [],
      levelArr: ["", "轻度", "中度", "重度"],
      personShow: false,
      tid: "",
      form: {
        deal_problem_description: "",
        deal_problem_video: "",
      },
      serverUrl:
        "https://anquansys.sxlq.com:37100/uploadoss/upload?token=1add2b5e9c36ce7d75a1ff3d11b9ffb8",
      voideList: [],
    };
  },
  computed: {
    ...mapState(["userinfo"]),
  },
  onLoad() {
    this.searchForm.userId = this.userinfo.userId;
    this.getDatelist();
  },
  methods: {
    async getDatelist() {
      const { data } = await this.$request.get(
        "risk/DistributionProblem/myProblem",
        {
          params: {
            ...this.searchForm,
            page: Math.ceil(this.dataList.length / this.pageSize) + 1,
            limit: this.pageSize,
          },
        }
      );
      this.dataList = [...this.dataList, ...data.data];
      if (data.data.length < this.pageSize) {
        this.hasMore = false;
      }
    },
    setRectification(id) {
      this.tid = id;
      this.personShow = true;
      this.form = {
        deal_problem_description: "",
        deal_problem_video: "",
      };
    },
    hiddenPerson() {
      this.personShow = false;
    },
    upload() {
      if (!!this.form?.deal_problem_video?.url) {
        uni.showToast({
          title: "只支持上传一个视频,再次上传会替换原视频!",
          icon: "none",
          duration: 2000,
        });
      }
      uni.chooseVideo({
        sourceType: ["camera", "album"],
        success: (res) => {
          const tempFilePath = res.tempFilePath;
          const voideName = res.name;
          uni.showLoading({
            title: "上传中...",
          });
          uni.uploadFile({
            url: this.serverUrl,
            filePath: tempFilePath,
            name: "file",
            fileType: "video",
            success: (resFile) => {
              console.log("文件上传成功", resFile);
              this.voideList = [JSON.parse(resFile.data).data.url];
              this.form.deal_problem_video = {
                url: this.voideList[0],
                name: voideName,
              };
              uni.hideLoading();
              uni.showToast({
                title: "上传成功",
                icon: "success",
                duration: 2000,
              });
            },
            fail: (res) => {
              uni.hideLoading();
              uni.showToast({
                title: "上传失败",
                icon: "error",
              });
            },
          });
        },
      });
    },
    async submit() {
      let data = {
        tid: this.tid,
        ...this.form,
      };
      let res = await this.$request.post(
        "risk/DistributionProblem/dealProblem",
        {
          body: data,
        }
      );
      if (res.code == 0) {
        uni.showToast({
          title: res.msg,
        });
        this.dataList = [];
        this.getDatelist();
        this.personShow = false;
      } else {
        uni.showToast({
          title: res.msg,
          icon: "error",
        });
      }
    },
  },
  onReachBottom: function () {
    // this.$refs.infiniteScroll.reachBottom();
    if (!this.hasMore) return;
    this.fetchItems();
  },
  onPullDownRefresh() {
    this.dataList = [];
    this.getDatelist();
  },
};
</script>

<style lang="scss" scoped>
.tui-card {
  margin-top: 20px;
}
.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;
}
.tui-title {
  width: 100%;
  font-size: 28rpx;
  color: #888;
  padding: 0rpx;
  box-sizing: border-box;
}
.tui-btn__box {
  width: 100%;
  padding: 60rpx 0;
  display: flex;
  justify-content: center;
}
.tui-text {
  font-size: 30rpx;
  padding-left: 12rpx;
}
.unloadbut {
  width: 180rpx;
  height: 180rpx;
  background: #f7f7f7;
  display: flex;
  justify-content: center;
  align-items: center;
}
.unloadlist {
  width: 180rpx;
  height: 180rpx;
  margin-right: 10rpx;
}
.unloadlist video {
  width: 180rpx;
  height: 180rpx;
}
</style>
