<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="no">
        <span>{{ }}</span>
      </template>
      <!-- 门店结算价 -->
      <template slot="advicePrice" slot-scope="text, record" >
        <a-input-number
          id="storeSettlementPrice-price"
          :value="record.advicePrice"
          :precision="2"
          :min="0"
          :max="999"
          style="width: 70%;"
          placeholder="请输入回收价格"
          @change="e => handleChange(e, record.id)" />
        <!-- <template v-else> {{ record.accountPrice }} </template> -->
      </template>
      <!-- 操作 -->
      <template slot="action" slot-scope="text, record">
        <div class="editable-row-operations">
          <span >
            <!-- <a @click="() => save(record.id, record.accountPrice)" style="margin-right: 8px;">保存</a> -->
            <a-popconfirm title="确定要保存吗?" @confirm="() => save(record.id,record.advicePrice)">
              <a>保存</a>
            </a-popconfirm>
          </span>
          <!-- <span v-else>
            <a v-if="$hasPermissions('B_store_jsj_edit')" :disabled="editingId !== ''" @click="() => edit(record.id)">编辑</a>
            <span v-else>--</span>
          </span> -->
        </div>
      </template>
    </a-table>
  </a-card>
</template>

<script>
import { gePriceList, savPrice } from '@/api/recoveryManage.js'
export default {
  data () {
    return {
      loadingPage: false, // 列表加载状态
      type: '',
      // 表头
      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.getListData()
  },
  methods: {
    callback (key) {
      this.type = key
      gePriceList({ adviceType: key }).then(res => {
        if (res.status == 200) {
          this.loadData = res.data
          this.loadData.forEach((item, index) => {
            item.no = index + 1
          })
        }
      })
      // this.save()
      console.log(key, this.type)
    },
    getListData () {
      gePriceList({ adviceType: '1' }).then(res => {
        if (res.status == 200) {
          this.loadData = res.data
          this.loadData.forEach((item, index) => {
            item.no = index + 1
          })
        }
      })
    },
    // 改变回收价格
    handleChange (value, id) {
      const newData = [...this.loadData]
      const target = newData.filter(item => id === item.id)[0]
      console.log(target, '-----------')
      if (target) {
        target['advicePrice'] = value
        this.loadData = newData
      }
    },
    // 保存价格
    save (id, advicePrice) {
      savPrice({ adviceType: this.type ? this.type : 1, id: id, advicePrice: advicePrice }).then(res => {
        if (res.status == 200) {
          this.$message.success(res.message)
          gePriceList({ adviceType: this.type ? this.type : 1 }).then(res => {
            if (res.status == 200) {
              this.loadData = res.data
              this.loadData.forEach((item, index) => {
                item.no = index + 1
              })
            }
          })
        } else {
          this.$message.warning(res.message)
        }
      })
    }

  }
}
</script>

<style>
</style>
