<template>
  <div class="app-container">
    <!-- 筛选 -->
    <!-- <div class="filter-container">
      <div class="filter-control">
        <el-button type="primary" :loading="isLoading" @click="authTempUpdate">
          <span>{{ isLoading ? '正在更新...' : '一键生效' }}</span>
        </el-button>
      </div>
    </div> -->
    <!-- <div class="tip">提示：请勿频繁更新授权牌模板，如有需要，在更新授权牌模板后点击左上角一键生效按钮即可</div> -->

    <!-- 列表 -->
    <el-table v-loading="listLoading" style="width: 100%" header-row-class-name="tableHeader" :data="list" border fit>
      <el-table-column :index="indexMethod" label="序号" type="index" width="80" align="center" />
      <el-table-column label="授权牌模板" align="center" width="200px">
        <template slot-scope="{ row }">
          <!-- <el-tooltip effect="dark" content="点击查看全图" placement="top-start">
            <el-image :src="row.templateImage" :preview-src-list="[row.templateImage]" fit="cover" />
          </el-tooltip> -->
          <el-image :src="row.templateImage" fit="cover" />
        </template>
      </el-table-column>
      <el-table-column label="使用位置" align="center">
        <template slot-scope="{ row }">
          <el-radio v-model="row.authFlag" :label="1" @change="onClubAuthTempChange(row)">机构认证</el-radio>
          <el-radio v-model="row.productFlag" :label="1" @change="onProductAuthTempChange(row)">设备认证</el-radio>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="280px">
        <template slot-scope="{ row }">
          <el-button type="primary" size="mini" @click="onPreview(row)">查看</el-button>
          <el-button type="primary" size="mini" @click="onDragQrcode(row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 拖拽选取二维码位置 -->
    <el-dialog :title="dialogTitle" :visible.sync="dragDialogVisible" :fullscreen="fullscreen" @closed="onDragClose">
      <drag-layout
        v-if="dragVisible"
        :qw="current.qw"
        :qh="current.qh"
        :old-x="current.oldX"
        :old-y="current.oldY"
        :image="current.templateImage"
        :size="current.templateSize"
        :is-drag="isDrag"
        @confirm="onDragConfirm"
        @cancel="dragDialogVisible = false"
      />
    </el-dialog>

    <!-- 页码 -->
    <pagination
      :total="total"
      :page.sync="listQuery.pageNum"
      :limit.sync="listQuery.pageSize"
      @pagination="getList(listQuery)"
    />
  </div>
</template>
<script>
import DragLayout from '@/components/DragLayout/index.vue'
import { authTempSave, authTempUpdate, fetchAuthTempList } from '@/api/system'
import { mapGetters } from 'vuex'

export default {
  name: 'NormalSettingsAuthCard',
  components: {
    DragLayout
  },
  data() {
    return {
      isLoading: false,
      dragDialogVisible: false,
      dragVisible: false,
      listLoading: false,
      listQuery: {
        listType: 2,
        authUserId: '',
        pageSize: 15,
        pageNum: 1
      },
      list: [],
      total: 0,
      current: null,
      dialogTitle: '设置二维码位置',
      fullscreen: true,
      isDrag: true
    }
  },
  computed: {
    ...mapGetters(['authUserId'])
  },
  created() {
    this.listQuery.authUserId = this.authUserId
    this.getList()
  },
  methods: {
    // 一键生效
    async authTempUpdate() {
      this.isLoading = true
      let notification = null
      notification = this.$notify({
        title: '提示',
        message: `模板生效同步中，请勿重复操作！`,
        duration: 0
      })
      try {
        const res = await authTempUpdate({ authUserId: this.authUserId })
        console.log(res)
        this.$message.success('模板更新成功')
      } catch (error) {
        console.log(error)
        this.$message.error(`生效失败，请重试！`)
      } finally {
        notification.close()
        this.isLoading = false
      }
    },

    // 确定二维码坐标
    async onDragConfirm(e) {
      if (!this.isDrag) return (this.dragDialogVisible = false)
      try {
        await authTempSave({
          templateId: this.current.templateId,
          qrPosition: [e.x, e.y].join(',')
        })
        this.$message.success('模板修改成功')
        this.getList()
        this.dragDialogVisible = false
      } catch (error) {
        console.log(error)
      }
    },

    // 选中模板切换
    async onClubAuthTempChange(row) {
      this.list.forEach((item) => {
        if (item.templateId !== row.templateId) item.authFlag = 0
      })
      try {
        await authTempSave({
          authUserId: this.authUserId,
          templateId: row.templateId,
          authFlag: 1
        })
        this.getList()
        this.$message.success('模板使用成功')
      } catch (error) {
        console.log(error)
      }
    },

    // 选中模板切换
    async onProductAuthTempChange(row) {
      this.list.forEach((item) => {
        if (item.templateId !== row.templateId) item.productFlag = 0
      })
      try {
        await authTempSave({
          authUserId: this.authUserId,
          templateId: row.templateId,
          productFlag: 1
        })
        this.getList()
        this.$message.success('模板使用成功')
      } catch (error) {
        console.log(error)
      }
    },

    // 预览图片
    onPreview(row) {
      this.fullscreen = false
      this.dialogTitle = '预览'
      this.isDrag = false
      this.onDragQrcode(row)
    },

    // 编辑二维码
    onDragQrcode(row) {
      this.current = row
      if (row.qrSize) {
        this.current.qw = parseFloat(row.qrSize)
        this.current.qh = parseFloat(row.qrSize)
      }
      const arrs = row.qrPosition ? row.qrPosition.split(',') : [0, 0]
      this.current.oldX = parseFloat(arrs[0])
      this.current.oldY = parseFloat(arrs[1])
      this.dragDialogVisible = true
      this.dragVisible = true
    },

    // 拖拽框关闭
    onDragClose() {
      console.log(123)
      this.fullscreen = true
      this.dialogTitle = '设置二维码位置'
      this.isDrag = true
      this.dragVisible = false
    },

    // 获取授权牌模板列表
    getList() {
      this.list = []
      this.listQuery.pageNum = 1
      this.fetchAuthTempList(this.listQuery)
    },

    // 获取授权牌模板列表
    async fetchAuthTempList() {
      this.listLoading = true
      try {
        const res = await fetchAuthTempList(this.listQuery)
        this.list = res.data.list
        this.total = res.data.total
        this.listLoading = false
      } catch (error) {
        console.log(error)
      }
    },

    // 表格序号
    indexMethod(index) {
      return index + this.listQuery.pageSize * (this.listQuery.pageNum - 1) + 1
    }
  }
}
</script>
<style lang="scss" scoped>
.el-image {
  max-width: 120px;
  max-height: 30px;
  display: block;
  margin: 0 auto;
}

.tip {
  margin: 12px 0;
  font-size: 14px;
  color: #f56c6c;
}
</style>
