<template>
  <div id="handoutView">
    <!-- 选择讲义 -->
    <el-dialog
      :visible.sync="aboutJYBox"
      width="400px"
      :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="aboutJYBox = false"
          />
        </div>
      </div>
      <el-button @click="openJYActiveBox">选择讲义</el-button>
      <div v-if="handoutsIdTable">
        {{ handoutsName }}
        <i
          class="el-icon-error"
          style="color: #f56c6c"
          @click="delHandouts"
        ></i>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="aboutJYBox = false">取 消</el-button>
        <el-button type="primary" @click="submitJYs">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 关联讲义列表 -->
    <el-dialog
      :visible.sync="jYactiveBoxs"
      width="1080px"
      append-to-body
      :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="jYactiveBoxs = false"
          />
        </div>
      </div>
      <div style="margin-bottom: 10px">
        <!-- 搜索框 -->
        <el-input
          style="width: 230px;margin-right:10px;"
          :size="size"
          v-model="formData['key']"
          placeholder="请输入讲义标题/讲义编码"
        ></el-input>
        <el-button :size="size" type="primary" @click="getJyData(1)"
          >查询</el-button
        >
        <el-button :size="size" @click="getJyData(0)">重置</el-button>
      </div>
      <el-table
        ref="multipleTable"
        :data="tableData"
        border
        :header-cell-style="{
          'background-color': '#eee',
          padding: '8px',
          color: '#333',
        }"
      >
        <el-table-column label="" width="45" align="center">
          <template scope="scope">
            <el-radio
              :label="scope.row.handoutsId"
              v-model="templateRadio"
              @change.native="getTemplateRow(scope.$index, scope.row)"
              >{{ "" }}</el-radio
            >
          </template>
        </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 v-if="item.scope === 'Status'">
                {{
                  scope.row[item.prop] === 1
                    ? "发布"
                    : scope.row[item.prop] === 0
                    ? "未发布"
                    : "未知"
                }}
              </span>
              <ul v-else-if="item.scope === 'eduType'" class="ulAuto">
                <template v-for="(itm, inds) in scope.row[item.prop]">
                  <li :key="inds" v-if="inds === 0">
                    {{
                      itm.educationName +
                      "-" +
                      itm.projectName +
                      "-" +
                      itm.businessName
                    }}
                  </li>
                </template>
                <el-popover
                  :key="Math.random()"
                  placement="right"
                  trigger="click"
                >
                  <ul>
                    <li v-for="(itm, inds) in scope.row[item.prop]" :key="inds">
                      {{ inds + 1 }}、
                      {{
                        itm.educationName +
                        "-" +
                        itm.projectName +
                        "-" +
                        itm.businessName
                      }}
                    </li>
                  </ul>
                  <el-button
                    slot="reference"
                    style="margin-left: 6px"
                    type="text"
                    v-if="scope.row[item.prop].length > 1"
                    size="mini"
                    >更多</el-button
                  >
                </el-popover>
              </ul>
              <span v-else-if="item.scope === 'canDownload'">{{
                scope.row[item.prop] === 1 ? "是" : "否"
              }}</span>
              <span v-else>{{ 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="jYactiveBoxs = false">取 消</el-button>
        <el-button type="primary" @click="submitBox">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import pagination from "@/components/pagination";
export default {
  components: { pagination },
  data() {
    return {
      size:"small",
      aboutJYBox: false,
      handoutsName: "", //讲义名称
      handoutsIdTable: "",
      templateRadio: "", //临时选中ID
      templateName: "", //临时选中Name
      jYactiveBoxs: false,
      total: 0,
      tableSet: [
        { label: "讲义编码", prop: "encoder", width: "150px" },
        { label: "讲义标题", prop: "handoutsName" },
        {
          label: "是否可下载",
          prop: "canDownload",
          scope: "canDownload",
          width: "140px",
        },
        { label: "发布状态", prop: "status", scope: "Status", width: "140px" },
      ],
      tableData: [],
      formData: {},
    };
  },
  methods: {
    /**
     * 初始化
     */
    openBox(id) {
      if (id && !this.handoutsName) {
        this.$api.obtainCourseHandouts(id).then((res) => {
          this.handoutsName = res.data.handoutsName;
        });
      }
      this.handoutsIdTable = id;
      this.aboutJYBox = true;
    },
    /**
     * 删除讲义
     */
    delHandouts() {
      this.handoutsIdTable = "";
      this.handoutsName = "";
    },
    //确定讲义ID
    submitJYs() {
      this.$emit("backData", this.handoutsIdTable);
      this.aboutJYBox = false;
    },
    openJYActiveBox() {
      this.templateRadio = this.handoutsIdTable;
      this.templateName = this.handoutsName;
      this.getJyData(0);
      this.jYactiveBoxs = true;
    },
    /**
     * 确定选中
     */
    submitBox() {
      this.handoutsIdTable = this.templateRadio;
      this.handoutsName = this.templateName;
      this.jYactiveBoxs = false;
    },
    /**
     * 临时选中
     */
    getTemplateRow(index, row) {
      this.templateRadio = row.handoutsId;
      this.templateName = row.handoutsName;
    },
    /**
     * 搜索
     */
    getJyData(int) {
      if (int === 0) {
        this.formData = {
          businessId: this.$parent.listData.businessId,
          status: 1,
          pageSize: 10,
          pageNum: 1,
          key: "",
        };
      }
      if (int === 1) {
        this.formData.pageNum = 1;
      }
      this.$api.inquireCourseHandoutsList(this.formData).then((res) => {
        this.total = res.total;
        this.tableData = res.rows;
      });
    },
    handleSizeChange(v) {
      this.formData.pageSize = v;
      this.formData.pageNum = 1;
      this.getJyData();
    },
    handleCurrentChange(v) {
      this.formData.pageNum = v;
      this.getJyData();
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.el-button {
  border-radius: 8px;
}
/deep/.el-dialog {
  border-radius: 8px;
  .el-dialog__header {
    padding: 0;
    .hearders {
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0px 18px 0px 20px;
      border-bottom: 1px solid #e2e2e2;
      .leftTitle {
        font-size: 14px;
        font-weight: bold;
        color: #2f4378;
      }
      .rightBoxs {
        display: flex;
        align-items: center;
        img {
          width: 14px;
          height: 14px;
          margin-left: 13px;
          cursor: pointer;
        }
      }
    }
  }
  .el-dialog__footer {
    padding: 0;
    .dialog-footer {
      padding: 0px 40px;
      height: 70px;
      border-top: 1px solid #e2e2e2;
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }
  }
}
.imgBox {
  width: 100%;
  // height: 210px;
  border: 1px solid #e2e2e2;
  border-radius: 8px;
  padding: 8px 8px 3px;
  display: flex;
  flex-direction: column;
  align-items: center;
  .imgLabel {
    flex: 1;
    width: 100%;
    border: 1px dotted #e2e2e2;
    color: #999;
    font-size: 14px;
    cursor: pointer;
    border-radius: 8px;
    .msPhoto {
      display: flex;
      justify-content: center;
      align-items: center;
      max-width: 100%;
      max-height: 270px;
      img {
        max-width: 100%;
        max-height: 270px;
      }
    }
    .imgbbx {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      i {
        font-weight: bold;
        margin: 14px 0;
        font-size: 24px;
      }
    }
  }
  p {
    margin: 5px 0px;
  }
}
</style>
