<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <!-- 新增 -->
      <div style="display: inline-block;margin: 0px 2px;">
        <el-button
          v-permission="['ADMIN','SDEVICE_ALL','SDEVICE_CREATE']"
          class="filter-item"
          size="mini"
          type="primary"
          icon="el-icon-plus"
          @click="add">新增超链接</el-button>
      </div>
    </div>
    <!--表格渲染-->
    <el-table v-loading="loading" :data="tableData" size="small" style="width: 100%;">
      <el-table-column :index="indexMethod" type="index" width="55" label="序号" align="center" />
      <el-table-column prop="linkName" label="超链接名称" min-width="130%"/>
      <el-table-column prop="linkUrl" label="超链接地址" min-width="130%"/>
      <el-table-column v-if="checkPermission(['ADMIN','SDEVICE_ALL','SDEVICE_EDIT','SDEVICE_DELETE'])" label="操作" width="150px" align="center">
        <template slot-scope="scope">
          <el-button v-permission="['ADMIN','SDEVICE_ALL','SDEVICE_EDIT']" size="mini" type="primary" icon="el-icon-edit" @click="edit(scope.row)"/>
          <el-popover
            v-permission="['ADMIN','SDEVICE_ALL','SDEVICE_DELETE']"
            :ref="scope.row.id"
            placement="top"
            width="180">
            <p>确定删除本条数据吗？</p>
            <div style="text-align: right; margin: 0">
              <el-button size="mini" type="text" @click="$refs[scope.row.id].doClose()">取消</el-button>
              <el-button :loading="delLoading" type="primary" size="mini" @click="subDelete(scope.row)">确定</el-button>
            </div>
            <el-button slot="reference" type="danger" icon="el-icon-delete" size="mini"/>
          </el-popover>
        </template>
      </el-table-column>
    </el-table>
    <!--分页组件-->
    <el-pagination :total="total" :current-page="page" :page-size="pageSize" style="margin-top: 8px;" layout="total, prev, pager, next, sizes" @size-change="sizeChange" @current-change="pageChange" />
    <!-- 表单渲染 -->
    <el-dialog :close-on-click-modal="false" :before-close="cancelForm" :visible.sync="visible" append-to-body title="超链接设置" width="600px">
      <el-form ref="formViewRef" :model="formData" label-width="110px">
        <el-form-item label="超链接名称：" prop="linkName">
          <el-input v-model="formData.linkName" class="cell-input"/>
        </el-form-item>
        <br>
        <el-form-item label="超链接地址：" prop="linkUrl">
          <el-input v-model="formData.linkUrl" class="cell-input"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="text" @click="cancelForm">取消</el-button>
        <el-button type="primary" @click="submitForm()">确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import checkPermission from '@/utils/permission'
import { HttpReq } from '@/api/common'

export default {
  data() {
    return {
      loading: false,
      delLoading: false,
      visible: false,
      page: 1,
      pageSize: 10,
      total: 0,
      tableData: [],
      formData: {
        linkName: '',
        linkUrl: ''
      }
    }
  },
  created() {
    this.$nextTick(() => {

    })
  },
  methods: {
    checkPermission,
    indexMethod(index) {
      return 1 + index + this.page * this.pageSize
    },
    loadData() {
      // 清除参数无值的情况
      HttpReq.backstageApi.getLinkSrcList({
        pageNum: this.page,
        pageSize: this.pageSize
      }).then((res) => {
        this.tableData = res.list
        this.total = res.totalCount
      })
    },
    subDelete(item) {
      this.delLoading = true
    },
    pageChange(e) {
      this.page = e
      this.loadData()
    },
    sizeChange(e) {
      this.page = 1
      this.pageSize = e
      this.loadData()
    },
    cancelForm() {
      this.visible = false
      this.formData = {
        linkName: '',
        linkUrl: ''
      }
      this.loadData()
    },
    submitForm() {
      if (this.formData.id) {
        HttpReq.backstageApi.updateWeixinlink(this.formData).then((res) => {
          this.$notify({
            title: res.message,
            type: res.code === 200 ? 'success' : 'error'
          })
          if (res.code === 200) {
            this.cancelForm()
            this.loadData()
          }
        })
      } else {
        HttpReq.backstageApi.addWeixinlink(this.formData).then((res) => {
          this.$notify({
            title: res.message,
            type: res.code === 200 ? 'success' : 'error'
          })
          if (res.code === 200) {
            this.cancelForm()
            this.loadData()
          }
        })
      }
    },
    add() {
      this.visible = true
    },
    edit(item) {
      this.visible = true
      this.formData = item
    }
  }
}
</script>

<style scoped>

</style>
