<template>
  <div class="page">
    <van-sticky class="sticky">
      <div class="header flex">
        <div class="back">
          <backIcon/>
        </div>
        <!-- 工单管理 -->
        {{ $t('work.l1') }}
        <img class="filter" @click="filterShow = true" src="/img/icon/filter.png" alt="极度证券">
      </div>
      <div class="tabbar flex">
        <div class="bar" :class="{active: type == ''}" @click="changeType('')">
          <div>
            <!-- 全部 -->
            {{ $t('inform.l21') }}
          </div>
          <div class="line"></div>
        </div>
        <div class="bar" :class="{active: type == '3'}" @click="changeType('3')">
          <div>
            <!-- 待处理 -->
            {{ $t('ajax.407') }}
          </div>
          <div class="line"></div>
        </div>
        <div class="bar" :class="{active: type == '4'}" @click="changeType('4')">
          <div>
            <!-- 处理中 -->
            {{ $t('ajax.401') }}
          </div>
          <div class="line"></div>
        </div>
        <div class="bar" :class="{active: type == '5'}" @click="changeType('5')">
          <div>
            <!-- 已完成 -->
            {{ $t('ajax.403') }}
          </div>
          <div class="line"></div>
        </div>
      </div>
    </van-sticky>
    <!-- 没有更多了 -->
    <van-list
      v-model="loading"
      :finished="finished"
      :finished-text="list.length == 0 ? '' : $t('common.l5')"
      @load="onLoad"
    >
      <div class="item" v-for="item in list" :key="item.id" @click="$router.push('/work-order-detail/' + item.id)">
        <div class="title">
          {{ item.title }}
        </div>
        <div class="row flex">
          <div class="label">
            <!-- 工单号 -->
            {{ $t('work.l12') }}
          </div>
          <div class="text">{{ item.ordernum }}</div>
        </div>
        <div class="row flex">
          <div class="label">
            <!-- 工单类型 -->
            {{ $t('work.l2') }}
          </div>
          <div class="text">{{ typeName[item.type] }}</div>
        </div>
        <div class="row flex">
          <div class="label">
            <!-- 创建时间 -->
            {{ $t('work.l14') }}
          </div>
          <div class="text">{{ item.insert_datetime }}</div>
        </div>
      </div>
      <NoData :title="$t('common.l45')" v-if="list.length == 0 && !loading"/>
    </van-list>
    <div class="fixed">
      <div class="btn" @click="$router.push('/add-work-order')">
        <!-- 创建工单 -->
        {{ $t('work.l13') }}
      </div>
    </div>
    <van-popup v-model="filterShow" position="right" :style="{ width: '100%' }">
      <filterBox @success="filterBack" @cancel="filterShow = false"/>
    </van-popup>
  </div>
</template>
<script>
import { getWorkOrderList } from "@/api/work";
import filterBox from "./components/filterBox.vue";
export default {
  components: {
    filterBox
  },
  data() {
    return {
      type: '',
      list: [],
      loading: false,
      finished: false,
      filterShow: false,
      filterInfo: {
        type: '',
        title: '',
        ordernum: ''
      },
      pageNum: 0,
      pageSize: 10,
    }
  },
  computed: {
    typeName() {
      return {
        // '1': '账号类',
        // '2': '操作类',
        // '3': '资金类',
        // '4': '其他',
        '1': this.$t('work.l3'),
        '100': this.$t('work.l3'),
        '2': this.$t('work.l4'),
        '3': this.$t('work.l5'),
        '4': this.$t('inform.l22'),
      }
    }
  },
  created () {
    if (this.$route.params.type) {
      this.type = this.$route.params.type
    }
  },
  methods: {
    onLoad() {
      this.pageNum += 1
      getWorkOrderList({
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        status: this.type,
        ...this.filterInfo
      }).then(res => {
        var list = res.list || []
        if (this.pageNum == 1) {
          this.list = list
        } else {
          this.list = this.list.concat(list)
        }
        // 加载状态结束
        this.loading = false;
        // 数据全部加载完成
        if (this.list.length >= res.total) {
          this.finished = true;
        }
      }).catch(() => {
        this.loading = false;
        this.finished = true;
      })
    },
    filterBack(val) {
      this.filterShow = false
      this.filterInfo.type = val.type
      if (val.input.trim()) {
        if (val.radio == 1) {
          this.filterInfo.ordernum = val.input.trim()
          this.filterInfo.title = ''
        }
        if (val.radio == 2) {
          this.filterInfo.title = val.input.trim()
          this.filterInfo.ordernum = ''
        }
      } else {
        this.filterInfo.ordernum = ''
        this.filterInfo.title = ''
      }
      this.pageNum = 0
      this.loading = true;
      this.finished = false
      this.onLoad()
    },
    changeType(type) {
      if(this.type == type) {
        return
      }
      this.type = type
      this.pageNum = 0
      this.$router.replace('/work-order/' + this.type)
      this.finished = false
      this.loading = true;
      this.onLoad()
    }
  }
}
</script>
<style lang="less" scoped>
.page {
  padding-bottom: 88px;
}
.sticky {
  background-color: var(--bg-);
}
.header {
  position: relative;
  justify-content: space-between;
  height: 50px;
  font-size: 18px;
  font-weight: 600;
  background-color: var(--bg-);
  padding-left: 9px;
  padding-right: 17px;
  .filter {
    cursor: pointer;
    width: 22px;
  }
}
.tabbar {
  background-color: var(--bg-);
  padding: 0 32px;
  justify-content: space-between;
  overflow-y: auto;
  column-gap: 12px;
  .bar {
    line-height: 50px;
    position: relative;
    font-size: 16px;
    color: var(--color-1-);
    cursor: pointer;
    white-space: nowrap;
    &.active {
      color: #000;
      font-weight: 600;
      .line {
        display: block;
      }
    }
    .line {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: #000;
      height: 2px;
      display: none;
    }
  }
}
.van-list {
  padding: 16px 18px 10px;
  .item {
    background-color: #F9FBFF;
    border-radius: 6px;
    padding: 19px 17px 17px;
    position: relative;
    cursor: pointer;
    &+.item {
      margin-top: 10px;
    }
  }
  .title {
    font-weight: 600;
    color: var(--color-1-);
    font-size: 15px;
    line-height: 16px;
    margin-bottom: 15px;
  }
  .row {
    font-size: 13px;
    &+.row {
      margin-top: 10px;
    }
    .label {
      color: #999;
      width: 67px;
    }
    .text {
      flex: 1;
      min-width: 10%;
      max-width: 100%;
      color: var(--color-1-);
    }
  }
}
.fixed {
  padding: 10px 18px 34px;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 3;
  background-color: var(--bg-);
  .btn {
    cursor: pointer;
    color: var(--bg-);
    background-color: #000;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    line-height: 44px;
    border-radius: 6px;
  }
}
</style>