<template>
  <div class="app-container">
    <div v-show="showSearch" class="search-form">
      <el-form ref="searchForm" :model="queryParams" inline :label-width="'100px'">
        <el-form-item label="整型场景值ID" prop="sceneId">
          <el-input v-model="queryParams.sceneId" type="text" placeholder="整型场景值ID" />
        </el-form-item>
        <el-form-item label="字符串场景值ID" prop="sceneStr">
          <el-input v-model="queryParams.sceneStr" type="text" placeholder="字符串场景值ID" />
        </el-form-item>
        <el-form-item label="二维码ticket" prop="ticket">
          <el-input v-model="queryParams.ticket" type="text" placeholder="二维码ticket" />
        </el-form-item>
        <el-form-item label="有效时间(秒)" prop="expireSeconds">
          <el-input v-model="queryParams.expireSeconds" type="text" placeholder="有效时间(秒)" />
        </el-form-item>
        <el-form-item class="searchItem" :label-width="'50px'">
          <el-button type="primary" size="mini" @click="getData">查询</el-button>
          <el-button type="default" size="mini" @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <vxe-grid
      ref="vxe"
      highlight-hover-row
      border
      resizable
      sync-resize
      auto-resize
      class="vxe-table-element"
      :loading="loading"
      :start-index="(page.currentPage - 1) * page.pageSize"
      :pager-config="page"
      :columns="columns"
      :data="tableData"
      :toolbar="tableToolbar"
      @page-change="handlePageChange"
      @checkbox-change="({ selection }) => { selections = selection }"
    >
      <template v-slot:toolbar_buttons>
        <el-button v-permission="['weixinQrcode:add']" type="primary" size="mini" @click="add()">新增</el-button>
        <el-button v-permission="['weixinQrcode:edit']" type="warning" size="mini" :disabled="banState1" @click="edit()">编辑</el-button>
        <el-button v-permission="['weixinQrcode:remove']" type="danger" size="mini" :disabled="banState2" @click="remove()">删除</el-button>
        <el-button size="mini" @click="handleReset">刷新</el-button>
        <el-button size="mini" @click="showSearch = !showSearch">搜索</el-button>
        <el-button v-permission="['weixinQrcode:import']" size="mini" @click="importVisible = true">导入</el-button>
        <el-button v-permission="['weixinQrcode:export']" size="mini">
          <template>导出</template>
          <template v-slot:dropdowns>
            <el-button type="text" @click="exportExcel('data')">数据导出</el-button>
            <el-button type="text" @click="exportExcel('template')">模板下载</el-button>
          </template>
        </el-button>
      </template>

      <template v-slot:operation="{ row }">
        <el-button v-permission="['weixinQrcode:edit']" type="warning" size="mini" @click="edit(row.id)">编辑</el-button>
        <el-button v-permission="['weixinQrcode:remove']" type="danger" size="mini" @click="remove(row.id)">删除</el-button>
      </template>
    </vxe-grid>

    <el-dialog title="weixin_qrcode上传" :visible.sync="importVisible">
      <el-upload
        class="avatar-uploader"
        :action="importUrl"
        :on-success="() => { importVisible = false }"
        :show-file-list="false">
        <el-input type="text" placeholder="请选择文件" readonly></el-input>
      </el-upload>
    </el-dialog>

    <detail ref="weixinQrcodeDialog" @refreshDataList="getData" />

  </div>
</template>

<script>
import mixin from 'ecip-web/utils/common-mixin'
import { getData, remove } from 'ecip-web/api/vue/wx/weixinQrcodeApi'
import { getToken } from '@/utils/auth'
import Detail from './components/detail'

export default {
  name: 'modules.wx.weixinQrcodeView',
  components: { Detail },
  mixins: [...mixin],
  data() {
    return {
      importVisible: false,
      showSearch: false,
      loading: false,
      banState1: true, // 工具栏编辑按钮是否禁用，只有当且仅当选择一条记录的时候才可编辑
      banState2: true, //  工具栏删除按钮是否禁用，当选中条数为0的时候禁用
      importUrl: `api/v1/wx/weixinQrcode/importExcel?token=${getToken()}`,
      tableToolbar: {
        id: 'modules.wx.weixinQrcodeView-toolbar',
        custom: true,
        slots: {
          buttons: 'toolbar_buttons'
        },
        zoom: true, // 最大化按钮
        // 列宽操作记录
        resizable: {
          storage: true
        },
        // 列操作记录
        setting: {
          storage: true
        }
      },
      page: {
        total: 0,
        currentPage: 1,
        pageSize: 10,
        align: 'left',
        pageSizes: [10, 20, 50, 100, 200, 500],
        layouts: ['Sizes', 'PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'FullJump', 'Total'],
        perfect: true
      },
      selections: [],
      tableData: [],
      columns: [
        { type: 'checkbox', width: 40, fixed: 'left', align: 'center' },
        { title: 'ID', key: 'id', field: 'id', minWidth: 100, showOverflow: true },
        { title: '二维码标题（详情）', key: 'actionInfo', field: 'actionInfo', minWidth: 100, showOverflow: true },
        { title: '二维码类型：QR_SCENE：临时整型，QR_STR_SCENE：临时字符串，QR_LIMIT_SCENE：永久整型，QR_LIMIT_STR_SCENE：永久字符串', key: 'actionName', field: 'actionName', minWidth: 100, showOverflow: true },
        { title: '整型场景值ID', key: 'sceneId', field: 'sceneId', minWidth: 100, showOverflow: true },
        { title: '字符串场景值ID', key: 'sceneStr', field: 'sceneStr', minWidth: 100, showOverflow: true },
        { title: '二维码ticket', key: 'ticket', field: 'ticket', minWidth: 100, showOverflow: true },
        { title: '有效时间(秒)', key: 'expireSeconds', field: 'expireSeconds', minWidth: 100, showOverflow: true },
        { title: '过期时间', key: 'expireDate', field: 'expireDate', minWidth: 100, showOverflow: true },
        { title: '二维码地址', key: 'qrcodeUrl', field: 'qrcodeUrl', minWidth: 100, showOverflow: true },
        { title: '公众帐号ID', key: 'jwid', field: 'jwid', minWidth: 100, showOverflow: true },
        { title: '触发类型：text文本/news图文', key: 'msgType', field: 'msgType', minWidth: 100, showOverflow: true },
        { title: '文本内容', key: 'textContent', field: 'textContent', minWidth: 100, showOverflow: true },
        { title: '图文选择类型（1：自定义，2：选择模板）', key: 'actionNewsType', field: 'actionNewsType', minWidth: 100, showOverflow: true },
        { title: '图文标题', key: 'newsTitle', field: 'newsTitle', minWidth: 100, showOverflow: true },
        { title: '图文摘要', key: 'newsDesc', field: 'newsDesc', minWidth: 100, showOverflow: true },
        { title: '图文封面图', key: 'newsImg', field: 'newsImg', minWidth: 100, showOverflow: true },
        { title: '图文跳转链接', key: 'newsUrl', field: 'newsUrl', minWidth: 100, showOverflow: true },
        { title: '图文选择模板ID', key: 'newsTemplateid', field: 'newsTemplateid', minWidth: 100, showOverflow: true },
        { title: '标签，逗号隔开', key: 'tags', field: 'tags', minWidth: 100, showOverflow: true },
        { title: '创建人登录名称', key: 'createBy', field: 'createBy', minWidth: 100, showOverflow: true },
        { title: '创建时间', key: 'createTime', field: 'createTime', minWidth: 100, showOverflow: true },
        { title: '修改人登录名称', key: 'updateBy', field: 'updateBy', minWidth: 100, showOverflow: true },
        { title: '修改时间', key: 'updateTime', field: 'updateTime', minWidth: 100, showOverflow: true },
       { title: '操作', width: 150, fixed: 'right', align: 'center', slots: { default: 'operation' } }
      ],
      queryParams: {}
    }
  },
  watch: {
    selections(val) {
      this.banState1 = val.length !== 1
      this.banState2 = val.length === 0
    }
  },
  created() {
    this.getData()
  },
  methods: {
    getData() {
      this.loading = true
      getData(Object.assign({}, { size: this.page.pageSize, current: this.page.currentPage }),
        this.queryParams).then(res => {
        const data = res.data
        this.tableData = data.records
        this.page.total = data.total
      }).catch(e => {
        this.$message.error(`获取数据失败: ${e}`)
      }).finally(() => {
        this.loading = false
      })
    },
    handlePageChange({ currentPage, pageSize }) {
      this.page.currentPage = currentPage
      this.page.pageSize = pageSize
      this.getData()
    },
    add() {
      this.$refs.weixinQrcodeDialog.init('add', '')
    },
    edit(id) {
      const dataId = id || this.selections[0].id
      this.$refs.weixinQrcodeDialog.init('edit', dataId)
    },
    remove(id) {
      const deleteIds = []
      if (id) {
        deleteIds.push(id)
      } else {
        this.$refs.vxe.getSelectRecords().forEach(row => {
          const id = row.id
          deleteIds.push(id)
        })
      }
      this.$confirm(`确定删除所选项吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        remove(deleteIds).then(res => {
          this.getData()
          this.$message.success('删除成功')
        }).catch(e => {
          this.$messgae.error(`删除失败: ${e}`)
        })
      })
    },
    exportExcel(type) {
      if (type === 'data') {
        window.open(`api/v1/wx/weixinQrcode/exportExcel?token=${getToken()}`)
      } else if (type === 'template') {
        window.open(`api/v1/wx/weixinQrcode/excelTemplate?token=${getToken()}`)
      }
    },
    handleReset() {
      this.$refs.searchForm.resetFields()
      this.getData()
    }
  }
}
</script>

<style scoped>

</style>
