<template>
  <!-- 面包屑 -->
  <el-breadcrumb>
    <el-breadcrumb-item>心愿单管理</el-breadcrumb-item>
    <el-breadcrumb-item to="/wish_list/list">心愿单列表</el-breadcrumb-item>
  </el-breadcrumb>
  <!-- 搜索 -->
  <el-form inline :model="params">


    <el-form-item label="心愿名称">
      <el-input v-model='params.wish_list_name' placeholder='请输入心愿名称'></el-input>
    </el-form-item>
    <el-form-item label="作者">
      <el-input v-model='params.wish_list_author' placeholder='请输入作者'></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="tableRef.reload()" icon="ElIconSearch">
        搜索
      </el-button>
    </el-form-item>
  </el-form>
  <el-space style="margin-bottom: 10px;">
    <!-- 添加心愿单 -->
    <el-col :span="1">
      <el-button type="primary" @click="addWishListDialogVisible = true"> 添加 </el-button>
    </el-col>


    <!-- 导出 -->
    <el-button icon="ElIconDocument" @click="exportExcel(params)">导出</el-button>

    <!-- 导入 -->
    <el-upload class="upload-demo" :action="importExcel" :headers="headers" :on-success="handleExcelSuccess"
      :on-progress="uploadLoading" :on-error="closeUploadLoading" style="margin-left: 10px" :show-file-list="false">
      <el-button type="primary">导入</el-button>
    </el-upload>

    <!-- 下载导入模板 -->
    <el-button icon="ElIconDownload" @click="downloadTemplate()">下载导入模板</el-button>


    <!-- 下拉操作 -->
    <el-dropdown v-if="selectionData.length">
      <el-button type="primary">
        批量操作<el-icon class="el-icon--right"><arrow-down /></el-icon>
      </el-button>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item @click="handleDelete(selectionData)">
            批量删除
          </el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </el-space>
  <!-- 数据表格 -->
  <DataTable ref="tableRef" style="width: 100%" :onSelectionChange="data => (selectionData = data)" :column="column"
    :params="params" :request="params => getWishListList(params)">


    <template #wish_list_status='scope'>
      <el-switch :disabled=scope.row.wish_list_status_bool v-model=scope.row.wish_list_status class=mt-2 inline-prompt
      :inactive-value=1 :active-value=2 style='--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949'
      @click=handleEditShow(scope.row) />
    </template>


    <!-- 排序 -->
    <template #wish_list_sort='scope'>
      <el-input-number :disabled='loading' v-model='scope.row.wish_list_sort' :min='1' controls-position='right'
        @change='handleEditOrder(scope.row)'></el-input-number>
    </template>





    <template #chaoz="scope">
      <el-space>
        <el-button size="small" @click="handleUpdate(scope.row)">
          编辑
        </el-button>
        <el-dropdown @command="handleCommand">
          <el-button type="primary" size="small">
            更多<el-icon class="el-icon--right"><arrow-down /></el-icon>
          </el-button>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item :command="{ type: 'detail', row: scope.row }">
                详情
              </el-dropdown-item>
              <el-dropdown-item :command="{ type: 'delete', row: scope.row }">
                删除
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </el-space>
    </template>
  </DataTable>

  <!-- 添加心愿单 -->
  <AddWishListDialog v-model="addWishListDialogVisible" :done="() => tableRef.reload()"></AddWishListDialog>
  <!-- 编辑心愿单 -->
  <EditWishListDialog v-model="EditWishListDialogVisible" :data="EditWishListDialogRow" :done="() => tableRef.reload()">
  </EditWishListDialog>
  <!-- 心愿单详情 -->
  <DetailWishListDialog v-model="DetailWishListDialogVisible" :data="DetailWishListDialogRow"></DetailWishListDialog>
</template>
<script setup>
import { ArrowDown } from '@element-plus/icons-vue';
import { ref, reactive, watch } from 'vue';
import { useLoginStore } from "~/store";
import { getWishListList, editWishList, deleteWishList, getDictionary, exportExcel, downloadTemplate, importExcel } from '~/service/wish_list';
import AddWishListDialog from './components/AddWishListDialog.vue';
import EditWishListDialog from './components/EditWishListDialog.vue';
import DetailWishListDialog from './components/DetailWishListDialog.vue';

const tableRef = ref();
const selectionData = ref([]);
const store = useLoginStore();

const addWishListDialogVisible = ref(false);
const EditWishListDialogVisible = ref(false);
const EditWishListDialogRow = ref({});
const DetailWishListDialogVisible = ref(false);
const DetailWishListDialogRow = ref({});

const headers = {
  Accept: "application/json",
  ...store.headers,
};

// 查询参数
const params = reactive({
  wish_list_name: "",
  wish_list_author: "",
  wish_list_status: "",

});
const column = [

  {
    fixed: true,
    type: 'selection'
  },
  {
    prop: "wish_list_name",
    label: '心愿名称',
    width: '250'
  },
  {
    prop: "wish_list_author",
    label: '作者',
    width: '150'
  },
  {
    prop: "wish_list_status",
    label: '完成状态',
    width: '150'
  },
  {
    prop: "wish_list_complete_date",
    label: '完成日期',
    width: '150'
  },
  {
    prop: "wish_list_create_time",
    label: '创建时间',
    width: '180'
  },
  {
    prop: "wish_list_sort",
    label: '排序',
    width: '180'
  },
  {
    label: '操作',
    prop: 'chaoz',
    width: '250',
    fixed: 'right'
  }
];


const handleCommand = ({ type, row }) => {
  switch (type) {
    case "detail":
      handleDetail(row);
      break;
    case 'delete':
      handleDelete([row]);
      break;
  }
};

// 删除数据
const handleDelete = data => {
  ElMessageBox.confirm(`您确定要删除该心愿单吗？`).then(async () => {
    const res = await deleteWishList({
      wish_list_guid: data.map(v => v.wish_list_guid).join()
    });
    if (res) {
      tableRef.value.reload();
    }
  });
};

// 修改
function handleUpdate(row) {
  EditWishListDialogVisible.value = true
  EditWishListDialogRow.value = row
}

// 详情
function handleDetail(row) {
  DetailWishListDialogVisible.value = true
  DetailWishListDialogRow.value = row
}


// 导入方法
let loadingImoprt = null;
const uploadLoading = () => {
  loadingImoprt = ElLoading.service({
    lock: true,
    text: "正在导入中...",
    background: "rgba(255, 255, 255, 0.7)",
  });
};
const closeUploadLoading = () => loadingImoprt.close();
const handleExcelSuccess = (value) => {
  if (value.code == 0) {
    ElMessageBox.alert(value.msg, "导入信息", {
      dangerouslyUseHTMLString: true,
      confirmButtonText: "确定",
    });
  } else {
    ElMessage.error(value.msg);
  }
  closeUploadLoading();
  tableRef.value.reload();
};



//排序
const loading = ref(false)
async function handleEditOrder(data) {
  loading.value = true
  const { code } = await editWishList(data);
  if (code == 0) {
    loading.value = false
    tableRef.value.reload()
  }
}


// 展示切换
async function handleEditShow(data) {
  // if (data.wish_list_status === 1) return;

  loading.value = true
  const { code } = await editWishList(data);
  if (code == 0) {
    loading.value = false
    tableRef.value.reload()
  }
}



// 字典获取
const complete_status = ref([]);
async function get_complete_status() {
  await getDictionary({ dictionary_value: 'complete_status' }).then((res) => {
    complete_status.value = res
  })
}
get_complete_status()
</script>
