<template>
  <div class="bg-white rounded-md p-4 rounded-6px">
    <div class="operateDiv flex justify-between">
      <div>
        <el-button type="primary" @click="linkTo('tbkt_video')">录制视频管理</el-button>
        <el-button type="primary" @click="handleDownload">使用手册</el-button>
      </div>
      <div class="flex items-center space-x-4">
        <el-input v-model="searchForm.keyword" placeholder="请输入搜索的关键词" size="small" :suffix-icon="Search" />
        <el-button type="primary" @click="initData">搜索</el-button>
      </div>
    </div>
    <el-divider />
    <el-table :data="tableData" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" />
      <el-table-column prop="tt_id" label="编号"></el-table-column>
      <el-table-column prop="tt_mc" label="名称" show-overflow-tooltip></el-table-column>
      <el-table-column prop="tt_public" label="直播观看是否需要登录"></el-table-column>
      <el-table-column prop="tt_lxr" label="联系人"></el-table-column>
      <el-table-column prop="tt_lxr_phone" label="联系电话"></el-table-column>
      <el-table-column prop="tt_hdh" label="互动号"></el-table-column>
      <el-table-column label="操作" width="400">
        <template #default="{ row }">
          <el-button type="primary" text @click="handleEdit(row)">编辑</el-button>
          <el-divider direction="vertical" />
          <el-popover placement="bottom" :width="160" trigger="hover">
            <div class="text-center">
              <img v-if="row.tt_zjjszbewm" class="w-100px h-100px m-auto" :src="row.tt_zjjszbewm" alt="" />
              <qrcode-vue v-else :value="row.tt_zjjstldz" size="100" level="H" />
            </div>
            <template #reference>
              <el-button type="primary" text>互动扫码（主讲主画面）</el-button>
            </template>
          </el-popover>
          <el-divider direction="vertical" />
          <el-popover placement="bottom" :width="160" trigger="hover">
            <div class="text-center">
              <img v-if="row.tt_tkjszbewm" class="w-100px h-100px m-auto" :src="row.tt_tkjszbewm" alt="" />
              <qrcode-vue v-else :value="row.tt_tkjstldz" size="100" level="H" />
            </div>
            <template #reference>
              <el-button type="primary" text>互动扫码（受援主画面）</el-button>
            </template>
          </el-popover>
        </template>
      </el-table-column>
    </el-table>
    <div class="flex justify-end my-10">
      <el-pagination v-model:current-page="currentPage" v-model:page-size="limit" :page-sizes="[10, 20, 50, 100]" :pager-count="5" :small="true" layout="total,sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>

    <el-dialog v-model="dialogVisible" title="编辑" width="800px" destroy-on-close :close-on-click-modal="false" @close="handleClose">
      <el-form ref="ruleFormRef" label-position="right" label-width="160px" :model="ruleForm">
        <div class="grid grid-cols-2 gap-x-10">
          <el-form-item label="名称:" prop="tt_mc">
            <el-input v-model="ruleForm.tt_mc" size="small"></el-input>
          </el-form-item>
          <el-form-item label="联系人:" prop="tt_lxr">
            <el-input v-model="ruleForm.tt_lxr" size="small"></el-input>
          </el-form-item>
          <el-form-item label="联系电话:" prop="tt_lxr_phone">
            <el-input v-model="ruleForm.tt_lxr_phone" size="small"></el-input>
          </el-form-item>
          <el-form-item label="互动号:" prop="tt_hdh">
            <el-input v-model="ruleForm.tt_hdh" size="small"></el-input>
          </el-form-item>
          <el-form-item label="主讲教师用户名:" prop="tt_zjjs_user_name">
            <el-input v-model="ruleForm.tt_zjjs_user_name" size="small"></el-input>
          </el-form-item>
          <el-form-item label="主讲教室推流地址:" prop="tt_zjjstldz">
            <el-input v-model="ruleForm.tt_zjjstldz" size="small"></el-input>
          </el-form-item>
        </div>
        <el-form-item label="主讲教室直播二维码:" prop="tt_zjjszbewm">
          <file-upload-progress v-model:part="ruleForm.tt_zjjszbewm" :limit="1" class="w-520px" accept=".jpg,.jpeg,.png">
            <template #default>
              <el-button type="primary" size="large">点击上传</el-button>
            </template>
            <template #tip>
              <div class="mt-2 text-xs" style="color: #606266;">不上传自定义二维码是系统默认生成播放界面的二维码</div>
            </template>
          </file-upload-progress>
        </el-form-item>
        <div class="grid grid-cols-2 gap-x-10">
          <el-form-item label="受课教师用户名:" prop="tt_tkjs_user_name">
            <el-input v-model="ruleForm.tt_tkjs_user_name" size="small"></el-input>
          </el-form-item>
          <el-form-item label="受课教室推流地址:" prop="tt_tkjstldz">
            <el-input v-model="ruleForm.tt_tkjstldz" size="small"></el-input>
          </el-form-item>
        </div>
        <el-form-item label="受课教室直播二维码:" prop="tt_tkjszbewm">
          <file-upload-progress v-model:part="ruleForm.tt_tkjszbewm" :limit="1" class="w-520px" accept=".jpg,.jpeg,.png">
            <template #default>
              <el-button type="primary" size="large">点击上传</el-button>
            </template>
            <template #tip>
              <div class="mt-2 text-xs" style="color: #606266;">不上传自定义二维码是系统默认生成播放界面的二维码</div>
            </template>
          </file-upload-progress>
        </el-form-item>
        <el-form-item label="说明:" prop="tt_brief">
          <el-input v-model="ruleForm.tt_brief" type="textarea" :rows="5" size="small"></el-input>
        </el-form-item>
        <el-form-item label="直播观看是否需要登录:" prop="tt_public">
          <el-radio-group v-model="ruleForm.tt_public">
            <el-radio label="1">是</el-radio>
            <el-radio label="2">否</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div class="mt-5 text-center">
        <el-button type="primary" plain @click="handleClose()">取消</el-button>
        <el-button type="primary" @click="submit">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script setup>
import QrcodeVue from "qrcode.vue";
import { Search } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
const router = useRouter();

const searchForm = ref({});

watch(() => searchForm.value, () => {
  initData();
}, { deep: true })

const total = ref(0)
const limit = ref(10)
const currentPage = ref(1);
const tableData = ref([]);
const syscUrl = ref("");
initData();
async function initData() {
  let obj = {
    page: currentPage.value,
    limit: limit.value,
  };
  let { code, data, template } = await request({ url: "/txwx/tbkt/index", data: Object.assign(obj, searchForm.value) });
  if (code == 1) {
    tableData.value = data.page_data;
    total.value = Number(data.total_rows);

    syscUrl.value = template.czsc_doc_url;
  }
}

function handleSizeChange(val) {
  limit.value = val;
  currentPage.value = 1;
  initData();
}

function handleCurrentChange(val) {
  currentPage.value = val;
  initData();
}


const multiSelection = ref([]);
const handleSelectionChange = (val) => {
  multiSelection.value = val;
}

const linkTo = (name, id, title) => {
  if (id == undefined) {
    router.push({ name });
  } else {
    router.push({ name, params: { id } });
  }
};

const handleDownload = () => {
  window.open(syscUrl.value);
}

const dialogVisible = ref(false);
const ruleForm = ref({
  tt_mc: "",
  tt_lxr: "",
  tt_lxr_phone: "",
  tt_hdh: "",
  tt_zjjs_user_name: "",
  tt_zjjstldz: "",
  tt_zjjszbewm: "",
  tt_tkjs_user_name: "",
  tt_tkjstldz: "",
  tt_tkjszbewm: "",
  tt_brief: "",
  tt_public: ""
});
const currentId = ref("");
const handleClose = () => {
  dialogVisible.value = false;
  currentId.value = "";
  for (let key in ruleForm.value) {
    ruleForm.value[key] = "";
  }
}

const handleEdit = async (row) => {
  dialogVisible.value = true;
  currentId.value = row.tt_id;
  let { code, data } = await request({ url: "/txwx/tbkt/detail", data: { tt_id: row.tt_id } });
  if (code == 1) {
    for (let key in ruleForm.value) {
      ruleForm.value[key] = data.one_info[key];
    }
    ruleForm.value.tt_public = data.one_info.tt_public_option_k;
  }
}

const submit = async () => {
  let obj = {
    tt_id: currentId.value,
    txwx_tbkt: ruleForm.value
  }
  let { code } = await request({ url: "/txwx/tbkt/edit", data: obj });
  if (code == 1) {
    ElMessage.success("保存成功！");
    initData();
    handleClose();
  }
}
</script>

<style lang="scss" scoped>
@use "~/styles/table.scss";
@use "~/styles/pagination.scss";
</style>