<template>
  <div class="container">
    <Header title="作业列表" />
    <div class="main">
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list
          v-model="isLoading"
          :finished="finished"
          :finished-text="list.length > 0 ? '没有更多了' : ''"
          @load="onLoad"
        >
          <van-swipe-cell v-for="(item, index) in list" :key="index">
            <div class="l-list" @click="handleDetails(item.id)">
              <div class="l-list-cell-bh">
                <h4 class="l-list-cell-bh-title">
                  {{ item.workTicketContent }}
                </h4>
                <div class="l-list-cell-status">
                  <van-tag
                    type="primary"
                    size="large"
                    :color="colorList[item.workTicketStatus]"
                    >{{ ticketStaus[item.workTicketStatus] }}</van-tag
                  >
                  <van-icon name="arrow" />
                </div>
              </div>
              <div class="l-list-cell">
                <span>作业类型：</span>{{ workType(type, item.workTicketType) }}
              </div>
              <div class="l-list-cell">
                <span>作业申请人：</span
                >{{ $findItemById(getDeptUserTree, item.applicantUserId) }}
              </div>
              <div class="l-list-cell">
                <span>作业申请时间：</span
                >{{ item.applicantTime }}
              </div>
              <!-- <div class="l-list-cell"><span>作业编号：</span>{{ item.workTicketNo }}</div> -->
              <div class="l-list-cell">
                <span>作业开始时间：</span>{{ item.workPlanStartTime }}
              </div>
              <div class="l-list-cell">
                <span>作业结束时间：</span>{{ item.workPlanEndTime }}
              </div>
              <!-- <div class="l-list-cell"><span>作业内容：</span><div style="flex: 1; text-align: left;">
          {{ item.workTicketContent }}
        </div></div> -->
            </div>
            <template #right v-if="item.workTicketStatus === '10'">
              <button class="editBtn" @click="editJob(item.id)">编辑</button>
            </template>
          </van-swipe-cell>
        </van-list>
      </van-pull-refresh>
      <div class="van-loading-list" v-if="list.length === 0 && saveLading">
        <van-loading size="50px" vertical>加载中...</van-loading>
      </div>
      <van-empty
        v-else-if="list.length === 0 && !saveLading && !refreshing"
        description="暂无预约"
      />
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { getList } from '@/api/jobReservation.js'
import debounce from 'lodash/debounce'
export default {
  name: 'LicenseList',
  data () {
    return {
      isLoading: false,
      finished: false,
      saveLading: true,
      refreshing: false,
      pageNum: 1,
      pageSize: 10,
      list: [],
      ticketStaus: {
        10: '待交底',
        20: '待接受',
        30: '审核中',
        40: '作业中',
        50: '已验收'
      },
      colorList: {
        10: '#1c4990',
        20: '#1c4990',
        30: '#1c4990',
        40: '#07c160',
        50: '#07c160'
      },
      type: [
        {
          code: '10',
          name: '动火作业',
          icon: require('@/assets/images/icon11.png')
        },
        {
          code: '20',
          name: '受限作业',
          icon: require('@/assets/images/icon11.png')
        },
        {
          code: '30',
          name: '盲板抽堵',
          icon: require('@/assets/images/icon11.png')
        },
        {
          code: '40',
          name: '高处作业',
          icon: require('@/assets/images/icon11.png')
        },
        {
          code: '50',
          name: '吊装作业',
          icon: require('@/assets/images/icon11.png')
        },
        {
          code: '60',
          name: '临时用电',
          icon: require('@/assets/images/icon11.png')
        },
        {
          code: '70',
          name: '动土作业',
          icon: require('@/assets/images/icon11.png')
        },
        {
          code: '80',
          name: '断路作业',
          icon: require('@/assets/images/icon11.png')
        }
      ]
    }
  },
  computed: {
    ...mapState('dangerList', [
      'dangerSrcList',
      'dangerTypeList',
      'getAreaTree',
      'getDeptTree',
      'getDeptUserTree',
      'contractorList',
      'contractorUserList',
      'workticketData'
    ]),
    workType () {
      return (arr, type) => {
        const obj = arr.reduce((t, item) => {
          return {
            ...t,
            [item.code]: item.name
          }
        }, {})
        return obj[type]
      }
    }
  },
  mounted () {
    this.getList({
      pageNum: this.pageNum,
      pageSize: this.pageSize
    })
  },

  methods: {
    onLoad: debounce(
      function () {
        this.isLoading = false
        if (this.pageNum <= 1) {
          return
        }
        const { pageSize, pageNum } = this
        const params = {
          pageSize,
          pageNum
        }
        this.getList(params)
      },
      300,
      {
        trailing: false,
        leading: true
      }
    ),
    onRefresh () {
      // 清空列表数据
      this.finished = false
      this.isLoading = true
      if (this.refreshing) {
        this.list = []
        this.refreshing = false
      }
      this.pageNum = 1
      this.getList({
        pageNum: this.pageNum,
        pageSize: this.pageSize
      })
    },
    getList (params) {
      getList(params)
        .then(({ data }) => {
          this.isLoading = false
          if (data.code === 200) {
            const totalPages = Math.ceil(data.total / this.pageSize)
            if (data.total === 0) {
              this.finished = true
              return false
            }
            if (params.pageNum > 1) {
              this.list.push(...data.rows)
            } else {
              this.list = data.rows
            }
            this.pageNum += 1
            if (totalPages === params.pageNum) {
              this.finished = true
            } else {
              this.finished = false
            }
          } else {
            this.$notify({
              type: 'danger',
              message: data.msg,
              duration: 2000
            })
          }
        })
        .catch(e => {
          this.$notify({
            type: 'danger',
            message: '网络异常，请稍后重试',
            duration: 2000
          })
        })
        .finally(() => {
          setTimeout(() => {
            this.saveLading = false
          }, 100)
        })
    },
    editJob (id) {
      const query = {
        name: this.workType(this.type, this.workticketData.workTicketType),
        code: this.workticketData.workTicketType,
        id
      }
      this.$store.dispatch('dangerList/getWorkticketData', id)
      setTimeout(() => {
        this.$router.push({
          path: '/jobReservationFrom',
          query
        })
      }, 100)
    },
    handleDetails (id) {
      this.$store.dispatch('dangerList/getWorkticketData', id)
      setTimeout(() => {
        this.$router.push({ path: '/licenseDetails', query: { id } })
      }, 100)
    }
  }
}
</script>

<style lang="less" scoped>
@r: 16rem / 375;
.l-list {
  border: 1px solid #ccc;
  box-shadow: 0 1px 2px 1px #ccc;
  border-radius: 5px;
  margin-bottom: 15px;
  padding: 8px;
  font-size: 14px;
  .l-list-cell {
    display: flex;
    min-height: 30px;
    line-height: 30px;
    color: black;
    span {
      color: #969799;
    }
  }
  .l-list-cell-bh {
    display: flex;
    height: 30px;
    justify-content: space-between;
    .l-list-cell-bh-title {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      text-align: left;
      flex: 1;
    }
    span {
      color: #fff;
    }
  }
}
.van-loading-list {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -25 * @r;
  margin-left: -25 * @r;
}
</style>
