<template>
  <div class="app-container">
    <!--主表格-->
    <el-table
      class="table"
      ref="table_form"
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column label="序号" align="center" width="80px" type="index">
      </el-table-column>
      <el-table-column label="标题" align="center">
        <template slot-scope="scope">
          {{ scope.row.desc }}
        </template>
      </el-table-column>
      <el-table-column label="收费标准" align="center">
        <template slot-scope="scope">
          {{ scope.row.fee }}{{ scope.row.feeUnit }}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop=""
        label="操作区"
        width="120"
        v-if="role == 2"
      >
        <template slot-scope="scope">
          <el-button type="primary" size="small" @click="create(scope.row)"
            >编辑</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!--对话框-->
    <el-dialog
      title="编辑收费标准"
      :visible.sync="dialogVisible"
      width="700px"
      :close-on-click-modal="false"
    >
      <el-form
        :model="form"
        :rules="rules"
        ref="form"
        label-width="70px"
        label-position="left"
      >
        <el-form-item label="费用" prop="fee" class="form-item-style special">
          <el-input-number
            v-model="form.fee"
            :min="0"
            size="mini"
          ></el-input-number>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false"> 取消 </el-button>
        <el-button type="primary" @click="addOrUpdate"> 确定 </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import UploadFile from "@/components/UploadFile";
import { updateFee, feeList } from "@/api/expense";
export default {
  components: { UploadFile },
  filters: {},
  computed: {},
  data() {
    return {
      role: this.$store.getters.role,
      // 主表格&主表格加载状态
      list: [],
      listLoading: true,
      // 是否显示对话框
      dialogVisible: false,
      // 添加角色参数
      form: {
        aaaaa: null,
      },
      // 验证规则
      rules: {
        fee: [{ required: true, message: "请选择", trigger: "change" }],
      },
    };
  },
  created() {
    this.fetchData();
  },
  watch: {},
  methods: {
    // 获取列表数据
    fetchData() {
      this.listLoading = true;
      feeList().then((res) => {
        this.list = res.data;
        this.listLoading = false;
      });
    },
    // 打开添加角色对话框
    create(row) {
      this.form = JSON.parse(JSON.stringify(row));
      this.dialogVisible = true;
      this.$nextTick(() => {
        this.$refs["form"].clearValidate();
      });
    },
    // 确定添加/编辑
    addOrUpdate() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          updateFee(this.form).then((res) => {
            this.dialogVisible = false;
            this.fetchData();
            this.$message({
              type: "success",
              message: "操作成功!",
            });
          });
        }
      });
    },
  },
};
</script>
<style scoped lang="scss">
.table {
  margin-bottom: 52px;
}
</style>
