<template>
  <div>
    <el-dialog title="公共方法配置" :visible.sync="dialog" width="950px" :close-on-click-modal="false" top="50px">
      <p class="top-tip fc-theme">公共方法列表
        <el-button type="primary" v-permission="'method_list_add'" @click="add">添加</el-button>
      </p>
      <el-table :data="tableData" stripe v-loading="tableLoading" fit class="marginT-10 order-table" border
                :max-height="vheight">
        <el-table-column label="方法ID" prop="id"></el-table-column>
        <el-table-column label="方法路径" prop="method_path"></el-table-column>
        <el-table-column label="方法描述" prop="method_desc"></el-table-column>
        <el-table-column label="操作" width="180">
          <template slot-scope="scope">
            <el-button type="text" @click="edit(scope.row)" v-permission="'method_list_edit'">编辑</el-button>
            <el-button type="text" @click="del(scope.row)" v-permission="'method_list_del'">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="marginT-20"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :hide-on-single-page="true"
        :current-page="page"
        :page-size="page_size"
        :page-sizes="[10, 20, 100, 200, 300, 400]"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalCount"/>
      <div slot="footer" class="dialog-footer text-center">
        <el-button @click="dialog = false">取 消</el-button>
        <el-button type="danger" @click="dialog = false">确 定</el-button>
      </div>
    </el-dialog>
    <filterAdd v-if="filterAddDialog.show" v-model="filterAddDialog.show" :exData="filterAddDialog.exData"
               @success="init"></filterAdd>
  </div>
</template>

<script>
import page from '@/mixin/page'
import filterAdd from './components/filterAdd'

export default {
  mixins: [page],
  components: {
    filterAdd,
  },
  props: {
    value: {
      type: Boolean,
      default: true
    },
    exData: {
      type: Object,
      default: function () {
        return {}
      }
    }
  },
  data () {
    return {
      filterAddDialog: {
        show: false,
        exData: {}
      },
      searchForm: {},
      tableData: [],
      tableUrl: '/method/list',
      dialog: !!this.value,

    }
  },
  methods: {
    add () {
      this.filterAddDialog.exData = {
        method_project_id: this.exData.id
      }
      this.filterAddDialog.show = true
    },
    edit (row) {
      this.filterAddDialog.exData = row
      this.filterAddDialog.show = true
    },
    del (row) {
      this.$confirm('确定要删除吗', '确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const data = await this.$fetch('/api/auth/method/del', { id: row.id })
        if (data.code == 200) {
          this.$message.success('删除成功')
          this.init()
        }
      }).catch(() => {})
    }
  },
  mounted () {
    this.init()
  },
  watch: {
    dialog (val) {
      if (!val) this.$emit('input', val)
    }
  }
}
</script>

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