<template>
  <modal v-model="modal" :footer-hide="true" width="900px">
    <div class="title" slot="header">
      盘点记录--{{ formData.materialName }}
    </div>
    <div class="content">
      <div class="table">
        <my-table
          :data="data"
          :columns="columns"
          :is-show-filter="false"
          :table-page="params"
          @on-change="changePage"
        >
        </my-table>
      </div>
    </div>
    <tag-form v-model="show" :form-data="currentData"></tag-form>
  </modal>
</template>

<script>

import MyTable from '_c/my-table/my-table'
import TagForm from './tag-form'
import { GetSingleMaterialCRList } from '@/api/stock'
export default {
  name: 'user-form',
  components: {
    MyTable,
    TagForm
  },
  data () {
    return {
      currentData: {},
      show: false,
      modal: false,
      data: [],
      columns: [
        {
          title: '序号',
          type: 'index',
          width: 60,
          align: 'center'
        },
        {
          title: '盘点时间',
          key: 'checkTime',
          minWidth: 150
        },
        {
          title: '库存件数',
          key: 'stockCount',
          minWidth: 150
        },
        {
          title: '扫描件数',
          key: 'scanfCount',
          minWidth: 150,
          render: (h, params) => {
            return h('span', {
              style: {
                color: params.row.scanfCount !== params.row.stockCount ? 'red' : ''
              }
            }, params.row.scanfCount)
          }
        },
        {
          title: '盘点件数',
          key: 'handCount',
          minWidth: 150,
          render: (h, params) => {
            return h('span', {
              style: {
                color: params.row.handCount !== params.row.stockCount ? 'red' : ''
              }
            }, params.row.handCount)
          }
        },
        {
          title: '库存数量',
          key: 'stockQty',
          minWidth: 150
        },
        {
          title: '扫描数量',
          key: 'scanfQty',
          minWidth: 150,
          render: (h, params) => {
            return h('span', {
              style: {
                color: params.row.scanfQty !== params.row.stockQty ? 'red' : ''
              }
            }, params.row.scanfQty)
          }
        },
        {
          title: '盘点人',
          key: 'checkUser',
          minWidth: 150
        },
        {
          title: '详情',
          key: 'detialId',
          minWidth: 150,
          render: (h, params) => {
            let _this = this
            return h('a', {
              on: {
                click () {
                  _this.currentData.detialId = params.row.detialId
                  _this.currentData.materialName = _this.formData.materialName
                  _this.show = true
                }
              }
            }, '查看详情')
          }
        }
      ],
      params: {
        pageIndex: 1,
        pageSize: 20,
        total: 0
      }
    }
  },
  props: {
    formData: {
      type: Object,
      default () {
        return {}
      }
    },
    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.getList()
      }
    }
  },
  methods: {
    changePage (pageIndex) {
      this.params.pageIndex = pageIndex
      this.getList()
    },
    getList () {
      GetSingleMaterialCRList({
        ...this.params,
        materialCode: this.formData.materialCode
      }).then(res => {
        if (res.code === 0) {
          this.data = res.result.list
          this.params.total = res.result.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>
