<template>
  <modal v-model="modal" :footer-hide="true" width="900px">
    <div class="title" slot="header" style="display: flex;justify-content: space-between;align-items: center">
      <span>标签详情--{{ formData.materialName }}</span>
      <span style="font-size: 14px;font-weight: normal;color: #555555;margin-right: 20px;">{{ errorTagCount || 0 }}个异常标签</span>
    </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>
  </modal>
</template>

<script>

import MyTable from '_c/my-table/my-table'
import { GetSingleMaterialCTList } from '@/api/stock'
export default {
  name: 'user-form',
  components: {
    MyTable
  },
  data () {
    return {
      modal: false,
      data: [],
      errorTagCount: 0,
      columns: [
        {
          title: '序号',
          type: 'index',
          width: 60,
          align: 'center'
        },
        {
          title: '仓库',
          key: 'stockHouseName',
          minWidth: 150
        },
        {
          title: '物料编码',
          key: 'materialCode',
          minWidth: 150
        },
        {
          title: '物料名称',
          key: 'materialName',
          minWidth: 150
        },
        {
          title: '用途',
          key: 'materialUse',
          minWidth: 150
        },
        {
          title: '标签值',
          key: 'rfidCode',
          minWidth: 150,
          render: (h, params) => {
            return h('span', {
              style: {
                color: params.row.checkTagState === '不在库存' ? 'red' : params.row.checkTagState === '正常' ? 'black' : '#d7d7d7'
              }
            }, params.row.rfidCode)
          }
        },
        {
          title: '绑定数量',
          key: 'qty',
          minWidth: 150
        },
        {
          title: '异常类型',
          key: 'checkTagState',
          minWidth: 150
        },
        {
          title: '处置类型',
          key: 'tagDealType',
          minWidth: 150,
          render: (h, params) => {
            return h('span', params.row.tagDealType === '标签损坏' ? `${params.row.tagDealType}(${params.row.newRfidCode})` : params.row.tagDealType)
          }
        },
        {
          title: '盈亏金额',
          key: 'amount',
          minWidth: 150
        },
        {
          title: '盘点时间',
          key: 'checkTime',
          minWidth: 150
        },
        {
          title: '盘点人',
          key: 'checkUser',
          minWidth: 150
        }
      ],
      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 () {
      GetSingleMaterialCTList({
        ...this.params,
        detailId: this.formData.detialId,
        monthStatListType: 0
      }).then(res => {
        if (res.code === 0) {
          this.data = res.result.singleMaterialCTList.list
          this.errorTagCount = res.result.errorTagCount
          this.params.total = res.result.singleMaterialCTList.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>
