<template>
  <modal v-model="modal" :footer-hide="true" width="900px">
    <div class="title" slot="header">
      {{ `${this.$dayjs(this.month).format('YYYY-MM')} 盘点人数` }}
      <span v-if="checkUserTip">{{ `（${checkUserTip}）` }}</span>
    </div>
    <div class="content">
      <div class="tab-nav sub-nav">
        <div class="date-filter" style="width: auto">
          <div
            class="other-tab"
            v-for="(item, index) in oneTabs" :key="index"
            :class="index === oneIndex ? 'active' : ''"
            @click="oneTabToggle(index, item.id)"
          >
            {{ `${item.label}
              (${
                index ===1 ?
                  data.firstFloorCount || 0 : index === 2 ?
                  data.fourFloorCount || 0 :
                  (data.firstFloorCount + data.fourFloorCount) || 0
              })`
            }}
          </div>
        </div>
        <div class="date-filter" style="width: auto">
          <div
            class="other-tab"
            v-for="(item, index) in threeTbas" :key="index"
            :class="index === threeIndex ? 'active' : ''"
            @click="threeTabToggle(index)"
          >
          <span>
            <span>{{ item.label }}</span>
            <span :style="{ color: index === 2 ? 'red' : '' }">{{ `
              (${
              index ===1 ?
                data.normalCount || 0 : index === 2 ?
                data.errorCount || 0 :
                (data.normalCount + data.errorCount) || 0
            })`
              }}
            </span>
          </span>
          </div>
        </div>
      </div>
      <div class="table">
        <my-table
          :data="data.monthCheckUserList && data.monthCheckUserList.list"
          :columns="columns"
          :is-show-filter="false"
          :table-page="params"
          @on-change="changePage"
        >
        </my-table>
      </div>
    </div>
  </modal>
</template>

<script>

import MyTable from '_c/my-table/my-table'
import { GetMonthCheckUserList } from '@/api/stock'
import { GetStockHouse } from '@/api/baseData'
export default {
  name: 'user-form',
  components: {
    MyTable
  },
  data () {
    return {
      oneIndex: 0,
      threeIndex: 0,
      modal: false,
      data: {},
      oneTabs: [],
      threeTbas: [
        { label: '全部' },
        { label: '结果正常' },
        { label: '结果异常' }
      ],
      columns: [
        {
          title: '序号',
          type: 'index',
          width: 60,
          align: 'center'
        },
        {
          title: '盘点人',
          key: 'operUser',
          minWidth: 150
        },
        {
          title: '盘点时间',
          key: 'checkTime',
          minWidth: 150
        },
        {
          title: '盘点进度',
          key: 'process',
          minWidth: 150,
          render: (h, params) => {
            return h('span', {
              style: {
                color: params.row.process !== '已发起' ? 'red' : ''
              }
            }, params.row.process)
          }
        },
        {
          title: '盘点结果',
          key: 'result',
          minWidth: 150,
          render: (h, params) => {
            return h('span', {
              style: {
                color: params.row.result !== '正常' ? 'red' : ''
              }
            }, params.row.result)
          }
        },
        {
          title: '仓库名称',
          key: 'stockHouseName',
          minWidth: 150
        },
        {
          title: '详情',
          key: 'purchaseBillNo',
          minWidth: 150,
          render: (h, params) => {
            let _this = this
            return h('a', {
              on: {
                click () {
                  _this.$router.push({
                    name: 'inventory_record_detail',
                    query: {
                      id: params.row.recordId
                    }
                  })
                }
              }
            }, '查看详情')
          }
        }
      ],
      params: {
        pageIndex: 1,
        pageSize: 20,
        total: 0
      }
    }
  },
  props: {
    checkUserTip: {
      type: String,
      default: ''
    },
    month: {
      type: String | Date,
      default: ''
    },
    value: {
      type: Boolean,
      default: false,
      require: true
    }
  },
  watch: {
    value: {
      handler (n) {
        this.modal = n
      },
      immediate: true
    },
    modal (n) {
      this.$emit('input', n)
      if (n) {
        this.params.pageIndex = 1
        this.params.stockHourseId = ''
        this.params.checkResult = ''
        this.oneIndex = 0
        this.threeIndex = 0
        this.getStockHouse()
        this.getList()
      }
    }
  },
  methods: {
    changePage (pageIndex) {
      this.params.pageIndex = pageIndex
      this.getList()
    },
    oneTabToggle (index, id) {
      this.oneIndex = index
      this.params.pageIndex = 1
      this.params.stockHourseId = id
      this.getList()
    },
    threeTabToggle (index) {
      this.threeIndex = index
      this.params.pageIndex = 1
      this.params.checkResult = index === 0 ? '' : index === 1 ? 1 : index === 2 ? 0 : ''
      this.getList()
    },
    getStockHouse () {
      GetStockHouse().then(res => {
        if (res.code === 0) {
          this.oneTabs = res.result.map(item => {
            return {
              label: item.name,
              id: item.id
            }
          })
          this.oneTabs.unshift({
            label: '全部',
            id: ''
          })
        }
      })
    },
    getList () {
      GetMonthCheckUserList({
        ...this.params,
        month: this.$dayjs(this.month).format('YYYY-MM')
      }).then(res => {
        if (res.code === 0) {
          this.data = res.result
          this.params.total = res.result.monthCheckUserList.totalCount
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.content {
  height: 500px;
  display: flex;
  flex-direction: column;
  .tab-nav {
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    margin-right: 0;
    .date-filter {
      width: 400px;
      margin-right: 10px;
      overflow: hidden;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-color: #FFFFFF;

      .date-tab {
        flex: 1;
        padding: 5px 2px;
        text-align: center;
        border: 1px solid #e6e6e6;
        border-radius: 2px;
        border-right: none;
        font-weight: bold;
        cursor: pointer;

        &:first-child {
          border-radius: 2px 0 0 2px ;
        }
        &:last-child {
          border-radius: 0 2px 2px 0;
          border-right: 1px solid #e6e6e6;
        }

        &.active {
          background-color: #3F92F9;
          color: #FFFFFF;
        }
      }
    }
    &.sub-nav {
      .other-tab {
        flex: 1;
        height: 100%;
        display: flex;
        flex-direction: column;
        padding: 5px 10px;
        text-align: center;
        border: 1px solid #e6e6e6;
        border-right: none;
        font-weight: bold;
        cursor: pointer;
        white-space: nowrap;
        &:first-child {
          border-radius: 2px 0 0 2px ;
        }
        &:last-child {
          border-radius: 0 2px 2px 0;
          border-right: 1px solid #e6e6e6;
        }
        &.active {
          background-color: #FFFFFF !important;
          color: blue !important;
          border: 1px solid blue;
        }
      }
    }
  }
  .table {
    flex: 1;
  }
}
</style>
