import { ref, h } from "vue";
import editForm from "./form.vue";
import detailView from './detailView.vue';
import {
  querySingerUser,
  editSingerUser
} from "@/api/modules/newuserList";
import { message } from "@/utils/message";
import { addDialog } from "@/components/ReDialog";
export function useData() {
  const formRef = ref();
  const loading = ref(true);
  const tableList = ref([]);
  const isShow = ref(false);
  const pagination = ref({
    total: 0,
    pageSize: 10,
    pageSizes: [10, 20, 50, 100, 500, 1000, 2000],
    currentPage: 1,
    background: true
  });
  const searchForm = ref({
    start_time: "",
    end_time: "",
    search: "",
    status: ""
  });
  const searchLabel = ref([
    { label: "昵称/用户ID", prop: "search", type: "input" },
    {
      label: "认证状态", prop: "status", type: "select", optionList: [
        { label: "全部", value: "" },
        { label: "已通过", value: 1 },
        { label: "待审核", value: 0 },
        { label: "已拒绝", value: 2 }
      ]
    },
    { label: "开始时间", prop: "start_time", type: "date" },
    { label: "结束时间", prop: "end_time", type: "date" }
  ]);
  const tableLabel = ref([
    {
      label: "Id",
      prop: "id"
    },
    {
      label: "用户ID",
      prop: "user_code"
    },
    {
      label: "用户昵称",
      prop: "nickname"
    },
    {
      label: "手机号",
      prop: "mobile"
    },
    {
      label: "性别",
      prop: "sex",
      cellRenderer: ({ row }) => (
        <div>{row.sex === 1 ? '男' : '女'}</div>
      )
    },
    // {
    //   label: "歌手试音地址",
    //   prop: "song",
    //   cellRenderer: ({ row }) => (
    //     <el-button type={'text'} >试听歌曲</el-button>
    //   )
    // },
    {
      label: "状态",
      prop: "status",
      cellRenderer: ({ row }) => (
        <el-tag type={row.status === 1 ? 'success' : row.status === 0 ? 'info' : 'error'} >{row.status === 1 ? '已通过' : row.status === 0 ? '待审核' : '已拒绝'}</el-tag>
      )
    },
    {
      label: "备注",
      prop: "remark"
    },
    {
      label: "提交时间",
      prop: "createtime"
    },
    {
      label: "操作",
      fixed: "right",
      slot: "operation"
    }
  ]);
  const detailData = ref(null)
  const onSearch = async (formData) => {
    loading.value = true;
    searchForm.value = { ...formData }
    const { data, code } = await querySingerUser({
      ...formData,
      page: pagination.value.currentPage,
      page_limit: pagination.value.pageSize,

    });
    if (code) {
      detailData.value = data;
      tableList.value = data.lists;
      pagination.value.total = data.count;
      pagination.value.currentPage = data.page;
    }
    loading.value = false;
  };
  const handleSizeChange = (val: number) => {
    pagination.value.pageSize = val;
    onSearch(searchForm.value);
  };
  const handleCurrentChange = (val: number) => {
    pagination.value.currentPage = val;
    onSearch(searchForm.value);
  };
  const viewSongList = (rowData) => {
    addDialog({
      title: `查看歌曲列表`,
      props: {
        rowData: rowData
      },
      width: "60%",
      hideFooter: true,
      closeOnClickModal: false,
      contentRenderer: () => h(detailView)
    });
  }
  // const openSong = (rowData) => {
  //   addDialog({
  //     title: `试听音乐`,
  //     props: {
  //       rowData: rowData
  //     },
  //     width: "60%",
  //     hideFooter: true,
  //     closeOnClickModal: false,
  //     contentRenderer: () => h(detailView)
  //   });
  // }
  const openDialog = (title = "新增", rowData: any) => {
    addDialog({
      title: `${title}歌手认证信息`,
      props: {
        formInline: {
          status: '',
          remark: ''
        },
        songUrl: rowData.song
      },
      width: "40%",
      closeOnClickModal: false,
      contentRenderer: () => h(editForm, { ref: formRef, formInline: null }),
      beforeSure: (done, { options }) => {
        const FormRef = formRef.value.getRef();
        const curData = options.props.formInline;
        delete curData.higherMenuOptions;
        const saveData = async form => {
          const { code, msg } = await editSingerUser({ ...form, id: rowData.id });
          if (code) {
            message("新增成功", { type: "success" });
            onSearch(searchForm.value);
            done();
          } else {
            message(msg, { type: "error" });
          }
        };
        FormRef.validate(valid => {
          if (valid) {
            saveData(curData);
          }
        });
      }
    });
  };
  return {
    searchForm,
    searchLabel,
    onSearch,
    isShow,
    tableList,
    tableLabel,
    pagination,
    handleSizeChange,
    handleCurrentChange,
    loading,
    openDialog,
    viewSongList,
    detailData
  };
}