<template>
  <div class="page justify-around">
    <el-alert :title="`${$t('coindeduc.currencyValue')}：${currentValue}`" type="success" :closable="false" />

    <el-table  :data="tableData" style="width: 100%; height: 90%" size="large" align="center" border>
      <el-table-column
        prop="title"
        :label="$t('coindeduc.titleList')"
        align="center"
      />

      <el-table-column
        prop="videoPlayUrl"
        :label="$t('coindeduc.videoPlayUrl')"
        align="center"
      />
      <el-table-column
        prop="videoTime"
        :label="$t('coindeduc.videoTime')"
        align="center"
      />
      <el-table-column
        prop="costPoints"
        :label="$t('coindeduc.costPoints')"
        align="center"
      />
      <el-table-column
        prop="createTime"
        :label="$t('coindeduc.createTime')"
        align="center"
      >
        <template #default="scope">
          {{ getDate(scope.row.createDate) }}
        </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        :label="$t('coindeduc.operate')"
        align="center"
      >
        <template #default="scope">
            <el-button link type="primary" size="small" @click="detailView(scope.row)">{{ $t('coindeduc.view') }}</el-button>
        </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>
    <el-dialog v-model="dialogVisible" :title="`${$t('coindeduc.detailTitle')}：`"  width="40%" :before-close="handleClose" >
      <el-form :model="form" label-width="120px">
        <el-form-item label="名称">
          <el-input v-model="form.title" />
        </el-form-item>
        <el-form-item label="视频类型">
          <el-radio-group v-model="form.videoType">
            <el-radio :label="1">竖版</el-radio>
            <el-radio :label="2">横版</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="文案">
          <el-input v-model="form.paperwork"  type="textarea" />
        </el-form-item>
        <el-form-item label="封面图">
          <img :src="form.coverImg" alt="" :style="{ width: form.videoType === 1 ? '50%' : '100%'}">
        </el-form-item>
        <el-form-item label="视频地址">
          <el-input v-model="form.videoPlayUrl" />
          <!-- <video :src="form.videoPlayUrl" style="width:100%;max-height: 300px;"></video> -->
        </el-form-item>
        <el-form-item label="视频时长">
          <el-input v-model="form.videoTime" />
        </el-form-item>
        <el-form-item label="创建时间">
          <el-input v-model="form.createDate" />
        </el-form-item>
        <el-form-item label="消耗金币">
          <el-input v-model="form.costPoints" />
        </el-form-item>
        <el-form-item label="消耗金币明细">
          <el-input v-model="form.costPointsDetail" />
        </el-form-item>
        <el-form-item>
          <el-button @click="dialogVisible = false">关闭</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<!-- videoType==1为竖,==2为横 -->
<script setup>
//#region  导入
import { coindedApi, getDetailApi, getUserPoinsApi, findByIdApi } from '@/apis/my.js'
import dayjs from "dayjs";
import { useI18n } from "vue-i18n";
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 HH:mm:ss");
};

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

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

const getListData = async (PageNum, PageSize) => {
  try {
    let data = {
      projectType: 2,
      pageNum: 1,
      pageSize: 10
    }
    const res = await coindedApi(data);
    tableData.value = res.data.list;
    total.value = res.data.total * 1;
  } catch (error) {
    console.log(error, "err");
  }
};

// 当前币值
const currentValue = ref('')
function currentValFn() {
  getUserPoinsApi().then(res => {
    currentValue.value = res.data
  })
}

// 查看详情 
const dialogVisible = ref(false)
const form = ref({
  title: '',
  videoPlayUrl: ''

})

function detailView(item) {
  findByIdApi(item.id).then(res => {
    res.data.createDate = getDate(res.data.createDate)
    res.data.videoTime = res.data.videoTime + (lanChange.value == "zh-cn" ? '（秒）' : '(S)')
    form.value = res.data
    dialogVisible.value = true
  })
}

onMounted(() => {
  getListData(1, 10);
  currentValFn()
});
</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>
