<template>
  <app-card class="register-box">
    <app-list v-bind="tableOptions" ref="list">
      <div class="line"></div>
      <div class="btn-box">
        <el-button type="primary" @click="$router.push({ path: '/template/update' })">新建模板</el-button>
      </div>
      <template v-slot:filter-time>
        <el-date-picker
          v-model="filterDate"
          @change="changeDate"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </template>
      <template v-slot:release-status="{ row }">
        <el-switch v-model="row.status" @change="updateStatus(row)"> </el-switch>
      </template>
      <template v-slot:table-x="{ row }">
        <el-button type="text" @click="handleView(row)">预览</el-button>
        <el-button type="text" @click="handleEdit(row)">编辑</el-button>
        <el-button type="text" @click="handleDelete(row)">删除</el-button>
      </template>
    </app-list>
    <div class="img-view" v-if="imgViewShow" @click="imgViewShow = false">
      <img :src="imgView" alt="" />
    </div>
  </app-card>
</template>

<script>
// 接口
import { getAppList, updateBanner, deleteBanner, getDetails } from '../api'

export default {
  data() {
    const count = []
    for (let i = 0; i < 100; i++) {
      count.push({ value: i, options: i })
    }
    return {
      imgViewShow: false,
      imgView: '',
      value1: '',
      filterDate: '',
      options: count,
      createdStart: '',
      createdEnd: ''
    }
  },
  computed: {
    // 列表配置
    tableOptions() {
      return {
        limit: 10,
        remote: {
          httpRequest: getAppList,
          params: {
            title: '',
            status: '',
            created_time_start: this.createdStart,
            created_time_end: this.createdEnd
          },
          callback: res => {
            res.map(item => {
              item.status = !!parseInt(item.status)
              return item
            })
            return res
          }
        },
        filters: [
          {
            type: 'input',
            prop: 'title',
            label: '标题:'
          },
          {
            type: 'select',
            prop: 'status',
            label: '发布状态:',
            options: [
              { value: '0', label: '未发布' },
              { value: '1', label: '已发布' }
            ]
          },
          {
            type: 'select',
            prop: 'project',
            label: '项目:',
            options: [
              { value: '0', label: '未发布' },
              { value: '1', label: '已发布' }
            ]
          },
          {
            slots: 'filter-time',
            label: '创建时间:'
          }
        ],
        columns: [
          { label: '模板名称', prop: 'title', align: 'center' },
          { label: 'id', prop: 'id', align: 'center' },
          { label: '规则编号', prop: 'rule', align: 'center' },
          { label: '创建时间', prop: 'created_time', align: 'center' },
          { label: '操作', slots: 'table-x', align: 'center' }
        ]
      }
    }
  },
  methods: {
    // 时间搜索
    changeDate() {
      if (this.filterDate) {
        this.createdStart = this.filterDate[0]
        this.createdEnd = this.filterDate[1]
      } else {
        this.createdStart = ''
        this.createdEnd = ''
        // this.$refs.list.refetch(true)
      }
    },
    // 更新状态
    updateStatus(row) {
      const params = row
      params.status = row.status ? '1' : '0'
      updateBanner(row).then(res => {
        if (res.code === 0) {
          this.$message({
            message: '修改成功',
            type: 'success'
          })
          this.$refs.list.refetch(true)
        }
      })
    },
    handleEdit(row) {
      this.$router.push({ path: '/template/update', query: { id: row.id } })
    },
    handleDelete(row) {
      deleteBanner({ id: row.id }).then(res => {
        if (res.code === 0) {
          this.$message({
            message: '删除成功',
            type: 'success'
          })
          this.$refs.list.refetch(true)
        }
      })
    },
    handleView(row) {
      getDetails({ id: row.id }).then(res => {
        this.imgView = 'data:image/png;base64,' + res.data.image.replace(/\\r\\n/g, '')
        this.imgViewShow = true
      })
    }
  }
}
</script>

<style lang="scss">
.register-box {
  .el-form-item {
    margin-right: 20px !important;
  }
  .line {
    // border-top: 1px solid #D6D6D6;
    height: 1px;
    background: #d6d6d6;
    margin: 8px 0 23px;
    box-sizing: border-box;
  }
  .btn-box {
    margin-bottom: 16px;
  }
}
.img-view {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 100%;
  height: 100%;
  background: rgba($color: #000000, $alpha: 0.5);
  img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50%;
  }
}
</style>
