<template>
  <el-form class="bf-rulesofcompetency">
    <!-- 权限规则 -->
    <div class="right">
      <div class="paren_header">
        <p class="manageTitle">{{ title }}</p>
      </div>
      <div class="mt30">
        <div class="juris_list" :style="{ marginBottom: marginB }">
          <p>许可查询行</p>
          <el-input @blur="getForm" v-model="form.QueryRow" placeholder="请输入内容" size="mini"></el-input>
        </div>
        <div class="juris_list" :style="{ marginBottom: marginB }">
          <p>许可查询列</p>
          <el-input @blur="getForm" v-model="form.QueryCol" placeholder="请输入内容" size="mini"></el-input>
        </div>
        <div class="juris_list" :style="{ marginBottom: marginB }">
          <p>许可删除行</p>
          <el-input @blur="getForm" v-model="form.DeleteRow" placeholder="请输入内容" size="mini"></el-input>
        </div>
        <div class="juris_list" :style="{ marginBottom: marginB }">
          <p>许可新增列</p>
          <el-input @blur="getForm" v-model="form.NewCol" placeholder="请输入内容" size="mini"></el-input>
        </div>
        <div class="juris_list" :style="{ marginBottom: marginB }">
          <p>许可编辑行</p>
          <el-input @blur="getForm" v-model="form.EditRow" placeholder="请输入内容" size="mini"></el-input>
        </div>
        <div class="juris_list" :style="{ marginBottom: marginB }">
          <p>许可编辑列</p>
          <el-input @blur="getForm" v-model="form.EditCol" placeholder="请输入内容" size="mini"></el-input>
        </div>
      </div>
    </div>
  </el-form>
</template>
<script>
export default {
  props: {
    title: {
      type: String,
      default: " ",
    },
    marginB: {
      type: String,
      default: "24px",
    },
    authTo: {
      type: Object,
      default: () => { },
    },
    authList: {
      type: Array,
      default: () => [],
    },
  },
  data () {
    return {
      form: {
        DeleteRow: null,
        EditCol: null,
        EditRow: null,
        NewCol: null,
        QueryCol: null,
        QueryRow: null,
      },
      newForm: {},
      formDatas: []
    };
  },
  watch: {
    "$store.state.auth.authArrs": {
      handler () {
        const id = this.$store.getters.authId
        const arr = this.$store.getters.authMsg
        const obj = arr.filter((item) => item.auth_id === id)[0]
        if (obj) {
          this.setFormData(obj)
        } else {
          this.clearFormData()
        }
      },
      deep: true
    }
  },
  methods: {
    clearFormData () {
      this.form.NewCol = "";
      this.form.DeleteRow = "";
      this.form.QueryCol = "";
      this.form.QueryRow = "";
      this.form.EditCol = "";
      this.form.EditRow = "";
    },
    setFormData (obj) {
      let data = {}
      if (obj.AuthList) {
        data = obj.AuthList;
      } else {
        data = obj
      }
      this.form = data
    },
    getForm () {
      const id = this.$store.getters.authId;
      const arr = this.$store.getters.authArrs;
      this.form.auth_id = id
      arr.filter(item => {
        if (item.auth_id == id) {
          item.AuthList = _.cloneDeep(this.form)
        }
      })
      const datas = _.unionBy(arr, "auth_id");
      const newDatas = _.cloneDeep(datas);
      this.$store.dispatch("auth/changeAuthMsg", newDatas);
      this.$store.dispatch("auth/changeAuthList", newDatas);
    }
  },
};
</script>
<style lang="scss" scoped>
@import "./rulesofcompetency.scss";
.mt30 {
  margin-top: 30px;
}
</style>
