<template>
  <div class="app-container">
    <div v-loading.fullscreen.lock="loadingFull" />
    <div>
      <el-input v-model="searchParams.search_name" placeholder="请输入消息名" size="small" style="width:250px" />
      <el-select v-model="searchParams.type" placeholder="请选择" size="small">
        <el-option label="系统消息" value="1" />
        <el-option label="订单消息" value="2" />
        <el-option label="下单消息" value="3" />
      </el-select>
      <el-button
        type="primary"
        size="small"
        @click="searchParams.page_index = 1;getList()"
      >
        查询
      </el-button>
    </div>
    <el-table
      :data="table"
      :header-cell-style="{ background: '#f8fbfc' }"
      class="tableBorder"
      border
      stripe
    >
      <el-table-column
        type="index"
        :index="indexMethod"
        width="70"
        label="编号"
        align="center"
      />
      <el-table-column
        prop="title"
        label="标题"
        align="center"
      />
      <el-table-column
        prop="data"
        label="消息内容"
        align="center"
      >
        <template slot-scope="{ row }">
          <div v-if="row.type !== 2">
            {{ row.data }}
          </div>
          <el-button v-else type="text" @click="showOrderGoods(row)">查看订单商品</el-button>
        </template>
      </el-table-column>
      <el-table-column
        prop="created_at"
        label="发送时间"
        align="center"
        width="250"
      />
      <el-table-column
        prop="type"
        label="消息类型"
        align="center"
        width="200"
      >
        <template slot-scope="{ row }">
          <el-tag :color="row.type === 1 ? '#409EFF' : (row.type === 2 ? '#3cc59f' : '#8461d8')" style="color: #ffffff; ">{{ row.type === 1 ? '系统消息' : ( row.type === 2 ? '订单消息' : '下单消息' ) }}</el-tag>
        </template>
      </el-table-column>
    </el-table>
    <div class="batch-container">
      <!-- 分页 -->
      <pagination
        :total="tableTotal"
        :limit="searchParams.page_size"
        :page="searchParams.page_index"
        style="margin-top:0"
        @pagination="changePagination"
        @update:limit="changePagination"
      />
    </div>
    <el-drawer
      title="订单商品"
      :visible.sync="visible.order"
      direction="rtl"
    >
      <el-form label-width="20px">
        <el-form-item
          v-for="(item, i) in orderGoods"
          :key="i"
        >
          <div class="flex">
            <el-image
              style="width: 60px; height: 60px"
              :src="item.img"
              fit="cover"
            />
            <p style="margin-left:20px;margin-right: 20px;">{{ item.name }}</p>
            <p>{{ item.price }}</p>
          </div>
        </el-form-item>
      </el-form>
    </el-drawer>
  </div>
</template>
<script>
// api
import { getList } from '@/api/message/push'
export default {
  data() {
    return {
      searchParams: {
        page_index: 1,
        page_size: 10,
        search_name: '',
        type: '1'
      },
      table: [],
      tableTotal: 0,
      orderGoods: [],
      visible: {
        order: false
      },
      loadingFull: false
    }
  },
  created() {
    this.getList()
  },
  methods: {
    // 获取列表
    async getList() {
      this.loadingFull = true
      try {
        const res = await getList(this.searchParams)
        const { code, message } = res
        if (code === 200) {
          const { data } = res
          const { list, total } = data
          this.tableTotal = total
          this.table = list
        } else {
          this.$message.error(message)
        }
      } catch (e) {
        this.$message.error('获取消息推送列表失败!!')
      }
      this.loadingFull = false
    },
    // 分页页码变化
    changePagination(data) {
      const { page, limit } = data
      this.searchParams.page_size = limit
      this.searchParams.page_index = page
      this.getList()
    },
    // 查看订单商品
    showOrderGoods(row) {
      const { data } = row
      try {
        this.orderGoods = JSON.parse(data)
      } catch (e) {
        this.orderGoods = []
      }
      this.visible.order = true
    },
    // 编号
    indexMethod(index) {
      const { page_index, page_size } = this.searchParams
      index += (page_index - 1) * page_size + 1
      return index
    }
  }
}
</script>
