<template>
  <div class="app-container">

    <!-- 查询和其他操作 -->
    <div class="filter-container">
      <el-button class="filter-item" type="primary" icon="el-icon-edit" @click="handleCreate(null)">添加工单类型</el-button>
    </div>

    <zk-table
      ref="table"
      v-loading="listLoading"
      sum-text="sum"
      index-text="#"
      :data="list"
      :columns="columns"
      :stripe="props.stripe"
      :border="props.border"
      :show-header="props.showHeader"
      :show-summary="props.showSummary"
      :show-row-hover="props.showRowHover"
      :show-index="props.showIndex"
      :tree-type="props.treeType"
      :is-fold="props.isFold"
      :expand-type="props.expandType"
      :selection-type="props.selectionType"
    >
      <!-- 原文中 scope="scope" 会警告， 2.5版本后应为slot-scope="scope"-->
      <template slot="level" scope="scope">
        <el-tag v-if="scope.row.level === 1" type="primary" effect="plain" size="mini">一级</el-tag>
        <el-tag v-else-if="scope.row.level === 2" type="success" effect="plain" size="mini">二级</el-tag>
        <el-tag v-else type="warning" effect="plain" size="mini">三级</el-tag>
      </template>
      <template slot="deleted" slot-scope="scope">
        <el-tag v-if="scope.row.deleted===false" type="primary" effect="plain" size="mini">启用</el-tag>
        <el-tag v-else type="warning" effect="plain" size="mini">停用</el-tag>
      </template>

      <template slot="empower" slot-scope="scope">
        <el-button v-show="scope.row.level!=3" v-permission="['POST /admin/ticketConsult/create']" type="info" size="mini" @click="handleCreate(scope.row)">子级</el-button>
        <el-button v-permission="['POST /admin/ticketType/update']" type="primary" size="mini" @click="handleUpdate(scope.row)">编辑</el-button>
        <el-button v-if="scope.row.deleted===false" v-permission="['POST /admin/ticketType/delete']" type="danger" size="mini" @click="handleDelete(scope.row)">删除</el-button>
        <el-button v-else v-permission="['POST /admin/ticketType/delete']" type="danger" size="mini" @click="handleEnable(scope.row)">启用</el-button>
      </template>
    </zk-table>

    <!-- 添加或修改对话框 -->
    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
      <el-form ref="typeForm" :rules="rules" :model="typeForm" status-icon label-position="left" label-width="120px" style="width: 400px; margin-left:50px;">
        <el-form-item label="工单类型" prop="name">
          <el-input v-model="typeForm.name" clearable placeholder="工单类型的名称" />
        </el-form-item>

        <el-form-item label="简介" prop="remark">
          <el-input v-model="typeForm.remark" clearable placeholder="简单描述" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button v-if="dialogStatus=='create'" type="primary" @click="createConsultType">确定</el-button>
        <el-button v-else type="primary" @click="updateConsultType">确定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { listConsult, createConsult, updateConsult, deleteConsult, enableConsult } from '@/api/ticketConsult'
import { getToken } from '@/utils/auth'

export default {
  name: 'TicketConsult',
  components: {
  },
  data() {
    return {
      listLoading: false,
      dialogFormVisible: false,
      dialogStatus: '',
      textMap: {
        update: '编辑',
        create: '创建'
      },
      rules: {
        name: [{ required: true, message: '咨询名称不能为空', trigger: 'blur' }]
      },
      props: {
        stripe: false, // 是否显示间隔斑马纹
        border: false, // 是否显示纵向边框
        showHeader: true, // 是否显示表头
        showSummary: false, // 是否显示表尾合计行
        showRowHover: true, // 鼠标悬停时，是否高亮当前行
        showIndex: false, // 是否显示数据索引
        treeType: true, // 是否为树形表格
        isFold: false, // 树形表格中父级是否默认折叠
        expandType: false, // 是否为展开行类型表格（为 True 时，需要添加作用域插槽, 它可以获取到 row, rowIndex)
        selectionType: false// 是否显示间隔斑马纹
      },
      list: [],
      typeForm: {
        id: undefined,
        pid: 0,
        name: undefined,
        remark: undefined,
        deleted: false,
        level: 0
      },
      // 表格标题数据
      columns: [
        {
          label: '咨询类型',
          prop: 'name'
        },
        {
          label: '描述',
          prop: 'remark',
          minWidth: '50px'
        },
        {
          label: '等级',
          prop: 'level',
          type: 'template',
          template: 'level'
        },
        {
          label: '状态',
          prop: 'deleted',
          type: 'template',
          template: 'deleted'
        },
        {
          label: '操作',
          type: 'template',
          template: 'empower'
        }
      ]
    }
  },
  computed: {
    headers() {
      return {
        'X-JZ-Admin-Token': getToken()
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.listLoading = true
      listConsult()
        .then(response => {
          this.list = response.data.data.list
          // console.info(this.list)
          this.listLoading = false
        })
        .catch(() => {
          this.list = []
          this.listLoading = false
        })
    },
    handleCreate(data) {
      var pid = data === null ? 0 : data.id
      var level = data === null ? 1 : data.level + 1

      this.typeForm = {
        id: undefined,
        pid: pid,
        name: undefined,
        remark: undefined,
        deleted: false,
        level: level
      }
      console.info(this.typeForm)

      this.dialogStatus = 'create'
      this.dialogFormVisible = true
    },
    handleDelete(data) {
      deleteConsult(data.id).then(res => {
        this.getList()
        this.$notify.success({
          title: '成功',
          message: '停用成功'
        })
      })
    },
    handleEnable(data) {
      enableConsult(data).then(res => {
        this.getList()
        this.$notify.success({
          title: '成功',
          message: '启用成功'
        })
      })
    },
    handleUpdate(data) {
      this.typeForm = data
      this.dialogStatus = 'update'
      this.dialogFormVisible = true
    },
    createConsultType() {
      this.$refs['typeForm'].validate(valid => {
        if (valid) {
          console.info(this.typeForm)
          createConsult(this.typeForm)
            .then(response => {
              this.getList()
              this.dialogFormVisible = false
              this.$notify.success({
                title: '成功',
                message: '创建成功'
              })
            })
            .catch(response => {
              this.$notify.error({
                title: '失败',
                message: response.data.errmsg
              })
            })
        }
      })
    },
    updateConsultType() {
      this.$refs['typeForm'].validate(valid => {
        if (valid) {
          updateConsult(this.typeForm)
            .then(() => {
              this.getList()
              this.dialogFormVisible = false
              this.$notify.success({
                title: '成功',
                message: '更新成功'
              })
            })
            .catch(response => {
              this.$notify.error({
                title: '失败',
                message: response.data.errmsg
              })
            })
        }
      })
    }
  }
}
</script>
