<template>
<div class="operation-permission">
  <Button @click="handle_add_op" type="primary" class="add_btn">{{$t('add_new_op')}}</Button>

  <!-- 隐藏（用于添加所有操作） -->
  <!-- <Button @click="addAllOperation" type="primary" class="add_btn">添加所有操作</Button> -->

  <!-- 添加新操作弹窗 -->
   <Modal
    class="add-operation"
    v-model="showAddModal"
    width='500px'
    @on-cancel="addModalCancel"
  >
    <h2>{{$t('add_new_op')}}</h2>
    <Form ref="formValidate" :model="add_formValidate" :rules="add_validateRules">
        <FormItem class="formitem" :label="$t('uri_link')+'：'" prop="path">
          <Input v-model="add_formValidate.path">
            <span slot="prepend">/{{project}}/</span>
          </Input>
        </FormItem>
        <FormItem class="formitem" :label="$t('menu_title')+'：'" prop="title">
          <Input v-model="add_formValidate.title" :placeholder="$t('pls_input_menu_title')"/>
        </FormItem>
    </Form>
    <div class="assign-byMemberLevel__btn" slot="footer">
        <Button @click="addModalCancel">{{$t('cancel')}}</Button>
        <Button type="primary" @click="addOperation">{{$t('add')}}</Button>
    </div>
  </Modal>

  <!-- 操作列表 -->
  <Table :columns="columnsList" :data="dataList" class="ListTab">
    <template slot="index" slot-scope="{ row, index }">
      <div>{{++index}}</div>
    </template>
    <template slot="path" slot-scope="{ row }">
      <div>/{{project}}{{row.path}}</div>
    </template>
    <template slot="operation" slot-scope="{ row }">
      <div class="operation">
        <a @click="handle_assign(row)">{{$t('assignment_settings')}}</a>
        <a @click="handle_delete((row.id))">{{$t('delete')}}</a>
      </div>
    </template>
  </Table>

  <!-- 权限分配弹窗 -->
   <Modal
    class="assign-operation"
    v-model="showAssignModal"
    width='500px'
    @on-cancel="assignModalCancel"
  >
    <h2>{{$t('permission_assignment')}}</h2>
    <Form ref="assignForm" :model="assign_form">
        <FormItem class="formitem" :label="$t('menu_title')+'：'" prop="title">
          {{assign_form.title}}
        </FormItem>
        <FormItem class="formitem" :label="$t('assign_to')+'：'" prop="title">
          <CheckboxGroup v-model="assign_form.permissionsArr">
            <Checkbox
            v-for="item in assign_form.permissions"
            :key="item.index"
            :label="item.level"
            :disabled="item.level==255"
            >
            {{item.name}}
            </Checkbox>
          </CheckboxGroup>
        </FormItem>
        <FormItem class="formitem" :label="$t('account_id')+'：'" prop="title">
          <Input v-model="assign_form.white_list" type="textarea"/>
          <div class="tips">{{$t('permission_op_input_tips')}}</div>
        </FormItem>
    </Form>
    <div class="assign-byMemberLevel__btn" slot="footer">
        <Button @click="assignModalCancel">{{$t('cancel')}}</Button>
        <Button type="primary" @click="assign_operation">{{$t('add')}}</Button>
    </div>
  </Modal>

</div>
</template>
<script>
import { AddNewOperation, RemoveOperation, AssignOperation, GetOperation } from '@/api/permissions.js'
// import { all_path } from '@/router/aysnRouters.js' // 用于添加所有操作
export default {
  props: {
    token: {
      type: String
    },
    project: {
      type: String
    },
    columnsList: {
      type: Array
    },
    dataList: {
      type: Array
    },
    memberType: {
      type: Array
    }
  },
  data () {
    return {
      add_formValidate: {
        path: '',
        title: ''
      },
      add_validateRules: {
        path: [
          { required: true, message: this.$t('pls_input_uri_link'), trigger: 'blur' }
        ],
        title: [
          { required: true, message: this.$t('pls_input_menu_title'), trigger: 'blur' }
        ]
      },
      showAddModal: false,
      showAssignModal: false,
      assign_form: {
        title: '',
        id: '',
        white_list: '',
        permissions: [],
        permissionsArr: []
      }
    }
  },
  methods: {
    resetForm () {
      Object.assign(this.$data.add_formValidate, {
        path: '',
        title: ''
      })
      Object.assign(this.$data.assign_form, {
        title: '',
        id: '',
        white_list: '',
        permissions: [],
        permissionsArr: []
      })
      setTimeout(() => {
        this.$refs.formValidate.resetFields()
      }, 0)
    },
    handle_assign (row) {
      this.assign_form.title = row.title
      this.assign_form.id = row.id
      let formData = new FormData()
      formData.append('access_token', this.token)
      formData.append('id', row.id)
      GetOperation(formData).then(res => {
        this.assign_form.white_list = res.data.op.white_list
        this.assign_form.permissions = res.data.permissions
        res.data.permissions.forEach(el => {
          if (el.is_allow === 1) {
            this.assign_form.permissionsArr.push(el.level)
          }
        })
        // console.log(res)
        // console.log(this.assign_form.permissionsArr)
        this.showAssignModal = true
      })
    },
    handle_delete (id) {
      let that = this
      this.$Modal.confirm({
        title: this.$t('operation_confirm'),
        content: this.$t('permission_op_del_tips'),
        onOk () {
          let formData = new FormData()
          formData.append('access_token', that.token)
          formData.append('id', id)
          RemoveOperation(formData).then(res => {
            // console.log(res)
            if (res.ret === 200 && res.data.is_remove) {
              that.$Message.success(that.$t('successfully_deleted'))
              that.$emit('refresh')
            }
          })
        }
      })
    },
    handle_add_op () {
      this.$emit('add_operation')
      this.showAddModal = true
    },
    addModalCancel () {
      this.showAddModal = false
      this.resetForm()
    },
    addOperation () {
      // 做校验
      this.$refs.formValidate.validate((val) => {
        if (!val) {
          return this.$Modal.warning({ title: this.$t('tips'), content: this.$t('pls_fill_in_correctly') })
        }
        // 调接口
        let formData = new FormData()
        formData.append('access_token', this.token)
        formData.append('project', this.project)
        formData.append('path', `/${this.add_formValidate.path}`)
        formData.append('title', this.add_formValidate.title)
        AddNewOperation(formData).then(res => {
          if (res.ret === 200 && res.data.is_add) {
            this.$Message.success(this.$t('add_successfully'))
            this.$emit('refresh')
            this.addModalCancel()
          } else if (res.ret === 400) {
            this.$Message.warning(this.$t('op_repeated'))
            this.$emit('refresh')
            this.addModalCancel()
          }
        })
      })
    },
    // 用于添加所有操作
    // addAllOperation () {
    //   // 循环重构
    //   console.log('all_path', all_path)
    //   all_path.forEach(item => {
    //     // 调接口
    //     let formData = new FormData()
    //     formData.append('access_token', this.token)
    //     formData.append('project', this.project)
    //     formData.append('path', `${item.path}`)
    //     formData.append('title', this.$t(item.title))
    //     AddNewOperation(formData).then(res => {
    //       if (res.ret === 200 && res.data.is_add) {
    //         this.$Message.success(this.$t('add_successfully'))
    //       } else if (res.ret === 400) {
    //         this.$Message.warning(this.$t('op_repeated'))
    //       }
    //     })
    //   })
    // },
    assignModalCancel () {
      this.showAssignModal = false
      this.resetForm()
    },
    assign_operation () {
      // console.log('assign_operation', this.assign_form)
      let permissions = []
      Object.assign(permissions, this.assign_form.permissionsArr)

      let formData = new FormData()
      formData.append('access_token', this.token)
      formData.append('id', this.assign_form.id)
      formData.append('white_list', this.assign_form.white_list)
      formData.append('permissions', permissions.join(','))
      // console.log('AssignOperation', AssignOperation)
      AssignOperation(formData).then(res => {
        if (res.ret === 200 && res.data.is_assign) {
          this.$Message.success(this.$t('update_successfully'))
          this.$emit('refresh')
          this.assignModalCancel()
        }
      })
    }
  }
}
</script>
<style scoped lang='less'>
.ListTab{
  background: #fff;
  margin: 20px 0;
}
.operation a {
  margin-right: 15px;
}
.add-operation,.assign-operation {
  h2 {
    margin-bottom: 20px;
  }
  .ivu-form-item {
    padding: 0 15px;
  }
}
.operation-permission {
  .add_btn {
    margin: 15px 0 -10px 0;
  }
}
.assign-operation {
  .ivu-form-item {
    margin-bottom: 0;
  }
  .tips {
    color: #9090f6;
  }
  .ivu-form .ivu-form-item-label {
    font-weight: 600;
  }
}
</style>
