<template>
  <vxe-modal v-model="value" id="questModel" width="70%" v-loading="load" @show="show" @hide="hide" height="80%" show-zoom resize transfer show-footer>
    <template #title>
      <span>异常类型</span>
    </template>
    <by-table :propConfig="tableConfig" ref="table" id="quest-table">
      <template v-slot:ordered="{row}">
        <span v-if="row.isSystem == 1">{{ row.ordered }}</span>
        <vxe-input v-else v-model="row.ordered" size="small" type="number"></vxe-input>
      </template>
      <template v-slot:priority="{row}">
        <span v-if="row.isSystem == 1">{{ row.priority }}</span>
        <vxe-input v-else v-model="row.priority" size="small" type="number"></vxe-input>
      </template>
      <template v-slot:isShow="{row}">
        <el-switch
          v-model="row.isShow"
          :active-value="1"
          :inactive-value="0"
          @change="changeShow($event,row)"
          :disabled="row.isSystem == 1">
        </el-switch>
      </template>
    </by-table>
    <template #footer>
      <div class="btn">
        <el-button plain size="small" @click="value = false">取消</el-button>
        <el-button type="primary" size="small" @click="add">新增</el-button>
      </div>
    </template>
    <add-quest-model ref="addQuestModel" @handleSuccess="handleSuccess" />
  </vxe-modal>
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
import { queryAll,updateOrdered,updatePriority,updateShow,del } from '@/api/question'
import AddQuestModel from "./addQuest.vue";
@Component({components:{AddQuestModel}})
export default class QuestModel extends Vue {
  value=false;
  load=false;
  tableConfig:any={
    attr:{
      size:'mini',
      align:'center',
      seq:true
    },
    columns:[{
      title:'类型',
      field:'type',
      width:240
    },{
      title:'排序',
      field:'ordered',
      slot:true
    },{
      title:'优先级',
      field:'priority',
      slot:true
    },{
      title:'显示',
      field:'isShow',
      slot:true
    },{
      title:'操作',
      action:true,
      width:200,
      plugins:[{
        name:'排序',
        event:{
          show:(row:any) => {
            return row.isSystem != 1
          },
          click:(row:any) => {
            this.sortHandle(row);
          }
        }
      },{
        name:'优先级',
        event:{
          show:(row:any) => {
            return row.isSystem != 1
          },
          click:(row:any) => {
            this.priorityHandle(row)
          }
        }
      },{
        name:'删除',
        event:{
          show:(row:any) => {
            return row.isSystem != 1
          },
          click:(row:any) => {
            this.delHandle(row);
          }
        }
      }]
    }]
  }
  questData:Array<any>=[]
  mounted(){
    
  }
  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(()=>{})
  }
  show(){
    let height = (document.getElementById('quest-table') as any).parentNode.offsetHeight;
    this.tableConfig.attr.height=height - 36;
    (this.$refs.table as any).setConfig(this.tableConfig);
    this.getQuestionList()
  }
  handleSuccess(){
    this.getQuestionList()
  }
  //获取异常数据
  getQuestionList(){
    this.load = true;
    this.questData = [];
    queryAll().then((res:any) => {
      for(const item of res.data) {
        if(!(item.isSystem == 1 && item.isShow == 0)){
          this.questData.push(item)
        }
      }
      if(this.$refs.table){
        (this.$refs.table as any).setValue(this.questData);
      }
      this.load = false;
    }).catch((err:any) => {
      this.load = false;
    })
  }

  setShow(v:boolean){
    this.value = v;
  }

  add(){
    (this.$refs.addQuestModel as any).setShow(true)
  }
  hide(){
    this.$emit('questHide')
  }
}
</script>

<style lang="scss" scoped>

</style>