<template>
  <a-card :bordered="false">
    <a-tabs type="card" @change="callback">
      <a-tab-pane key="1" tab="上门回收价格设置">
      </a-tab-pane>
      <a-tab-pane key="2" tab="工厂回收价格设置">
      </a-tab-pane>
    </a-tabs>
    <a-table
      class="table"
      ref="table"
      size="default"
      :rowKey="record => record.id"
      :columns="columns"
      :dataSource="loadData"
      :pagination="false"
      :scroll="{ y: 650 }"
      :loading="loadingPage"
      bordered>
      <!-- 门店结算价 -->
      <template slot="advicePrice" slot-scope="text, record" >
        <a-input-number
          id="storeSettlementPrice-price"
          v-model="record.advicePrice"
          :precision="2"
          :min="1"
          :max="999"
          style="width: 70%;"
          placeholder="请输入回收价格"
        />
      </template>
      <!-- 操作 -->
      <template slot="action" slot-scope="text, record">
        <div class="editable-row-operations">
          <span v-hasPermission="'B_recoveryPriceSet_save'">
            <a-popconfirm title="确定要保存吗?" @confirm="() => save(record.id,record.advicePrice)" @cancel="record.advicePrice = record.currentValue">
              <template slot="title">
                <p> 保存</p>
                <p> 取消 </p>
              </template>
              <a>保存</a>
            </a-popconfirm>
          </span>
        </div>
      </template>
    </a-table>
  </a-card>
</template>

<script>
import { gePriceList, savPrice } from '@/api/recoveryManage.js'
export default {
  data () {
    return {
      loadingPage: false, // 列表加载状态
      type: '1',
      // 表头
      columns: [
        { title: '序号', dataIndex: 'no', width: 60, align: 'center' },
        { title: '回收类型', dataIndex: 'fatherName', width: 100, align: 'center' },
        { title: '回收名称', dataIndex: 'name', width: 100, align: 'center' },
        { title: '回收价格（元/kg）', dataIndex: 'advicePrice', width: 100, align: 'center', scopedSlots: { customRender: 'advicePrice' } },
        { title: '操作', scopedSlots: { customRender: 'action' }, width: 100, align: 'center' }
      ],
      //  表格列表数据
      loadData: []
    }
  },
  mounted () {
	  this.type = 1
	  this.loadData = []
    this.getListData()
  },
  methods: {
    callback (key) {
      this.type = key
	  this.getListData()
      // this.save()
      console.log(key, this.type)
    },
    getListData () {
      gePriceList({ adviceType: this.type }).then(res => {
        if (res.status == 200) {
          this.loadData = res.data
          this.loadData.forEach((item, index) => {
            item.no = index + 1
            item.currentValue = item.advicePrice || ''
          })
        }
      })
    },
    // 保存价格
    save (id, advicePrice) {
      const params = { adviceType: this.type, id: id, advicePrice: advicePrice }
      if (!params.advicePrice) {
        this.$message.warning('回收价格不能为空')
        return false
      }
      savPrice(params).then(res => {
        if (res.status == 200) {
          this.$message.success(res.message)
		  this.getListData()
        } else {
          this.$message.warning(res.message)
        }
      })
    }
  }
}
</script>

<style>
</style>
