<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="dialogVisible = true">新建模板</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>
    <el-dialog title="添加证书模板" :visible.sync="dialogVisible" width="600px">
      <el-form
        :rules="rules"
        ref="form"
        :model="form"
        label-width="110px"
        class="demo-ruleForm"
        style="width: 80%; margin: 0 auto"
      >
        <el-form-item label="模板名称" prop="title">
          <el-input v-model="form.title" placeholder="请填写模板名称"></el-input>
        </el-form-item>
        <el-form-item label="编号生成规则" prop="rule">
          <el-radio-group v-model="form.rule">
            <el-radio label="0">规则一</el-radio>
            <el-radio label="1">规则二</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="uploadTemplate">确 定</el-button>
      </span>
    </el-dialog>
  </app-card>
</template>

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

export default {
  data() {
    const count = []
    for (let i = 0; i < 100; i++) {
      count.push({ value: i, options: i })
    }
    return {
      form: {
        title: '',
        rule: '0'
      },
      dialogVisible: false,
      imgViewShow: false,
      imgView: '',
      value1: '',
      filterDate: '',
      options: count,
      createdStart: '',
      createdEnd: '',
      projectList: [],
      rules: {
        title: [{ required: true, message: '请填模板名称', trigger: 'blur' }],
        rule: [{ required: true, message: '请选择', trigger: 'blur' }]
      }
    }
  },
  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_id',
            label: '所属项目:',
            labelKey: 'title',
            valueKey: 'id',
            options: this.projectList
          },
          {
            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: {
    uploadTemplate() {
      if (this.form.title === '') return
      this.$router.push({
        path: '/template/update',
        query: this.form
      })
    },
    // 项目列表
    getProjectList() {
      getProjectList().then(res => {
        this.projectList = res.data.list
      })
    },
    // 时间搜索
    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) {
      deleteTemplate({ 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
      })
    }
  },
  mounted() {
    this.getProjectList()
  }
}
</script>

<style lang="scss" scoped>
.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%;
  }
}
::v-deep {
  .el-dialog__body {
    border-top: 1px solid #f0f0f0 !important;
    border-bottom: 1px solid #f0f0f0 !important;
    margin: 10px 0;
  }
}
</style>
