<template>
  <div class="custom-page">
    <div class="toolbar">
      <el-button
        type="success"
        size="mini"
        @click="addBar"
      >添加页面</el-button>
    </div>
    <el-table
      :data="tableData.records"
      style="width: 100%"
      border
      row-key="id"
    >
      <el-table-column
        prop="name"
        label="页面名称"
      />
      <el-table-column
        prop="createTime"
        label="创建时间"
      />
      <el-table-column
        prop="status"
        label="操作"
      >
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            @click.native.prevent="renovation(scope.row)"
          >
            装修
          </el-button>
          <el-button
            type="text"
            size="small"
            @click.native.prevent="checkRow(scope.row)"
          >
            查看
          </el-button>
          <el-button
            type="text"
            size="small"
            @click.native.prevent="editRow(scope.row)"
          >
            修改
          </el-button>
          <el-button
            type="text"
            size="small"
            @click.native.prevent="deleteRow(scope.row)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="tableData.total > 0"
      :limit.sync="formParams.pageSize"
      :page.sync="formParams.start"
      :total="Number(tableData.total)"
      @pagination="getProductCategory"
    />
    <edit-dialog
      ref="edit"
      :dialog-visible="dialog.isVisible"
      :type="dialog.type"
      @close="editClose"
      @success="getProductCategory"
    />
  </div>
</template>
<script>
import Custom from '@/api/Custom.js'
import Pagination from '@/components/Pagination'
import EditDialog from './Edit'
export default {
  components: {
    EditDialog,
    Pagination
  },
  data () {
    return {
      dialogVisible: false,
      formParams: {
        current: 1,
        map: {},
        model: {
          config: '',
          isCustom: true,
          isDelete: 0,
          name: ''
        },
        order: 'descending',
        size: 10,
        sort: 'id'
      },
      tableData: {
        records: []
      },
      dialog: {
        type: 'add',
        isVisible: false
      }
    }
  },
  created () {
    this.getProductCategory()
  },
  methods: {
    addBar () {
      this.dialog = {
        type: 'add',
        isVisible: true
      }
      this.$refs.edit.setParams({ treeData: [] })
    },
    editClose () {
      this.dialog.isVisible = false
    },
    renovation(row) {
      const { id } = row
      this.$router.push({
        name: 'renovation',
        params: { id }
      })
    },
    checkRow (row) {
      this.dialog = {
        type: 'check',
        isVisible: true
      }
      this.$refs.edit.setParams({
        params: row
      })
    },
    editRow (row) {
      this.dialog = {
        type: 'edit',
        isVisible: true
      }
      this.$refs.edit.setParams({
        params: row
      })
    },
    deleteRow (row) {
      const { id } = row
      this.$confirm(this.$t('tips.confirmDelete'), this.$t('common.tips'), {
        confirmButtonText: this.$t('common.confirm'),
        cancelButtonText: this.$t('common.cancel'),
        type: 'warning'
      })
        .then(() => {
          this.delete({
            ids: [id]
          })
        })
        .catch(() => { })
    },
    async delete (params) {
      const res = await Custom.deleteTemplate(params)
      const resData = res.data
      const { code } = resData
      if (code === 0) {
        this.$message({
          message: this.$t('tips.deleteSuccess'),
          type: 'success'
        })
        this.getProductCategory()
      }
    },
    async getProductCategory () {
      const res = await Custom.cmsTemplatePage(this.formParams)
      this.tableData = res.data.data
    }
  }
}
</script>
<style lang="scss" scoped>
.custom-page {
  padding: 15px 20px;
  .toolbar {
    margin-bottom: 15px;
    text-align: right;
  }
}
</style>
