<template>
  <el-dialog
    :title="classString.title"
    :visible.sync="dialogVisible"
    width="33%"
    :before-close="handleClose"
    append-to-body
  >
    <el-form label-width="100px" :model="form">
      <el-form-item label="分类名称：" required>
        <el-input placeholder="请输入" v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label required>
        <template slot="label" class="status">
          <span>状&#8195;&emsp;态</span>：
        </template>
        <el-radio-group v-model="form.status">
          <el-radio :label="1">启用</el-radio>
          <el-radio :label="0">禁用</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="访问权限：" required>
        <div
          class="form_item_content"
          v-for="(item, index) in openList"
          :key="index"
        >
          <el-input placeholder="请输入" v-onlyInt v-model="item.value"></el-input>
          <i class="el-icon-plus" @click="addjurisdiction"></i>
          <i class="el-icon-minus" v-if="openList.length!=1" @click="deletjurisdiction(index)"></i>
        </div>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button size="small" @click="dialogVisible = false">取 消</el-button>
      <el-button
        size="small"
        style="margin-left: 60px"
        type="primary"
        @click="dialogVisible = false"
        >确 定</el-button
      >
    </span>
  </el-dialog>
</template>
<script>
import * as api from '@/api/api'
export default {
  data() {
    return {
      dialogVisible: false,
      classString: {},
      openList: [{ value: '' }],
      form:{
        name:'',
        status:''
      }
    }
  },
  methods: {
    handleClose() {
      this.dialogVisible = false
    },
    openClose(val) {
      if (val) {
        this.classString = val
        if (!val.show) {
          this.detailList()
        }
      }
      this.title = val.title
      this.dialogVisible = true
    },
    /**
     * @method 分类管理详情
     * **/
    detailList() {
      let code = {
        typeId: this.classString.typeId
      }
      api.POST('/doc/type/detail', code).then(data => {
        if (data.code == 0) {
          this.form = data.data
        }
      })
    },
    /**
     * @method 增加访问权限
     * **/
    addjurisdiction() {
      this.openList.push({ value: '' })
    },
    /**
     * @method 删除访问权限
     * **/
    deletjurisdiction(val) {
      this.openList.splice(val, 1)
    }
  }
}
</script>
<style lang="less" scoped>
.status {
  padding: 0 12px 0 0;
}
.status::before {
  content: '*';
  color: #f56c6c;
  margin-right: 4px;
}
.form_item_content {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.el-icon-plus,
.el-icon-minus {
  border: 1px solid #f23f3a;
  color: #f23f3a;
  font-size: 30px;
  margin-left: 10px;
  border-radius: 4px;
  cursor: pointer;
}
.el-icon-minus {
  margin-right: 16px;
}
</style>