<script setup>
import { ref, reactive } from "vue";
import { ArrowDown, Plus, Edit, Delete, UploadFilled, Search } from "@element-plus/icons-vue";

const state = ref({
  page: 1,
  pageSize: 10,
  total: 0,
  tableData: [
    {
      id: 1,
      title: "本公司願景",
      desc: "在電子產業中，發揮化學及材料想像力，透過投資、專業、誠信、夥伴關係成為產品中的領導者。",
      img:"https://fakeimg.pl/150x80/dddddd/",
      select: false,
    },
    {
      id: 2,
      title: "本公司使命",
      desc: "能讓客戶超越百分之百滿意的，除了我們遞送的產品外，最重要是所提供的服務與解決方案。因為我們希望成為客戶值得倚賴的夥伴，所以我們竭盡所能將知識運用於工作。",
      img:"https://fakeimg.pl/150x80/dddddd/",
      select: true,
    },
    {
      id: 3,
      title: "本公司強力招募業務人員",
      desc: "在電子產業中，發揮化學及材料想像力，透過投資、專業、誠信、夥伴關係成為產品中的領導者。",
      img:"https://fakeimg.pl/150x80/dddddd/",
      select: false,
    },
  ],
});

const initform = reactive({
  title: "",
  desc: "",
  img:"",
});

const form = reactive({
  title: "本公司強力招募業務人員",
  desc: "在電子產業中，發揮化學及材料想像力，透過投資、專業、誠信、夥伴關係成為產品中的領導者。",
  img:"https://fakeimg.pl/150x80/dddddd/",
});


const searchText = ref('');

const showAddNewsDrawer = ref(false);
const showEditNewsDrawer = ref(false);

const loading = ref(false);

const deleteRow = (index) => {
  state.value.tableData.splice(index, 1)
}

</script>

<template>
  <div class="main">
    <!-- Breadcrumb: Start -->
    <div class="breadcrumb-section">
      <div>
        <el-breadcrumb separator="/">
          <el-breadcrumb-item> 經銷系統 </el-breadcrumb-item>
          <el-breadcrumb-item><a href="/">公司理念</a></el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div style="display:flex;">
        <el-input
          v-model="searchText"
          placeholder="搜尋"
        >
          <template #append>
            <el-button :icon="Search" />
          </template>
        </el-input>
        <el-button
          type="primary"
          :icon="Plus"
          style="margin-left:10px;"
          @click="showAddNewsDrawer = true"
        >
          新增公司理念
        </el-button>
      </div>
    </div>
    <!-- Breadcrumb: End -->    
    
    <el-card :body-style="{ padding: '0px' }">
      <el-table :data="state.tableData" style="width: 100%">  
        <el-table-column prop="id" label="#" width="50" />
        <el-table-column prop="title" label="標題" width="180"/>
        <el-table-column prop="desc" label="內文" />
        <el-table-column prop="img" label="代表圖片">
          <template #default="scope">
            <el-image style="width: 150px; height: 80px" :src="state.tableData[scope.$index].img" fit="cover" />
          </template>
        </el-table-column>
        <el-table-column prop="select" label="啟用" width="55" >
          <template #default="scope">
            <el-checkbox v-model="state.tableData[scope.$index].select" size="large"/>
          </template>
        </el-table-column>
        <el-table-column label="其他項目" width="105" fixed="right">
          <template #default="scope">            
            <el-dropdown>
              <el-button type="danger">
                操作<el-icon class="el-icon--right"><arrow-down /></el-icon>
              </el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item :icon="Edit" @click="showEditNewsDrawer = true">修改</el-dropdown-item>
                  <el-dropdown-item :icon="Delete" @click.prevent="deleteRow(scope.$index)">刪除</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-block">
        <el-pagination
          v-model:current-page="state.page"
          v-model:page-size="state.pageSize"
          :page-sizes="[10, 20, 50, 100]"
          layout="->,total, sizes, prev, pager, next, jumper"
          :total="state.total"
        />
      </div>
    </el-card>
  </div>

  <div>
    <el-drawer
      ref="drawerRef"
      v-model="showAddNewsDrawer"
      title="新增公司理念"
      direction="rtl"
      size="550"
    >
      <el-card>
        <el-form :model="initform" label-width="120px">
          <el-form-item label="新聞公司理念">
            <el-input v-model="initform.title" />
          </el-form-item>
          <el-form-item label="公司理念內文">
            <el-input v-model="initform.desc" />
          </el-form-item>
          <el-form-item label="上傳圖片">
            <el-upload
              class="upload-demo"
              action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              list-type="picture"
            >
              <el-button type="primary">上傳圖片</el-button>
              <template #tip>
                <div class="el-upload__tip">
                  請上傳jpg/png檔案，並限制在500kb以內。
                </div>
              </template>
            </el-upload>
          </el-form-item>
        </el-form>
        
      </el-card>
      <div class="demo-drawer__footer" style="text-align: right">
        <el-button @click="showAddNewsDrawer = false">取消</el-button>
        <el-button type="primary" :loading="loading" @click="onClick">{{
          loading ? "Submitting ..." : "確認"
        }}</el-button>
      </div>
    </el-drawer>
  </div>

  <div>
    <el-drawer
      ref="drawerRef"
      v-model="showEditNewsDrawer"
      title="修改公司理念"
      direction="rtl"
      size="550"
    >
      <el-card>
        <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-input v-model="form.desc" />
          </el-form-item>
          <el-form-item label="上傳圖片">
            <el-upload
              class="upload-demo"
              action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              list-type="picture"
            >
              <el-button type="primary">上傳圖片</el-button>
              <template #tip>
                <div class="el-upload__tip">
                  請上傳jpg/png檔案，並限制在500kb以內。
                </div>
              </template>
            </el-upload>
          </el-form-item>
        </el-form>     
      </el-card>
      <div class="demo-drawer__footer" style="text-align: right">
        <el-button @click="showEditNewsDrawer = false">取消</el-button>
        <el-button type="primary" :loading="loading" @click="onClick">{{
          loading ? "Submitting ..." : "確認"
        }}</el-button>
      </div>
    </el-drawer>
  </div>
</template>

<style lang="less" scoped>


</style>
