<template>
  <div class="container">
    <!-- 顶部搜索栏 -->
    <!-- <div class="top-filter">
      <div class="filter-item">
        <el-input placeholder="请输入规则" size="small"></el-input>
      </div>
      <el-button type="primary" size="small">搜索</el-button>
      <el-button type="warning" size="small">清空</el-button>
    </div>-->
    <!-- 表格展示 -->
    <div class="today-data">
      <div class="today-table">
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column prop="pid" label="序号" width="50" align="center"></el-table-column>
          <el-table-column prop="ruleName" label="规则名称" width="180" align="center"></el-table-column>
          <el-table-column prop="key" label="键名" width="180" align="center"></el-table-column>
          <el-table-column prop="value" label="参数值" width="180" align="center"></el-table-column>
          <el-table-column prop="parameterDescription" label="参数说明" align="center"></el-table-column>
          <el-table-column prop="mandatoryOrNot " label="是否强制" align="center">
            <template slot-scope="scope">{{ scope.row.mandatoryOrNot ==0?'否':'是' }}</template>
          </el-table-column>
          <el-table-column prop="updateTime" label="修改时间" width="180" align="center"></el-table-column>
          <el-table-column prop="name" label="修改人" width="180" align="center"></el-table-column>
          <el-table-column prop="updateUser" label="操作" width="180" align="center">
            <template slot-scope="scope">
              <el-button type="primary" size="mini" @click="editItem(scope.row)">修改</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="flex-vertical-center-r today-page">
        <el-pagination
          background
          layout=" prev, pager, next, jumper, total"
          :total="total"
          :page-size="limit"
          @current-change="sizeC($event)"
        ></el-pagination>
      </div>
    </div>

    <!-- 弹窗修改 -->
    <popup :showDialog.sync="show" distanceTop="5vh" @cancle="handleCancle" @confim="submitData">
      <template slot="body">
        <el-form label-position="left" label-width="80px" :model="form">
          <el-form-item label="规则名称">
            <el-input v-model="form.ruleName"></el-input>
          </el-form-item>
          <el-form-item label="键名">
            <el-input v-model="form.key"></el-input>
          </el-form-item>
          <el-form-item label="参数值">
            <el-input v-model="form.value"></el-input>
          </el-form-item>
          <el-form-item label="参数说明">
            <el-input v-model="form.parameterDescription"></el-input>
          </el-form-item>
          <el-form-item label="是否强制">
            <el-select v-model="form.mandatoryOrNot">
              <el-option label="否" :value="0"></el-option>
              <el-option label="是" :value="1"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </template>
    </popup>
  </div>
</template>
<script>
import { getInsuranceList, editInsurance } from "@/api/system";
import popup from "@/components/Propup.vue";
export default {
  components: {
    popup
  },
  data() {
    return {
      tableData: [
        {
          id: 1,
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄"
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄"
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄"
        }
      ],
      total: 2,
      currentPage: 1,
      limit: 10,
      show: false,
      form: {
        ruleName: "",
        key: "",
        value: "",
        parameterDescription: "",
        mandatoryOrNot: 0 // 是否强制
      },
      pid: ""
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    sizeC(e) {
      this.currentPage = e;
    },
    // 编辑按钮点击
    editItem(data) {
      this.form = {
        ruleName: data.ruleName,
        key: data.key,
        value: data.value,
        parameterDescription: data.parameterDescription,
        mandatoryOrNot: data.mandatoryOrNot
      };
      this.pid = data.pid;
      this.show = true;
    },
    handleCancle() {
      this.form = {
        ruleName: "",
        key: "",
        value: "",
        parameterDescription: ""
      };
      this.show = false;
    },
    submitData() {
      this.editInsuranceData();
    },
    // 获取列表数据
    async getList() {
      let params = {};
      let res = await getInsuranceList(params);
      this.tableData = res.Data.Items;
      this.total = res.Data.TotalRecordCount;
    },
    // 编辑列表数据
    async editInsuranceData() {
      let params = {
        ...this.form,
        pid: this.pid
      };
      let res = await editInsurance(params);
      if (res.ResultCode == 0) {
        this.$message.success("修改成功");
        this.getList();
        this.handleCancle();
      }
    }
  }
};
</script>
<style lang="scss" scoped>
@import "../../style/common.scss";
@import "../../style/base.scss";

.container {
  height: 100%;
  background: #fff;
  box-sizing: border-box;
  padding: 10px;

  .top-filter {
    display: flex;
    align-items: center;
    margin-bottom: 10px;

    .filter-item {
      width: 200px;
      margin-right: 10px;
    }
  }
}
</style>