<!-- 供应商价格维护 -->
<template>
  <div class="container">
    <Modal v-model="modal" width="800px">
      <div class="title" slot="header">
        收款账号维护
      </div>
      <div slot="footer" class="footer">
        <Button @click="cancel" class="btn" type="primary">取消</Button>
      </div>
      <div class="content">
        <my-table
          :data="list"
          :columns="columns"
          :table-filter="tableFilter"
          :table-page="params"
          :is-show-page="false"
          @event-handle="eventHandle"
          @on-change="changePage"
          :height="400">
        </my-table>
        <my-modal-form
          v-model="show"
          title="添加收款账号"
          width="500px"
          :data="formData"
          :type="formType"
          :config="formConfig"
          :rule-validate="ruleValidate"
          @confirm="cfm">
        </my-modal-form>
      </div>
    </Modal>
  </div>
</template>

<script>
import { GetSupplierBank, AddSupplierBank, EditSupplierBank, DeleteSupplierBank } from '@/api/baseData'
import MyTable from '_c/my-table/my-table'
import MyModalForm from '_c/my-modal-form/my-modal-form'
export default {
  name: 'provider_price_maintenance',
  components: {
    MyTable,
    MyModalForm
  },
  props: {
    value: {
      type: Boolean,
      default: false,
      require: true
    },
    data: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  watch: {
    value: {
      handler (n) {
        this.modal = n
      },
      immediate: true
    },
    modal (n) {
      this.$emit('input', n)
      if (n) {
        this.getList()
      }
    }
  },
  data () {
    return {
      modal: false,
      show: false,
      list: [],
      formType: '',
      formData: {},
      ruleValidate: {
        bankAccoutName: [
          { required: true, message: '账户名称不能为空', trigger: 'blur' }
        ],
        accoutName: [
          { required: true, message: '户名不能为空', trigger: 'blur' }
        ],
        openBank: [
          { required: true, message: '开户银行不能为空', trigger: 'blur' }
        ],
        bankAccout: [
          { required: true, message: '账号不能为空', trigger: 'blur' }
        ]
      },
      formConfig: [
        {
          type: 'input',
          label: '账户名称',
          key: 'bankAccoutName'
        },
        {
          type: 'input',
          label: '户名',
          key: 'accoutName'
        },
        {
          type: 'input',
          label: '开户银行',
          key: 'openBank'
        },
        {
          type: 'input',
          label: '账号',
          key: 'bankAccout'
        }
      ],
      columns: [
        {
          title: '序号',
          type: 'index',
          width: 60,
          align: 'center'
        },
        {
          title: '账户名称',
          key: 'bankAccoutName',
          minWidth: 150
        },
        {
          title: '户名',
          key: 'accoutName',
          minWidth: 150
        },
        {
          title: '开户银行',
          key: 'openBank',
          minWidth: 150
        },
        {
          title: '账号',
          key: 'bankAccout',
          minWidth: 150
        },
        {
          title: '操作',
          key: 'action',
          align: 'center',
          width: '150px',
          fixed: 'right',
          render: (h, params) => {
            return h('div', [
              h(
                'Icon',
                {
                  props: {
                    custom: 'iconfont icon-edit',
                    size: '20',
                    color: '#087BE1'
                  },
                  style: {
                    marginRight: '20px'
                  },
                  on: {
                    click: () => {
                      this.formType = 'edit'
                      this.formData = { ...params.row }
                      this.show = true
                    }
                  }
                },
                '调价'
              ),
              h(
                'Icon',
                {
                  props: {
                    custom: 'iconfont icon-delete',
                    size: '20',
                    color: 'red'
                  },
                  on: {
                    click: () => {
                      this.$MyModal.show({ text: '是否删除？' }).$on('confirm', () => {
                        DeleteSupplierBank({
                          id: params.row.id
                        }).then(res => {
                          if (res.code === 0) {
                            this.$Message.info(res.msg)
                            this.getList()
                          }
                        })
                      })
                    }
                  }
                },
                '删除'
              )
            ])
          }
        }
      ],
      tableFilter: [
        {
          name: 'Button',
          type: 'primary',
          text: '添加',
          align: 'right',
          e: 'add'
        }
      ],
      params: {
        pageIndex: 1,
        pageSize: 20,
        total: 0
      }
    }
  },
  methods: {
    cancel () {
      this.modal = false
    },
    cfm (type, formData) {
      console.log(type)
      console.log(formData)
      if (type === 'add') {
        AddSupplierBank({
          accoutName: formData.accoutName,
          bankAccout: formData.bankAccout,
          bankAccoutName: formData.bankAccoutName,
          openBank: formData.openBank
        }).then(res => {
          if (res.code === 0) {
            this.show = false
            this.$Message.info(res.msg)
            this.getList()
          }
        })
      } else if (type === 'edit') {
        EditSupplierBank({
          id: formData.id,
          accoutName: formData.accoutName,
          bankAccout: formData.bankAccout,
          bankAccoutName: formData.bankAccoutName,
          openBank: formData.openBank
        }).then(res => {
          if (res.code === 0) {
            this.show = false
            this.$Message.info(res.msg)
            this.getList()
          }
        })
      }
    },
    // 检索条件事件处理
    eventHandle (option) {
      switch (option._evnet) {
        case 'add':
          this.formType = 'add'
          this.show = true
          break
      }
    },
    changePage (pageIndex) {
      this.params.pageIndex = pageIndex
      this.getList()
    },
    getList () {
      GetSupplierBank(this.params).then(res => {
        if (res.code === 0) {
          this.list = res.result
          this.params.total = res.result.totalCount
        }
      })
    }
  },
  mounted () {
  }
}
</script>

<style lang="less" scoped>
.container {
  height: 100%;
}
</style>
