<template>
  <div>
    <!-- 表单筛选 -->
    <!-- <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      inline
      v-show="showSearch"
      label-width="auto"
    >
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="问题类型">
            <el-select
              style="width: 100%"
              v-model="queryParams.type"
              placeholder="请选择状态"
              clearable
            >
              <el-option
                v-for="dict in typeOption"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="问题描述">
            <el-input
              v-model="queryParams.descripiton"
              placeholder="请输入问题描述"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="创建时间">
            <el-date-picker
              v-model="dateRange"
              value-format="yyyy-MM-dd"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-search"
              size="mini"
              @click="handleQuery"
              >搜索</el-button
            >
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
              >重置</el-button
            >
          </el-form-item>
        </el-col>
      </el-row>
    </el-form> -->
    <!-- 按钮组 -->
    <!-- <el-row :gutter="10" class="mb8">
      <right-toolbar
        :showSearch.sync="showSearch"
        @queryTable="getTableList"
      ></right-toolbar>
    </el-row> -->
    <!-- 表格 -->
    <el-table v-loading="loading" :data="tableList" max-height="400">
      <el-table-column label="问题类型" align="center" prop="type">
        <template slot-scope="scope">
          {{ scope.row.type === "1" ? "单选" : "多选" }}
        </template>
      </el-table-column>
      <el-table-column label="问题描述" align="center" prop="descripiton" />
      <el-table-column label="创建时间" align="center" prop="createTime" />
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-view"
            @click="handleDetail(scope.row)"
            >查看</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <!-- <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getTableList"
    /> -->
    <div class="footer">
      <el-button @click="handleCancel">关 闭</el-button>
    </div>

    <!-- 详情弹窗 -->
    <el-dialog
      :title="title"
      :visible.sync="dlgVisible"
      append-to-body
      width="40%"
    >
      <AddAndEdit
        :loading="dlgLoading"
        :data="formData"
        :dlgType="3"
        @cancel="dlgVisible = false"
      ></AddAndEdit>
    </el-dialog>
  </div>
</template>

<script>
import { getListByIds, getDetail } from "@/api/exerciseManage/question";
import AddAndEdit from "@/views/exerciseManage/question/components/addAndEdit.vue";
export default {
  components: { AddAndEdit },
  props: {
    selectedIds: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      // 显示搜索条件
      // showSearch: true,
      // 查询参数
      // queryParams: {
      //   pageNum: 1,
      //   pageSize: 10,
      //   type: "",
      //   descripiton: "",
      // },
      // 时间
      // dateRange: [],
      // 状态组
      // typeOption: [
      //   { value: "1", label: "单选" },
      //   { value: "2", label: "多选" },
      // ],
      // 表格相关
      loading: false,
      tableList: [],
      // selectedRow: [],
      // total: 0,
      //  弹窗相关
      title: "",
      dlgVisible: false,
      formData: {},
      dlgLoading: false,
    };
  },
  watch: {
    selectedIds: {
      handler(newVal) {
        // console.log(newVal);
        if (newVal) {
          this.getTableList();
        }
      },
      immediate: true,
    },
  },
  methods: {
    // 关闭弹窗
    handleCancel() {
      this.$emit("close");
    },
    // 搜索
    // handleQuery() {
    //   this.queryParams.pageNum = 1;
    //   this.getTableList();
    // },
    // 重置
    // resetQuery() {
    //   this.dateRange = [];
    //   this.queryParams = {
    //     pageNum: 1,
    //     pageSize: 10,
    //     type: "",
    //     descripiton: "",
    //   };
    //   this.getTableList();
    // },
    // 查看
    handleDetail(row) {
      this.title = "查看";
      this.dlgVisible = true;
      this.dlgLoading = true;
      getDetail(row.id)
        .then((res) => {
          if (res.code === 200) {
            this.formData = { ...res.data, categoryName: row.categoryName };
          }
        })
        .finally(() => (this.dlgLoading = false));
    },
    // 查询列表
    getTableList() {
      this.loading = true;
      getListByIds({ questioqnIds: this.selectedIds })
        .then((res) => {
          if (res.code === 200) {
            this.tableList = res.data;
          }
        })
        .finally(() => (this.loading = false));
    },
  },
};
</script>

<style lang="scss" scoped>
.footer {
  text-align: right;
  margin-top: 40px;
}
</style>
