<template>
  <div ref='container'>
    <a-modal
      :title='title'
      :width='1000'
      :visible='visible'
      :confirmLoading='confirmLoading'
      :getContainer='() => $refs.container'
      :maskStyle="{'top':'93px','left':'154px'}"
      :wrapClassName='wrapClassNameInfo()'
      :mask='isDesktop()'
      :maskClosable='false'
      @ok='handleOk'
      @cancel='handleCancel'
      cancelText='取消'
      okText='提交'
      style='top:5%;height: 85%;'>
      <template slot='footer'>
        <a-button key='back' v-if='isReadOnly' @click='handleCancel'>
          取消
        </a-button>
      </template>
      <a-spin :spinning='confirmLoading'>
        <a-row :gutter='24'>
          <a-col :md='8' :sm='24'>
            <a-form-item :labelCol='labelCol' :wrapperCol='wrapperCol' label='上传发票' data-step='11'>
              <j-upload v-model='fileList' bizPath='bill'></j-upload>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter='24'>
          <a-col :lg='8' :md='12' :sm='24'>
            <a-form-item :labelCol='labelCol' :wrapperCol='wrapperCol' label='发票号' data-step='7'>
              <a-input placeholder='发票号' :readOnly='true' />
            </a-form-item>
          </a-col>
          <a-col :lg='8' :md='12' :sm='24'>
            <a-form-item :labelCol='labelCol' :wrapperCol='wrapperCol' label='价税合计' data-step='7'>
              <a-input placeholder='价税合计' :readOnly='true' />
            </a-form-item>
          </a-col>
        </a-row>

        <a-table
          ref='table'
          size='middle'
          bordered
          rowKey='id'
          :columns='columns'
          :dataSource='dataSource'
          :pagination='false'
          :scroll='scroll'
          :loading='loading'
          @change='handleTableChange'>
            <span slot='action' slot-scope='text, record'>
              <a @click='handleEdit(record)'>编辑</a>
              <a-divider type='vertical' />
              <a-popconfirm title='确定删除吗?' @confirm='() => handleDelete(record.id)'>
                <a>删除</a>
              </a-popconfirm>
            </span>
<!--          &lt;!&ndash; 状态渲染模板 &ndash;&gt;-->
<!--          <template slot='customRenderFlag' slot-scope='enabled'>-->
<!--            <a-tag v-if='enabled==1' color='green'>启用</a-tag>-->
<!--            <a-tag v-if='enabled==0' color='orange'>禁用</a-tag>-->
<!--          </template>-->
        </a-table>
      </a-spin>
    </a-modal>
  </div>
</template>
<script>
import Vue from 'vue'
import { ACCESS_TOKEN } from '@/store/mutation-types'
import { mixinDevice } from '@/utils/mixin'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import JUpload from '@/components/jeecg/JUpload'

export default {
  name: 'PurchaseInInvoice',
  components: { JUpload },
  mixins: [mixinDevice, JeecgListMixin],
  data() {
    return {
      title: '操作',
      visible: false,
      isReadOnly: false,
      disableSubmit: false,
      dateFormat: 'YYYY-MM-DD',
      fileList: [],
      validatorRules: {},
      model: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      uploadLoading: false,
      confirmLoading: false,
      headers: {},
      form: this.$form.createForm(this),
      // 表头
      columns: [
        {
          title: '序号',
          dataIndex: '',
          key: 'rowIndex',
          width: 40,
          align: 'center',
          customRender: function(t, r, index) {
            return parseInt(index) + 1
          }
        },
        {
          title: '操作',
          dataIndex: 'action',
          width: 100,
          align: 'center',
          scopedSlots: { customRender: 'action' }
        },
        { title: '商品名称 ', dataIndex: 'itemName', width: 120 },
        { title: '规格型号', dataIndex: 'specModel', width: 120 },
        { title: '单位', dataIndex: 'unit', width: 80 },
        { title: '数量', dataIndex: 'quantity', width: 80 },
        { title: '单价', dataIndex: 'price', width: 120},
        { title: '金额', dataIndex: 'amount', width: 150 },
        { title: '税率', dataIndex: 'taxRate', width: 80 },
        { title: '税额', dataIndex: 'taxAmount', width: 60 },
      ]
    }
  },
  created() {
    const token = Vue.ls.get(ACCESS_TOKEN)
    this.headers = { 'X-Access-Token': token }
  },
  methods: {
    open(record) {
      this.form.resetFields()
      this.visible = true
    },
    close() {
      this.$emit('close')
      this.visible = false
      this.disableSubmit = false
    },
    handleOk() {
      const that = this
      // 触发表单验证
      this.form.validateFields((err, values) => {
        if (!err) {
          that.confirmLoading = true
          let formData = Object.assign(this.model, values)
          let obj
          if (!this.model.id) {
            formData.id = this.userId
            obj = addUser(formData)
          } else {
            obj = editUser(formData)
          }
          obj.then((res) => {
            if (res.code === 200) {
              that.$emit('ok')
              that.close()
            } else {
              that.$message.warning(res.data.message)
            }
          }).finally(() => {
            that.confirmLoading = false
          })
        }
      })
    },
    handleCancel() {
      this.close()
    }
  }
}
</script>

<style scoped>

</style>