<template>
  <div>
    <!-- 搜索 -->
    <el-form :inline="true">
      <!-- <el-form-item v-if="$permission('/admin/memberType/check')"> -->
      <!-- <el-form-item>
        <el-input v-model="queryParams.name" size="small" placeholder="请输入"></el-input>
      </el-form-item> -->
      <!-- <el-form-item class="tenant" v-if="userinfo.rList?(userinfo.rList.filter(item=>item.roleId==1))[0]:''"> -->
      <el-form-item class="tenant" >
        <el-input
          placeholder="根据会员类型/名称或创建人查询"
          v-model="queryParams.likeName"
          clearable
          style="width: 280px;">
        </el-input>
        <!-- <el-autocomplete
          class="inline-input"
          v-model="tenant"
          :fetch-suggestions="querySearch"
          placeholder="根据会员类型/名称或创建人查询"
          :trigger-on-focus="false"
          @select="handleSelect"
          style="width: 280px;"
        ></el-autocomplete> -->
        <!-- <el-select v-model="queryParams.tenant" @change="getList" clearable placeholder="根据租户/租户类别查询">
          <el-option
              v-for="item in tenantList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
          </el-option>
        </el-select> -->
      </el-form-item>
      <el-form-item>
        <!-- <el-button type="" size="small" @click="getList2" v-if="$permission('/admin/memberType/check')">查询</el-button>
        <el-button type="primary" size="small" @click="handleAdd()" v-if="$permission('/admin/memberType/add')">新增</el-button> -->
        <el-button type="" size="small" @click="get" >查询</el-button>
        <el-button type="primary" size="small" @click="handleAdd()">新增</el-button>
      </el-form-item>
    </el-form>
    <!-- 表格 -->
    <Table @tableRow="hanleEdit" :isMemberType="isMemberType" :likeNames="likeName"></Table>
    <!-- 新增/编辑弹窗 -->
    <el-dialog :title="title" :visible.sync="visible" width="600px" max-height="800" :before-close="close" append-to-body>
      <!-- dialog -->
      <!-- <Dialogs ref="ruleForm" :isDialogs="isDialogs" @ruleForms="handleForms" :ruleFormTable="ruleFormTab"></Dialogs> -->
      <div style="height: 280px">
        <el-form  :model="ruleForm" ref="ruleForm" :rules="rules"  label-width="80px" label-position="left">
          <el-form-item label="会员类型" prop="tenantVipName">
            <el-input v-model="ruleForm.tenantVipName" placeholder="请输入会员类型名称"></el-input>
            <!-- <el-select style="width:100%" v-model="ruleForm.memberType"
                       :disabled="(userinfo.rList?!(userinfo.rList.filter(item=>item.roleId==1))[0]:'')||disabled"
                       placeholder="请选择">
              <el-option
                  v-for="item in tenantList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
              </el-option>
            </el-select> -->
          </el-form-item>
          <el-form-item label="创建人" prop="createPersonName">
            <el-input v-model="ruleForm.createPersonName" placeholder="请输入创建人" disabled></el-input>
          </el-form-item>
          <el-form-item label="功能权限" prop="functions" style="margin-top: 20px;">
                        <el-cascader
                              ref="FunctionCascader"
                              v-model="ruleForm.functions"
                              :options="authority"
                              :props="{multiple:true,value:'id',label:'name' }"
                              collapse-tags
                              placeholder="请选择功能权限"
                              clearable
                              @change="downloadChange"
                              :style="{width:isAdd?385+'px':100+'%'}"></el-cascader>
                    <el-tooltip v-if="isAdd" style="margin-left: 20px;"  class="item" effect="dark" content="复制已有会员类别权限功能并粘贴到新增会员类别权限功能处" placement="top">
                      <el-button @click="btnCopy">复制</el-button>
                    </el-tooltip>
          </el-form-item>
          <el-form-item label="备注" prop="remark">
            <el-input v-model="ruleForm.remark" placeholder="请输入备注" type="textarea" maxlength="100"
                      show-word-limit></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="submit" :loading="btnLoading">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 权限展示 -->
    <el-dialog title="权限展示" :visible.sync="visibleCopy" width="600px" max-height="800" :before-close="closeCopy" append-to-body>
      <Table :likeNames="likeName" :visibleCopy="visibleCopy" @row="handleCopy"></Table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeCopy">取 消</el-button>
        <el-button type="primary" @click="submitCopy" :loading="btnLoading">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// import Dialogs from "@/views/memberType/components/dialogs.vue"
import Table from "@/views/memberType/components/table.vue"

export default {
  components: {
    // Dialogs,
    Table,
  },
  data() {
    return {
      total: 0,
      tenantList: [],
      tableData: [],
      tableDataCopy: [],
      authority: [],//权限功能面板数据
      ruleForm: {},//新增、编辑数据
      ruleFormTab: {},//新增、编辑数据
      queryParams: {
        pageSize: 10,
        page: 1,
        likeName:'',
        orderBy: '',
        orderType: '',
      },
      likeName:'',
      visible: false,
      visibleCopy: false,
      title: '',
      isAdd: true,
      loading: false,
      btnLoading: false,
      saveNodeTmp: [],
      functions: [],
      rules: {
        tenantVipName: [{ required: true, message: '请输入会员类型/名称', trigger: 'blur' },],
        functions: [{ required: true, message: '请选择功能权限', trigger: 'change' },],
        // type: 'array',
      },
      tenant: '',
      isMemberType: false,//更新或新增成功标识
      // isDialogs: false,
    }
  },
  computed: {
    userinfo() {
      return this.$store.state.admin.userinfo
    },
  },
  mounted() {
    this.getFunction()
    // this.getList()
  },
  methods: {
    //查询
    get() {
      this.likeName = this.queryParams.likeName?this.queryParams.likeName:null
    },
      //权限功能 
    getFunction(val) {
      this.$api.getAllFunctionList({ type: val }).then(response => {
        this.authority = []
        this.authority = response.data
      }).catch(error => {
        // this.loading = true
      })
    },
    // 复制弹框
    btnCopy() {
      this.visibleCopy = true
    },
    submitCopy() {
      this.closeCopy()
    },
    closeCopy() {
      this.visibleCopy = false
    },
    handleCopy(val) {
      this.$set(this.ruleForm,'functions',val.functions)
      // this.ruleForm.functions = val.functions
      if (this.ruleForm.functions) {
        this.$message.success('复制粘贴权限成功')
        this.closeCopy()
      } else {
        this.$message.info('复制粘贴权限失败')
      }
    },
    
    // 新增、编辑弹窗功能权限选择
    findAllNode(data) {
      if (!this.saveNodeTmp.includes(data.path)) { 
        if(data.path.length>1){
          this.saveNodeTmp.push(data.path)
        }   
        
      }
      if (data.parent) {
        this.findAllNode(data.parent)
      }
    },
    // change时
    downloadChange(data) {
      let readSelectedAllNode = this.$refs.FunctionCascader.getCheckedNodes()
      this.saveNodeTmp = []
      readSelectedAllNode.forEach(item => {
        this.findAllNode(item)
      })
      this.functions = [...this.saveNodeTmp]
      
    },

    
    // 新增、编辑弹窗关闭
    close() {
      this.visible = false
      this.ruleForm = {}
      // this.isDialogs = false
      // this.isMemberType = false
      this.resetForm()
    },
    resetForm(formName) {
        this.$refs.ruleForm.resetFields();
      },
   
    hanleEdit(val) {
        let rows = JSON.parse(JSON.stringify(val))
      this.visible = rows.visible
        this.isAdd=false
        this.title = '编辑会员类型功能权限'
        this.ruleForm = rows
     
    },
     // 新增类别
    handleAdd() {
      this.title = '新增会员类型功能权限'
      this.isAdd=true
      this.ruleForm={}
      this.ruleForm.createPersonName = this.userinfo.name
      this.visible = true

    },
    // 新增、编辑弹窗确定
    submit() {
      // this.isDialogs=true
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.ruleForm.functions = this.functions
          this.btnLoading = true
          if (this.ruleForm.hasOwnProperty('functions')) {
            var functionModifyPaths = []
            this.ruleForm.functions.forEach(item => {
              let a = item.join(',')
              functionModifyPaths.push(a)
            })
            this.ruleForm.createPersonId = this.userinfo.id
            this.ruleForm.functionModifyPaths = functionModifyPaths
          }
          
          if (this.ruleForm.id) {
            this.$api.updateNewTenantVipType(this.ruleForm).then(res => {
              if (res.code == 200) {
                this.$message.success("更新会员功能权限成功")
                this.btnLoading = false
                this.isMemberType = !this.isMemberType
                 this.close()
              }
            }).catch(err => {
                this.$message.error(err.message)
                this.btnLoading = false
            })
          } else {
            this.$api.addNewTenantVipType(this.ruleForm).then(res => {
              if (res.code == 200) {
                this.$message.success("新增会员功能权限成功")
                this.btnLoading = false
                this.isMemberType = !this.isMemberType
                this.close()
              } 
            }).catch(err => {
              this.$message.error(err.message)
                this.btnLoading = false
            })
          }
        }
      })
    },
   
    // 租户/租户类别查询
    // handleSelect(item) {
    //   this.tenant = item
    // },
    // querySearch(queryString, cb) { },

  },

}
</script>

<style lang="scss" scoped>

</style>