<template>
  <div class="tenant">
    <byTable :source="sourceList.data" :pagination="sourceList.pagination" :config="config" :loading="loading" highlight-current-row
             :selectConfig="selectConfig" @moreSearch="moreSearch" :table-events="{
          select: select,
        }" :action-list="[]" @get-list="getList">
      <template #coverUrl="{ item }">
        <div v-if="item.coverList != null && item.coverList.length > 0">
          <img :src="item.coverList[0].fileUrl" class="pic" @click="handleClickFile(item.coverList[0])" />
        </div>
        <div v-else></div>
      </template>

      <template #audioUrl="{ item }">
        <div v-if="item.audioList != null && item.audioList.length > 0">
          <audio controls>
            <source :src="item.audioList[0].fileUrl" type="audio/mp3">
          </audio>
        </div>
        <div v-else></div>
      </template>
    </byTable>
    <el-dialog title="高级检索" v-if="openSearch" v-model="openSearch" width="600">
      <byForm :formConfig="formSearchConfig" :formOption="formOption" v-model="sourceList.pagination">

      </byForm>
      <template #footer>
        <el-button @click="cancelSearch()" size="large">取 消</el-button>
        <el-button type="primary" @click="submitSearch()" size="large">确 定</el-button>
      </template>
    </el-dialog>
  </div>

</template>

<script setup>
import { ElMessage, ElMessageBox } from "element-plus";
import byTable from "@/components/byTable/index";
import byForm from "@/components/byForm/index";
import { computed, nextTick, reactive, ref } from "vue";
const { proxy } = getCurrentInstance();

const router = useRouter();
const loading = ref(false);
const coverTypeList = ref([]);
const submitLoading = ref(false);
const sourceList = ref({
  data: [],
  pagination: {
    total: 0,
    pageNum: 1,
    pageSize: 10,
  },
});

const selectConfig = computed(() => {
  return [];
});

const config = computed(() => {
  return [
    {
      attrs: {
        label: "收礼人手机号",
        prop: "acceptPhone",
        width: 120,
        align: "left",
      },
    },
    {
      attrs: {
        label: "收礼人姓名",
        prop: "acceptName",
        width: 100,
        align: "left",
      },
    },
    {
      attrs: {
        label: "送礼人手机号",
        prop: "givePhone",
        width: 120,
        align: "left",
      },
    },
    {
      attrs: {
        label: "送礼人姓名",
        prop: "giveName",
        width: 100,
        align: "left",
      },
    },
    {
      attrs: {
        label: "送礼人性别",
        prop: "giveSex",
        width: 100,
        align: "left",
      },
    },
    {
      attrs: {
        label: "祝福语内容",
        prop: "blessingContent",
        "min-width": 220,
        align: "left",
      },
    },
    {
      attrs: {
        label: "封面名称",
        prop: "coverName",
        width: 140,
        align: "left",
      },
    },
    {
      attrs: {
        label: "封面",
        slot: "coverUrl",
        width: 100,
        align: "left",
      },
    },
    {
      attrs: {
        label: "音频",
        slot: "audioUrl",
        width: 320,
        align: "left",
      },
    },
  ];
});

const getList = async (req) => {
  sourceList.value.pagination = { ...sourceList.value.pagination, ...req };
  loading.value = true;
  proxy.post("/blessingInfo/page", sourceList.value.pagination).then((res) => {
    sourceList.value.data = res.rows;
    sourceList.value.pagination.total = res.total;
    setTimeout(() => {
      loading.value = false;
    }, 200);
  });
};

const selection = ref({
  data: [],
});
const select = (_selection, row) => {
  selection.value.data = _selection;
};

const handleClickFile = (file) => {
  window.open(file.fileUrl, "_blank");
};

const formOption = reactive({
  inline: true,
  labelWidth: 100,
  itemWidth: 100,
  rules: [],
});
let copySearch = ref({});
const openSearch = ref(false);
const formSearchConfig = computed(() => {
  return [
    {
      type: "input",
      prop: "acceptPhone",
      label: "收礼人手机号",
      itemType: "text",
    },
    {
      type: "input",
      prop: "acceptName",
      label: "收礼人姓名",
      itemType: "text",
    },
    {
      type: "input",
      prop: "givePhone",
      label: "送礼人手机号",
      itemType: "text",
    },
    {
      type: "input",
      prop: "giveName",
      label: "送礼人姓名",
      itemType: "text",
    },
  ];
});

const moreSearch = () => {
  copySearch.value = proxy.deepClone(sourceList.value.pagination);
  openSearch.value = true;
};

const cancelSearch = () => {
  sourceList.value.pagination = copySearch.value;
  openSearch.value = false;
};
const submitSearch = () => {
  openSearch.value = false;
  sourceList.value.pagination.pageNum = 1;
  getList();
};

getList();
</script>

<style lang='scss' scoped>
.tenant {
  padding: 20px;
  .delete-btn {
    margin-top: 10px;
    margin-left: 25px;
  }
}
.avatar-uploader .avatar {
  width: 110px;
  height: 110px;
  display: block;
  background-color: black;
}
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}
.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}
.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 110px;
  height: 110px;
  text-align: center;
  border: 1px dashed var(--el-border-color);
}

.pic {
  object-fit: contain;
  width: 50px;
  height: 50px;
  cursor: pointer;
  vertical-align: middle;
}

.blessingClass {
  background-image: url("../../../assets/victoria/sjk.jpg");
  background-size: cover;
  height: 600px;
  width: 300px;

  padding: 40px 19px;
}
</style>
