<template>
  <el-dialog
    append-to-body
    :title="title"
    :visible.sync="dialogFormVisible"
    width="800"
    @close="close"
  >
    <div class="warehouse-item-container">
      <el-form ref="form" label-width="30px" :model="form">
        <el-row :gutter="20">
          <el-col :span="9">
            <div class="grid-content bg-purple">
              <el-form-item prop="warehouse_name">
                <el-form-item>
                  <el-select
                    v-model="form.warehouse_name"
                    clearable
                    disabled
                    :placeholder="__('请选择')"
                  >
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="10">
            <div class="grid-content bg-purple">
              <el-form-item prop="warehouse_item_quantity_max">
                <el-input
                  v-model="form.stock_bill_id"
                  disabled
                  :placeholder="__('单据编号')"
                />
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="9">
            <div class="grid-content bg-purple">
              <el-form-item prop="admin_id">
                <el-form-item>
                  <el-input
                    v-model="form.admin_id"
                    disabled
                    :placeholder="__('制单人')"
                  />
                </el-form-item>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="10">
            <div class="grid-content bg-purple">
              <el-form-item prop="stock_bill_date">
                <el-input
                  v-model="form.stock_bill_date"
                  disabled
                  :placeholder="__('单据日期')"
                />
              </el-form-item>
            </div>
          </el-col>
        </el-row>
      </el-form>

      <el-table v-loading="listLoading" border :data="list" height="400">
        <el-table-column
          align="center"
          :label="__('商品编号')"
          prop="item_id"
          show-overflow-tooltip
        />
        <el-table-column
          align="center"
          :label="__('商品名称')"
          prop="product_name"
          show-overflow-tooltip
        />

        <el-table-column
          align="center"
          :label="__('规格')"
          prop="item_name"
          show-overflow-tooltip
        />

        <el-table-column
          align="center"
          :label="__('数量')"
          prop="bill_item_quantity"
          show-overflow-tooltip
        />
        <el-table-column
          align="center"
          :label="__('备注')"
          prop="stock_bill_remark"
          show-overflow-tooltip
        />
      </el-table>
      <el-pagination
        background
        :current-page="queryForm.pageNo"
        :layout="layout"
        :page-size="queryForm.pageSize"
        :total="total"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      />
      <br />
      <br />
      <el-form ref="form" label-width="30px" :model="form">
        <el-row :gutter="20">
          <el-col :span="9">
            <div class="grid-content bg-purple">
              <el-form-item prop="stock_bill_remark">
                <el-form-item>
                  <el-input
                    v-model="form.stock_bill_remark"
                    disabled
                    :placeholder="__('备注')"
                  />
                </el-form-item>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="10">
            <div class="grid-content bg-purple">
              <el-form-item prop="employee_id">
                <el-input
                  v-model="form.employee_id"
                  disabled
                  :placeholder="__('经办人')"
                />
              </el-form-item>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close">{{ __('取消') }}</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import { translateTitle as __ } from '@/utils/i18n'

  import { getBillList } from '@/api/stock/bill'

  export default {
    name: 'StockBillTable',

    data() {
      return {
        options: [
          {
            value: '默认',
            label: this.__('默认'),
          },
          {
            value: '西郊',
            label: this.__('西郊'),
          },
        ],
        value: '',
        list: [],
        listLoading: true,
        dialogFormVisible: false,
        layout: 'total, sizes, prev, pager, next, jumper',
        total: 0,
        title: '',
        form: {},
        queryForm: {
          pageNo: 1,
          pageSize: 20,
        },
      }
    },
    created() {},
    methods: {
      __,

      handlExamine(row) {
        console.log(row.stock_bill_id)
        this.form = Object.assign({}, row)

        this.queryForm.stock_bill_id = row.stock_bill_id

        this.fetchData()
        this.dialogFormVisible = true
      },
      handleSizeChange(val) {
        this.queryForm.pageSize = val
        this.fetchData()
      },
      handleCurrentChange(val) {
        this.queryForm.pageNo = val
        this.fetchData()
      },
      queryData() {
        this.queryForm.pageNo = 1
        this.fetchData()
      },
      close() {
        this.dialogFormVisible = false
      },
      async fetchData() {
        this.listLoading = true
        const { data } = await getBillList(this.queryForm)
        this.list = data.items
        this.total = data.records
        this.listLoading = false
      },
    },
  }
</script>
