<template>
    <div class="page justify-around">
      <div class="addbtn">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item :label="$t('userMouldList.phone')">
                <el-input v-model="formInline.phone" :placeholder="$t('userMouldList.phonePlaceholder')" clearable />
            </el-form-item>
            <el-form-item :label="$t('userMouldList.mouldSmId')">
                <el-input v-model="formInline.mouldSmIdLike" :placeholder="$t('userMouldList.mouldSmIdPlaceholder')" clearable />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="getListData()">{{$t('userMouldList.search')}}</el-button>
            </el-form-item>
        </el-form>
      </div>
  
      <el-table
        :data="tableData"
        style="width: 100%; height: 90%"
        size="large"
        align="center"
        border
      >
        <el-table-column
          prop="coverImg"
          :label="$t('userMouldList.coverImg')"
          align="center"
        >
        <template #default="scope">
          <img :src="scope.row.coverImg" width="50" height="50" alt="" />
          </template>
        </el-table-column>
  
        <el-table-column
          prop="mouldSmId"
          :label="$t('userMouldList.mouldSmId')"
          align="center"
        />
        <el-table-column
          prop="wxCUserBasicInfoList"
          :label="$t('userMouldList.bindPhone')"
          align="center"
        >
        <template #default="scope">
          {{ getListPhone(scope.row.wxCUserBasicInfoList) }}
          </template>
        </el-table-column>
  
        <el-table-column
          prop="createDate"
          :label="$t('userMouldList.createDate')"
          align="center"
        >
          <template #default="scope">
            {{ getDate(scope.row.createDate) }}
          </template>
        </el-table-column>
      </el-table>
    
      <div class="pagination">
        <el-pagination
          v-model:current-page="pageNum"
          v-model:page-size="pageSize"
          :page-sizes="[10, 50, 100]"
          :small="false"
          :disabled="false"
          :background="true"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </template>
  
  <!-- videoType==1为竖,==2为横 -->
  <script setup>
  //#region  导入

  import { userMouldListApi } from '@/apis/userManage.js'
  
  import { useI18n } from "vue-i18n";
  
  import dayjs from "dayjs";
  
  import { useRoute, useRouter } from "vue-router";
  
  const route = useRoute();
  const router = useRouter();
  const { locale } = useI18n();
  const lanChange = ref(locale);
  
  const tableData = ref([]);
    
  const pageNum = ref(1);
  const pageSize = ref(10);
  const total = ref(0);
  
  const getDate = (val) => {
    return dayjs(val).format("YYYY-MM-DD");
  };
  const getListPhone = (list) => {
    let phone = []
    list && list.forEach(ele => {
      phone.push(ele.phone)
    });
    return phone.join(',')
  }

  const handleSizeChange = (val) => {
    pageSize.value = val;
    getListData(pageNum.value, pageSize.value);
  };
  
  const handleCurrentChange = (val) => {
    pageNum.value = val;
    getListData(pageNum.value, pageSize.value);
  };

const formInline = ref({
  phone: '',
  mouldSmIdLike: ''
})
  
  const getListData = async (PageNum, PageSize) => {
    try {
      let data = {
        PageNum: PageNum || 1,
        PageSize: PageSize || 10,
        phone: formInline.value.phone,
        mouldSmIdLike: formInline.value.mouldSmIdLike
      }
      const res = await userMouldListApi(data);
      console.log(res, "res");
      tableData.value = res.data.list;
      total.value = res.data.total * 1;
    } catch (error) {
      console.log(error, "err");
    }
  };

  
  onMounted(() => {
    getListData(1, 10);
  });
  </script>
  
  <style lang="scss" scoped>
  .page {
    height: calc(100vh - 80px);
    // height: calc(100vh - 80px);
    background-color: #ffffff;
    border-radius: 30px 0 0 0;
    overflow: hidden;
    padding: 10vh;
    .addbtn {
      margin-bottom: 2vh;
    }
    .formData {
      padding: 5vh 3vh;
    }
  
    .pagination {
      position: fixed;
      left: 55%;
      bottom: 8vh;
      transform: translateX(-50%);
      border-radius: 5px;
      padding: 10px 20px;
      z-index: 99;
      transition: all 0.3s;
      cursor: pointer;
      &:hover {
        background-color: #b8b8b873;
      }
    }
  }
  </style>
  