<template>
  <div class="app-container">
    <div v-permission="['SYSTEM']" class="appoint">费用返还约定: {{ userInfo.businessInfo && userInfo.businessInfo.feeRefundAgreement }}</div>
    <MyTablePage ref="table" v-bind="tableProps">
      <template slot="filter-handlers" v-permission="['root']">
        <el-button
          v-permission="['root']"
          type="primary"
          round
          @click="handerCreate"
        >新建记录</el-button>
      </template>
    </MyTablePage>
    <MyDialogForm ref="form" v-permission="['root']" v-bind="formProps" @confirm="confirm" />
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { list, add, businessList } from '@/api/feeRefund'

import { filterFields, tableFields, formFields } from '@/define/feeRefund'

import MyTablePage from '@/quickComponents/MyTablePage'
import MyDialogForm from '@/quickComponents/MyDialogForm'
export default {
  components: { MyTablePage, MyDialogForm },
  data() {
    return {
      tableProps: {
        listMethod: list,
        filterFields,
        hideFilter: true,
        tableFields: {
          ...tableFields,
        }
      },
      formProps: {
        title: '新增',
        fields: formFields,
        defaultValue: {},
      }
    }
  },
  computed: {
    ...mapGetters(['roles', 'userInfo'])
  },
  created() {
    if (this.roles.includes('root')) {
      this.setSelect()
    }
  },
  methods: {
    setSelect() {
      const list = businessList({ size: 9999999 }).then(res => res.d.records)
      this.tableProps.hideFilter = false
      this.$set(this.formProps.fields.businessInfoId.props, 'options', list)
      this.$set(this.tableProps.filterFields[0].props, 'options', list)
    },
    handerCreate() {
      this.formProps.defaultValue = {}
      this.$refs['form'].show()
    },
    handerDetail(row) {
      const { id } = row
      this.$router.push({
        path: '/staff/detail',
        query: { id }
      })
    },
    confirm({ data, close, hideLoading }) {
      add(data).then(res => {
        this.$message({
          type: 'success',
          message: '操作成功!'
        })
        this.$refs['table'].getList()
        close()
      }).catch(() => {
        hideLoading()
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.appoint{
  margin-bottom: 20px;
}
</style>
