<template>
  <div class="content">
    <el-button type="primary" @click="handleEditForm">
      新增
    </el-button>
    <el-table
      ref="multipleTable" v-loading="loading" class="table" stripe
      border
      :header-cell-style="tableOptions.headStyle" :data="list"
    >
      <el-table-column type="selection" align="center" width="55" />
      <el-table-column prop="id" align="center" label="渠道ID" show-overflow-tooltip />
      <el-table-column prop="channelName" align="center" label="渠道名称" show-overflow-tooltip />
      <el-table-column prop="registerUrl" align="center" label="渠道注册链接" show-overflow-tooltip>
        <template #default="scope">
          <span v-if="scope.row.registerUrl">
            {{ scope.row.registerUrl }}
          </span>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column prop="channelCode" align="center" label="渠道码" width="130" show-overflow-tooltip />
      <el-table-column prop="registerCount" label="渠道注册人数" align="center" width="130" show-overflow-tooltip />
      <el-table-column prop="orderUserCount" label="渠道下单人数" width="130" align="center" show-overflow-tooltip />
      <el-table-column prop="orderCount" label="渠道下单笔数" width="130" align="center" show-overflow-tooltip />
      <el-table-column prop="orderAmount" align="center" label="渠道下单总金额" width="130" show-overflow-tooltip />
      <el-table-column align="center" label="操作" width="260" fixed="right">
        <template #default="scope">
          <el-button size="mini" type="primary" @click="handleCopeLink(scope.row)">
            复制链接
          </el-button>
          <el-button size="mini" type="warning" @click="handleEditForm(scope.row)">
            编辑
          </el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.row)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      background layout="total, sizes, prev, pager, next, jumper" :current-page="queryOptions.page"
      :page-size="queryOptions.pageSize" :page-sizes="tableOptions.pageSizes" :total="tableOptions.total"
      @size-change="(val) => handlePageChange(val, 1)" @current-change="(val) => handlePageChange(val, 2)"
    />
    <!--  表单  -->
    <ChannelForm v-model="showForm" :item="formItem" @confirm="handleResetTable" @cancel="handleResetTable" />
  </div>
</template>

<script>
import ChannelForm from './form'
import { getList, del } from '@/api/channel'

export default {
  name: 'Index',
  components: { ChannelForm },
  data() {
    return {
      showForm: false,
      formItem: {},
      loading: false,
      list: [],
      queryOptions: {
        page: 1,
        pageSize: 10
      },
      tableOptions: {
        headStyle: { background: '#EEF3FF', color: '#333333' },
        pageSizes: [5, 10, 30, 50, 100],
        total: 0
      }
    }
  },
  created() {
    this.handleGetTable()
  },
  methods: {
    handleResetTable() {
      this.queryOptions.page = 1
      this.handleGetTable()
    },
    async handleGetTable() {
      this.loading = true
      const { data } = await getList(this.queryOptions)
      this.list = data.list
      this.tableOptions.total = data.total
      this.loading = false
    },

    /**
		 * 分页
		 * @param val
		 * @param type 1page 2pageSize
		 */

    handlePageChange(val, type) {
      type === 1 ? this.queryOptions.page = val : this.queryOptions.pageSize = val
      this.handleGetTable()
    },
    handleEditForm(item) {
      if (!item) {
        this.formItem = {}
      } else {
        this.formItem = item
      }
      this.showForm = true
    },

    handleCopeLink(item) {
      const htmlInputElement = document.createElement('input')
      htmlInputElement.value = item.registerUrl
      document.body.appendChild(htmlInputElement)
      htmlInputElement.select()
      document.execCommand('copy')
      document.body.removeChild(htmlInputElement)
      this.$message.success('复制成功')
    },

    handleDelete(item) {
      const message = `是否删除渠道${item.channelName}`
      this.$confirm(message, '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        this.loading = true
        // TODO 删除逻辑
        await del({ id: item.id, channelName: item.channelName })
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      })
        .catch(() => {
        })
        .finally(() => {
          this.loading = false
          this.handleGetTable()
        })
    }
  }
}
</script>

<style
  lang="scss"
  scoped
>
.content {
	padding: 20px;
	box-sizing: border-box;

	.table {
		margin: 20px 0;
	}
}
</style>
