<template>
  <div class="workorder">
    <div class="workorder__h">
      <p class="workorder__h--p"> {{ $t('workorderlist1') }}</p>
    </div>
    <div class="workorder__table">
      <div class="workorder__table__header">
        <div class="workorder__table__header-status">
          <p>{{ $t('workorderlist2') }}</p>
          <RadioGroup v-model="status" type="button" @on-change="changeStatus">
              <Radio  v-for="item in statusArr" :label="item.value" :value="item.value" :key="item.value">{{item.label}}</Radio>
          </RadioGroup>
        </div>
        <span class="workorder__table__header-line"></span>
        <!-- <Input placeholder="" style="width: 200px;height: 32px!important;" size="small"  /> -->
        <Input :value="keyword" search placeholder="" style="width: auto" @on-change="getKeyWord" @on-search="getLstWorkOrder" />
        </div>
        <Button class="workorder__table__header-reset" icon="ios-refresh" @click="refresh">{{ $t('workorderlist3') }}</Button>
      <Button class="workorder__table__add" type="primary" @click="goAddWorkOrder">{{ $t('workorderlist4') }}</Button>
      </div>
      <div class="workorder__table__list">
        <Table border :loading="disabledTab" :columns="columnsList" :data="dataList" class="ListTab">
            <template slot-scope="{ row }" slot="title" class="operation">
                <router-link :to="{name: 'apiUsbWorkOrderInfo',query: {'id': row.id}}">
                  <p style="color: #486dbe;">{{ row.title }}</p>
                </router-link>
              </template>
            <template slot-scope="{ row }" slot="status" class="operation">
              <p style="color: red;">{{statusArr[row.status].label }}</p>
            </template>
            <template slot-scope="{ row }" slot="serviceName" class="operation">
              <p>{{row.accept_service_name == '' ? '-' : row.accept_service_name }}</p>
            </template>
            <template slot-scope="{ row }" slot="operation" class="operation">
              <router-link :to="{name: 'apiUsbWorkOrderInfo',query: {'id': row.id}}">
                <p style="color: #486DBE;">{{ $t('workorderlist5') }}</p>
              </router-link>
            </template>
        </Table>
      </div>
      <div class="pagination">
        <Page :total="total" show-elevator show-sizer @on-page-size-change='changeSize' @on-change='changePage'/>
      </div>
    </div>
  </div>
</template>

<script>
import { LstWorkOrder } from '@/api/workorder'
import { getToken } from '@/libs/util'
export default {
  name: '',

  data () {
    return {
      token: getToken(),
      keyword: '',
      total: 0,
      status: 0,
      page: 1, // 分页
      perpage: 10,
      disabledTab: false,
      // 状态数组
      statusArr: [
        {
          label: this.$t('workorderlist6'),
          value: 0
        },
        {
          label: this.$t('workorderlist7'),
          value: 1
        },
        {
          label: this.$t('workorderlist71'),
          value: 2
        },
        {
          label: this.$t('workorderlist8'),
          value: 3
        },
        {
          label: this.$t('workorderlist9'),
          value: 4
        }
      ],
      columnsList: [
        // {
        //   title: this.$t('workorderlist10'),
        //   key: 'sort_id',
        //   align: 'center',
        //   width: '80'
        // },
        {
          title: this.$t('workorderlist11'),
          // title: this.$t('orderlist_2'),
          key: 'order_no',
          align: 'center'
        },
        {
          title: this.$t('workorderlist12'),
          // title: this.$t('orderlist_2'),
          key: 'title',
          slot: 'title',
          align: 'center'
        },
        {
          title: this.$t('workorderlist13'),
          // title: this.$t('orderlist_2'),
          key: 'module_name',
          align: 'center'
        },
        {
          title: this.$t('workorderlist14'),
          // title: this.$t('orderlist_2'),
          key: 'add_time',
          align: 'center'
        },
        {
          title: this.$t('workorderlist15'),
          // title: this.$t('orderlist_2'),
          key: 'status',
          align: 'center',
          slot: 'status'
        },
        {
          title: this.$t('workorderlist16'),
          // title: this.$t('orderlist_2'),
          key: 'accept_service_name',
          slot: 'serviceName',
          align: 'center'
        },
        {
          title: this.$t('workorderlist17'),
          // title: this.$t('operation'),
          slot: 'operation',
          width: 260,
          align: 'center'
        }
      ],
      dataList: []
    }
  },
  created () {
    this.getLstWorkOrder()
  },
  methods: {
    getLstWorkOrder () {
      let _this = this
      _this.disabledTab = true
      const data = new FormData()
      data.append('access_token', _this.token)
      data.append('page', _this.page)
      data.append('perpage', _this.perpage)
      if (_this.keyword) {
        data.append('title', _this.keyword)
      }
      if (_this.status !== '') {
        data.append('status', _this.status)
      }
      LstWorkOrder(data).then(res => {
        if (res.ret === 200) {
          _this.dataList = res.data.items
          _this.total = res.data.total
        }
        _this.disabledTab = false
      })
    },
    getKeyWord (val) {
      this.keyword = val.data
    },
    changeSize (size) {
      this.perpage = size
      this.getLstWorkOrder()
    },
    changePage (page) {
      this.page = page
      this.getLstWorkOrder()
    },
    changeStatus (val) {
      this.status = val
      this.getLstWorkOrder()
    },
    refresh () {
      this.status = 0
      this.keyword = ''
      this.getLstWorkOrder()
    },
    goAddWorkOrder () {
      this.$router.push({
        name: 'apiUsbWorkOrderAdd'
      })
    }
  }
}
</script>

<style  lang='scss'>
#app .ivu-input, #app .ivu-input-number-input {
  height: 34px!important;
}
.workorder {
  background-color: #FFFFFF;
  border-radius: 10px;
  &__h{
    height:72px;
    background:rgba(255,255,255,1);
    /* box-shadow:0px 0px 30px 0px rgba(0,0,0,0.05); */
    border-radius:10px;
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    justify-content: space-between;
    padding: 0 30px;
    &--p{
      font-size:16px;
      font-family:PingFangSC-Medium,PingFang SC;
      font-weight:500;
      // margin-left: 30px;
      color:rgba(35,35,42,1);
    }
  }
  &__table {
    display: flex;
    padding: 0 30px;
    align-items: center;
    &__header {
      display: flex;
      align-items: center;
      &-line {
        display: block;
        width: 2px;
        height: 14px;
        background-color: #999;
        margin: 0 20px;
      }
      &-status {
        display: flex;
        align-items: center;
      }
      &-reset {
        margin-left: 50px;
        height: 34px;
      }
    }
    &__add {
      margin: 30px;
      /* padding: 0 30px; */
    }
    &__list {
      padding: 0 30px;
    }
  }
}
.pagination {
  margin-right: 30px;
  padding: 30px 0;
  display: flex;
  justify-content: flex-end;
}
</style>
