<template>
  <view class="container">
    <UserHeader />
    <view class="btn-box">
      <view class="tui-btn-box">
        <tui-button btn-size="mini"
                    :size="32"
                    shadow
                    width="120rpx"
                    margin="0 0 29rpx 0"
                    height="70rpx"
                    @click="navTo"
                    plain
                    bold>{{numberList['patrol']}}</tui-button>
        <tui-button btn-size="mini"
                    :size="26"
                    shadow
                    width="120rpx"
                    margin="0 0 29rpx 0"
                    height="70rpx"
                    @click="navTo(`/pages/template/everyday/inspectHistory`)">巡查</tui-button>
      </view>
      <view class="tui-btn-box">
        <tui-button btn-size="mini"
                    :size="32"
                    bold
                    plain
                    shadow
                    width="120rpx"
                    margin="0 0 29rpx 0"
                    height="70rpx">{{numberList['allot']}}</tui-button>
        <tui-button btn-size="mini"
                    :size="26"
                    shadow
                    width="120rpx"
                    margin="0 0 29rpx 0"
                    height="70rpx"
                    @click="navTo('/pages/template/auditHistory/auditHistory')">分配</tui-button>
      </view>
      <view class="tui-btn-box">
        <tui-button btn-size="mini"
                    :size="32"
                    shadow
                    width="120rpx"
                    margin="0 0 29rpx 0"
                    plain
                    height="70rpx"
                    bold>{{numberList['abarbeitung']}}</tui-button>
        <tui-button btn-size="mini"
                    :size="26"
                    shadow
                    width="120rpx"
                    margin="0 0 29rpx 0"
                    height="70rpx"
                    @click="navTo('/pages/template/abarbeitungHistory/abarbeitungHistory')">整改</tui-button>
      </view>
      <view class="tui-btn-box">
        <tui-button btn-size="mini"
                    :size="32"
                    bold
                    shadow
                    width="120rpx"
                    margin="0 0 29rpx 0"
                    height="70rpx"
                    plain>{{numberList['check']}}</tui-button>
        <tui-button btn-size="mini"
                    :size="26"
                    shadow
                    width="120rpx"
                    margin="0 0 29rpx 0"
                    height="70rpx"
                    @click="navTo(`/pages/template/abarbeitungCommentList/abarbeitungCommentList?commentProblemHas=${1}`)">验收</tui-button>
      </view>
      <view class="tui-btn-box">
        <tui-button btn-size="mini"
                    :size="32"
                    bold
                    shadow
                    width="120rpx"
                    margin="0 0 29rpx 0"
                    height="70rpx"
                    plain>{{numberList['score']}}</tui-button>
        <tui-button btn-size="mini"
                    :size="26"
                    shadow
                    width="120rpx"
                    margin="0 0 29rpx 0"
                    height="70rpx"
                    @click="navTo(`/pages/template/abarbeitungCommentList/abarbeitungCommentList?commentProblemHas=${2}`)">得分</tui-button>
      </view>

    </view>
    <tui-list-view title="本日任务列表"
                   style="margin: 0 20rpx;">
      <tui-list-cell v-for="(item,index) in taskList"
                     :key="index"
                     @click="navTo(`/pages/template/chooseProjectBranch/chooseProjectBranch?id=${item.management.id}&riskOrgName=${item.management.risk_org_name}`)">
        <view style="display: flex;align-items: center;">
          <tui-icon name="news-fill"
                    :size="48"
                    unit="rpx"
                    color='#f50a0a'></tui-icon>
          <text class="tui-order-tit">{{item.management.risk_org_name}} 危险点:{{item.management.risk_title}}</text>
        </view>
      </tui-list-cell>
    </tui-list-view>
  </view>
</template>
<script>
import { mapActions, mapGetters, mapState } from "vuex";
import UserHeader from "@/pages/template/bomb/common/userHeader.vue";
export default {
  components: {
    UserHeader,
  },
  data() {
    return {
      taskList: [],
      numberList: {
        patrol: 0,
        allot: 0,
        abarbeitung: 0,
        check: 0,
        score: 0,
      },
    };
  },
  computed: {
    // ...mapGetters(["signatureImgSrc", "userinfo"]),
    ...mapState(["userinfo"]),
  },
  onLoad() {
    this.getTodayPatrolTask();
  },
  onShow() {
    this.getTaskNumber();
  },
  methods: {
    //获取今日巡查任务列表
    async getTodayPatrolTask() {
      let res = await this.$request.get(`risk/Allot/getDayTaskPatrol`, {
        params: {
          user_id: this.userinfo.userId,
        },
      });
      this.taskList = res.data;
    },
    //获取代办数量
    async getTaskNumber() {
      let { data } = await this.$request.get(
        `risk/DistributionProblem/getTaskNumber`
      );
      this.numberList.patrol = data.patrol;
      this.numberList.allot = data.allot;
      this.numberList.abarbeitung = data.abarbeitung;
      this.numberList.check = data.check;
      this.numberList.score = data.score;
    },
    navTo(url) {
      uni.navigateTo({
        url,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.header {
  display: flex;
}
.btn-box {
  display: flex;
  justify-content: space-between;
  padding: 0 40rpx;
  margin-top: 40rpx;
  text-align: center;
}
/deep/.tui-list-title {
  text-align: center !important;
  font-weight: 600;
}

.tui-notice--box {
  width: 100%;
  position: relative;
  border: 6px solid #5179ef;
  box-sizing: border-box;
  border-radius: 12rpx;
}

.tui-notice--title {
  width: 100%;
  text-align: center;
  font-size: 32rpx;
  line-height: 48rpx;
  font-weight: bold;
  color: #666;
  padding: 20rpx 0;
}

.tui-notice--content {
  width: 100%;
  padding: 20rpx 30rpx;
  box-sizing: border-box;
  font-size: 30rpx;
}

.tui-right {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  flex-direction: column;
}

.tui-p {
  display: flex;
  align-items: center;
  padding: 12rpx 0;
}

/deep/.tui-primary-outline[data-v-270e3966]::after {
  border: 4px solid #5677fc !important;
}

/deep/.tui-primary-outline {
  color: #5677fc !important;
}
</style>