<template>
    <div class="page justify-around">
      <div class="addbtn">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item :label="$t('videoList.phone')">
                <el-input v-model="formInline.phone" :placeholder="$t('videoList.phonePlaceholder')" clearable />
            </el-form-item>
            <el-form-item :label="$t('videoList.text')">
                <el-input v-model="formInline.paperwork" :placeholder="$t('videoList.textPlaceholder')" clearable />
            </el-form-item>
            <el-form-item :label="$t('videoList.type')">
              <el-select
                v-model="formInline.videoType"
                :placeholder="$t('videoList.typePlaceholder')"
                clearable
              >
                <el-option :label="$t('videoList.portrait')" value="1" />
                <el-option :label="$t('videoList.transversePlate')" value="2" />
              </el-select>
            </el-form-item>
            <el-form-item :label="$t('videoList.status')">
              <el-select
                v-model="formInline.isDel"
                :placeholder="$t('videoList.statusPlaceholder')"
                clearable
              >
                <el-option :label="$t('videoList.notDeleted')" value="0" />
                <el-option :label="$t('videoList.deleted')" value="1" />
              </el-select>
            </el-form-item>
            <el-form-item :label="$t('videoList.time')">
                <el-date-picker
                    v-model="formInline.time"
                    type="daterange"
                    range-separator="To"
                    start-placeholder="Start date"
                    end-placeholder="End date"
                    value-format="YYYY-MM-DD"
                    :default-value="new Date()"
                />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="getListData()">{{ $t('videoList.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="videoType"
          :label="$t('videoList.type')"
          align="center"
          >
          <template #default="scope">
            {{ getVideoType(scope.row.videoType) }}          
          </template>
        </el-table-column>
  
        <el-table-column
          prop="paperwork"
          :label="$t('videoList.text')"
          align="center"
        />
        <el-table-column
          prop="isDel"
          :label="$t('videoList.status')"
          align="center"
        >
        <template #default="scope">
            {{ getIsDel(scope.row.isDel) }}          
          </template>
      </el-table-column>
        <el-table-column
          prop="title"
          :label="$t('videoList.title')"
          align="center"
        />
        <el-table-column
          prop="coverImg"
          :label="$t('videoList.coverImg')"
          align="center"
        >
        <template #default="scope">
          <img :src="scope.row.coverImg" width="50" height="50" alt="" />
          </template>
        </el-table-column>
        <el-table-column
          prop="videoPlayUrl"
          :label="$t('videoList.videoPlayUrl')"
          align="center"
        />
        <el-table-column
          prop="videoTime"
          :label="$t('videoList.videoTime')"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="videoSize"
          :label="$t('videoList.videoSize')"
          align="center"
        />
        <el-table-column
          prop="videoMsg"
          :label="$t('videoList.videoMsg')"
          align="center"
        />
        <el-table-column
          prop="costPoints"
          :label="$t('videoList.costPoints')"
          align="center"
        />
        <el-table-column
          prop="costPointsDetail"
          :label="$t('videoList.costPointsDetail')"
          align="center"
        />
        <el-table-column
          prop="createDate"
          :label="$t('videoList.createDate')"
          align="center"
        >
          <template #default="scope">
            {{ getDate(scope.row.createDate) }}
          </template>
        </el-table-column>

        <el-table-column
          fixed="right"
          :label="$t('keyMangage.operations')"
          align="center"
        >
          <template #default="scope">
              <el-button link type="primary" size="small" @click="showDetail(scope.row.id)">{{$t('videoList.view')}}</el-button>
              <el-button v-if="scope.row.isDel === 0" link type="primary" size="small" @click="confirmDel(scope.row.id)">{{$t('videoList.del')}}</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" v-if="dialogVisible" :title="`${$t('videoList.videoDetail')}：`"  width="40%">
      <el-form :model="form" label-width="120px">
        <el-form-item :label="$t('videoList.name')">
          <el-input v-model="form.title" />
        </el-form-item>
        <el-form-item :label="$t('videoList.videType')">
          <el-radio-group v-model="form.videoType">
            <el-radio :label="1">{{$t('videoList.portrait')}}</el-radio>
            <el-radio :label="2">{{$t('videoList.transversePlate')}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item :label="$t('videoList.text')">
          <el-input v-model="form.paperwork"  type="textarea" />
        </el-form-item>
        <el-form-item :label="$t('videoList.coverImg')">
          <img :src="form.coverImg" alt="" style="width:100%;max-height: 200px;">
        </el-form-item>
        <el-form-item :label="$t('videoList.videoPlayUrl')">
          <el-input v-model="form.videoPlayUrl" />
          <!-- <video :src="form.videoPlayUrl" style="width:100%;max-height: 300px;"></video> -->
        </el-form-item>
        <el-form-item :label="$t('videoList.videoTime')">
          <el-input v-model="form.videoTime" />
        </el-form-item>
        <el-form-item :label="$t('videoList.createDate')">
          <el-input v-model="form.createDate" />
        </el-form-item>
        <el-form-item :label="$t('videoList.costPoints')">
          <el-input v-model="form.costPoints" />
        </el-form-item>
        <el-form-item :label="$t('videoList.costPointsDetail')">
          <el-input v-model="form.costPointsDetail" />
        </el-form-item>
        <el-form-item>
          <el-button @click="dialogVisible = false">{{ $t('videoList.close') }}</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    </div>
  </template>
    <script setup>
  //#region  导入
  
  import { videoListApi, videoListFindByIdApi, videoListDelApi } 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 getVideoType = (val) => {
  return val === 1 ? "竖版" : "横版";
};
const getIsDel = (val) => {
  return val === 1 ? "已删除" : "未删除";
};

  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 formInline = ref({
    phone: route.query.phone || '',
    productTitle: '',
    time: ''
})
  
  const getListData = async (PageNum, PageSize) => {
    try {
      let data = {
        PageNum: PageNum || 1,
        PageSize: PageSize || 10,
        phone: formInline.value.phone,
        projectType: 2,
        productTitle: formInline.value.productTitle,
        startDate: formInline.value.time ? formInline.value.time[0] : '',
        endDate: formInline.value.time ? formInline.value.time[1] : '',
        id: route.query.id || '',
        isDel: formInline.value.isDel,
        videoType: formInline.value.videoType,
        paperwork: formInline.value.paperwork
      }
      const res = await videoListApi(data);
      tableData.value = res.data.list;
      total.value = res.data.total * 1;
    } catch (error) {
      console.log(error, "err");
    }
  };
  // 查看详情
  const dialogVisible = ref(false)
  const form = ref({})
  function showDetail(id) {
    videoListFindByIdApi(id).then(res => {
      if(res.code === 200){
        dialogVisible.value = true
        form.value = res.data
      }
    })
  }
  
  function confirmDel(id) {
    ElMessageBox.confirm('你确定要删除吗?').then(() => {
      videoListDelApi(id).then(res => {
        if (res.code == 200) {
          ElMessage.success("删除成功！");
          getListData(1, 10)
        }
      })
      done()
    }).catch(() => {
      // catch error
    })
  }
  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>
  