<template>
  <!-- 面包屑 -->
  <el-breadcrumb>
    <el-breadcrumb-item>合作伙伴管理</el-breadcrumb-item>
    <el-breadcrumb-item to="/partners/list">合作伙伴列表</el-breadcrumb-item>
  </el-breadcrumb>
  <!-- 搜索 -->
  <el-form inline :model="params">

      
    <!-- <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="addPartnersDialogVisible = true"> 添加 </el-button>
    </el-col>

    

    <!-- 下拉操作 -->
    <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 => getPartnersList(params)"
  >
    
                   <template #partners_img="scope">
                   <el-image v-if="scope.row.partners_img" 
                           :src="scope.row.partners_img.split(',')[0]" lazy
                           :preview-src-list="scope.row.partners_img.split(',')" :preview-teleported="true" :hide-on-click-modal="true" fit="contain" class="el-avatar"
                    ></el-image>
                       <template v-else>暂无图片</template>
                   </template>
    
    
                <!-- 排序 -->
                <template #partners_sort='scope'>
                  <el-input-number :disabled='loading' v-model='scope.row.partners_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>

  <!-- 添加合作伙伴 -->
  <AddPartnersDialog v-model="addPartnersDialogVisible" :done="() => tableRef.reload()"></AddPartnersDialog>
  <!-- 编辑合作伙伴 -->
  <EditPartnersDialog
    v-model="EditPartnersDialogVisible" :data="EditPartnersDialogRow" :done="() => tableRef.reload()"></EditPartnersDialog>
    <!-- 合作伙伴详情 -->
  <DetailPartnersDialog v-model="DetailPartnersDialogVisible" :data="DetailPartnersDialogRow"></DetailPartnersDialog>
</template>
<script setup>
import { ArrowDown } from '@element-plus/icons-vue';
import { ref, reactive,watch } from 'vue';
import { useLoginStore } from "~/store";
import { getPartnersList, editPartners, deletePartners   } from '~/service/partners';
import AddPartnersDialog from './components/AddPartnersDialog.vue';
import EditPartnersDialog from './components/EditPartnersDialog.vue';
import DetailPartnersDialog from './components/DetailPartnersDialog.vue';

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

const addPartnersDialogVisible = ref(false);
const EditPartnersDialogVisible = ref(false);
const EditPartnersDialogRow = ref({});
const DetailPartnersDialogVisible = ref(false);
const DetailPartnersDialogRow = ref({});

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

// 查询参数
const params = reactive({
  
});
const column = [
  
             {
               fixed: true,
               type: 'selection'
             },
              {
               prop: "partners_img",
               label: '图片',
               width: '150'
               },
              {
               prop: "partners_des",
               label: '描述',
               width: '150'
               },
              {
               prop: "partners_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 deletePartners({
      partners_guid: data.map(v => v.partners_guid).join()
    });
    if (res) {
      tableRef.value.reload();
    }
  });
};

// 修改
function handleUpdate(row) {
  EditPartnersDialogVisible.value = true
  EditPartnersDialogRow.value = row
}

// 详情
function handleDetail(row) {
  DetailPartnersDialogVisible.value = true
  DetailPartnersDialogRow.value = row
}



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



</script>
