<template>
  <div class="workonline">
    <!-- 顶部搜索 -->
    <div class="search">
      <u-search class="serach_content" placeholder="请输入标题" :show-action="false" v-model="keyword" @clear="search"
                @search="search"></u-search>
    </div>

    <u-tabs :list="list" :is-scroll="false" :current="currentType" @change="change"></u-tabs>

    <!-- 列表 -->
    <div style="background: #f5f5f5;">
      <div class="title" v-for="(item, index) in eventList" :key="index" @click="detail(item)">
        <u-row>
          <div>
            <!-- 审批名称 -->
            <div class="business">
              <div class="business_info">{{ item.processName }}</div>
            </div>

            <div class="item">
              <!-- 审批进度 -->
              <span class="item_info">审批进度：</span>

              <!-- 申请类型 ing -->
              <span class="business_status" v-if="item.approvalStatus == 0"> {{
                  $dict.getLabel('listApprovalStatusHb', item.approvalStatus)
                }}</span>

              <!-- end -->
              <span class="business_status_blue" v-if="item.approvalStatus == 1"> {{
                  $dict.getLabel('listApprovalStatusHb', item.approvalStatus)
                }}</span>

              <!-- false -->
              <span class="business_status_gray" v-if="item.approvalStatus == 2">
                {{ $dict.getLabel('listApprovalStatusHb', item.approvalStatus) }}
              </span>
            </div>
            <div class="item">
              <span class="item_info">申请类型：</span>
              <span class="approval_time">{{ item.classificationName }}</span>
            </div>
            <div class="item">
              <span class="item_info">申请日期：</span>
              <span class="approval_time">{{ item.createTime }}</span>
            </div>
            <div class="item">
              <span class="item_info">完成日期：</span>
              <span class="approval_time">{{ item.overTime }}</span>
            </div>
          </div>
        </u-row>

        <span class="icon">
          <!-- ing -->
          <img src="./components/ing.png" alt="" v-if="item.approvalStatus == 0"/>
          <!-- end -->
          <img src="./components/end.png" alt="" v-if="item.approvalStatus == 1"/>
          <!-- false -->
          <img src="./components/reject.png" alt="" v-if="item.approvalStatus == 2"/>
        </span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'WorkOnline',
  // 组件
  components: {},
  props: {},
  data() {
    return {
      list: [
        {name: '待我审批', type: 0},
        {name: '我已审批', type: 1},
        {name: '抄送我的', type: 3},
        {name: '超时督办', type: 4},
      ],
      currentType: 0, // 0待我审批 1已审批 2抄送我的 3超时
      keyword: '',
      eventList: '', // 数据列表
      // approvalStatus: '', // 审批状态 0审批中 1已完成 2被驳回
      listType: 0,
      current: 1,
    }
  },
  // 计算
  computed: {},
  // 监听
  watch: {},
  // 实例创建后
  onShow() {
    // 字典
    this.$dict.load('listApprovalStatusHb').then(() => {
      this.dictList = this.$dict.getDict('listApprovalStatusHb')
      this.getList()
    })
  },
  // 实例渲染后
  mounted() {
  },
  // 方法
  methods: {
    getList() {
      this.$http.post(`/app/approv-alapply-info/list?listType=${this.listType}&current=${this.current}&param=${this.keyword}`).then((res) => {
        if (res?.code == 0) {
          this.eventList = res.data.records
        }
      })
    },

    // 跳转页面的id
    detail(item) {
      uni.navigateTo({
        url: `/pages/workonline/detail?id=${item.id}&listType=${this.listType}`,
      })
    },
    change(index) {
      this.currentType = index
      this.listType = this.list[index].type
      this.getListInit()
    },
    getListInit() {
      this.current = 1
      this.getList()
    },
    search(e) {
      this.keyword = e
      this.getList()
    },
  },
}
</script>

<style scoped lang="scss">
.workonline {
  .search {
    .serach_content {
      background-color: #fff;
      height: 104px;
      line-height: 104px;
      box-sizing: border-box;
      padding: 0 32px;
    }
  }

  .title {
    position: relative;
    background: #fff;
    margin: 32px;
    padding: 32px;

    .icon {
      position: absolute;
      top: 0;
      right: 0;
      width: 112px;
      height: 112px;
      // background-color: pink;
      img {
        width: 112px;
        height: 112px;
      }
    }

    .business {
      padding: 0 0 10px 0;

      .business_info {
        // overflow: auto;
        word-wrap: break-word;
        word-break: break-all;
        width: 540px;
        // background-color: pink;
        font-size: 32px;
        font-weight: 500;
        color: #333333;
      }
    }

    .item {
      padding: 10px 0;

      .item_info {
        font-size: 30px;
        font-weight: 400;
        color: #999999;
      }

      .approval_time {
        font-size: 30px;
        font-weight: 400;
        color: #343d65;
      }

      .business_status {
        font-size: 30px;
        font-weight: 400;
        color: #ff9b2b;
      }

      .business_status_blue {
        font-size: 30px;
        font-weight: 400;
        color: #3078e1;
      }

      .business_status_gray {
        font-size: 30px;
        font-weight: 400;
        color: #666666;
      }
    }
  }
}
</style>
