<!-- 供应商价格维护 -->
<template>
  <div class="container">
    <div class="tab-nav">
      <div class="date-filter-wrap">
        <Button type="primary" @click="addPurchase">发起申购</Button>
        <Button type="primary" style="margin-left: 10px" @click="toViewPurchase">查看申购单</Button>
        <Input style="margin-left: 10px" v-model="keyword" clearable placeholder="请输入关键字" />
        <Button style="margin-left: 10px" @click="getAllList">查询</Button>
      </div>
      <div class="date-filter-wrap">
        <date-select v-model="params" @change="selectTime"></date-select>
      </div>
    </div>
    <div class="border"></div>
    <div class="table-filter">
      <div class="active" style="width: 7%; text-align: center" @click="fabricAndInkClick('')" :style="technologyType === '' ? 'border:2px solid #0077ff' : ''">
        全部
      </div>
      <div class="fabric" :style="technologyType == 5 ? 'border:2px solid #0077ff' : ''" style="width: 50%" @click="fabricAndInkClick(5)">
        <div class="label" style="border-right: 2px solid #dcdcdc">
          <Icon type="md-add" v-if="!tableModalType" style="margin-right: 15px" @click.native="tableModalType = true" />
          <Icon type="md-remove" v-else @click="tableModalType = false" style="margin-right: 15px" />
          <span>面料申购</span>
        </div>
        <ul>
          <li>
            卷数
            <span>{{ getData(5, 'num') }}</span>
          </li>
          <li>
            米数
            <span>{{ getData(5, 'purchaseQty') }}</span>
          </li>
          <li>
            面积
            <span>{{ getData(5, 'area') }}</span>
          </li>
        </ul>
      </div>
      <div class="ink" style="width: 40%" @click="fabricAndInkClick(3)" :style="technologyType == 3 ? 'border:2px solid #0077ff' : ''">
        <div class="label" style="border-right: 1px solid #dcdcdc">
          <span>墨水申购</span>
        </div>
        <ul>
          <li>
            件数
            <span>{{ getData(3, 'purchaseQty') }}</span>
          </li>
          <li>
            千克
            <span>{{ getData(3, 'num') }}</span>
          </li>
        </ul>
      </div>
    </div>
    <div class="fabric-son" v-if="tableModalType">
      <div class="fabric-sun" :style="technologyType === 0 ? 'border:2px solid #0077ff' : ''" @click="fabricAndInkClick(0)">
        <div class="label" style="border-right: 2px solid #dcdcdc">
          <span>直喷</span>
        </div>
        <ul>
          <li>
            卷数
            <span>{{ getData(0, 'num') }}</span>
          </li>
          <li>
            米数
            <span>{{ getData(0, 'purchaseQty') }}</span>
          </li>
          <li>
            面积
            <span>{{ getData(0, 'area') }}</span>
          </li>
        </ul>
      </div>
      <div class="fabric-sun" :style="technologyType == 2 ? 'border:2px solid #0077ff' : ''" @click="fabricAndInkClick(2)">
        <div class="label" style="border-right: 2px solid #dcdcdc">
          <span>打纸</span>
        </div>
        <ul>
          <li>
            卷数
            <span>{{ getData(2, 'num') }}</span>
          </li>
          <li>
            米数
            <span>{{ getData(2, 'purchaseQty') }}</span>
          </li>
          <li>
            面积
            <span>{{ getData(2, 'area') }}</span>
          </li>
        </ul>
      </div>
      <div class="fabric-sun" :style="technologyType == 1 ? 'border:2px solid #0077ff' : ''" @click="fabricAndInkClick(1)">
        <div class="label" style="border-right: 2px solid #dcdcdc">
          <span>热转</span>
        </div>
        <ul>
          <li>
            卷数
            <span>{{ getData(1, 'num') }}</span>
          </li>
          <li>
            米数
            <span>{{ getData(1, 'purchaseQty') }}</span>
          </li>
          <li>
            面积
            <span>{{ getData(1, 'area') }}</span>
          </li>
        </ul>
      </div>
      <div class="fabric-sun" :style="technologyType == 4 ? 'border:2px solid #0077ff' : ''" @click="fabricAndInkClick(4)">
        <div class="label" style="border-right: 2px solid #dcdcdc">
          <span>其他</span>
        </div>
        <ul>
          <li>
            卷数
            <span>{{ getData(4, 'num') }}</span>
          </li>
          <li>
            米数
            <span>{{ getData(4, 'purchaseQty') }}</span>
          </li>
          <li>
            面积
            <span>{{ getData(4, 'area') }}</span>
          </li>
        </ul>
      </div>
    </div>
    <div class="main">
      <my-table
        ref="table"
        :data="data"
        :columns="columns"
        :table-filter="tableFilter"
        :table-page="params"
        @event-handle="eventHandle"
        @on-change="changePage"
      ></my-table>
    </div>

    <my-form-pay v-model="show" :type="formType" :data="formData" :showSider="false" @cfm="getList"> </my-form-pay>
  </div>
</template>

<script>
// import { ApplyPurchaseGetPageDetailList } from '@/api/applyPurchase'
import MyTable from '_c/my-table/my-table'
import MyFormPay from '_c/my-modal-pay'
import axios from 'axios'
import dateSelect from '@/components/dateSelect/dateSelect'

export default {
  name: 'material_apply',
  components: {
    MyTable,
    MyFormPay,
    dateSelect
  },
  data() {
    return {
      dataArea: [],
      keyword: '',
      technologyType: '',
      typeList: {},
      tableModalType: false,
      numList: [],
      formType: '',
      formData: {},
      show: false,
      data: [],
      columns: [
        {
          title: '序号',
          type: 'index',
          width: 60,
          align: 'center'
        },
        {
          title: '物料编号',
          key: 'materialCode',
          minWidth: 150
        },
        {
          title: '物料名称',
          key: 'materialName',
          minWidth: 150
        },
        {
          title: '物料规格',
          key: 'materialSpec',
          minWidth: 150
        },
        {
          title: '申购日期',
          key: 'applyTime',
          minWidth: 150
        },
        {
          title: '请购数量',
          key: 'applyQuantity',
          minWidth: 150
        },
        {
          title: '现有库存',
          key: 'stockQuantity',
          minWidth: 150
        },
        {
          title: '最长滞留时间',
          key: 'maxDelayTime',
          minWidth: 150
        },
        {
          title: '滞留数量',
          key: 'delayQuantity',
          minWidth: 150,
          renderHeader: h => {
            return h('span', `滞留超过30天数量`)
          }
        },
        {
          title: '采购在途数量',
          key: 'afloatQuantity',
          minWidth: 150
        },
        {
          title: '安全库存',
          key: 'safetyStock',
          minWidth: 150
        },
        {
          title: '近30天消耗量',
          key: 'useQuantity',
          minWidth: 150
          // },
          // {
          //   title: '用途',
          //   key: 'purpose',
          //   minWidth: 150
        },
        {
          title: '申购说明',
          key: 'remark',
          minWidth: 150
        }
      ],
      tableFilter: [
        {
          name: 'RadioGroup',
          value: 'status',
          list: [{ value: '', label: '全部（0）' }],
          e: 'state'
        }
      ],
      params: {
        pageNum: 1,
        pageSize: 10,
        type: '3',
        beginTime: null,
        endTime: null,
        total: 0
      }
    }
  },
  mounted() {
    this.getAllList()
  },
  methods: {
    selectTime() {
      this.getAllList()
    },
    getAllList() {
      this.getTypeList()
      this.getHandleData()
      this.$nextTick(() => {
        this.getList()
      })
    },
    getTypeList() {
      this.technologyType = ''
      this
        .$post('/api/storage-restructure/applyPurchase/typeStatistics', {
          type: this.params.type,
          beginTime: this.params.beginTime,
          endTime: this.params.endTime,
          keyword: this.keyword
        })
        .then(res => {
          this.typeList = res.data
        })
    },
    fabricAndInkClick(index) {
      this.technologyType = index
      this.getHandleData()
      this.$nextTick(() => {
        this.getList()
      })
    },
    getData(num, name) {
      console.log(this.typeList)
      if (this.typeList[num] && this.typeList[num][name]) {
        
        return this.typeList[num][name]
      } else {
        return '0'
      }
    },
    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.pageNum = 1
          this.params.keyWord = option.key
          this.params.beginTime = option.dateStartTime
          this.params.endTime = option.dateEndTime
          this.params.status = option.status
          if (option.status === 1) {
            this.columns = [
              {
                title: '序号',
                type: 'index',
                width: 60,
                align: 'center'
              },
              {
                title: '物料编号',
                key: 'materialCode',
                minWidth: 150
              },
              {
                title: '物料名称',
                key: 'materialName',
                minWidth: 150
              },
              {
                title: '物料规格',
                key: 'spec',
                minWidth: 150
              },
              {
                title: '申购日期',
                key: 'applyTime',
                minWidth: 150
              },
              {
                title: '请购数量',
                key: 'purchaseQty',
                minWidth: 150
              },
              {
                title: '现有库存',
                key: 'stockQty',
                minWidth: 150
              },
              {
                title: '最长滞留时间',
                key: 'maxDelayTime',
                minWidth: 150
              },
              {
                title: '滞留数量',
                key: 'delayQuantity',
                minWidth: 150,
                renderHeader: h => {
                  return h('span', `滞留超过30天数量`)
                }
              },
              {
                title: '采购在途数量',
                key: 'onWayQuantity',
                minWidth: 150
              },
              {
                title: '安全库存',
                key: 'safetyQty',
                minWidth: 150
              },
              {
                title: '近30天消耗量',
                key: 'overUseQty',
                minWidth: 150
              },
              {
                title: '用途',
                key: 'purpose',
                minWidth: 150
              },
              {
                title: '合同状态',
                key: 'purContractState',
                minWidth: 150
              },
              {
                title: '申购说明',
                key: 'applyAccount',
                minWidth: 150
              }
            ]
          } else {
            this.columns = [
              {
                title: '序号',
                type: 'index',
                width: 60,
                align: 'center'
              },
              {
                title: '物料编号',
                key: 'materialCode',
                minWidth: 150
              },
              {
                title: '物料名称',
                key: 'materialName',
                minWidth: 150
              },
              {
                title: '物料规格',
                key: 'spec',
                minWidth: 150
              },
              {
                title: '申购日期',
                key: 'applyTime',
                minWidth: 150
              },
              {
                title: '请购数量',
                key: 'purchaseQty',
                minWidth: 150
              },
              {
                title: '现有库存',
                key: 'stockQty',
                minWidth: 150
              },
              {
                title: '最长滞留时间',
                key: 'maxDelayTime',
                minWidth: 150
              },
              {
                title: '滞留数量',
                key: 'delayQuantity',
                minWidth: 150,
                renderHeader: h => {
                  return h('span', `滞留超过30天数量`)
                }
              },
              {
                title: '采购在途数量',
                key: 'onWayQuantity',
                minWidth: 150
              },
              {
                title: '安全库存',
                key: 'safetyQty',
                minWidth: 150
              },
              {
                title: '近30天消耗量',
                key: 'overUseQty',
                minWidth: 150
                // },
                // {
                //   title: '用途',
                //   key: 'purpose',
                //   minWidth: 150
              },
              {
                title: '申购说明',
                key: 'applyAccount',
                minWidth: 150
              }
            ]
          }
          this.$nextTick(() => {
            this.getList()
          })
          break
      }
    },
    changePage(pageNum) {
      this.params.pageNum = pageNum
      this.getList()
    },
    getHandleData() {
      this
        .$post('/api/storage-restructure/applyPurchase/flowStatistics', {
          type: this.params.type,
          beginTime: this.params.beginTime,
          endTime: this.params.endTime,
          keyword: this.keyword,
          technologyType: String(this.technologyType)
        })
        .then(res => {
          this.tableFilter[0].list = res.data.map(item => {
            return {
              ...item,
              value: item.value || '',
              label: item.key + '（' + item.count + '）'
            }
          })
        })
    },
    getList() {
      this.$Spin.show()
      this
        .$post('/api/storage-restructure/applyPurchase/page', {
          ...this.params,
          type: this.params.type,
          beginTime: this.params.beginTime,
          endTime: this.params.endTime,
          keyword: this.keyword,
          technologyType: String(this.technologyType)
        })
        .then(res => {
          this.data = res.data.records
          this.params.total = res.data.total
          this.$Spin.hide()
        })
    },
    addPurchase() {
      this.formType = 'add'
      this.show = true
    },
    toViewPurchase() {
      this.$router.push('material_apply')
    }
  }
}
</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;
        }
      }
    }
    .all {
      margin-right: 20px;
    }
    .row {
      white-space: nowrap;
      button {
        margin-right: 10px;
        min-width: 120px;
        &:last-child {
          margin-right: 0;
        }
      }
    }
  }
  .border {
    margin: 10px 0;
    width: 100%;
    height: 1px;
    background-color: #d7d7d7;
  }
  .table-filter {
    display: flex;
    justify-content: space-between;
  }
  .table-filter > div {
    background: #ffffff;
    border: 1px solid #dddcdc;
    font-size: 18px;
    height: 60px;
    line-height: 60px;
    color: #3f3f3f;
    ul {
      display: flex;
      li {
        list-style: none;
        font-size: 12px;
        color: #838383;
        line-height: 24px;
        padding: 6px 0;
        span {
          color: #3f3f3f;
          font-weight: bold;
          font-size: 18px;
          display: block;
        }
      }
    }
  }
  .fabric {
    display: flex;
    .label {
      width: 20%;
      text-align: center;
    }
    ul {
      width: 80%;
      li {
        width: 33.3%;
        text-align: center;
        line-height: 24px;
      }
    }
  }
  .ink {
    display: flex;
    .label {
      width: 25%;
      text-align: center;
    }
    ul {
      width: 75%;
      li {
        width: 50%;
        text-align: center;
      }
    }
  }
  .main {
    flex: 1;
    overflow: hidden;
  }
  .fabric-son {
    display: flex;
    background-color: white;
    margin: 8px 0;
    padding: 8px 0;
    .fabric-sun {
      width: 25%;
      display: flex;
      margin: 0 8px;
      .label {
        width: 25%;
        text-align: center;
      }
      ul {
        width: 75%;
        li {
          width: 33.3%;
          text-align: center;
          line-height: 24px;
        }
      }
    }
  }
  .fabric-son > div {
    background: #ffffff;
    border: 1px solid #dddcdc;
    font-size: 18px;
    height: 60px;
    line-height: 60px;
    color: #3f3f3f;
    ul {
      display: flex;
      li {
        list-style: none;
        font-size: 12px;
        color: #838383;
        line-height: 24px;
        padding: 6px 0;
        span {
          color: #3f3f3f;
          font-weight: bold;
          font-size: 18px;
          display: block;
        }
      }
    }
  }
}
</style>
