<template>
    <div class="app-container">

      <!-- <el-header>
  
      </el-header> -->
      <template>
        <router-link :to="'/prod/create/1111'">
          <el-button
            type="primary"
            size="small"
            icon="el-icon-edit"
          >
            create
          </el-button>
        </router-link>
      </template>

      <el-table

        v-loading="listLoading"
        :data="list"

        border
        fit
        highlight-current-row
        style="width: 100%"
      >
        <el-table-column
          align="center"

          label="pid"

        >

          <template slot-scope="scope">

            <span>{{ scope.row.pid }}</span>

          </template>
        </el-table-column>

        <el-table-column

          align="center"

          label="pname"

        >

          <template slot-scope="scope">

            <span>{{ scope.row.pname }}</span>

          </template>
        </el-table-column>

        <el-table-column

          align="center"

          label="参数信息"

        >

          <template slot-scope="scope">

            <span>框宽{{ scope.row.prod_info_frame_width }}mm</span><br>
            <span>腿长{{ scope.row.prod_info_leg_long }}mm</span><br>
            <span>镜宽{{ scope.row.prod_info_glass_width }}mm</span><br>
            <span>镜高{{ scope.row.prod_info_glass_height }}mm</span><br>
            <span>鼻宽{{ scope.row.prod_info_norse_width }}mm</span><br>
            <span>重量{{ scope.row.prod_info_weight }}g</span>

          </template>
        </el-table-column>
  
        <el-table-column

          align="center"
          label="Date"

        >

          <template slot-scope="scope">

            <span>{{ scope.row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
          </template>
        </el-table-column>
  
        <el-table-column label="Importance">
          <template slot-scope="scope">

            <svg-icon

              v-for="n in +scope.row.importance"

              :key="n"
              icon-class="star"

              class="meta-item__icon"

            />
          </template>
        </el-table-column>
  
        <el-table-column

          class-name="status-col"

          label="prod_status"

        >
          <template slot-scope="{row}">

            <el-tag :type="row.prod_status | statusFilter">
              {{ row.prod_status }}

            </el-tag>
          </template>
        </el-table-column>
  
        <el-table-column
          align="center"

          label="Actions"

        >

          <template slot-scope="{row}">
            <router-link :to="'/prod/edit/'+row.pid">
              <el-button
                type="primary"
                size="small"
                icon="el-icon-edit"
              >
                Edit1
              </el-button>
            </router-link>
            <router-link :to="'/prod/del/'+row.pid">

              <el-button
                type="primary"
                size="small"
                icon="el-icon-edit"
              >

                Edit2

              </el-button>
            </router-link>

          </template>
        </el-table-column>
      </el-table>

  
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="listQuery.page"
        :limit.sync="listQuery.limit"
        @pagination="getList"
      />

    </div>
  </template>
  
  <script>

  import { fetchList } from '@/api/prod'
  // import { Pagination } from "@/components/Pagination"; // Secondary package based on el-pagination

  import Pagination from '@/components/Pagination' // Secondary package based on el-pagination

  export default {

    name: 'ProdList',

    components: { Pagination },

    filters: {

      statusFilter(prod_status) {

        const statusMap = {
          published: 'success',
          draft: 'info',
          deleted: 'danger'
        }

        return statusMap[prod_status]

      }
    },
    data() {
      return {
        list: null,

        total: 0,

        listLoading: true,
        listQuery: {
          page: 1,

          limit: 20
        }

      }
    },
    created() {
      this.getList()
    },
    methods: {

      getList() {

        this.listLoading = true

        console.log('getList', 'dddddd')

        fetchList(this.listQuery).then(response => {
          this.list = response.data.items
          this.total = response.data.total
          this.listLoading = false

        })
      }
    }
  }
  </script>

  <style scoped>

  .edit-input {
    padding-right: 100px;

  }

  .cancel-btn {
    position: absolute;
    right: 15px;
    top: 10px;

  }
  </style>