<template>
    <!-- 按钮清单的抽屉 -->
    <el-drawer
      v-model="buttonListDrawer.visible"
      @opened="buttonListDrawerOpened"
      class="drawer-show-table"
    >
      <template #header>
        <div class="drawer-show-table-title">
          <svg-icon icon-class="close" width="20px" height="20px" @click="buttonListDrawer.visible = false"/>
          <span>{{buttonListDrawer.title}}</span>
        </div>
        <el-button type="primary" @click="addButtonLine()" v-has-perm="['sys:resource:buttonlist:add']">添加按钮</el-button>
      </template>
      <el-table
        border
        :data="linkButtonList"
        highlight-current-row
        row-key="dataId"
        style="width: 100%"
      >
        <el-table-column prop="name" label="名称" show-overflow-tooltip>
          <template #default="scope">
            <el-input v-if="isEditable(scope.$index)" v-model="scope.row.name"></el-input>
            <span v-else>{{scope.row.name}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="perm" label="标识" show-overflow-tooltip>
          <template #default="scope">
            <el-input v-if="isEditable(scope.$index)" v-model="scope.row.perm"></el-input>
            <span v-else>{{scope.row.perm}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" show-overflow-tooltip>
          <template #default="scope">
            <el-select v-if="isEditable(scope.$index)" v-model="scope.row.status">
              <el-option
                v-for="item in allStatus"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
            <span v-else>
              <span v-if="scope.row.status" class="table-status-active">启用</span>
              <span v-else class="table-status-inActive">禁用</span>
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="备注" show-overflow-tooltip>
          <template #default="scope">
            <el-input v-if="isEditable(scope.$index)" v-model="scope.row.remark"></el-input>
            <span v-else>{{scope.row.remark}}</span>
          </template>
        </el-table-column>
        <el-table-column
          width="150"
          label="操作"
          align="center"
          class-name="table-operation"
          fixed="right"
        >
          <template #default="scope">
            <el-button type="success" v-if="isEditable(scope.$index)" link @click="saveLinkButton(scope.row)">保存</el-button>
            <div class="splitLine" v-if="isEditable(scope.$index)"></div>
            <el-button type="primary" v-if="isEditable(scope.$index)" link @click="cancelSaveButton">取消</el-button>
            <el-button type="primary" v-else link @click="updateLinkButton(scope.row,scope.$index)">编辑</el-button>
            <div class="splitLine"></div>
            <el-button type="danger" link @click="deleteLinkButton(scope.row,scope.$index)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-drawer>

</template>
<script lang="ts">
export default {
  name: 'menu'
};
</script>
<script lang="ts" setup>
import { reactive, ref, onMounted, toRefs, getCurrentInstance } from 'vue';
import { ElForm, ElMessageBox  } from 'element-plus';
import {
  addLinkButtonData,
  deleteLinkButtonData,
  getLinkButton, updateLinkButtonData
} from '@/api/menu';

const props = defineProps({
  buttonListDrawer: {
    type: Object
  },
  selectItem: {
    type: Object
  },
});

const { proxy }: any = getCurrentInstance();
const state = reactive({
  linkButtonList: [] as any,
  buttonItem: undefined as any,
  activeIndex: -1,
  allStatus:[
    { label: '禁用',value: 0 },
    { label: '启用',value: 1 }
  ]
})
const {
  linkButtonList,
  buttonItem,
  allStatus
} = toRefs(state);

/******************************* 按钮清单 start *****************************/
function buttonListDrawerOpened() {
  // 获取按钮清单
  getLinkButton({dataId:props.selectItem!.dataId}).then((res)=>{
    state.linkButtonList = res.data;
  }).catch(()=>{})
}
// table item 是否可编辑
function isEditable(index: number) {
  return index === state.activeIndex;
}
// 删除关联的按钮
function deleteLinkButton(row: any,index: number) {
  if(!row.dataId) {// 如果当前是新增的数据，还未保存，直接前端删除，无需掉接口
    state.linkButtonList.splice(index,1);
    return;
  }
  ElMessageBox.confirm(
    '确认删除此按钮?',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      let params = {
        dataId: row.dataId
      }
      deleteLinkButtonData({ data: params }).then(() => {
        proxy.$ElMessage.success('删除成功');
        buttonListDrawerOpened();
      })
    })
    .catch(() => {

    })
}
// 点击添加按钮
function addButtonLine() {
  // 判断是否存在未保存的元素
  let flag = false;
  let idx = 0;
  for(let i=0;i<state.linkButtonList.length;i++) {
    if(!state.linkButtonList[i].name || !state.linkButtonList[i].perm) {
      flag = true;
      idx = i;
      break;
    }
  }
  if(flag) {
    proxy.$ElMessage.warning('请完善第'+(idx+1)+'按钮清单项');
    return;
  }
  state.buttonItem = undefined;
  state.linkButtonList.push({
    name: '',
    perm: '',
    status: 1,
    remark: ''
  });
  state.activeIndex = state.linkButtonList.length - 1;
}
// 点击编辑按钮
function updateLinkButton(row: any,index: number) {
  state.buttonItem = row;
  state.activeIndex = index;
}
// 保存新增或者编辑的数据
function saveLinkButton(row: any) {
  console.log(row);
  let params = {
    name: row.name,
    perm: row.perm,
    status: row.status,
    remark: row.remark
  }
  if(state.buttonItem) {// 编辑
    updateLinkButtonData({
      data: {
        dataId: state.buttonItem.dataId,
        menuId: props.selectItem!.dataId,
        ...params
      }
    }).then((res)=>{
      proxy.$ElMessage.success('编辑成功');
      buttonListDrawerOpened();
      state.activeIndex = -1;
    }).catch(()=>{

    })
  } else {// 新增
    addLinkButtonData({
      data: {
        menuId: props.selectItem!.dataId,
        ...params
      }
    }).then((res)=>{
      proxy.$ElMessage.success('新增成功');
      buttonListDrawerOpened();
      state.activeIndex = -1;
    }).catch(()=>{

    })
  }

}
// 取消保存
function cancelSaveButton() {
  state.activeIndex = -1;
}
</script>
<style scoped lang="scss">

</style>
