<template>
  <el-drawer
    ref="drawer"
    title="课程迁移"
    :visible.sync="drawerVisible"
    direction="rtl"
    :before-close="drawerHandleClose"
  >
    <!-- ------------------------- -->
    <div style="padding:15px">
      <el-form
        :inline="true"
        :model="dataForm"
        @keyup.enter.native="getDataList()"
      >
        <div style="display:flex;align-items:end">
          <el-form-item label="课程名称">
            <el-input
              v-model="query.courseName"
              placeholder="课程名称"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="平台分类">
            <el-cascader
              clearable
              :props="{
                label: 'title',
                value: 'id',
                checkStrictly: true
              }"
              v-model="selectType"
              :options="options"
            >
            </el-cascader>
          </el-form-item>
          <el-form-item label=" ">
            <el-button
              type="primary"
              @click="
                pageIndex = 1;
                getDataList();
              "
              >查询</el-button
            >
            <!-- <el-button type="primary" @click="addOrUpdateHandle()"
            >新增</el-button
          > -->
          </el-form-item>
        </div>
      </el-form>
      <el-table
        :data="dataList"
        border
        v-loading="dataListLoading"
        style="width: 100%;"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column
          prop="title"
          header-align="center"
          align="center"
          label="课程名"
        >
          <template slot-scope="scope">
            <div>
              <span>{{ scope.row.title }}</span>
              <!-- <el-tooltip placement="bottom" effect="light">
              <div slot="content">多行信息<br />第二行信息多行信息<br />第二行信息多行信息<br />第二行信息多行信息第二行信息多行信息第二行信息</div>
              <i
                class="el-icon-paperclip"
                style=" color:#17B3A3; margin-left:15px"
              ></i>
            </el-tooltip> -->
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="sizeChangeHandle"
        @current-change="currentChangeHandle"
        :current-page="pageIndex"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        :total="totalPage"
        style="padding: 30px 0; text-align: center;"
        layout="total, sizes, prev, pager, next, jumper"
      >
      </el-pagination>
      <div style="text-align:center">
        <el-button type="primary" @click="moveCourseBtn">确 定</el-button>
      </div>
    </div>
    <!-- ----------------------------- -->
  </el-drawer>
</template>

<script>
export default {
  props: ["catalogueId","catalogueTitle"],
  data() {
    
    return {
      drawerVisible: true,
      selectType: [],
      options: [
        {
          id: "all",
          title: "全部",
          children: undefined
        },
        {
          id: 1,
          title: "医学",
          children: []
        },
        {
          id: 2,
          title: "国学",
          children: []
        }
      ],
      dataForm: {
        key: ""
      },
      multipleSelection: [],
      query: {
        type: "",
        categoryId: "",
        sociologyId: "",
        courseName: ""
      },
      dataList: [],
      delFlag: false,
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,
      dataListSelections: [],
      addOrUpdateVisible: false,
      urlList: {
        medicalList: "/master/courseMedical/getCourseMedicalList", //医学
        sociologyList: "/master/courseSociology/getCourseSociologyList" //国学
      }
    };
  },
  methods: {
    init() {},
    drawerHandleClose() {
      this.$emit("mycloseDrawer", "drawer");
    },
    handleSelectionChange(val) {
      if (val.length > 1) {
        this.$message.error("只可以选择一门课程进行迁移哦~");        
      } else {
        this.multipleSelection = val;
      }

      console.log(22, this.multipleSelection);
    },
    moveCourseBtn() {
      if (this.multipleSelection.length == 0) {
        this.$message.error("请选择您要迁移的目标课程！");
      } else if (this.multipleSelection.length > 1) {
        this.$message.error("只可以选择一门课程进行迁移哦~");
      } else {
        this.$confirm( 
          `${this.catalogueTitle}目录 即将迁移到 ${this.multipleSelection[0].title}课程内, 是否继续?`,
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }
        ).then(() => {
         
          if(!this.catalogueId){
            this.$message.error('请重新选择您要转移的课程目录')
            return
          }
          // console.log(this.catalogueId, this.multipleSelection[0].id)
          // 走接口 并关闭
          this.$http
            .request({
              url: this.$http.adornUrl(
                `/master/course/courseCatalogueTransfer`
              ),
              method: "POST",
              data: {
                courseId: this.multipleSelection[0].id, //新课程id
                catalogueId: this.catalogueId //目录id
              },
              header: {
                //默认 无 说明：请求头
                "Content-Type": "application/json"
              }
            })
            .then(res => {
              console.log("********:", res);
              this.$message.success('操作成功')
              this.drawerHandleClose() 
            }).catch(()=>{
              this.$message.error('操作失败')
            });
               
          // this.$nextTick(() => {
          //   this.$refs["moveCourse"].getDataList();
          // });
        });
      }
    },
    // checkSelectable(row){
    //   return row.auditStatus === '0'
    //   console.log(row,'row')
    // },
    // 获取数据列表
    getDataList() {
      var data = {
        page: this.pageIndex,
        limit: this.pageSize,
        courseName: this.query.courseName //关键字
      };

      if (this.selectType.length == 0) {
        data.type = 0;
        data.medicalId = "";
        data.sociologyId = "";
      } else if (this.selectType.length >= 1) {
        data.type = this.selectType[0] == "all" ? 0 : this.selectType[0];
        if (this.selectType.length == 1) {
          data.medicalId = "";
          data.sociologyId = "";
        }
        if (this.selectType.length > 1) {
          if (this.selectType[0] == 1) {
            data.medicalId = this.selectType[this.selectType.length - 1];
            data.sociologyId = "";
          }
          if (this.selectType[0] == 2) {
            data.medicalId = "";
            data.sociologyId = this.selectType[this.selectType.length - 1];
          }
        }
      }

      this.dataListLoading = true;
      this.$http({
        url: this.$http.adornUrl("/master/course/getCourseList"),
        method: "post",
        data: this.$http.adornData(data)
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.dataList = data.page.records;
          this.totalPage = data.page.total;
        } else {
          this.dataList = [];
          this.totalPage = 0;
        }
        this.dataListLoading = false;
      });
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val;
      this.pageIndex = 1;
      this.getDataList();
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val;
      this.getDataList();
    },
    // 多选
    selectionChangeHandle(val) {
      this.dataListSelections = val;
    }
    // 新增 / 修改
    // addOrUpdateHandle(row) {
    //   this.addOrUpdateVisible = true;
    //   this.$nextTick(() => {
    //     this.$refs.addOrUpdate.init(row);
    //   });
    // }
  }
};
</script>

<style></style>
