<!-- 质检记录 -->
<template>
  <div class="container">
    <div class="tab-nav">
      <div class="date-filter-wrap">
        <span style="font-size: 14px;font-weight: bold;color: black">退料数据看板</span>
      </div>
      <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>
    <div class="border"></div>
    <div class="tab-nav">
      <div class="date-filter-wrap" style="flex: 1;height: 100%;margin-right: 20px;">
        <div class="date-filter other">
          <div class="date-tab active">
            回仓
          </div>
          <div class="date-tab">
            记录
            <span class="num">{{ data.backHouseSum.count }}</span>
          </div>
          <div class="date-tab">
            平方
            <span class="num">{{ data.backHouseSum.areaSquare }}</span>
          </div>
          <div class="date-tab">
            金额
            <span class="num">{{ data.backHouseSum.amout }}</span>
          </div>
        </div>
      </div>
      <div class="date-filter-wrap" style="flex: 1;height: 100%;margin-right: 20px;">
        <div class="date-filter other">
          <div class="date-tab active">
            退货
          </div>
          <div class="date-tab">
            记录
            <span class="num">{{ data.stockBackSum.count }}</span>
          </div>
          <div class="date-tab">
            平方
            <span class="num">{{ data.stockBackSum.areaSquare }}</span>
          </div>
          <div class="date-tab">
            金额
            <span class="num">{{ data.stockBackSum.amout }}</span>
          </div>
        </div>
      </div>
      <div class="date-filter-wrap" style="flex: 1;height: 100%;">
        <div class="date-filter other">
          <div class="date-tab active">
            报废
          </div>
          <div class="date-tab">
            记录
            <span class="num">{{ data.destroySum.count }}</span>
          </div>
          <div class="date-tab">
            平方
            <span class="num">{{ data.destroySum.areaSquare }}</span>
          </div>
          <div class="date-tab">
            金额
            <span class="num">{{ data.destroySum.amout }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="border"></div>
    <div class="table-filter" style="height: auto">
      <div class="filter-item" style="margin-right: 0">
        <RadioGroup v-model="params.backMaterialType" @on-change="stateChange">
          <Radio :label="''">
            全部
            <span style="color: #f11111">（{{ data.totalCount.totalCount || 0 }}）</span>
          </Radio>
          <Radio :label="0">
            回仓
            <span style="color: #f11111">（{{ data.totalCount.houseCount || 0 }}）</span>
          </Radio>
          <Radio :label="1">
            退货
            <span style="color: #f11111">（{{ data.totalCount.backCount || 0 }}）</span>
          </Radio>
          <Radio :label="2">
            报废
            <span style="color: #f11111">（{{ data.totalCount.destroyCount || 0 }}）</span>
          </Radio>
        </RadioGroup>
      </div>
      <div class="filter-item" style="margin-right: 16px;font-size: 18px">|</div>
      <div class="filter-item" style="">
        <RadioGroup v-model="params.backMaterialProgress" @on-change="stateChange">
          <Radio :label="''">
            全部
            <span style="color: #f11111">（{{ data.totalCount.totalCount || 0 }}）</span>
          </Radio>
          <Radio :label="0">
            待判定
            <span style="color: #f11111">（{{ data.totalCount.unCheckCount || 0 }}）</span>
          </Radio>
          <Radio :label="1">
            待回仓
            <span style="color: #f11111">（{{ data.totalCount.unHouseCount || 0 }}）</span>
          </Radio>
          <Radio :label="2">
            待审批
            <span style="color: #f11111">（{{ data.totalCount.unApprovalCount || 0 }}）</span>
          </Radio>
          <Radio :label="3">
            待退货
            <span style="color: #f11111">（{{ data.totalCount.unBackCount || 0 }}）</span>
          </Radio>
          <Radio :label="4">
            待扣款
            <span style="color: #f11111">（{{ data.totalCount.unBalanceCount || 0 }}）</span>
          </Radio>
          <Radio :label="5">
            待退款
            <span style="color: #f11111">（{{ data.totalCount.unRefundCount || 0 }}）</span>
          </Radio>
          <Radio :label="6">
            待报废
            <span style="color: #f11111">（{{ data.totalCount.unDestroyCount || 0 }}）</span>
          </Radio>
          <Radio :label="10">
            已扣款
            <span style="color: #f11111">（{{ data.totalCount.hadBalanceCount || 0 }}）</span>
          </Radio>
          <Radio :label="11">
            已退款
            <span style="color: #f11111">（{{ data.totalCount.hadRefundCount || 0 }}）</span>
          </Radio>
          <Radio :label="12">
            已回仓
            <span style="color: #f11111">（{{ data.totalCount.hadHouseCount || 0 }}）</span>
          </Radio>
          <Radio :label="13">
            已报废
            <span style="color: #f11111">（{{ data.totalCount.hadDestroyCount || 0 }}）</span>
          </Radio>
          <Radio :label="7">
            部分回仓
            <span style="color: #f11111">（{{ data.totalCount.partHouseCount || 0 }}）</span>
          </Radio>
        </RadioGroup>
      </div>
    </div>
    <div class="main">
      <my-table :data="data.pageItems.list" :columns="columns" :is-show-filter="false" :table-page="params" @on-change="changePage"></my-table>
      <zj-form v-model="zjVisible" :id="id" @getlist="getList"></zj-form>
      <tl-form v-model="tlVisible" :id="id" :backMaterialProgress="backMaterialProgressCode" @getlist="getList"></tl-form>
      <bf-form v-model="bfVisible" :id="id" :backMaterialProgress="backMaterialProgressCode" @getlist="getList"></bf-form>
      <bfxq-form v-model="bfxqVisible" :id="id" :backMaterialProgress="backMaterialProgressCode"></bfxq-form>
      <hcxq-form v-model="hcxqVisible" :id="id" :backMaterialProgress="backMaterialProgressCode"></hcxq-form>
      <tkxq-form v-model="tkxqVisible" :id="id" :backMaterialProgress="backMaterialProgressCode"></tkxq-form>
      <tk-form v-model="tkVisible" :id="id" :backMaterialProgress="backMaterialProgressCode" @getlist="getList"></tk-form>
      <th-form v-model="thVisible" :id="id" :backMaterialProgress="backMaterialProgressCode" @getlist="getList"></th-form>
      <modal v-model="backDetailShow" width="900px">
        <div class="title" slot="header">退料详情</div>
        <div class="footer" slot="footer">
          <Button class="btn" type="primary" size="small" @click="backDetailShow = false">确定</Button>
        </div>
        <div class="content" style="padding: 20px">
          <my-table :data="backItems" :columns="columns2" :height="400" :is-show-filter="false" :is-show-page="false"></my-table>
        </div>
      </modal>
    </div>
  </div>
</template>

<script>
import { GetApplySceneBackData, GetStockBackPage } from '@/api/stock'
import MyTable from '_c/my-table/my-table'
import zjForm from './zj-form'
import tlForm from './tl-form'
import bfForm from './bf-form'
import bfxqForm from './bfxq-form'
import tkForm from './tk-form'
import thForm from './th-form'
import hcxqForm from './hcxq-form'
import tkxqForm from './tkxq-form'
import { openPic } from '@/libs/util'
export default {
  name: 'quality_record',
  components: {
    MyTable,
    zjForm,
    tlForm,
    bfForm,
    bfxqForm,
    tkForm,
    thForm,
    hcxqForm,
    tkxqForm
  },
  data () {
    return {
      backDetailShow: false,
      backItems: [],
      roleKey: this.$store.state.user.access,
      backMaterialProgressCode: '',
      id: '',
      dataArea: [],
      beginTime: '',
      endTime: '',
      dateTabIndex: 0,
      dateTabs: [
        { label: '本日' },
        { label: '本周' },
        { label: '本月' },
        { label: '今年' }
      ],
      formData: {},
      show: false,
      zjVisible: false,
      tlVisible: false,
      bfVisible: false,
      bfxqVisible: false,
      hcxqVisible: false,
      tkxqVisible: false,
      tkVisible: false,
      thVisible: false,
      data: {
        'backHouseSum': {
          'count': 0,
          'areaSquare': 0,
          'amout': 0
        },
        'stockBackSum': {
          'count': 0,
          'areaSquare': 0,
          'amout': 0
        },
        'destroySum': {
          'count': 0,
          'areaSquare': 0,
          'amout': 0
        },
        'totalCount': {
          'totalCount': 0,
          'houseCount': 0,
          'backCount': 0,
          'destroyCount': 0,
          'unCheckCount': 0,
          'unHouseCount': 0,
          'unApprovalCount': 0,
          'unBackCount': 0,
          'unBalanceCount': 0,
          'unRefundCount': 0,
          'unDestroyCount': 0,
          'partHouseCount': 0,
          'hadBalanceCount': 0,
          'hadRefundCount': 0,
          'hadHouseCount': 0,
          'hadDestroyCount': 0
        },
        'pageItems': {
          'totalCount': 0,
          'pageCount': 0,
          'pageIndex': 1,
          'pageSize': 20,
          'list': [],
          'isLastPage': true
        }
      },
      columns: [
        {
          title: '序号',
          type: 'index',
          width: 60,
          align: 'center'
        },
        {
          title: '物料编码',
          key: 'materialCode',
          minWidth: 150
        },
        {
          title: '物料名称',
          key: 'materialName',
          minWidth: 150
        },
        {
          title: '供应商',
          key: 'supplierName',
          minWidth: 150
        },
        {
          title: '退料类型',
          key: 'backMaterialTypeStr',
          minWidth: 150
        },
        {
          title: '退料数量',
          key: 'backQty',
          minWidth: 150
        },
        {
          title: '件数',
          key: 'count',
          minWidth: 150
        },
        {
          title: '退料金额',
          key: 'backAmount',
          minWidth: 150
        },
        {
          title: '退款方式',
          key: 'stockBackWayStr',
          minWidth: 150
        },
        {
          title: '退料原因',
          key: 'backReason',
          minWidth: 150,
          render: (h, params) => {
            let _this = this
            return h('span', {
              style: {
                color: 'blue',
                textDecoration: 'underline',
                cursor: 'pointer'
              },
              on: {
                click () {
                  GetApplySceneBackData({
                    id: params.row.id,
                    backMaterialProgress: params.row.backMaterialProgress
                  }).then(async res => {
                    if (res.code === 0) {
                      console.log(res.result)
                      _this.backItems = res.result.backItems
                      _this.backDetailShow = true
                    }
                  })
                }
              }
            }, '查看详情')
          }
        },
        {
          title: '退料人员',
          key: 'backUserName',
          minWidth: 150
        },
        {
          title: '退料时间',
          key: 'backTime',
          minWidth: 150
        },
        {
          title: '退料进度',
          key: 'backMaterialProgressStr',
          minWidth: 150
        },
        {
          title: '操作',
          key: 'action',
          fixed: 'right',
          align: 'center',
          width: '120px',
          render: (h, params) => {
            let _this = this
            if (_this.backMaterialProgress[params.row.backMaterialProgress]) {
              return h('div', [
                h(
                  'Button',
                  {
                    props: {
                      type: [11, 12, 13].includes(params.row.backMaterialProgress) ? 'default' : 'primary',
                      size: 'small',
                      disabled: (() => {
                        console.log('???????')
                        console.log(_this.roleKey)
                        if (['admin', 'supervisor'].includes(_this.roleKey)) {
                          return false
                        } else {
                          if (params.row.backMaterialProgress === 0) {
                            if (['qualitytest'].includes(_this.roleKey)) {
                              return false
                            } else {
                              return true
                            }
                          } else if (params.row.backMaterialProgress === 2) {
                            if (['supervisor'].includes(_this.roleKey)) {
                              return false
                            } else {
                              return true
                            }
                          } else if (params.row.backMaterialProgress === 3 || params.row.backMaterialProgress === 12) {
                            if (['purchase'].includes(_this.roleKey)) {
                              return false
                            } else {
                              return true
                            }
                          } else if (params.row.backMaterialProgress === 6 || params.row.backMaterialProgress === 13) {
                            if (['storekeeper'].includes(_this.roleKey)) {
                              return false
                            } else {
                              return true
                            }
                          } else if (params.row.backMaterialProgress === 5 || params.row.backMaterialProgress === 11) {
                            if (['finance', 'cashier'].includes(_this.roleKey)) {
                              return false
                            } else {
                              return true
                            }
                          }
                        }
                      })()
                    },
                    on: {
                      click: () => {
                        _this.id = params.row.id
                        _this.backMaterialProgressCode = params.row.backMaterialProgress
                        switch (params.row.backMaterialProgress) {
                          case 0:
                            _this.zjVisible = true
                            break
                          case 2:
                            _this.tlVisible = true
                            break
                          case 6:
                            _this.bfVisible = true
                            break
                          case 5:
                            _this.tkVisible = true
                            break
                          case 13:
                            _this.bfxqVisible = true
                            break
                          case 3:
                            _this.thVisible = true
                            break
                          case 12:
                            _this.hcxqVisible = true
                            break
                          case 11:
                            _this.tkxqVisible = true
                            break
                        }
                      }
                    }
                  },
                  _this.backMaterialProgress[params.row.backMaterialProgress]
                )
              ])
            } else {
              return ''
            }
          }
        }
      ],
      columns2: [
        {
          title: '序号',
          type: 'index',
          width: 60,
          align: 'center'
        },
        {
          title: '退料数量',
          key: 'backQty',
          minWidth: 150
        },
        {
          title: '退料金额',
          key: 'backAmount',
          minWidth: 150
        },
        {
          title: '关联合同',
          key: 'purchaseBillNo',
          minWidth: 150
        },
        {
          title: '入库批号',
          key: 'batchNo',
          minWidth: 150
        },
        {
          title: '采购单价',
          key: 'price',
          minWidth: 150
        },
        {
          title: '采购数量',
          key: 'purchaseQty',
          minWidth: 150
        },
        {
          title: '退料原因',
          key: 'backReason',
          minWidth: 150
        },
        {
          title: '照片',
          key: 'imageUrls',
          minWidth: 200,
          render: (h, params) => {
            if (params.row.imageUrls) {
              let arr = params.row.imageUrls.split(',')
              let els = []
              arr.forEach(item => {
                els.push(
                  h('p', {
                    style: {
                      cursor: 'pointer',
                      color: 'blue',
                      padding: '3px 0',
                      textDecoration: 'underline'
                    },
                    on: {
                      click () {
                        openPic(item)
                      }
                    }
                  }, item.split('/')[item.split('/').length - 1])
                )
              })
              return h('div', els)
            } else {
              return h('span')
            }
          }
        }
      ],
      backMaterialProgress: {
        0: '质检判定',
        2: '审批',
        3: '处理退货',
        6: '处理报废',
        5: '处理退款',
        13: '报废详情',
        12: '回仓详情',
        11: '查看退款'
      },
      params: {
        pageIndex: 1,
        pageSize: 20,
        total: 0
      }
    }
  },
  methods: {
    stateChange () {
      this.params.pageIndex = 1
      this.tabsIndex = 0
      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()
    },
    changePage (pageIndex) {
      this.params.pageIndex = pageIndex
      this.getList()
    },
    getList () {
      GetStockBackPage({
        ...this.params,
        beginTime: this.beginTime,
        endTime: this.endTime
      }).then(res => {
        if (res.code === 0) {
          this.data = res.result
          this.params.total = res.result.pageItems.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: 100%;
          height: 100%;
          .date-tab {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 9px;
            height: 100%;
            white-space: nowrap;
            cursor: auto;
            &.active {
              background-color: #333333;
              font-size: 14px;
              font-weight: bold;
            }
            .num {
              padding-top: 5px;
              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;
  }
}
.table-filter {
  padding-bottom: 10px;
  height: 42px;
  line-height: 32px;
  overflow: hidden;
  .filter-item {
    margin-right: 10px;
    float: left;
  }
}
</style>
