<template>
  <modal v-model="modal" :footer-hide="true" width="1100px">
    <div class="title" slot="header" style="display: flex;justify-content: space-between;align-items: center">
      <span>{{ `盘盈亏` }}</span>
      <div>
        <span style="margin-right: 15px">初期：{{ titleData.monthBeginAmount || 0 }}元</span>
        <span style="margin-right: 15px">入库：{{ titleData.inStockAmount || 0 }}元</span>
        <span style="margin-right: 15px">出库：{{ titleData.outStockAmount || 0 }}元</span>
        <span style="margin-right: 15px">盘盈：{{ titleData.moreStockAmount || 0 }}元</span>
        <span style="margin-right: 15px">盘亏：{{ titleData.lessStockAmount || 0 }}元</span>
        <span style="margin-right: 25px;color: red">{{ titleData.monthBeginErrorTip }}</span>
      </div>
    </div>
    <div class="content">
      <div class="tabs">
        <div
          @click="tabClick(index, item.value)"
          :class="tabsIndex === index ? 'active' : ''"
          class="tab-item"
          v-for="(item, index) in tabs"
          :key="index">
          {{ item.text }}
          <span v-if="index !== 0" style="color: red">{{ `（${data.technologyStat && data.technologyStat[item.value] || 0}）` }}</span>
          <span v-else style="color: red">{{ `（${data.technologyTotalCount || 0}）` }}</span>
        </div>
      </div>
      <div class="table-filter">
        <div class="filter-item">
          <Button
            :style="{border: menuIndex === '' ? '1px solid #3F92F9' : ''}"
            style="min-width: 90px;" @click="menuTabClick()">
            全部
            <span style="color: red">{{ `(${data.purposeTotalCount || 0})` }}</span>
          </Button>
        </div>
        <div class="filter-item" v-for="(item, index) in data.purposeStat" :key="index">
          <Button
            :style="{border: menuIndex === index ? '1px solid #3F92F9' : ''}"
            style="min-width: 90px;"
            @click="menuTabClick(index, item)">
            {{ index }}
            <span style="color: red">{{ `(${item})` }}</span>
          </Button>
        </div>
      </div>
<!--      <div class="border"></div>-->
<!--      <div class="table-filter" style="margin-bottom: 5px;">-->
<!--        <RadioGroup v-model="params.tagDealType" @on-change="stateChange">-->
<!--          <Radio label="">全部</Radio>-->
<!--          <Radio :label="23">-->
<!--            补出库-->
<!--            <span style="color: #f11111">（{{ data.tagDealTypeStat && data.tagDealTypeStat['23'] || 0 }}）</span>-->
<!--          </Radio>-->
<!--          <Radio :label="13">-->
<!--            补入库-->
<!--            <span style="color: #f11111">（{{ data.tagDealTypeStat && data.tagDealTypeStat['13'] || 0 }}）</span>-->
<!--          </Radio>-->
<!--          <Radio :label="10">-->
<!--            标签损坏-->
<!--            <span style="color: #f11111">（{{ data.tagDealTypeStat && data.tagDealTypeStat['10'] || 0 }}）</span>-->
<!--          </Radio>-->
<!--          <Radio :label="24">-->
<!--            绑定错误-->
<!--            <span style="color: #f11111">（{{ data.tagDealTypeStat && data.tagDealTypeStat['24'] || 0 }}）</span>-->
<!--          </Radio>-->
<!--          <Radio :label="11">-->
<!--            盘盈-->
<!--            <span style="color: #f11111">（{{ data.tagDealTypeStat && data.tagDealTypeStat['11'] || 0 }}）</span>-->
<!--          </Radio>-->
<!--          <Radio :label="21">-->
<!--            盘亏-->
<!--            <span style="color: #f11111">（{{ data.tagDealTypeStat && data.tagDealTypeStat['21'] || 0 }}）</span>-->
<!--          </Radio>-->
<!--        </RadioGroup>-->
<!--      </div>-->
      <!-- 表格 -->
      <div class="table-content">
        <my-table :data="data.singleMaterialCTList && data.singleMaterialCTList.list" :border="true" :tooltip="false" :columns="columns" :isShowFilter="false" :table-page="params" @on-change="changePage"></my-table>
      </div>
    </div>
  </modal>
</template>

<script>

import MyTable from '_c/my-table/my-table'
import { GetSingleMaterialCTList, GetMonthBeginEndStat } from '@/api/stock'
import { GetTechnologyTypList } from '@/api/baseData'
export default {
  name: 'user-form',
  components: {
    MyTable
  },
  data () {
    return {
      modal: false,
      data: {},
      titleData: {},
      tabs: [],
      tabsIndex: 0,
      menuIndex: '',
      columns: [
        {
          title: '序号',
          type: 'index',
          width: 80,
          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 === '不在库存' ? 'gray' : ''
              }
            }, params.row.rfidCode)
          }
        },
        {
          title: '绑定数量',
          key: 'qty',
          minWidth: 150
        },
        {
          title: '异常类型',
          key: 'checkTagState',
          minWidth: 150
        },
        {
          title: '处置类型',
          key: 'tagDealType',
          minWidth: 150
        },
        {
          title: '盈亏金额',
          key: 'amount',
          minWidth: 150
        },
        {
          title: '盘点时间',
          key: 'checkTime',
          minWidth: 150
        },
        {
          title: '盘点人',
          key: 'checkUser',
          minWidth: 150
        }
      ],
      params: {
        pageIndex: 1,
        pageSize: 20,
        total: 0
      }
    }
  },
  props: {
    value: {
      type: Boolean,
      default: false,
      require: true
    },
    month: {
      type: String | Date,
      default: ''
    }
  },
  watch: {
    value: {
      handler (n) {
        this.modal = n
      },
      immediate: true
    },
    modal (n) {
      this.$emit('input', n)
      if (n) {
        GetTechnologyTypList().then(res => {
          if (res.code === 0) {
            this.tabs = res.result
            this.tabs.unshift({
              text: '全部',
              value: ''
            })
            this.tabClick(0)
          }
        })
        this.getMonthBeginEndStat()
      }
    }
  },
  methods: {
    /* 单选框切换 */
    stateChange () {
      this.params.pageIndex = 1
      this.getList()
    },
    menuTabClick (index = '', item = '') {
      this.menuIndex = index
      this.params.pageIndex = 1
      this.params.purpose = item
      this.getList()
    },
    /* 选项卡切换 */
    tabClick (index, value) {
      this.tabsIndex = index
      this.menuIndex = ''
      this.params.purpose = ''
      this.params.pageIndex = 1
      this.params.technologyType = value
      this.getList()
    },
    changePage (pageIndex) {
      this.params.pageIndex = pageIndex
      this.getList()
    },
    getMonthBeginEndStat () {
      GetMonthBeginEndStat({
        month: this.$dayjs(this.month).format('YYYY-MM')
      }).then(res => {
        if (res.code === 0) {
          this.titleData = res.result
        }
      })
    },
    getList () {
      GetSingleMaterialCTList({
        ...this.params,
        monthStatListType: 1,
        month: this.$dayjs(this.month).format('YYYY-MM')
      }).then(res => {
        if (res.code === 0) {
          this.data = res.result
          this.params.total = res.result.singleMaterialCTList.totalCount
        }
      })
    }

  }
}
</script>

<style lang="less" scoped>
.content {
  height: 500px;
  display: flex;
  flex-direction: column;
  border: 1px solid #dcdee2;
  .tabs {
    box-sizing: border-box;
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .tab-item {
      box-sizing: border-box;
      flex: 1;
      overflow: auto;
      border-right: 1px solid #dcdee2;
      border-bottom: 1px solid #dcdee2;
      text-align: center;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      font-weight: bold;
      cursor: pointer;
      &:last-child {
        border-right: none;
      }
      &.active {
        color: #3F92F9;
        border-bottom: 3px solid #3F92F9;
      }
    }
  }
  .table-filter {
    margin: 5px;
    margin-bottom: 0;
    overflow: hidden;
    .filter-item {
      margin-right: 10px;
      float: left;
      //&:last-child {
      //  margin-right: 0;
      //}
    }
  }
  .table-content {
    padding: 5px;
    overflow: hidden;
    flex: 1;
    .table-item {
      width: 100%;
      .row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .col {
          padding: 0 5px;
          flex: 1;
          display: flex;
          align-items: center;
          height: 30px;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
          word-break: break-all;
          &.red {
            color: red;
          }
          &.orange {
            color: orange;
          }
          &.blue {
            color: #169bd5;
          }
        }
      }
    }
    .content {
      padding-left: 30px;
    }
  }
}
.border {
  margin: 5px 0;
  width: 100%;
  height: 1px;
  background-color: #d7d7d7;
}
/deep/ .ivu-modal-body {
  background-color: #FFFFFF;
}
</style>
