<template>
  <div class="app-container">

    <vxe-toolbar>
      <template #buttons>
        <vxe-button @click="addRow()">添加附加费</vxe-button>
      </template>
    </vxe-toolbar>

    <vxe-table ref="xTable" border="full" :data="data" show-overflow keep-source :edit-rules="rules"
      :edit-config="{ trigger: 'manual', mode: 'row', showStatus: true, autoClear: false }">
      <vxe-column field="Name" title="附加费类别" :edit-render="{ autofocus: '.vxe-input--inner', defaultValue: '' }">
        <template #edit="{ row }">
          <el-input v-model="row.Name" />
        </template>
      </vxe-column>
      <vxe-column field="SysncJS" formatter="formatBool" title="同步结算成本"
        :edit-render="{ autofocus: '.vxe-input--inner', defaultValue: '' }">
        <template #edit="{ row }">
          <el-checkbox v-model="row.SysncJS">自动同步</el-checkbox>
        </template>
      </vxe-column>
      <vxe-column field="CustomerRemark" title="收费标准" :edit-render="{ autofocus: '.vxe-input--inner', defaultValue: '' }">
        <template #edit="{ row }">
          <el-input v-model="row.CustomerRemark" />
        </template>
      </vxe-column>
      <vxe-column field="JSRemark" title="结算标准" :edit-render="{ autofocus: '.vxe-input--inner', defaultValue: '' }">
        <template #edit="{ row }">
          <el-input v-model="row.JSRemark" />
        </template>
      </vxe-column>
      <vxe-column field="SMPOtherFeeName" title="SMP映射"
        :edit-render="{ autofocus: '.vxe-input--inner', defaultValue: '' }">
        <template #edit="{ row }">
          <el-select v-model="row.SMPOtherFeeId" filterable placeholder="请选择" @change="changeSMPOtherFeeId(row)">
            <el-option v-for="item in getSMPDetailTypeList" :key="item.Id" :label="item.ItemName" :value="item.Id">
            </el-option>
          </el-select>
        </template>
      </vxe-column>
      <vxe-column field="Remark" title="备注" :edit-render="{ autofocus: '.vxe-input--inner', defaultValue: '' }">
        <template #edit="{ row }">
          <el-input v-model="row.Remark" />
        </template>
      </vxe-column>
      <vxe-column title="操作" width="160">
        <template #default="{ row }">
          <template v-if="$refs.xTable.isActiveByRow(row)">
            <vxe-button @click="saveRowEvent(row)">保存</vxe-button>
            <vxe-button @click="cancelRowEvent(row)">取消</vxe-button>
          </template>
          <template v-else>
            <vxe-button @click="editRowEvent(row)">编辑</vxe-button>
          </template>
        </template>
      </vxe-column>
    </vxe-table>
  </div>
</template>
<script>
import VXETable from 'vxe-table'
import { _getAll, _saveOrAdd } from '@/api/order/fba/index'
import { _get } from '@/api/order/notice'
import axios from 'axios';
import { getToken } from '@/utils/auth';

export default {
  name: 'FbaOtherFee',
  data() {
    return {
      isInsert: false,
      data: [],
      rules: {
        Name: [
          { required: true, message: "名称为必填项！" },
          { max: 32, message: '长度不可大于32' }, { min: 2, message: '长度不可小于2' }
        ],
        // SMPOtherFeeName: [{ required: true, message: "名称为必填项！" }],
        CustomerRemark: [{ required: true, message: "客户收费标准为必填项！" }, { max: 32, message: '长度不可大于32' }, { min: 2, message: '长度不可小于2' }],
        JSRemark: [{ required: true, message: "结算收费标准为必填项！" }, { max: 32, message: '长度不可大于32' }, { min: 2, message: '长度不可小于2' }],
      },
      getSMPDetailTypeList: []
    }
  },
  created() {
    this.loaddata();
    this.initGetSMPDetailType()
  },
  methods: {
    // SMP映射名称
    changeSMPOtherFeeId(row) {
      const findObj = this.getSMPDetailTypeList.find(item => item.Id === row.SMPOtherFeeId)
      if (findObj) {
        row.SMPOtherFeeName = findObj.ItemName
      } else {
        row.SMPOtherFeeName = undefined
      }
    },
    initGetSMPDetailType() {
      const that = this
      axios({
        method: 'get',
        url: 'https://wms.xingyunyi.cn/api/finance/GetSMPDetailType',
        headers: { 'token': getToken(), 'Content-Type': 'application/json' }
      }).then((res) => {
        if (res.status === 200) {
          that.getSMPDetailTypeList = res.data.data
        }
      }).catch((error) => {
        this.$message({ type: 'error', message: error })
      })
    },
    async addRow(row) {
      if (!this.isInsert) {
        this.isInsert = true
        const $table = this.$refs.xTable
        const record = {
          Name: null,
          SMPOtherFeeName: undefined,
          SysncJS: false,
          CustomerRemark: '',
          JSRemark: '',
          Remark: ''
        }
        const { row: newRow } = await $table.insertAt(record, row)
        await $table.setEditCell(newRow, 'Name')
      }
    },
    editRowEvent(row) {
      const $table = this.$refs.xTable
      $table.setActiveRow(row)
    },
    async validRow(row) {
      const $table = this.$refs.xTable
      const errMap = await $table.validate(row).catch(errMap => errMap)
      debugger
      return !errMap
    },
    async saveRowEvent(row) {
      debugger
      const $table = this.$refs.xTable
      var isValid = await this.validRow(row)
      if (isValid) {
        this.loading = true
        _saveOrAdd(row).then(() => {
          this.loading = false
          VXETable.modal.message({ content: '保存成功！', status: 'success' })
          this.loaddata()
          $table.clearActived()
        })
      }
    },
    loaddata() {
      _getAll().then((r) => {
        debugger
        this.data = r
      });
    },
    cancelRowEvent(row) {
      console.log(row);
      const $table = this.$refs.xTable
      $table.clearActived().then(() => {
        // 还原行数据
        $table.revertData(row)
      })
    }
  }
}
</script>
