<template>
  <el-dialog
    :title="classString.title"
    :visible.sync="dialogVisible"
    width="33%"
    :before-close="handleClose"
    :close-on-press-escape="false"
    :close-on-click-modal="false"
    :append-to-body="true"
    v-loading.fullscreen.lock="fullscreenLoading"
  >
    <el-form label-width="100px" :model="form" ref="form" :rules="rules">
      <el-form-item label="分类名称：" prop="name">
        <el-input
          placeholder="请输入名称"
          v-model="form.name"
          maxlength="64"
          show-word-limit
        ></el-input>
      </el-form-item>
      <el-form-item label prop="status">
        <template slot="label"> <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
        style="margin-bottom: 20px"
        label
        v-for="(item, index) in form.role"
        :key="index"
        :prop="`role.${index}.value`"
        :rules="rules.value"
      >
        <template v-if="index == 0" slot="label">
          <span>访问权限：</span>
        </template>
        <div class="form_item_content">
          <el-input
            placeholder="请输入手机号"
            v-onlyInt
            maxlength="11"
            show-word-limit
            v-model="item.value"
          ></el-input>
          <i class="iconfont icon-a-zu903" @click="addjurisdiction"></i>
          <i
            class="iconfont icon-a-zu904"
            v-if="form.role.length != 1"
            @click="deletjurisdiction(index)"
          ></i>
        </div>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button size="small" @click="handleClose">取 消</el-button>
      <el-button
        size="small"
        style="margin-left: 60px"
        type="primary"
        @click="submit('form')"
        >确 定</el-button
      >
    </span>
  </el-dialog>
</template>
<script>
import * as api from '@/api/api'
export default {
  data() {
    const validateUser = (rule, value, callback) => {
      if (!/^1[3456789]\d{9}$/.test(value)) {
        callback(new Error('请输入正确的手机号'))
      } else {
        callback()
      }
    }
    return {
      fullscreenLoading: false,
      dialogVisible: false,
      classString: {},
      form: {
        name: '',
        status: 1,
        role: [{ value: '' }]
      },
      rules: {
        value: [{ required: true, trigger: 'blur', validator: validateUser }],
        name: [{ required: true, trigger: 'blur', message: '请输入分类名称' }]
      }
    }
  },
  methods: {
    handleClose() {
      this.dialogVisible = false
      this.$parent.search()
      this.form = {
        name: '',
        status: 1,
        role: [{ value: '' }]
      }
      this.$refs['form'].resetFields()
    },
    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
          let role = []
          if (this.form.role.length != 0) {
            this.form.role.forEach(item => {
              role.push({ value: item })
            })
            this.form.role = role
          } else {
            this.form.role = [{ value: '' }]
          }
        }
      })
    },
    /**
     * @method 增加访问权限
     * **/
    addjurisdiction() {
      this.form.role.push({ value: '' })
    },
    /**
     * @method 删除访问权限
     * **/
    deletjurisdiction(val) {
      this.form.role.splice(val, 1)
    },
    /**
     * @method 确定提交
     **/
    submit(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.fullscreenLoading = true
          let role = []
          this.form.role.forEach(item => {
            role.push(item.value)
          })
          let code = {
            linkUrl: '',
            name: this.form.name,
            role: role,
            status: this.form.status
          }
          this.classString.show ? this.addclass(code) : this.editclass(code)
        }
      })
    },
    /**
     * @method 新增
     * **/
    addclass(val) {
      api
        .POST('/doc/type/add', val)
        .then(data => {
          if (data.code == 0) {
            this.handleClose()
            this.$message.success(data.message)
            this.fullscreenLoading = false
          }
        })
        .catch(() => {
          this.fullscreenLoading = false
        })
    },
    /**
     * @method 编辑
     * **/
    editclass(val) {
      val.typeId = this.form.typeId
      api
        .POST('/doc/type/update', val)
        .then(data => {
          if (data.code == 0) {
            this.handleClose()
            this.$message.success(data.message)
            this.fullscreenLoading = false
          }
        })
        .catch(() => {
          this.fullscreenLoading = false
        })
    }
  }
}
</script>
<style lang="less" scoped>
.form_item_content {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.icon-a-zu903 {
  color: #f23f3a;
  margin-left: 10px;
  margin-right: 20px;
  cursor: pointer;
  font-size: 22px;
}
.icon-a-zu904 {
  cursor: pointer;
  font-size: 22px;
}
.el-icon-minus {
  margin-right: 16px;
}
</style>