<!-- 现场库存盘点 -->
<template>
  <div class="container">
    <div class="top">
      <div class="left" @click="reset">
        <p class="text">现场库存总额</p>
        <p class="num">{{ titleData.totalPrice }}元</p>
      </div>
      <div class="right">
        <div class="type">
          <div
            class="row"
            v-for="(techItem, techIndex) in techList"
            :key="techIndex"
          >
            <span style="margin-right: 0">
              {{ techItem.text }}
              <span style="color: red">
                {{
                  titleData.stockUserPriceList.filter(
                    data => data.technologyType == techItem.value
                  )[0] &&
                    titleData.stockUserPriceList.filter(
                      data => data.technologyType == techItem.value
                    )[0].amount
                }}
                (元)
              </span> </span
            >&nbsp;&nbsp;&nbsp;：
            <Button
              :type="
                btnIndex === index && btnType === techItem.text
                  ? 'primary'
                  : 'default'
              "
              @click="
                userClick(item.userId, techItem.value, techItem.text, index)
              "
              v-for="(item, index) in titleData.stockUserPriceList.filter(
                data => data.technologyType == techItem.value
              )[0] &&
                titleData.stockUserPriceList.filter(
                  data => data.technologyType == techItem.value
                )[0].userPriceList"
              :key="index"
            >
              {{ item.userName + ':' }}
              <span style="color: red">{{ item.totalPrice || 0 }}元</span>
            </Button>
          </div>
        </div>
      </div>
    </div>
    <div class="btn">
      <Button type="error" @click="addStoreShow = true">新增现场库存</Button>
    </div>
    <div class="bottom">
      <my-table
        ref="table"
        :data="data.userStockPageList.list"
        :columns="columns"
        :table-page="params"
        :is-show-filter="false"
        @on-change="changePage"
      >
        <div style="margin-right: 20px;line-height: 32px;" slot="total">
          <!--          合计：共<span style="color: red;">{{ data.userStockPageList.totalCount || 0 }}</span>条，-->
          合计：现场库存卷数<span style="color: red;">{{
            data.totalCount || 0
          }}</span
          >， 现场库存米数<span style="color: red;">{{
            data.totalQuantity || 0
          }}</span>
        </div>
      </my-table>
    </div>
    <modal v-model="show" class-name="vertical-center-modal" width="500px">
      <div class="title" slot="header">现场库存修正</div>
      <div class="footer" slot="footer">
        <Button @click="cfm" class="btn" type="primary">提交</Button>
      </div>
      <div>
        <div class="wrap">
          <div class="row">
            <div class="col">
              <div class="label">面料名称：</div>
              <div class="value">
                <Input v-model="formData.materialName" disabled />
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col">
              <div class="label">面料类型：</div>
              <div class="value">
                <Input v-model="formData.materialCategory" disabled />
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col">
              <div class="label">物料编码：</div>
              <div class="value">
                <Input v-model="formData.materialCode" disabled />
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col">
              <div class="label">所属人员：</div>
              <div class="value">
                <Input v-model="formData.userName" disabled />
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col">
              <div class="label">提交时间：</div>
              <div class="value">
                <DatePicker
                  v-model="formData.dt"
                  type="date"
                  placeholder="请选择时间"
                  style="width: 100%;"
                ></DatePicker>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col">
              <div class="label">现场库存卷数：</div>
              <div class="value">
                <Input v-model="formData.count" />
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col">
              <div class="label">现场库存米数：</div>
              <div class="value">
                <Input v-model="formData.quantity" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </modal>
    <add-store-form v-model="addStoreShow" @getlist="getList"></add-store-form>
    <change-store-form
      v-model="changeStoreShow"
      :data="formData"
      @getlist="getList"
    ></change-store-form>
  </div>
</template>

<script>
import { GetUserStockStat, GetUserStockList, EditUserStock } from '@/api/stock'
import { GetTechnologyTypList } from '@/api/baseData'
import MyTable from '_c/my-table/my-table'
import AddStoreForm from './add-store-form'
import ChangeStoreForm from './change-store-form'
export default {
  name: 'site_inventory',
  components: {
    MyTable,
    AddStoreForm,
    ChangeStoreForm
  },
  data () {
    return {
      formData: {},
      show: false,
      addStoreShow: false,
      changeStoreShow: false,
      titleData: {
        stockUserPriceList: [],
        directInkPrinterPrice: 0,
        directInkPrinterUserList: [],
        heatPrinterPrice: 0,
        heatPrinterUserList: [],
        paperPrinterPrice: 0,
        paperPrinterUserList: [],
        totalPrice: 0
      },
      tabIndex: 0,
      userId: '',
      technologyType: '',
      btnType: '',
      btnIndex: '',
      data: {
        userStockPageList: {}
      },
      techList: [], // 工艺类型列表
      columns: [
        {
          title: '排名',
          type: 'index',
          width: 60,
          align: 'center'
        },
        {
          title: '面料名称',
          key: 'materialName',
          minWidth: 150
        },
        {
          title: '规格',
          key: 'spec',
          minWidth: 150
        },
        {
          title: '编码',
          key: 'materialCode',
          minWidth: 150
        },
        {
          title: '类型',
          key: 'materialCategory',
          minWidth: 150
        },
        {
          title: '所属人员',
          key: 'userName',
          minWidth: 150
        },
        {
          title: '现场库存卷数',
          key: 'count',
          minWidth: 150
        },
        {
          title: '现场库存米数',
          key: 'quantity',
          minWidth: 150
        },
        {
          title: '现场库存金额',
          key: 'totalPrice',
          minWidth: 150
        },
        {
          title: '主管核对',
          key: 'amount',
          fixed: 'right',
          align: 'center',
          minWidth: 150,
          render: (h, params) => {
            return h('div', [
              h(
                'Button',
                {
                  props: {
                    size: 'small'
                  },
                  style: {
                    marginRight: '10px'
                  },
                  on: {
                    click: () => {
                      this.formData = { ...params.row }
                      this.show = true
                    }
                  }
                },
                '修改'
              ),
              h(
                'Button',
                {
                  props: {
                    size: 'small'
                  },
                  style: {},
                  on: {
                    click: () => {
                      this.formData = { ...params.row }
                      this.changeStoreShow = true
                    }
                  }
                },
                '转仓'
              )
            ])
          }
        }
      ],
      params: {
        pageIndex: 1,
        pageSize: 20,
        total: 0
      },
      beginTime: '',
      endTime: ''
    }
  },
  methods: {
    reset () {
      this.params.pageIndex = 1
      this.userId = ''
      this.technologyType = ''
      this.btnType = ''
      this.btnIndex = ''
      this.getList()
    },
    cfm () {
      if (!this.formData.dt) return this.$Message.error('请选择提交时间')
      if (this.formData.count < 0)
        return this.$Message.error('现场库存卷数不能小于0！')
      if (this.formData.quantity < 0)
        return this.$Message.error('现场库存米数不能小于0！')
      EditUserStock({
        id: this.formData.id,
        count: this.formData.count,
        qty: this.formData.quantity,
        dt: this.formData.dt
      }).then(res => {
        if (res.code === 0) {
          this.$Message.info(res.msg || '操作成功！')
          this.show = false
          this.formData = {}
          this.getList()
        }
      })
    },
    userClick (value = '', technologyType = '', type, index) {
      this.params.pageIndex = 1
      this.userId = value
      this.technologyType = technologyType
      this.getList()
      if (value) {
        this.btnType = type
        this.btnIndex = index
      } else {
        this.btnType = ''
        this.btnIndex = ''
      }
    },
    /* 选项卡切换 */
    changePage (pageIndex) {
      this.params.pageIndex = pageIndex
      this.getList()
    },
    getUserStockStat () {
      GetUserStockStat().then(res => {
        if (res.code === 0) {
          this.titleData = res.result
        }
      })
    },
    getTechnologyTypList () {
      GetTechnologyTypList().then(res => {
        if (res.code === 0) {
          this.techList = res.result
        }
      })
    },
    getList () {
      GetUserStockList({
        ...this.params,
        userId: this.userId,
        technologyType: this.technologyType
      }).then(res => {
        if (res.code === 0) {
          this.data = res.result
          this.params.total = res.result.userStockPageList.totalCount
        }
      })
    }
  },
  mounted () {
    this.getUserStockStat()
    this.getTechnologyTypList()
    this.getList()
  }
}
</script>

<style lang="less" scoped>
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  .title {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    font-size: 16px;
    font-weight: bold;
    .text {
      margin-left: 10px;
    }
  }
  .center {
    margin: 10px 0;
    text-align: right;
  }
  .bottom {
    position: relative;
    padding: 10px;
    flex: 1;
    overflow: hidden;
    background: #ffffff;
    display: flex;
    flex-direction: column;
  }
  .tabs {
    margin-right: 10px;
    flex: 1;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 5px;
    background-color: #ffffff;
    .tab {
      flex: 1;
      padding: 5px 2px;
      text-align: center;
      border: 1px solid #e6e6e6;
      border-right: none;
      font-weight: bold;
      cursor: pointer;
      &:last-child {
        border-right: 1px solid #e6e6e6;
      }
      &.active {
        background-color: #3f92f9;
        color: #ffffff;
      }
    }
  }
  .top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .left {
      padding: 0 40px;
      height: 100%;
      border: 3px solid #1876e5;
      border-radius: 5px;
      margin-right: 20px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      .text {
        padding-bottom: 10px;
        font-size: 16px;
        font-weight: bold;
      }
      .num {
        font-size: 16px;
        font-weight: bold;
        color: red;
      }
    }
    .right {
      flex: 3;
      overflow: hidden;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .all {
        margin-right: 20px;
      }
      .type {
        flex: 1;
        overflow: auto;
        .row {
          margin-bottom: 10px;
          white-space: nowrap;
          line-height: 32px;
          button {
            margin-right: 10px;
            min-width: 120px;
            &:last-child {
              margin-right: 0;
            }
          }
        }
      }
    }
  }
  .btn {
    padding: 10px 0;
    text-align: right;
  }
}
.wrap {
  .row {
    margin-bottom: 10px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .col {
    display: flex;
    align-items: center;
    .label {
      width: 100px;
      text-align: right;
    }
    .value {
      flex: 1;
      overflow: hidden;
    }
  }
}
</style>
