<template>
  <div>
    <el-dialog title="证书模板列表" width="1200px" :model-value="props.modelValue" :show-close="false"
      :close-on-click-modal="false" @close="closeDialog">
      <div class="head">
        <div></div>
      </div>
      <div class="config">
        <el-table stripe ref="refTable" @current-change="handleSelectionChange" :data="tableData" border
          :row-key="keyid" @row-click="changecoose" style="width: 100%">
          <el-table-column width="55" #default="{ row }">
            <el-radio v-model="ridioIndex" :label="row.id"></el-radio>
          </el-table-column>
          <el-table-column label="模板名称" property="name"></el-table-column>
          <el-table-column label="模板序号" property="template"></el-table-column>
          <el-table-column label="模板图片">
            <template #default="{ row }">
              <el-image style="width: 50px; height: 50px" :src="row.url" fit="scale-down"
                :preview-src-list="[row.url]" />
            </template>
          </el-table-column>
        </el-table>
        <div class="fenye">
          <el-pagination class="pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="listQuery.pageCurrent" :page-sizes="[2, 5, 10, 20]" :page-size="listQuery.pageSize"
            layout="total, prev, pager, next, sizes, jumper" :total="total"></el-pagination>
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">

          <el-button type="primary" @click="onComfirm"> <el-icon>
              <DocumentChecked />
            </el-icon>
            <span>确定</span></el-button>
          <el-button @click="closeDialog" type="primary"> <el-icon>
              <DocumentDelete />
            </el-icon>
            <span>关闭</span></el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
// 引入
import {
  ref,
  watch,
  onMounted,
  defineProps,
  defineEmits
} from "vue";
import { getApi } from "@/api/tobAcco_api.js";
const ridioIndex = ref(null);
const emits = defineEmits(["changeClose"]);
const props = defineProps({
  modelValue: {
    type: Boolean,
    required: true
  },
  // 选择
  data: {
    type: Array,
    default: []
  },
});
const tableData = ref(null)
const total = ref(0)
const listQuery = ref({
  pageCurrent: 1,
  pageSize: 5
})
const refTable = ref(null);
const selected = ref([]);
watch(
  () => props.modelValue,
  (val) => {
    if (val === true) {
      handleFilter();
    } else {
    }
  }
);
//获取详情
onMounted(() => {
  getTableData()
});
const handleFilter = () => {
  listQuery.value.pageCurrent = 1;
  getTableData();
};
// 保存提交
const onComfirm = () => {
  const data = selected.value;
  emits("listdata", data);
  refTable.value.clearSelection();
  closeDialog()
};
const keyid = (row) => {
  return row.id;
};
// 选中一行
const handleSelectionChange = (val) => {
  selected.value = val;
};
//每一项点击事件
function changecoose(val) {
  ridioIndex.value = val.id
  selected.value = val
}
// 获取模板列表
const getTableData = () => {
  getApi(listQuery.value, "/mosty-jcgl/template/getTemplateList").then(async (res) => {
    if (res) {
      total.value = res.total
      for (let i = 0; i < res.records.length; i++) {
        res.records[i].url = await new Promise(async ok => {
          await getApi({}, `/mosty-base/minio/file/download/${res.records[i].file}`).then((res) => {
            if (res && res.url) {
              ok(res.url)
            } else {
              ok('')
            }
          })
        })
      }
      tableData.value = res.records
    }
  });
}
//页码发生变化
const handleCurrentChange = (val) => {
  listQuery.value.pageCurrent = val;
  getTableData();
};
//查询条数发生变化
const handleSizeChange = (val) => {
  listQuery.value.pageSize = val;
  getTableData();
};
// 关闭×
const closeDialog = () => {
  emits("changeClose", false);
};
</script>

<style lang="scss" scoped>
.head {
  display: flex;
  height: 50px;
  align-items: center;
  justify-content: space-between;
}

.config {
  height: 40vh;
  position: relative;

  .fenye {
    position: absolute;
    bottom: 0;
    text-align: right;
  }
}

::v-deep .el-form--inline {
  padding-left: 0 !important;
}

::v-deep .el-radio__label {
  display: none !important;
}

.table-box-radio .el-table1__header-wrapper .el-checkbox {
  display: none !important;
}

::v-deep .el-table__cell {
  // 解决el-image 和 el-table冲突层级冲突问题
  position: static !important;
}
</style>
