<template>
  <div class="main">
    <el-card>
      <HeaderView title1="参赛作品" title2="视频科普" />
      <div style="display: flex;align-items: center;">
        <el-input style="width:300px" @clear="searchs" clearable v-model="searchForm.keyword" placeholder="请输入标题、作者或者医院"
          class="input-with-select">
          <template #append>
            <el-button icon="Search" @click="searchs" />
          </template>
        </el-input>


        <div style="margin-left: 32px;margin-right: 8px;"> 排序</div>
        <el-select v-model="value" placeholder="默认排序" size="large" style="width: 240px" @change="change(value)">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
        <el-button type="primary" style="margin-left: 32px;" size="large" @click="addnewOne()">添加</el-button>
      </div>

      <el-table :data="tableData" style="margin-top: 20px;">
        <el-table-column label="标题" width="280">
          <template #default="scope">
            <span>{{ scope.row.video_title }}</span>

          </template>
        </el-table-column>
        <el-table-column label="作者1-医院" width="180">
          <template #default="scope">
            <div v-if="scope.row.video_author.length > 0">
              <div>{{ scope.row.video_author[0].author_name }}</div>
              <div>{{ scope.row.video_author[0].hospital_name }}</div>
            </div>

          </template>
        </el-table-column>

        <el-table-column label="作者2-医院" width="180">
          <template #default="scope">
            <div v-if="scope.row.video_author.length > 1">
              <div>{{ scope.row.video_author[1].author_name }}</div>
              <div>{{ scope.row.video_author[1].hospital_name }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="作者3-医院" width="180">
          <template #default="scope">
            <div v-if="scope.row.video_author.length > 2">
              <div>{{ scope.row.video_author[2].author_name }}</div>
              <div>{{ scope.row.video_author[2].hospital_name }}</div>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="创建时间" width="180">
          <template #default="scope">
       

              <span>{{ scope.row.created_at }}</span>
        
          </template>
        </el-table-column>
        <el-table-column label="投票数" width="180">
          <template #default="scope">


            <span>{{ scope.row.vote_num }}</span>

          </template>
        </el-table-column>

        <el-table-column label="操作" width="400">
          <template #default="scope">
            <el-button size="large" @click="handleEdit(scope.$index, scope.row)">
              编辑
            </el-button>
            <el-button size="large" @click="handleStatus(scope.$index, scope.row,'确定要隐藏该条数据吗')" v-if="scope.row.video_status == 1">
              隐藏
            </el-button>
            <el-button size="large" @click="handleStatus(scope.$index, scope.row,'确定要取消隐藏该条数据吗')" v-else>
              取消隐藏
            </el-button>
            <!-- <el-button size="large" @click="handleEdit(scope.$index, scope.row)">
              删除
            </el-button> -->
            <el-button size="large" @click="handleRecord(scope.$index, scope.row)">
              投票记录
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination style="margin-top:20px" v-model:current-page="currentPage4" v-model:page-size="pageSize4"
        :page-sizes="[10, 20, 30, 40]" :size="size" :disabled="disabled" :background="background"
        layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />
    </el-card>

    <el-drawer v-model="drawer" direction="rtl" size='100%' :z-index="99" >
      <template #header>
        <h4>{{ edittitle }}</h4>
      </template>
      <template #default>
        <div>
          <div style="display: flex;align-items: center;">
            <span style="color: red;">*</span>
            <span style="margin-right: 16px;margin-left: 5px;">标题：</span>
            <el-input v-model="updateForm.video_title" style="width: 1400px" maxlength="100" placeholder="请输入标题"
              show-word-limit type="text" size="large" />
          </div>
          <div v-for="(item, index) of author_name " :key=index>
            <div style="margin-top: 10px;display: flex;;align-items: center;">
              <span style="color: red;">*</span>
              <span style="margin-right: 16px;margin-left: 5px;">作者：</span>
              <el-input v-model="item.author_name" style="width: 500px" maxlength="10" placeholder="请输入名字"
                show-word-limit type="text" size="large" />
              <el-select v-model="hospital_id[index].hospital_name" filterable remote placeholder="请输入单位"
                :remote-method="(val)=>{remoteMethod(val,index)}" :loading="loading" style="width: 440px;margin-left: 32px;"
                size="large"
                  @change="(val)=>{chaneindex(val,index)}"
                >

                <el-option v-for="item in optionss[index]" :key="item.hospital_id" :label="item.hospital_name"
                  :value="item.hospital_id" />
              </el-select>
              <el-button type="primary" :icon="Plus" size="large" style="margin-left: 16px;" v-if="author_name.length < 3"
                @click="changeauther('add', index)" />
              <el-button type="primary" :icon="Minus" size="large" style="margin-left: 16px;"
                v-if="author_name.length > 1" @click="changeauther('remove', index)" />
            </div>
          </div>
        </div>
        <div style="display: flex;align-items: center;">
            <span style="color: red;">*</span>
            <span style="margin-right: 16px;margin-left: 5px;">VID：</span>
            <el-input v-model="updateForm.video_no" style="width: 500px;margin-top: 10px;" placeholder="请输入视频VID"
               type="text" size="large" />
          </div>

        <div  class="myediotr" style="margin-top: 20px;" >
          <ueditor :modelValue="content" v-if="drawer"   @changeData="changeData" ></ueditor>
        </div>

      </template>
      <template #footer>
        <div style="display: flex;justify-content: center;margin-top: 32px ;margin-bottom: 32px;padding:32px; ">
          <el-button type="primary" text size="large" @click="drawers = true">预览</el-button>
          <el-button size="large" @click="open('温馨提示', '确定要取消输入吗')">取消</el-button>
          <el-button type="primary" size="large" @click="open('温馨提示', '确定要保存吗')">保存</el-button>
        </div>
      </template>
    </el-drawer>
    <el-drawer v-model="drawers" title="">
      <phoneVew :htmlContent="content"></phoneVew>
    </el-drawer>
    <el-drawer v-model="drawers1" title="" size='50%' >
      <div style="width: 500px;">
      <el-table :data="tableData1" >
        <el-table-column label="open_id" width="300">
          <template #default="scope">
            <span>{{ scope.row.open_id }}</span>

          </template>
        </el-table-column>
        <el-table-column label="投票时间" width="200">
          <template #default="scope">
         
              <span>{{ scope.row.voted_at }}</span>
        
          </template>
        </el-table-column>
      
        </el-table>
        <el-pagination style="margin-top:20px" v-model:current-page="currentPage41" v-model:page-size="pageSize41"
        :page-sizes="[10, 20, 30, 40]" :size="size1" :disabled="disabled" :background="background"
        layout="total, sizes, prev, pager, next, jumper" :total="total1" @size-change="handleSizeChange1"
        @current-change="handleCurrentChange1" />
  

        </div>
    </el-drawer>
  </div>
</template>
<script setup>
import request from "../api/request.js";
import { ElMessageBox, ElMessage } from 'element-plus'
import { Plus, Minus } from '@element-plus/icons-vue'
import { nextTick } from "vue";

const loading = ref(false)
const currentPage4 = ref(1)
const pageSize4 = ref(10)
const isedit = ref(false)
const background = ref(false)
const disabled = ref(false)
const error = ref(false)
const currentPage41 = ref(1)
const pageSize41 = ref(10)

let total = ref(0);
const size = ref('default')
let total1 = ref(0);
const size1 = ref('default')
const edittitle = ref('视频科普')



// 搜索条件
const searchForm = reactive({
  page: 1,
  page_size: 10,
  keyword: '',
  order: {

  }
})
const updateFormid = ref()
const updateForm = ref({
  video_title: '',
  video_author: [],
  video_content: '',
  video_status: '',
  video_no:''

})

const showEditor=ref(false);
const updateStatus = ref({
  video_status: '',
  

})
const voteform = ref({
  page: 1,
  page_size: 10,
  video_id: '',

})
const drawers = ref(false)
const drawers1 = ref(false)
const content = ref('');

const orgincontent = ref('');



onMounted(() => {
  getindexs()


})
const changeData=(data)=>{
  content.value = data;

}
const getindexs = () => {
  request.getavideo(searchForm).then(res => {
    tableData.value = []

    tableData.value.push(...res.data.data.data)

    total.value = res.data.data.total


  })
}
const changeauther = (type, index) => {
  if (type == 'add') {
    author_name.value.push({
      author_name: '',

    })

    hospital_id.value.push({

      hospital_id: '',
      hospital_name: '',
    })
  } else {
    author_name.value.splice(index, 1);

    hospital_id.value.splice(index, 1);
  }

}
function chaneindex(val,index)
{
  console.log("changeoptionss"+index)
  
  hospital_id.value[index].hospital_id = val

}


const change = (index) => {
  console.log(index)
  if (index == '') {
    searchForm.order = {}
  } else {
    searchForm.order = {
      vote_num: index
    }
  }
  searchs()

}

const value = ref('')

const options = [
  {
    value: '',
    label: '创建时间',
  },
  {
    value: 'desc',
    label: '投票从高到低',
  },
  {
    value: 'asc',
    label: '投票从低到高',
  },

]
const addnewOne = () => {
  isedit.value = false
  drawer.value = true;

  showEditor.value = false;
  

  nextTick(() => {
    showEditor.value = true;
  })

  updateForm.value.video_title = ''
  updateForm.value.video_status = 1
  content.value = ''
  updateForm.value.video_no = ''
  updateForm.value.video_content = ''
  updateForm.value.video_author = []
  author_name.value = []

  hospital_id.value = []

  author_name.value.push({
    author_name: '',

  })

  hospital_id.value.push({

    hospital_id: '',
    hospital_name: '',
  })

}

const handleSizeChange1 = (valr) => {

  voteform.value.page_size = valr
  vot()
}
const handleCurrentChange1 = (val) => {

  voteform.value.page = val
  vot()
}


const handleRecord = (index, row) => {
 drawers1.value = true
  voteform.value.video_id = row.video_id

  vot()

}
const vot = () => {
  request.getvideovote(voteform.value).then(res => {
          tableData1.value = []

tableData1.value.push(...res.data.data.data)
total1.value = res.data.data.total
          
    })
}
let rescode,message;
const handleStatus = (index, row,spans) => {
  ElMessageBox({
    title: "温馨提示",
    message: h('p', null, [
      h('span', null, spans),
     
    ]),
    showCancelButton: true,
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    beforeClose: (action, instance, done) => {
      if (action === 'confirm') {
        instance.confirmButtonLoading = true
        instance.confirmButtonText = '提交中...'
        updateStatus.value.video_status = row.video_status==1?2:1
     
        request.putvideostatus(row.video_id,updateStatus.value).then(res => {
            done()
            instance.confirmButtonLoading = false
            searchs()
            rescode = res.data.code
            message = res.data.message
    })
      

      } else {
        
        done()
      }
    },
  }).then((action) => {
  
    if(rescode!=200)
  {
    ElMessage.error(message);
  
  }
  else
  {
   
    ElMessage({
      type: 'info',
      message: '提交成功',
    })
  }
  })

}
const handleEdit = (index, row) => {
  isedit.value = true
  console.log(row)
  drawer.value = true;
 
  //showEditor.value = false;

  updateFormid.value = row.video_id
  updateForm.value.video_title = row.video_title
  updateForm.value.video_status = row.video_status
  content.value = row.video_content
  updateForm.value.video_no = row.video_no
  updateForm.value.video_content = row.video_content
  updateForm.value.video_author = []
  updateForm.value.video_author.push(...row.video_author)
  author_name.value = []

  hospital_id.value = []
  for (let i = 0; i < row.video_author.length; i++) {
    author_name.value.push({
      author_name: row.video_author[i].author_name,

    })

    hospital_id.value.push({

      hospital_id: row.video_author[i].hospital_id,
      hospital_name: row.video_author[i].hospital_name,
    })
  }


}
const handleDelete = (index, row) => {
  console.log(index, row)
}

const tableData = ref([


])
const tableData1 = ref([


])

const author_name = ref([

]);

const hospital_id = ref([

]);
const handleSizeChange = (valr) => {

  searchForm.page_size = valr
  getindexs()
}
const handleCurrentChange = (val) => {

  searchForm.page = val
  getindexs()
}
const optionss = ref([
  [], [], []
])
const searchhos = reactive({
  hospital_name: '',

})
const remoteMethod =(query,index) => {


if(query)
 {

    searchhos.hospital_name=query
  request.gethospital(searchhos).then(res => {
  

optionss.value[index] = []

optionss.value[index].push(...res.data.data)



})
 }

}

const drawer = ref(false)
// watch(drawer, (newValue, oldValue) => {
//   if(drawer.value == false) {
//     window.location.reload();
//   }
// })
const open = (titles, spans) => {
  ElMessageBox({
    title: titles,
    message: h('p', null, [
      h('span', null, spans),

    ]),
    showCancelButton: true,
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    beforeClose: (action, instance, done) => {
      if (action === 'confirm') {
        instance.confirmButtonLoading = true
        instance.confirmButtonText = '提交中...'
        if ('确定要取消输入吗' == spans) {
          error.value = true
          drawer.value = false;
       
          showEditor.value = false;
          done()
          instance.confirmButtonLoading = false
        }
        else {
         
            updateForm.value.video_author = []
            for (let i = 0; i < author_name.value.length; i++) {
              if (hospital_id.value[i].hospital_id != '' && author_name.value[i].author_name != '') {
                updateForm.value.video_author.push({
                  author_name: author_name.value[i].author_name,
                  hospital_id: hospital_id.value[i].hospital_id

                })
              }
              else {
                error.value = true
              
                break

              }
            }
            updateForm.value.video_content = content.value
            if (updateForm.value.video_title == '' || updateForm.value.video_no == '') {
              error.value = true
            }

            if (error.value) {
              open4();
              done()
              instance.confirmButtonLoading = false


              return
            }

           
            if (isedit.value) {
            request.putavideo(updateFormid.value, updateForm.value).then(res => {
              done()
              instance.confirmButtonLoading = false
              searchs()
              drawer.value = false;
      
              showEditor.value = false;
            })
          }
          else {
            request.putavideos(updateForm.value).then(res => {
              done()
              instance.confirmButtonLoading = false
              searchs()
              drawer.value = false;
      
              showEditor.value = false;
            })
          }

        }

      } else {

        done()
      }
    },
  }).then((action) => {

    if (!error.value) {

      ElMessage({
        type: 'info',
        message: '提交成功',
      })
    }
    else {
      error.value = false
    }

  })
}
const open4 = () => {
  ElMessage({

    message: '请填写必选项',
    type: 'error',
  })
}

const searchs = () => {
  pageSize4.value = 10
  currentPage4.value = 1
  searchForm.page_size = 10
  searchForm.page = 1
  getindexs()
}

</script>
<style scoped>
.main {

  background: white;
  height: 100%vh;

}
</style>