<template>
    <div>
     
    
    <el-card shadow="never" class="henader-card">
     
      <div class="flx-row">
        <el-form :inline="true" :model="queryData"  style="flex: 1;"   >
         <span>项目</span> <el-input placeholder="请输入项目名" v-model="queryData.qa_name"  style="width: 200px;" clearable >
          </el-input>
          <el-button type="primary" :icon="Search" @click="initDatas" class="ml20"
            ></el-button
          >
         
            <!-- <span style="margin-left: 32px;">修改时间</span><el-icon><Sort /></el-icon> -->
            <span style="margin-right: 6px;margin-left: 16px;"> 项目状态</span>
          <el-select v-model="queryData.qa_status" placeholder="请选择"   @change="initDatas" clearable  >
            <el-option v-for="item in optionss" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
          <!-- <span style="margin-right: 6px;margin-left: 16px;"> 有效期</span>
          <el-select v-model="queryData.order.qa_expire_time" placeholder="请选择"   @change="initDatas">
            <el-option v-for="item in optionst" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
          <span style="margin-right: 6px;margin-left: 16px;"> 题数</span>
          <el-select v-model="queryData.order.qa_quantity" placeholder="请选择"   @change="initDatas">
            <el-option v-for="item in optionst" :key="item.value" :label="item.label" :value="item.value" />
          </el-select> -->
        </el-form>
        <div class="flex-right" >
          <el-button type="primary" @click="addone" >+添加</el-button>
        </div>
      </div>
     
    
      
    </el-card>
    <el-card shadow="never">
      <el-table
        :data="tableData"
        :header-cell-style="{ backgroundColor: '#ecf5ff' }"
        border
        stripe
        style="width: 100%"
      >
        <el-table-column
          v-for="item in optionss2"
          :key="item.type"
          :prop="item.props"
          :label="item.label"
          :width="item.width"
          :align="item.align"
          min-width="420"
          :fixed="item.fixed"
          show-overflow-tooltip
        >
          <!-- <template v-slot:default="scope" v-if="item.props === 'qa_display_type'">
            <span>{{ optionstype[scope.row.qa_display_type-1].label}}</span>
          </template> -->
          <template v-slot:default="scope" v-if="item.props === 'qa_status'">
          <span>{{ optionss[scope.row.qa_status-1].label}}</span>
          </template>
          <template v-slot:default="scope" v-if="item.props === 'actions'">
            <el-button  @click="ItemViewshow(scope.row)">
                查看
              </el-button>
              <el-button  @click="ItemView(scope.row)">
                密码
              </el-button>
              <el-button  @click="ItemViewDetail(scope.row)">
                题库
              </el-button>
              <el-button  @click="ItemViewrule(scope.row)">
                规则
              </el-button>
              <el-button  @click="linkItemView(scope.row)">
                链接
              </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          :page-sizes="[10, 20, 30, 40]"  
          layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
           class="mt-4"
          @current-change="handleCurrentChange" />
    
    </el-card> 
    <DiaglogView :dialogVisible="dialogVisible" :qa_password="qa_password.qa_password" :action_type="action_type" :qa_rule_content="qa_rule_content.qa_rule_content"
    :dialogWidth="dialogWidth" @save-click="save" @closeDialog="closeDialog" :links="links" ></DiaglogView>
      
    <bank :dialogVisible="dialogVisibles"  :FormData=FoData :formLabelWidth="formLabelWidth" :action_type="action_type"
     :fileList=fileList @save-click="saves" @closeDialog="closeDialogs" :qa_id="qa_id" ></bank>
  </div>

  <subject :dialogVisibled="dialogVisibled"   :qa_id="qa_id" @closeDialog="closeDialogd" />
  </template>
  
  <script setup>
  import {
    Search,
   
  } from '@element-plus/icons-vue'
  import request from '../../../api/modules/index.js'
  import { optionss2 } from './options.js'
  import { onMounted, reactive, ref } from 'vue'
  import { ElMessage } from 'element-plus'
  import DiaglogView from './DiaglogView.vue'
    import bank from './banktwo.vue'
    import subject from './subject.vue'
    const formLabelWidth = '140px'
    const fileList = ref([]);
    const dialogVisibled=ref(false)
  const qa_password=ref({

    qa_password:''
  })
  const links=ref('')
  const qa_rule_content=ref({
    qa_rule_content:''
  })
  const qa_id=ref('')
  const optionss = [
   
    {
      value: 1,
      label: '正常',
    },
    {
      value: 2,
      label: '过期',
    },
  
  ]
  const optionst = [
   
    {
      value: 'asc',
      label: '顺序',
    },
    {
      value:'desc',
      label: '倒序',
    },
  
  ]
  const optionstype = [
   

    {
      value: 1,
      label: '常规',
    },
    {
      value: 2,
      label: '飞花令',
    }
  
  ]
  
  const queryData = ref({
  page:1,
  page_size:10,		
  qa_name:'',
  qa_type:2,

  order: {
  
  }
  
  })
  const FoData=ref({
    qa_name	:'',
    qa_rule_content	:'',	
    qa_quantity:1,	
    qa_display_type:2,	
    qa_expire_time:'',	
    qa_password	:'',
    image:'',
    qa_type:2,
    is_turn_timer:0,
    question_qa_timer:[],
    token_question_content:[],
    question_qa_item:[
      {
        question_type:null ,
        first_label_id:'',
        second_label_id:null,
        difficulty:null,
        quantity:null	

      },
      // {
      //   question_type:1 ,
      //   first_label_id:'',
      //   second_label_id:null,
      //   difficulty:null,
      //   quantity:null	

      // },
    ]
      ,
     repeat_qa_id:[]
  })


  const handleSizeChange = (valr) => {
  
    queryData.value.page_size = valr
    initData()
  }
  

  
  const dialogWidth = ref('100%')
 
  const dialogVisible = ref(false)
  const dialogVisibles = ref(false)
  const tableData = ref([])
  const total = ref(0)
  const action_type=ref('0')//0修改密码//1增加数据//2修改数据//3规则//4链接//5选择题目类型

  const initData = () => {
    if(queryData.value.qa_status=='')
{
    delete queryData.value.qa_status
}
    request.Qapage(queryData.value).then((res) => {
      total.value = res.data.data.total
      tableData.value = res.data.data.data
      
    })
  }
  
 
  const initDatas = () => {
    queryData.value.page=1
    initData()
  
  }
  const dialogVisibledShow = () => {
   
   dialogVisibled.value = true
 }
 const closeDialogd = () => {
  
  dialogVisibled.value = false
}
  const dialogVisibleShow = () => {
   
    dialogVisible.value = true
  }
  const dialogVisibleShows = () => {
   
   dialogVisibles.value = true
 }
const closeDialog=() => {
 
 dialogVisible.value = false
}
const closeDialogs=() => {
 
 dialogVisibles.value = false
}
const saves = (action_type,action,content,base_token_item,question_types,question_times,repeat_qa_id) => {
  FoData.value.question_qa_timer=[]
  if(FoData.value.is_turn_timer=='1')
{
  console.log(question_times)
  if(question_times.type1!='')
{
  FoData.value.question_qa_timer.push({question_type:1,duration:parseInt(question_times.type1),timer_rule:2})
}
 if(question_times.type2!='')
{
  FoData.value.question_qa_timer.push({question_type:2,duration:parseInt(question_times.type2),timer_rule:2})
}
 if(question_times.type3!='')
{
  FoData.value.question_qa_timer.push({question_type:3,duration:parseInt(question_times.type3),timer_rule:2})
}
if(question_times.type4!='')
{
  FoData.value.question_qa_timer.push({question_type:4,duration:parseInt(question_times.type4),timer_rule:2})
}
}
  console.log(action_type+'action'+action);
  FoData.value.token_question_content=[]
  if(question_types.type1!='')
{
  FoData.value.token_question_content.push({question_type:1,quantity:parseInt(question_types.type1)})
}
 if(question_types.type2!='')
{
  FoData.value.token_question_content.push({question_type:2,quantity:parseInt(question_types.type2)})
}
 if(question_types.type3!='')
{
  FoData.value.token_question_content.push({question_type:3,quantity:parseInt(question_types.type3)})
}
if(question_types.type4!='')
{
  FoData.value.token_question_content.push({question_type:4,quantity:parseInt(question_types.type4)})
}
  FoData.value.qa_rule_content=content
  FoData.value.token_num=parseInt(FoData.value.token_num)
    for(let i=0;i<FoData.value.question_qa_item.length;i++){
    if(FoData.value.question_qa_item[i].quantity!='')
  {
    FoData.value.question_qa_item[i].quantity=parseInt(FoData.value.question_qa_item[i].quantity)
  }
  else
  {
    FoData.value.question_qa_item[i].quantity=0
  }
    
  }
 
  console.log('repeat_qa_id'+repeat_qa_id)
  
    if(repeat_qa_id.length>0)
  {
    FoData.value.repeat_qa_id=[]
    repeat_qa_id.forEach((item,index)=>{
      FoData.value.repeat_qa_id.push({
        qa_id:item,
        
      })
    })
  }
  
  else
  {
    FoData.value.repeat_qa_id=null
  }
  
  if(FoData.value.qa_display_type==2)
  {
    if(base_token_item.length>0)
  {
    FoData.value.base_token_item=[]
    base_token_item.forEach((item,index)=>{
      FoData.value.base_token_item.push({
        token_id:item
      })
    })
  }
  }
  else
  {
    FoData.value.base_token_item=null
  }
  if(action_type=='2')
  {
    FoData.value.action=action
    request.putQa(qa_id.value,FoData.value).then((res) => {
      updateslist(res.data.code,'更新成功',res.data.message)
      delete FoData.value[action];  
   
  })
  }
  else if(action_type=='1')
  {
   
 
    request.postQa(FoData.value).then((res) => {
      updateslist(res.data.code,'添加成功',res.data.message)
    
     
  })
  }
}
const updateslist=(code,msg,message)=>
{
  if(code==200)
  {
    ElMessage({
            message: msg,
            type: 'success',
          })
          initData()
          closeDialog()
          closeDialogs()
  }
  else
  {
    ElMessage({
            message: message,
            type: 'error',
          })
  }
}
const save = (action_type,param1) => {
  console.log(action_type);
  console.log(param1);
  if(action_type=='0')
  {
    console.log('action_type');
    qa_password.value.qa_password=param1
    request.updatePassword(qa_id.value,qa_password.value).then((res) => {
      updateslist(res.data.code,'更新成功',res.data.message)
   
  })
  }
  else if(action_type=='3')
  {
   
    qa_rule_content.value.qa_rule_content=param1
    request.putRule(qa_id.value,qa_rule_content.value).then((res) => {
      updateslist(res.data.code,'更新成功',res.data.message)
   
  })
  }

}

  const handleCurrentChange = (val) => {
    queryData.value.page = val
    initData()
  }
  const editItemView = (item) => {
   
  
    ItemViews(item)
  }
 
  const ItemView = (item) => {
    action_type.value='0'
    qa_id.value = item.qa_id
    qa_password.value.qa_password = item.qa_password
    dialogVisibleShow()
}
const ItemViewDetail = (item) => {
   
    qa_id.value = item.qa_id
    
    dialogVisibledShow()
}
const linkItemView = (item) => {
    action_type.value='4'
    qa_password.value.qa_password = item.qa_password
    links.value = item.qa_share_id
    dialogVisibleShow()
}
const ItemViewrule = (item) => {
    action_type.value='3'
    qa_id.value = item.qa_id
    qa_rule_content.value.qa_rule_content = item.qa_rule_content
    dialogVisibleShow()
}
const ItemViewshow = (item) => {
 
 action_type.value='2'
 qa_id.value = item.qa_id
 request.getQaDetail(qa_id.value).then((res) => {

    FoData.value.token_question_content=[]
    FoData.value.token_question_content.push(...res.data.data.token_question_content)
   
    FoData.value.qa_name=res.data.data.qa_name
    FoData.value.qa_rule_content=res.data.data.qa_rule_content
    FoData.value.qa_quantity=1
    FoData.value.qa_display_type=res.data.data.qa_display_type
    FoData.value.qa_expire_time=res.data.data.qa_expire_time.slice(0,-3)
    FoData.value.qa_password=res.data.data.qa_password
    FoData.value.image=res.data.data.image
    FoData.value.token_num=res.data.data.token_num
    fileList.value=[]
    fileList.value.push({url:FoData.value.image})
    FoData.value.question_qa_item=[]
    res.data.data.item_content.forEach((item,index)=>{
      FoData.value.question_qa_item.push(item)
      
    })
    if(res.data.data.base_token_item==null)
    {
      FoData.value.base_token_item=[]
    }
    else
    {
      FoData.value.base_token_item=res.data.data.base_token_item
    }
    FoData.value.is_turn_timer=res.data.data.is_turn_timer
   
    if(res.data.data.question_qa_timer==null)
    {
      FoData.value.question_qa_timer=[]
    }
    else
    {
      FoData.value.question_qa_timer=res.data.data.question_qa_timer
    }
   if(res.data.data.repeat_qa_id==null)
    {
      FoData.value.repeat_qa_id=[]
    }
    else
    {
      FoData.value.repeat_qa_id=res.data.data.repeat_qa_id
    }

    
    console.log(FoData.value.question_qa_timer)


  dialogVisibleShows()
 })
 dialogVisibleShows()
 
}
  const ItemViews = (item) => {
   
   
   
     
      
     
    
  }
  const addone = () => {
    
    action_type.value='1'
    FoData.value.qa_name=''
    FoData.value.qa_rule_content=''
    FoData.value.qa_quantity=1
    FoData.value.qa_display_type=2
    FoData.value.qa_expire_time=''
    FoData.value.qa_password=''
    FoData.value.image=''
    FoData.value.token_num=1
    FoData.value.is_turn_timer=0
    FoData.value.question_qa_timer=[]
    FoData.value.question_qa_item=[
      {
        question_type:null ,
        first_label_id:'',
        question_type:null ,
        first_label_id:'',
        second_label_id:null,
        difficulty:null,
        quantity:null	
      }
   
  
    ]
    fileList.value=[]
  dialogVisibleShows()
  }

  
  const setDialogWidth = () => {
  
    var val = document.body.clientWidth
    const def = 800 // 默认宽度
    if (val < def) {
      dialogWidth.value = '100%'
    } else {
      dialogWidth.value = def + 'px'
    }
  }
  onMounted(() => {
    setDialogWidth()
    window.onresize = () => {
      return (() => {
        setDialogWidth()
      })()
    }
    initData()
  
   
  })
 
  </script>
  
  <style lang="scss" scoped>
  .henader-card {
    margin-bottom: 20px;
  }
  .icon-view {
    font-size: 20px;
    color: #673ab7;
    margin: 0 10px;
  }
  .icon-edit {
    font-size: 20px;
    color: #2f60c2;
    margin: 0 10px;
  }
  .icon-dele {
    font-size: 20px;
    color: #ff5722;
  }
  .mt-4 {
    float: right;
    text-align: right;
    margin-top: 20px;
    margin-bottom: 20px;
  }
  .el-button--text {
    margin-right: 15px;
  }
  .el-select {
    width: 150px;
  }
  .el-input {
    width: 300px;
  }
  .dialog-footer button:first-child {
    margin-right: 10px;
  }
  .el-image-viewer__canvas {
    img {
      width: 120px !important;
      height: auto !important;
    }
  }
  .el-button:focus, .el-button:hover {
    color: var(--el-button-text-color);
    border-color: var(--el-button-border-color);
    background-color: var(--el-button-bg-color);
}
  </style>
  