<template>
  <a-card :bordered='false' v-show='visible' class='card' :title='modalTitle'>
    <a-row :gutter='48' slot='extra'>
      <a-col :md='48' :sm='48'>
              <span class='table-page-search-submitButtons' style='float: right'>
                <a-button style='margin-left: 8px' type='default' @click='handleCancel()'>返回</a-button>
              </span>
      </a-col>
    </a-row>
    <detail-list title='' :col='2'>
      <detail-list-item term='采购单'>{{ model.name }}</detail-list-item>
      <detail-list-item term='仓库名称'>{{ model.spareStoreName }}</detail-list-item>
      <detail-list-item term='状态'>{{ BaseTool.Object.getField(this.statusMap, model.status) }}</detail-list-item>
      <detail-list-item term='采购总金额'>{{ model.totalAmount }}</detail-list-item>
      <detail-list-item term='采购备件总数'>{{ model.totalNum }}</detail-list-item>
      <detail-list-item term='采购人'>{{ model.createdUserName }}</detail-list-item>
      <detail-list-item term='发起时间'>{{ model.createdTime }}</detail-list-item>
      <detail-list-item term='修改人'>{{ model.updateUserName }}</detail-list-item>
      <detail-list-item term='修改时间'>{{ model.updateTime }}</detail-list-item>
    </detail-list>
    <title-divider title="采购明细" width="90px"></title-divider>
    <a-table
      bordered
      :data-source="data"
      :columns="columns"
      tableLayout="auto"
      rowKey="id"
      :row-selection="rowSelection">
      <template slot="num" slot-scope="text, record">
        <div class="editable-cell-input-wrapper">
          <a-input :value="text" :id="record.id + ',num'" @change="$event => onQuantityChange($event, record.id, 'num')" />
        </div>
      </template>
      <template slot="price" slot-scope="text, record">
        <div class="editable-cell-input-wrapper">
          <a-input :value="text" :id="record.id + ',price'" @change="$event => onPriceChange($event, record.id, 'price')" />
        </div>
      </template>
      <template slot="totalPrice" slot-scope="text, record">
        <div class="editable-cell-input-wrapper">
          <a-input :value="text" :id="record.id + ',totalPrice'" @change="$event => onTotalPriceChange($event, record.id, 'totalPrice')" />
        </div>
      </template>
      <span slot="action" slot-scope="record">
        <template>
          <a-divider type="vertical" />
          <a-popconfirm title="是否要删除该条数据？" @confirm="handleDelOne(record.id)">
            <a>删除</a>
          </a-popconfirm>
        </template>
      </span>
    </a-table>
    <a-row :gutter="48">
      <a-col :md="48" :sm="48">
        <span class="table-page-search-submitButtons" style="float: right;margin-top: 10px">
          <a-button type="primary" @click="save()">提交</a-button>
<!--          <a-button style="margin-left: 8px" @click="handleCancel()">返回</a-button>-->
        </span>
      </a-col>
    </a-row>
  </a-card>
</template>

<script>
import DetailList from '@/components/tools/DetailList'
import { updateDetailList, deletePurchaseStoreFormDetail } from '@/api/store/purchaseformdetail'

const DetailListItem = DetailList.Item

export default {
  name: 'PurchaseStoreFormDetail',
  components: {
    DetailList,
    DetailListItem
  },
  data () {
    return {
      confirmLoading: false,
      mdl: {},
      modalTitle: null,
      visible: false,
      // 下拉框map
      statusMap: {},
      model: {
        'createdUserName': null,
        'createdTime': null,
        'updateUserName': null,
        'updateTime': null,
        'status': null,
        'totalAmount': null,
        'totalNum': null,
        'name': null,
        'spareStoreName': null,
        'detailList': null,
        'sparePartInfoName': null
      },
      rowSelection: {
        onChange: (selectedRowKeys, selectedRows) => {
          this.selectedRowKeys = selectedRowKeys
          this.selectedRows = selectedRows
        }
      },
      // 表头
      columns: [
        {
          title: '序号',
          dataIndex: 'index',
          customRender: (text, record, index) => {
            return index + 1
          }
        },
        {
          title: '备件名称',
          dataIndex: 'sparePartInfoName'
        },
        {
          title: '采购数量',
          dataIndex: 'num',
          width: 120,
          scopedSlots: { customRender: 'num' }
        },
        {
          title: '单价',
          dataIndex: 'price',
          width: 150,
          scopedSlots: { customRender: 'price' }
        },
        {
          title: '总价',
          dataIndex: 'totalPrice',
          width: 150,
          scopedSlots: { customRender: 'totalPrice' }
        },
        {
          title: '操作',
          key: 'action',
          align: 'center',
          scopedSlots: { customRender: 'action' }
        }
      ],
      data: [],
      user: this.$store.getters.userInfo,
      selectedRowKeys: [],
      selectedRows: [],
      options: {
        rowSelection: {
          selectedRowKeys: this.selectedRowKeys
        }
      }
    }
  },
  created () {
    // 下拉框map
    this.statusMap = this.DictCache.getLabelByValueMapByType(this.DictCache.TYPE.PURCHASE_STORE_FORM_STATUS)
  },
  methods: {
    base (record) {
      this.visible = true
      this.modalTitle = '详情'
      this.model = record
      this.data = record.detailList
    },
    handleCancel () {
      this.visible = false
      this.confirmLoading = false
      this.$emit('ok')
    },
    save () {
      if (this.data.length === 0) {
        this.$message.error('无修改内容')
        this.confirmLoading = false
        return
      }
      // 日期处理
      if (this.BaseTool.String.isBlank(this.model.id)) {
        console.log('just fun')
      } else {
        const parameters = { id: this.model.id, data: this.data }
        updateDetailList(parameters)
          .then(() => {
            this.handleCancel()
          }).catch(() => {
            this.confirmLoading = false
          })
      }
    },
    onQuantityChange (e, id, attr) {
      const value = e.target.value
      console.log(value)
      if (value !== 0 && !value) {
        return
      }
      const data = [...this.data]
      const target = data.find(item => item.id === id)
      if (target) {
        target[attr] = value
        target['totalPrice'] = Math.floor(value * target['price'] * 10000) / 10000
        target['updateFlag'] = 1
        this.data = data
      }
    },
    onPriceChange (e, id, attr) {
      const value = e.target.value
      console.log(value)
      if (value !== 0 && !value) {
        return
      }
      const data = [...this.data]
      const target = data.find(item => item.id === id)
      if (target) {
        target[attr] = value
        target['totalPrice'] = Math.floor(value * target['num'] * 10000) / 10000
        target['updateFlag'] = 1
        this.data = data
      }
    },
    onTotalPriceChange (e, id, attr) {
      const value = e.target.value
      console.log(value)
      if (value !== 0 && !value) {
        return
      }
      const data = [...this.data]
      const target = data.find(item => item.id === id)
      if (target) {
        target[attr] = value
        target['price'] = Math.floor(value * 10000 / target['num']) / 10000
        target['updateFlag'] = 1
        this.data = data
      }
    },
    handleDelOne (id) {
      const parameters = { id: id }
      deletePurchaseStoreFormDetail(parameters)
        .then(() => {
          const data = [...this.data]
          this.data = data.filter(item => id !== item.id)
          this.handleCancel()
        }).catch(() => {
          this.confirmLoading = false
        })
    }
  }
}
</script>
