<template>
  <div class="px-70 pt-34">
    <div class="fs-18">剧本生短剧</div>
    <div class="flex-center gap-10 mt-26">
      <el-input v-model="searchValue" class="responsive-input" placeholder="搜索短剧项目名称" :prefix-icon="Search" />
      <el-date-picker v-model="value1" type="daterange" single-panel start-placeholder="开始日期" end-placeholder="结束日期" />
      <el-select v-model="selectValue" placeholder="Select" style="width: 240px">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
      <el-button type="primary" color="#785BE5" :dark="true">
        <img src="@/static/imgs/icon1.png" alt="">
        <span class="ml-4">创建项目</span>
      </el-button>
    </div>
    <section>
      <div class="flex flex-wrap gap-30 mt-30">
        <div v-for="(item, index) in 8" :key="index" class="child cursor-pointer" @click="gotoDetail(item)">
          <div class="bgjb rounded-12 flex-center">
            <img src="@/static/imgs/icon1.png" class="w-30" alt="">
          </div>
          <div class="flex-align-center mt-12">
            <span class="fs-16">大炎神工：我靠折纸镇万妖</span>
            <span class="bg-EAEAF9">创作中</span>
          </div>
          <div class="flex-between-center mt-14">
            <div class="text-999 fs-12">2020-10-22 13:20:30 创建</div>
            <el-dropdown>
              <el-button text :icon="MoreFilled" class="morebtn" />
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="openModal(item, '1')">编辑名称</el-dropdown-item>
                  <el-dropdown-item @click="openModal(item, '2')">删除</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </div>
      </div>
    </section>
    <section class="mt-20 flex justify-end">
      <el-pagination v-model:current-page="pages.current" v-model:page-size="pages.pageSize"
        :page-sizes="[10, 20, 40, 60]" size="small" :background="false" layout="total, sizes, prev, pager, next, jumper"
        :total="pages.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </section>
    <EditProjectNameDialog ref="editProjectNameRef" />
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { Search, MoreFilled } from '@element-plus/icons-vue'
import EditProjectNameDialog from './components/EditProjectNameDialog.vue';
import { useRouter } from 'vue-router';

const searchValue = ref('');
const value1 = ref();
const selectValue = ref('1');
const router = useRouter();

const pages = ref({
  current: 1,
  pageSize: 10,
  total: 100
})
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
}
const options = [
  {
    value: '1',
    label: '所有成员',
  },
  {
    value: '2',
    label: '由我创建',
  },
]

const editProjectNameRef: any = ref(null)
const openModal = (item: any, type: string) => {
  editProjectNameRef.value?.open(item, type)
}

const gotoDetail = (item: any) => {
  router.push({ path: '/drama' })
}

</script>
<style scoped lang="scss">
.child {
  flex: 0 0 calc(20% - 24px);

  /* (4个间隙 × 30px) / 5 = 15px */
  .bg-EAEAF9 {
    background-color: #EAEAF9;
    color: #785BE5;
    padding: 2px 4px;
    border-radius: 4px;
    font-size: 12px;
    margin-left: 10px;
  }

  .bgjb {
    width: 100%;
    height: 187px;
    background: url(@/static/imgs/bg1.png) no-repeat 50%;
    background-size: cover;
  }

  .morebtn {
    opacity: 0;
  }

  &:hover {
    .morebtn {
      opacity: 0.9;
    }
  }
}


:deep(.el-pager) {
  gap: 6px;
}

:deep(.el-pager li) {
  background-color: transparent;
  border: 1px solid #EAEAF9;
  border-radius: 4px;

  &.is-active {
    border-color: #785BE5;
  }
}

:deep(.btn-prev),
:deep(.btn-next) {
  background-color: transparent;
  border: 1px solid #EAEAF9;
  border-radius: 4px;
  margin-right: 6px;
  margin-left: 6px;
}

:deep(.el-button.is-text) {
  outline: none !important;

  &:hover {
    background-color: #eee;
  }
}


/* 1800px以下：一行4个 */
@media (max-width: 1800px) {
  .child {
    flex: 0 0 calc(25% - 22.5px);
    /* (3个间隙 × 30px) / 4 = 15px */
  }
}

/* 1400px以下：一行3个 */
@media (max-width: 1400px) {
  .child {
    flex: 0 0 calc(33.333% - 20px);
    /* (2个间隙 × 30px) / 3 ≈ 20px */
  }
}
</style>