<template>
  <div id="selectCourse">
    <el-dialog
      @opened="prepareEnd"
      :visible.sync="dialogVisibleTableBoxs"
      width="1100px"
      :show-close="false"
      :close-on-click-modal="false"
    >
      <div slot="title" class="hearders">
        <div class="leftTitle">关联双师资课程</div>
        <div class="rightBoxs">
          <img
            src="@/assets/images/Close@2x.png"
            alt=""
            @click="dialogVisibleTableBoxs = false"
          />
        </div>
      </div>
      <div style="margin-bottom: 10px">
        <el-input
          style="width: 230px; margin: 0px 10px"
          :size="size"
          v-model="courseName"
          clearable
          placeholder="课程标题/课程编码"
        ></el-input>
        <el-button :size="size" type="primary" @click="getInfos(1)"
          >查询</el-button
        >
        <el-button :size="size" @click="getInfos(0)">重置</el-button>
      </div>
      <span style="color: red">注：最多选择3条数据进行关联</span>
      <el-table
        ref="multipleTable"
        :data="tableData"
        border
        @selection-change="selectCheck"
        :row-key="getRowKeys"
        :header-cell-style="{
          'background-color': '#eee',
          padding: '8px',
          color: '#333',
        }"
      >
        <el-table-column
          align="center"
          type="selection"
          width="55"
          header-align="center"
          :selectable="checkboxT"
          :reserve-selection="true"
        >
        </el-table-column>
        <template v-for="(item, index) in tableSet">
          <el-table-column
            v-if="item.scope !== 'inputs'"
            :width="item.width"
            :key="index"
            :label="item.label"
            align="center"
            :show-overflow-tooltip="true"
            header-align="center"
            ><template slot-scope="scope">
              <span>{{ scope.row[item.prop] }}</span></template
            >
          </el-table-column></template
        >
      </el-table>
      <pagination
        :total="total"
        :pageSize="formData.pageSize"
        :currentPage="formData.pageNum"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChange"
      />
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleTableBoxs = false">取 消</el-button>
        <el-button
          type="primary"
          :disabled="activeLists.length === 0"
          @click="submitTab"
          v-throttle
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import pagination from "@/components/pagination";
export default {
  components: { pagination },
  data() {
    return {
      size: "small",
      dialogVisibleTableBoxs: false,
      tableData: [],
      goodsId: "",
      courseName: '',
      tableSet: [
        { label: "课程编码", prop: "code", width: "140px" },
        { label: "课程科目", prop: "subjectName"},
        { label: "课程标题", prop: "courseName" },
      ],
      formData: {
        pageSize: 10,
        pageNum: 1,
      },
      activeLists: [],
      courseIds:[],
      total: 0,
    };
  },
  methods: {
    /**
     * 初始
     */
    openBox(goodsId,courseList) {
      this.goodsId = goodsId;
      console.log(courseList,'courseList');
      if(courseList && courseList.length > 0){
        this.courseIds = courseList.map(item => item.courseId)
        console.log(this.courseIds,'courseIds');
      }else{
        this.courseIds = []
      }
      //获取商品课程
      let param = {
        goodsId: this.goodsId,
        pageSize: this.formData.pageSize,
        pageNum: this.formData.pageNum,
        keyWord: this.courseName
      }
      this.$api.obtainCourseGoodsList(param).then((res) => {
        console.log(res, "res");
        if (res.code == 200) {
          this.tableData = res.rows;
          this.total = res.total;
        }
        console.log(this.tableData, "this.tableData");
      });
      this.dialogVisibleTableBoxs = true;
      this.$nextTick(() => {
        this.$refs.multipleTable.clearSelection();
      });
    },
    /**
     * 搜索数据
     */
    getInfos(int) {
      console.log(this.courseName,'this.courseName');
      //重置0
      if (int === 0) {
        this.formData.pageSize = 10;
        this.formData.pageNum = 1;
        this.courseName = ''
      }
      if (int === 1) {
        this.formData.pageNum = 1;
      }
      let param = {
        goodsId: this.goodsId,
        pageSize: this.formData.pageSize,
        pageNum: this.formData.pageNum,
        keyWord: this.courseName
      }
      this.$api.obtainCourseGoodsList(param).then((res) => {
        this.tableData = res.rows;
        this.total = res.total;
      });
    },
    /**
     * 开启动画结束执行
     */
    prepareEnd() {
      this.activeLists = []; //初始清空勾选数据
    },
    /**
     * 提交回调数据
     */
    submitTab() {
      if(this.activeLists && this.activeLists.length > 3){
        this.$message.warning("最多选择3条数据进行关联,进行关联，请重新选择！");
        return;
      }
      this.$message.success("添加成功");
      this.dialogVisibleTableBoxs = false;
      this.$emit("backData", this.activeLists);
    },
    selectCheck(value) {
      this.activeLists = value;
    },
    checkboxT(row, index) {
      // || row.bindStatus != 0
      if((this.courseIds.length > 0 && this.courseIds.includes(row.courseId)) ||  (row.bindStatus && row.bindStatus > 0)){
        return false;
      }else{
        return true;
      }
    },
    getRowKeys(row) {
      return row.courseId;
    },
    handleSizeChange(v) {
      this.formData.pageSize = v;
      this.formData.pageNum = 1;
      this.getInfos();
    },
    handleCurrentChange(v) {
      this.formData.pageNum = v;
      this.getInfos();
    },
  },
};
</script>

<style lang="less" scoped>
</style>
