<!-- 质检记录 -->
<template>
  <div class="container">
    <div class="tab-nav">
      <div class="date-filter-wrap">
        <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
          @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 active" style="background-color: #333333">
            质检概况
          </div>
          <div class="date-tab">
            质检批数量
            <span class="num">{{ data.checkBatchNum }}</span>
          </div>
          <div class="date-tab">
            质检平方
            <span class="num">{{ data.checkSquareSum }}</span>
          </div>
          <div class="date-tab">
            质检即时率
            <span class="num">{{ data.checkInTimeRateStr }}</span>
          </div>
          <div class="date-tab">
            合格批数
            <span class="num">{{ data.standardBatchNum }}</span>
          </div>
          <div class="date-tab" :style="{ border: qtyCheckStatus === 0 ? '1px solid blue' : '' }">
            不合格批数
            <span class="num red" @click="qtyCheckStatusClick">{{ data.unStandardBatchNum }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="border"></div>
    <div class="main">
      <my-table :data="data.dataItems && data.dataItems.list" :columns="columns" :table-filter="tableFilter" :table-page="params" @event-handle="eventHandle" @on-change="changePage"></my-table>
      <quality-form v-model="show" :data="formData"></quality-form>
    </div>
  </div>
</template>

<script>
import { exportExcel } from '@/libs/util'
import { GetQuantityCheckRecord } from '@/api/stock'
import { GetUserPageList } from '@/api/user'
import MyTable from '_c/my-table/my-table'
import QualityForm from './quality-form'
export default {
  name: 'quality_record',
  components: {
    MyTable,
    QualityForm
  },
  data () {
    return {
      qtyCheckStatus: 1,
      dataArea: [],
      beginTime: '',
      endTime: '',
      dateTabIndex: 0,
      dateTabs: [
        { label: '本日' },
        { label: '本周' },
        { label: '本月' },
        { label: '今年' }
      ],
      formData: {},
      show: false,
      data: [],
      columns: [
        {
          title: '序号',
          type: 'index',
          width: 60,
          align: 'center'
        },
        // {
        //   title: '质检单号',
        //   key: 'qtyCheckNo',
        //   minWidth: 150,
        //   render: (h, params) => {
        //     let _this = this
        //     return h('a', {
        //       on: {
        //         click () {
        //           _this.formData = { ...params.row }
        //           _this.show = true
        //         }
        //       }
        //     }, params.row.qtyCheckNo)
        //   }
        // },
        {
          title: '合同编码',
          key: 'purchaseBillNo',
          minWidth: 150,
          render: (h, params) => {
            let _this = this
            return h('span', {
              style: {
                cursor: 'pointer',
                color: 'blue',
                textDecoration: 'underline'
              },
              on: {
                click () {
                  _this.$router.push({
                    name: 'quality_record_detail',
                    query: {
                      data: JSON.stringify(params.row)
                    }
                  })
                }
              }
            }, params.row.purchaseBillNo)
          }
        },
        {
          title: '批次号',
          key: 'batchNo',
          minWidth: 150
        },
        {
          title: '物料编码',
          key: 'materialCode',
          minWidth: 150
        },
        {
          title: '物料名称',
          key: 'materialName',
          minWidth: 150
        },
        {
          title: '到货数量',
          key: 'quantity',
          minWidth: 150
        },
        {
          title: '到货时间',
          key: 'arrivalDate',
          minWidth: 150
        },
        {
          title: '质检人员',
          key: 'checkUserName',
          minWidth: 150
        },
        {
          title: '质检日期',
          key: 'checkDate',
          minWidth: 150
        },
        {
          title: '质检平方',
          key: 'checkSquare',
          minWidth: 150
        },
        {
          title: '质检结论',
          key: 'result',
          minWidth: 150
        },
        {
          title: '质检即时率',
          key: 'checkInTimeRateStr',
          minWidth: 150
        }
      ],
      tableFilter: [
        {
          name: 'RadioGroup',
          value: 'checkState',
          list: [
            { label: '全部', value: '' },
            { label: '已质检', value: 2 },
            { label: '待质检', value: 1 }
          ]
        },
        {
          name: 'Button',
          type: 'primary',
          text: '导出Excel',
          e: 'export',
          align: 'right'
        },
        {
          name: 'Button',
          type: 'primary',
          text: '查询',
          e: 'search',
          align: 'right'
        },
        {
          name: 'Input',
          value: 'key',
          placeholder: '请输入关键字',
          align: 'right'
        },
        {
          name: 'Select',
          value: 'checkUserId',
          placeholder: '质检人员',
          align: 'right',
          list: []
        }
      ],
      params: {
        pageIndex: 1,
        pageSize: 20,
        total: 0
      }
    }
  },
  methods: {
    qtyCheckStatusClick () {
      this.params.pageIndex = 1
      this.qtyCheckStatus ? this.qtyCheckStatus = 0 : this.qtyCheckStatus = 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()
    },
    cfm (type, formData) {
      if (type === 'add') {
        FacPriceAdd({
          ...formData,
          materialCode: formData.code
        }).then(res => {
          if (res.code === 0) {
            this.$Message.info(res.msg)
            this.getList()
          }
        })
      } else if (type === 'edit') {
        FacPriceChange({
          ...formData,
          factoryPriceId: formData.id
        }).then(res => {
          if (res.code === 0) {
            this.$Message.info(res.msg)
            this.getList()
          }
        })
      }
    },
    // 检索条件事件处理
    eventHandle (option) {
      switch (option._evnet) {
        case 'search':
          this.params.pageIndex = 1
          this.params.key = option.key
          this.params.checkState = option.checkState
          this.params.checkUserId = option.checkUserId
          this.getList()
          break
        case 'export':
          GetQuantityCheckRecord({
            ...this.params,
            beginTime: this.beginTime,
            endTime: this.endTime,
            qtyCheckStatus: this.qtyCheckStatus,
            pageIndex: 1,
            pageSize: 99999
          }).then(res => {
            if (res.code === 0) {
              let data = res.result.dataItems.list
              if (data.length < 1) return this.$Message.error('数据为空！')
              exportExcel(this.columns, data, '质检记录')
            }
          })
          break
      }
    },
    changePage (pageIndex) {
      this.params.pageIndex = pageIndex
      this.getList()
    },
    getList () {
      GetQuantityCheckRecord({
        ...this.params,
        beginTime: this.beginTime,
        endTime: this.endTime,
        qtyCheckStatus: this.qtyCheckStatus
      }).then(res => {
        if (res.code === 0) {
          this.data = res.result
          this.params.total = res.result.dataItems.totalCount
        }
      })
    },
    getUserPageList () {
      GetUserPageList({
        pageIndex: 1,
        pageSize: 9999,
        roleKey: 'qualitytest'
      }).then(res => {
        if (res.code === 0) {
          let userList = res.result.list.map(item => {
            return {
              label: item.realName,
              value: item.id
            }
          })
          this.tableFilter[4].list = userList
        }
      })
    }
  },
  mounted () {
    this.dateTabToggle(0)
    this.getUserPageList()
  }
}
</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 {
            cursor: auto;
            white-space: nowrap;
            padding: 9px;
            .num {
              font-weight: bold;
              font-size: 14px;
              &.red {
                color: red;
                cursor: pointer;
                text-decoration: underline;
              }
            }
          }
        }

        .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;
  }
}
</style>
