<!-- 物料修正 -->
<template>
  <div class="container">
    <div class="tab-nav">
      <div class="date-filter-wrap">
        <div class="date-filter other">
          <div class="date-tab active" style="background-color: #333333">
            当前标签总数
          </div>
          <div class="date-tab">
            <span class="num" style="padding: 0 20px;">{{
              data.totalTagNum || 0
            }}</span>
          </div>
        </div>
        <div class="line-border"></div>
        <div class="date-filter">
          <div
            class="date-tab"
            v-for="(item, index) in dateTabs"
            :key="index"
            :class="index === dateTabIndex ? 'active' : ''"
            @click="dateTabToggle(index)"
          >
            {{ item.label }}
          </div>
        </div>
        <DatePicker
          :clearable="false"
          @on-change="dateClick"
          v-model="dataArea"
          type="daterange"
          placement="bottom-end"
          placeholder="请选择日期"
          style="width: 200px;margin-left: 10px;"
        >
        </DatePicker>
      </div>
      <div class="date-filter-wrap">
        <div class="date-filter other">
          <div
            class="date-tab"
            :class="topIndex === 0 ? 'active' : ''"
            @click="topTabClick(0)"
          >
            新增标签数量
            <span class="num">{{ data.addTagNum || 0 }}</span>
          </div>
          <div
            class="date-tab"
            :class="topIndex === 1 ? 'active' : ''"
            @click="topTabClick(1)"
          >
            到货新建标签数
            <span class="num">{{ data.arriveTagNum || 0 }}</span>
          </div>
          <div
            class="date-tab"
            :class="topIndex === 2 ? 'active' : ''"
            @click="topTabClick(2)"
          >
            换标数
            <span class="num">{{ data.exchangeTagNum || 0 }}</span>
          </div>
          <div
            class="date-tab"
            :class="topIndex === 3 ? 'active' : ''"
            @click="topTabClick(3)"
          >
            退料贴标数
            <span class="num">{{ data.backTagNum || 0 }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="border"></div>
    <div class="main">
      <my-table
        ref="table"
        :data="data.dataItems"
        :columns="columns"
        :table-filter="tableFilter"
        :table-page="params"
        :multiple="true"
        @event-handle="eventHandle"
        @on-change="changePage"
        @on-select="select"
      >
      </my-table>
      <my-form v-model="show" @confirm="cfm" :type="storeType"></my-form>
    </div>
  </div>
</template>

<script>
import { exportExcel } from '@/libs/util'
import { GetStockTagPage, StockTagOut, UpdateStockTagQty } from '@/api/stock'
import MyTable from '_c/my-table/my-table'
import MyForm from './my-form'

export default {
  name: 'test',
  components: {
    MyTable,
    MyForm
  },
  data () {
    return {
      topIndex: '',
      dataArea: [],
      beginTime: '',
      endTime: '',
      dateTabIndex: 0,
      dateTabs: [
        { label: '本日' },
        { label: '本周' },
        { label: '本月' },
        { label: '今年' }
      ],
      id: '',
      selectList: [],
      formData: {},
      storeType: '',
      show: false,
      data: [],
      columns: [
        // {
        //   type: 'selection',
        //   width: 60,
        //   align: 'center'
        // },
        {
          title: '序号',
          type: 'index',
          width: 60,
          align: 'center'
        },
        {
          title: '物料编码',
          key: 'materialCode',
          minWidth: 150
        },
        {
          title: '物料名称',
          key: 'materialName',
          minWidth: 150,
          sortable: true
        },
        {
          title: '标签编码',
          key: 'rfidCode',
          minWidth: 200,
          sortable: true
        },
        {
          title: '数量',
          key: 'quantity',
          minWidth: 100
        }
        // {
        //   title: '操作',
        //   key: 'action',
        //   align: 'center',
        //   width: '150px',
        //   fixed: 'right',
        //   render: (h, params) => {
        //     return h('div', [
        //       h(
        //         'Button',
        //         {
        //           props: {
        //             type: 'primary',
        //             size: 'small'
        //           },
        //           style: {
        //             marginRight: '.5vw'
        //           },
        //           on: {
        //             click: () => {
        //               this.id = params.row.id
        //               this.storeType = '修正'
        //               this.show = true
        //             }
        //           }
        //         },
        //         '修正'
        //       ),
        //       h(
        //         'Button',
        //         {
        //           props: {
        //             type: 'success',
        //             size: 'small'
        //           },
        //           style: {
        //           },
        //           on: {
        //             click: () => {
        //               this.id = params.row.id
        //               this.storeType = '出库'
        //               this.show = true
        //             }
        //           }
        //         },
        //         '出库'
        //       )
        //     ])
        //   }
        // }
      ],
      tableFilter: [
        {
          name: 'Input',
          value: 'key',
          placeholder: '请输入关键字'
        },
        {
          name: 'Button',
          type: 'primary',
          text: '查询',
          e: 'search'
        },
        {
          name: 'Button',
          type: 'primary',
          text: '导出Excel',
          e: 'export'
        }
        // {
        //   name: 'Button',
        //   type: 'primary',
        //   text: '修正',
        //   align: 'right',
        //   e: 'update'
        // },
        // {
        //   name: 'Button',
        //   type: 'primary',
        //   text: '出库',
        //   align: 'right',
        //   e: 'out'
        // }
      ],
      params: {
        pageIndex: 1,
        pageSize: 20,
        total: 0
      }
    }
  },
  methods: {
    topTabClick (index) {
      if (index === this.topIndex) {
        this.topIndex = ''
        this.params.stockTagType = ''
      } else {
        this.topIndex = index
        this.params.stockTagType = index
      }
      this.params.pageIndex = 1
      this.getList()
    },
    dateClick (date) {
      this.beginTime = date[0]
      this.endTime = date[1]
      this.getList()
    },
    /* 选项卡切换 */
    dateTabToggle (index) {
      this.params.pageIndex = 1
      this.dateTabIndex = index
      if (index === 0) {
        let time = new Date().getTime()
        this.beginTime = this.$dayjs(time).format('YYYY-MM-DD HH:mm:ss')
        this.endTime = this.$dayjs(time).format('YYYY-MM-DD HH:mm:ss')
        this.dataArea = [this.beginTime, this.endTime]
      } else if (index === 1) {
        let Nowdate = new Date()
        let WeekFirstDay = Nowdate.getDay()
          ? new Date(Nowdate - (Nowdate.getDay() - 1) * 86400000)
          : new Date(Nowdate - (Nowdate.getDay() + 6) * 86400000)
        let WeekLastDay = new Date((WeekFirstDay / 1000 + 6 * 86400) * 1000)
        this.beginTime = this.$dayjs(WeekFirstDay).format('YYYY-MM-DD HH:mm:ss')
        this.endTime = this.$dayjs(WeekLastDay).format('YYYY-MM-DD HH:mm:ss')
        this.dataArea = [this.beginTime, this.endTime]
      } else if (index === 2) {
        let now = new Date() // 当前日期
        let nowMonth = now.getMonth() // 当前月
        let nowYear = now.getFullYear() // 当前年
        // 本月的开始时间
        let monthStartDate = new Date(nowYear, nowMonth, 1)
        // 本月的结束时间
        let monthEndDate = new Date(nowYear, nowMonth + 1, 0)
        this.beginTime = this.$dayjs(monthStartDate).format(
          'YYYY-MM-DD HH:mm:ss'
        )
        this.endTime = this.$dayjs(monthEndDate).format('YYYY-MM-DD HH:mm:ss')
        this.dataArea = [this.beginTime, this.endTime]
      } else if (index === 3) {
        let now = new Date() // 当前日期
        let nowYear = now.getFullYear() // 当前年
        // 本年的开始时间
        let monthStartDate = new Date(nowYear, 0, 1)
        // 本年的结束时间
        let monthEndDate = new Date(nowYear, 11, 31)
        this.beginTime = this.$dayjs(monthStartDate).format(
          'YYYY-MM-DD HH:mm:ss'
        )
        this.endTime = this.$dayjs(monthEndDate).format('YYYY-MM-DD HH:mm:ss')
        this.dataArea = [this.beginTime, this.endTime]
      }
      this.getList()
    },
    select (selection, data) {
      // this.selectList = data
      if (selection.length > 0) {
        this.id = data.id
      } else {
        this.id = ''
      }
    },
    cfm (formData) {
      console.log(formData)
      if (this.storeType === '出库') {
        StockTagOut({
          id: this.id,
          ...formData
        }).then(res => {
          if (res.code === 0) {
            this.$Message.info(res.msg || '操作成功')
            this.id = ''
            this.show = false
            this.getList()
          }
        })
      } else if (this.storeType === '修正') {
        UpdateStockTagQty({
          id: this.id,
          ...formData
        }).then(res => {
          if (res.code === 0) {
            this.$Message.info(res.msg || '操作成功')
            this.id = ''
            this.show = false
            this.getList()
          }
        })
      }
    },
    // 检索条件事件处理
    eventHandle (option) {
      switch (option._evnet) {
        case 'search':
          this.params.pageIndex = 1
          this.params.keyWord = option.key
          this.getList()
          break
        case 'export':
          GetStockTagPage({
            ...this.params,
            beginTime: this.beginTime,
            endTime: this.endTime,
            pageIndex: 1,
            pageSize: 99999
          }).then(res => {
            if (res.code === 0) {
              let data = res.result.dataItems
              if (data.length < 1) return this.$Message.error('数据为空！')
              exportExcel(this.columns, data, '标签记录')
            }
          })
          break
        case 'storeIn':
          this.storeType = '入库'
          this.show = true
          break
        case 'storeOut':
          this.storeType = '出库'
          this.show = true
          break
        case 'update':
          if (!this.id) {
            return this.$Message.error('请选择订单！')
          }
          this.storeType = '修正'
          this.show = true
          break
        case 'out':
          if (!this.id) {
            return this.$Message.error('请选择订单！')
          }
          this.storeType = '出库'
          this.show = true
      }
    },
    changePage (pageIndex) {
      this.params.pageIndex = pageIndex
      this.getList()
    },
    getList () {
      GetStockTagPage({
        ...this.params,
        beginTime: this.beginTime,
        endTime: this.endTime
      }).then(res => {
        if (res.code === 0) {
          this.data = res.result
          this.params.total = res.result.totalCount
        }
      })
    }
  },
  mounted () {
    this.dateTabToggle(0)
  }
}
</script>

<style lang="less" scoped>
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  .tab-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .date-filter-wrap {
      display: flex;
      align-items: center;
      .date-filter {
        width: 300px;
        overflow: hidden;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #ffffff;
        border-radius: 4px;
        &.other {
          width: auto;
          .date-tab {
            white-space: nowrap;
            padding: 9px;
            .num {
              font-weight: bold;
              font-size: 14px;
              &.red {
                color: red;
                cursor: pointer;
                text-decoration: underline;
              }
            }
            &.active {
              background-color: #333333;
            }
          }
        }

        .date-tab {
          flex: 1;
          padding: 9px 4px;
          line-height: 1;
          text-align: center;
          border: 1px solid #e6e6e6;
          border-radius: 2px;
          border-right: none;
          cursor: pointer;
          font-weight: 500;

          &:first-child {
            border-radius: 4px 0 0 4px;
          }

          &:last-child {
            border-radius: 0 4px 4px 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;
        }
      }
    }
  }
  .main {
    flex: 1;
    overflow: hidden;
  }
}
.border {
  margin: 10px 0;
  width: 100%;
  height: 1px;
  background-color: #d7d7d7;
}
.line-border {
  margin: 0 20px;
  width: 1px;
  height: 28px;
  background-color: #333333;
}
.print-wrap {
  width: 100vw;
  height: 100vh;
  display: none;
  img {
    width: 50%;
  }
}
</style>
