<template>
  <div class="ques" id="questTypePage" v-loading="load">
    <by-tool :propConfig="tool" class="tool" @clickHandle="clickHandle" v-if="userInfo && userInfo.userName == 'admin'" />
    <by-table :propConfig="tableConfig" ref="table">
      <template v-slot:ordered="{row}">
        <vxe-input v-if="userInfo && userInfo.userName == 'admin'" v-model="row.ordered" size="small" type="number"></vxe-input>
        <span v-else>{{ row.ordered }}</span>
      </template>
      <template v-slot:priority="{row}">
        <vxe-input v-if="userInfo && userInfo.userName == 'admin'" v-model="row.priority" size="small" type="number"></vxe-input>
        <span v-else>{{ row.priority }}</span>
      </template>
      <template v-slot:isShow="{row}">
        <el-switch
          v-if="userInfo && userInfo.userName == 'admin'"
          v-model="row.isShow"
          :active-value="1"
          :inactive-value="0"
          @change="changeShow($event,row)">
        </el-switch>
        <template v-else>
          <el-tag v-if="row.isShow == 1">显示</el-tag>
          <el-tag v-else type="danger">隐藏</el-tag>
        </template>
      </template>
    </by-table>
    <add-quest-model ref="addQuestModel" @handleSuccess="getQuestionList" />
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
import { querySys,updateOrdered,updatePriority,updateShow,del } from '@/api/question'
import AddQuestModel from "./components/addQuest.vue";
@Component({components:{AddQuestModel}})
export default class QuestType extends Vue {
  load=false;
  userInfo:any= {};
  tool={
    tools:{
      add:true,
      refresh:true
    },
    audit:{
      add:'oms:quesType:add',
    },
  }
  tableConfig:any={
    attr:{
      size:'mini',
      align:'center',
      seq:true
    },
    columns:[{
      title:'类型',
      field:'type'
    },{
      title:'排序',
      field:'ordered',
      width:150,
      slot:true
    },{
      title:'优先级',
      field:'priority',
      width:150,
      slot:true
    },{
      title:'显示/隐藏',
      field:'isShow',
      width:150,
      slot:true
    },{
      title:'操作',
      action:true,
      width:200,
      plugins:[{
        name:'排序',
        event:{
          show:() => {
            let userInfo = this.$store.getters.userInfo;
            if(userInfo && userInfo.userName == 'admin'){
              return true
            }else{
              return false
            }
          },
          click:(row:any) => {
            this.sortHandle(row);
          }
        }
      },{
        name:'优先级',
        event:{
          show:() => {
            let userInfo = this.$store.getters.userInfo;
            if(userInfo && userInfo.userName == 'admin'){
              return true
            }else{
              return false
            }
          },
          click:(row:any) => {
            this.priorityHandle(row)
          }
        }
      },{
        name:'删除',
        event:{
          show:() => {
            let userInfo = this.$store.getters.userInfo;
            if(userInfo && userInfo.userName == 'admin'){
              return true
            }else{
              return false
            }
          },
          click:(row:any) => {
            this.delHandle(row);
          }
        }
      }]
    }]
  }
  created() {
    this.userInfo = this.$store.getters.userInfo;
  }
  mounted(){
    let height = (document.getElementById('questTypePage') as any).offsetHeight;
    this.tableConfig.attr.height=height - 32 - 48;
    if(this.$refs.table){
      (this.$refs.table as any).setConfig(this.tableConfig);
    }
    this.getQuestionList();
  }
  sortHandle(row:any){
    this.load = true;
    updateOrdered({
      id:row.id,
      ordered:row.ordered
    }).then(()=>{
      this.$message({message:'“'+row.type+'”'+'排序修改成功！',type:'success'})
      this.load = false;
      this.getQuestionList();
    }).catch(()=>{
      this.load = false;
    })
  }
  priorityHandle(row:any){
    this.load = true;
    updatePriority({
      id:row.id,
      priority:row.priority
    }).then(()=>{
      this.$message({message:'“'+row.type+'”'+'优先级修改成功！',type:'success'})
      this.load = false;
      this.getQuestionList();
    }).catch(()=>{
      this.load = false;
    })
  }
  changeShow(v:number,row:any){
    this.load = true;
    updateShow({
      id:row.id,
      isShow:v
    }).then(()=>{
      this.$message({message:'“'+row.type+'”'+'显示修改成功！',type:'success'})
      this.load = false;
      this.getQuestionList();
    }).catch(()=>{
      this.load = false;
    })
  }
  delHandle(row:any){
    this.$confirm('此操作将删除“'+row.type+'”, 是否继续?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      this.load = true;
        del({
          id:row.id,
        }).then(()=>{
          this.$message({message:'删除成功！',type:'success'})
          this.load = false;
          this.getQuestionList();
        }).catch(()=>{
          this.load = false;
        })
    }).catch(()=>{})
  }
  //获取异常数据
  getQuestionList(){
    this.load = true;
    querySys().then((res:any) => {
      if(this.$refs.table){
        (this.$refs.table as any).setValue(res.data);
      }
      this.load = false;
    }).catch((err:any) => {
      this.load = false;
    })
  }

  clickHandle(e:string){
    if(e == 'onAdd'){
      (this.$refs.addQuestModel as any).setShow(true)
    }
    if(e == 'onRefresh'){
      this.getQuestionList();
    }
  }
}
</script>

<style lang="scss" scoped>
.ques{
  width: 100%;
  height: 100%;
  padding: 16px;
  box-sizing: border-box;
  .tool{
    padding-bottom: 16px;
  }
}
</style>