<template>
  <div class="app-container full-height">
    <!-- 查询条件 -->
    <el-card class="filter-container" shadow="never">
      <el-form label-width="110px" :inline="true" :model="condition" @submit.native.prevent
               @keyup.enter.native="conditionQuery"
      >
        <!--查询条件-->
        <el-form-item label="备注" prop="tip">
          <el-input v-model="condition.tip" placeholder="通过备注查找" clearable/>
        </el-form-item>
        <el-form-item label="二维码url" prop="tip">
          <el-input v-model="condition.qrUrl" placeholder="通过url查找" clearable/>
        </el-form-item>
        <!--        <el-form-item label="" prop="">-->
        <!--          <el-input v-model="condition." placeholder="请输入" />-->
        <!--        </el-form-item>-->
        <!--End-->
        <el-form-item>
          <el-button type="primary" @click="conditionQuery">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button @click="handleResetCondition">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 表格操作 -->
    <el-card class="table-operate-container" shadow="never">
      <el-button size="mini" icon="el-icon-plus" type="primary" plain @click="addRow">添加</el-button>
      <el-button :disabled="!hasSelection" type="danger" size="mini" @click="removeBatchRows">批量删除
      </el-button>
    </el-card>

    <!-- 表格 -->
    <div ref="tableContainer" class="table-container">
      <!-- 表格主体 -->
      <el-table ref="listTable" v-loading="selectLoading" :max-height="tableMaxHeight" :data="tableData" border
                style="width: 100%" @row-click="handleRowClick" @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="40" align="center"/>
        <el-table-column type="index" label="序号" width="60" align="center"/>
        <el-table-column property="toUrl" show-overflow-tooltip label="指向Url" width="230" align="center"/>
        <el-table-column property="qrUrl" show-overflow-tooltip label="二维码Url" width="230" align="center"/>
        <el-table-column property="tip" show-overflow-tooltip label="备注" min-width="25%" align="center"/>
        <el-table-column property="status" label="状态" width="90" align="center">
          <template slot-scope="scope">
            <el-tooltip
              v-if="scope.row.id"
              :content="formatterStatus(scope.row.status)"
              placement="top"
            >
              <el-switch
                v-model="scope.row.status"
                :active-value="1"
                :inactive-value="0"
                @click.stop.native
                @change="handleStatusChange(scope.row)"
              />
            </el-tooltip>
          </template>
        </el-table-column>
        <!--<el-table-column property="" label="" min-width="25%" align="center" />-->
        <!--<el-table-column property="" label="" width="200" align="center" />-->
        <el-table-column label="操作" width="250" align="center">
          <template slot-scope="scope">
            <el-button size="mini" @click="buildQR(scope.row.toUrl)">二维码
            </el-button>
            <el-button size="mini" @click.stop="handleEdit(scope.row)">编辑</el-button>
            <el-button type="danger" plain size="mini" @click.stop="handleRemove(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- End 表格主体 -->

      <!-- 表格页码控件 -->
      <div class="pagination-container">
        <el-pagination background layout="total, sizes, prev, pager, next,jumper"
                       :current-page.sync="condition.pageNumber" :page-size.sync="condition.pageSize"
                       :page-sizes="[10, 20, 30, 50, 100]" :total="total" @size-change="conditionQuery"
                       @current-change="conditionQuery"
        />
      </div>
      <!-- End 表格页码控件 -->
    </div>
    <!-- End 表格 -->

    <!-- 编辑弹窗 -->
    <edit-dialog v-if="showDialog" :row="editRowData" :show.sync="showDialog" :is-add="isAddDialog"
                 @saved="conditionQuery"
    />

    <qr-image-dialog v-if="showQr" :url="QrUrl" :show.sync="showQr"/>

  </div>
</template>

<script>

/**
 * @version 2.0
 */

/* Base */
import { page, remove, updateStatus } from '@/api/qr'
import EditDialog from '@/views/qr/edit'
import QrImageDialog from '@/views/qr/qrImage'

const default_condition = {
  tip: null,
  qrUrl: null,
  pageNumber: 1,
  pageSize: 10
}
/* ↑ Base */
export default {
  name: 'QR',
  components: { QrImageDialog, EditDialog },
  data() {
    return {
      showQr: false,
      QrUrl: null,
      /* Edit Dialog */
      editRowData: null,
      showDialog: false,
      isAddDialog: null,
      /* ↑ Edit Dialog */
      /* Base */
      condition: JSON.parse(JSON.stringify(default_condition)),
      tableData: [],
      total: null,
      selectLoading: false,
      tableMaxHeight: null,
      multipleSelection: []
      /* ↑ Base */
    }
  },
  computed: {
    hasSelection() {
      return this.multipleSelection.length > 1
    }

  },
  watch: {},
  created() {

  },
  mounted() {
    /* Base */
    this.resizeTable()
    window.onresize = () => {
      return (() => {
        this.resizeTable()
      })()
    }
    /* ↑ Base */
    // /* todo 测试的模拟数据 */
    // let datas = []
    // for (let i = 0; i < 23; i++) {
    //   datas.push({ id: i, name: 'test-' + i, choose: 'option-' + (i % 5) })
    // }
    // this.tableData = datas
    this.conditionQuery()
  },
  methods: {
    formatterStatus(status) {
      return status === 0 ? '禁用' : '启用'
    },
    buildQR(url) {
      this.showQr = true
      this.QrUrl = url
    },
    handleStatusChange(row) {
      // 保存点击之后v-modeld的值(1，0) ，类型不同，不能生效
      const status = row.status
      // 保持switch点击前的状态
      row.status = 1 - parseInt(row.status)
      const title = this.formatterStatus(status) + '?'
      this.$confirm(title, '提示', {
        type: 'warning'
      }).then(() => {
        const loading = this.$loading({ background: this.$elementGlobal.loadingBackground })
        let data = JSON.parse(JSON.stringify(row))
        data.status = status
        updateStatus(data).then((r) => {
          loading.close()
          row.status = status // 这一步很重要，row.status会根据status的值开启或关闭开关
          this.$message({ type: 'success', message: '修改成功!' })
          this.conditionQuery()
        })
          .catch(() => {
            loading.close()
          })
      })
    },
    /* Base */
    addRow() {
      // 表格操作 - 添加
      this.isAddDialog = true
      this.editRowData = null
      this.showDialog = true
    },
    handleRemove(row) {
      // 表格 - 操作列 - 删除
      let title = '确定要删除吗? 该操作可能无法恢复!'
      this.$confirm(title, '提示', {
        type: 'warning'
      }).then(() => {
        const loading = this.$loading({
          background: this.$elementGlobal.loadingBackground
        })
        remove([row.id]).then(r => {
          loading.close()
          if (r.data) {
            this.$message({
              type: 'success',
              message: '操作成功!'
            })
          } else {
            this.$message({
              type: 'error',
              message: '操作失败!'
            })
          }
          this.conditionQuery()
        }).catch(e => {
          loading.close()
          console.log(e)
        })
      }).catch(() => {

      })
    },
    removeBatchRows() {
      // 表格操作 - 批量删除
      const h = this.$createElement
      this.$confirm(h('p', null, [
        h('p', null, '确定要删除 ' + this.multipleSelection.length + ' 个吗?'),
        h('p', { style: 'color: #f80' }, ' 该操作可能无法恢复!')
      ]), '提示', {
        type: 'warning'
      }).then(() => {
        const loading = this.$loading({
          background: this.$elementGlobal.loadingBackground
        })
        remove(this.multipleSelection.map(e => e.id)).then(r => { //todo remove函数未导入
          loading.close()
          if (r.data) {
            this.$message({
              type: 'success',
              message: '操作成功!'
            })
          } else {
            this.$message({
              type: 'error',
              message: '操作失败!'
            })
          }
          this.conditionQuery()
        }).catch(e => {
          loading.close()
          console.log(e)
        })
      }).catch(() => {

      })
    },
    // 表格 - 编辑行
    handleEdit(row) {
      this.isAddDialog = false
      this.showDialog = true
      this.editRowData = row
    },
    // 表格 - 查询表数据
    conditionQuery() {
      this.selectLoading = true
      page(this.condition).then(r => {
        this.selectLoading = false
        this.tableData = r.data.rows
        this.total = r.data.total
      }).catch(e => {
        this.selectLoading = false
        console.log('query error -> ', e)
      })
    },
    resizeTable() {
      this.tableMaxHeight = window.innerHeight - (this.$refs.tableContainer.offsetTop + 100)
    },
    // 重置表格查询条件
    handleResetCondition() {
      this.condition = Object.assign({}, default_condition)
    },
    // [事件]表格 - 点击行
    handleRowClick(row) {
      this.$refs.listTable.toggleRowSelection(row)
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    }
    /* ↑ Base */
  }
}
</script>

<style scoped lang="scss">

</style>
