<template>
  <div class="configTable">
    <table-list
      :tableSets="backSet(1)"
      :tableData="tableData"
      :navText="backNavText(false)"
      :objectSpanMethod="tableData.length > 1 ? objectSpanMethod : () => {}"
      :loading="loading"
    >
      <template slot="btn" slot-scope="scope">
        <el-button
          type="text"
          size="small"
          @click.once="getCourseSubject"
          @click="configCourse(scope.scope.row)"
          >配置课程</el-button
        >
      </template>
    </table-list>
    <el-dialog
      title="添加"
      :visible.sync="dialogTableVisible"
      width="1200px"
      :close-on-click-modal="false"
    >
      <search-box-new
        ref="searchBox"
        :formData="formData"
        :formList="formList"
        @search="search"
        @init="init"
      />
      <table-list
        :tableSets="backSet(0)"
        :tableData="courseData"
        :navText="backNavText(true)"
        :loading="loading"
        :radio.sync="tableRadio"
      >
      </table-list>
      <pagination
        :total="total"
        :pageSize="formData.pageSize"
        :currentPage="formData.pageNum"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChange"
      />
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogTableVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import searchBoxNew from "@/components/searchBoxNew";
import tableList from "@/components/tableList";
import pagination from "@/components/pagination";
import { relation } from "@/api/resource/good";
export default {
  props: ["businessId", "educationTypeId", "tableData", "specList"],
  data() {
    return {
      courseData: [],
      dialogTableVisible: false,
      formList: [
        {
          prop: "subjectId",
          placeholder: "科目",
          scope: "select",
          options: [],
        },
        {
          prop: "goodsType",
          placeholder: "类型",
          scope: "select",
          options: [
            { label: "视频", value: "1" },
            { label: "直播", value: "6" },
            { label: "题库", value: "2" },
          ],
        },
        {
          prop: "code",
          placeholder: "商品编号",
        },
      ],
      formData: {},
      loading: false,
      total: 0,
      tableRadio: "",
      activeData: {},
      rowIndexArr: [],
    };
  },
  methods: {
    submit() {
      if (!this.tableRadio) {
        return this.$message({
          message: "请选择课程",
          type: "warning",
        });
      }
      let { specTemplateId, attrListVos, goodsId } = this.activeData;
      let specAttributeIds = attrListVos.map((e) => e.key).toString();
      relation(
        {
          specTemplateId,
          specAttributeIds,
          goodsId: this.tableRadio,
        },
        goodsId
      ).then((res) => {
        this.$message({
          message: "配置成功",
          type: "success",
        });
        let obj = this.courseData.find((e) => e.goodsId == this.tableRadio);
        this.activeData = Object.assign(this.activeData, obj, {
          specTemplateId,
        });
        this.dialogTableVisible = false;
      });
    },
    objectSpanMethod({ rowIndex, columnIndex }) {
      if (columnIndex < this.specList.length - 1) {
        let index = this.rowIndexArr[columnIndex].indexOf(rowIndex);
        if (index != -1) {
          return {
            rowspan: this.rowIndexArr[columnIndex][index + 1] - rowIndex,
            colspan: 1,
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0,
          };
        }
      }
    },
    init() {
      this.formData = {
        pageSize: 10,
        pageNum: 1,
        businessId: this.businessId,
        educationTypeId: this.educationTypeId,
        status: "0,1",
        goodsTypes: [1, 2, 6],
      };
      this.search();
    },
    getCourseSubject() {
      this.$api
        .inquireCourseSubject({ status: 1, businessId: this.businessId })
        .then((res) => {
          res.rows.map((e) => {
            e.value = e.id;
            e.label = e.subjectName;
          });
          this.formList[0].options = res.rows;
        });
    },
    configCourse(row) {
      this.tableRadio = "";
      this.activeData = row;
      this.dialogTableVisible = true;
      this.init();
    },
    handleSizeChange(v) {
      this.formData.pageSize = v;
      this.formData.pageNum = 1;
      this.search();
    },
    handleCurrentChange(v) {
      this.formData.pageNum = v;
      this.search();
    },
    search() {
      this.loading = true;
      this.$api
        .inquireGoods(this.formData)
        .then((res) => {
          this.courseData = res.rows;
          this.total = res.total;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    backSet(type) {
      let tableSet = [
        {
          label: "商品编码",
          prop: "code",
          hidden: true,
        },
        {
          label: "商品类型",
          prop: "code",
          hidden: true,
        },
        {
          label: "商品名称",
          prop: "goodsName",
          hidden: true,
        },
        {
          label: "科目",
          prop: "subjectNames",
          hidden: true,
        },
        {
          label: "商品价格",
          prop: "standPrice",
          hidden: true,
        },
        {
          label: "商品有效期",
          prop1: "validityStartTime",
          prop2: "validityEndTime",
          scope: "TimeLists",
          Diszing: false,
          hidden: true,
        },
        {
          label: "学习服务期",
          prop1: "serviceTimeType",
          prop2: "serviceTimeNum",
          prop3: "studyStartTime",
          prop4: "studyEndTime",
          scope: "studentServicePeriod",
          hidden: true,
        },
        {
          label: "可售状态",
          prop: "goodsStatus",
          hidden: true,
          scope: "status",
        },
      ];
      if (type) {
        this.specList.map((e, i) => {
          tableSet.splice(i, 0, {
            label: e.name + "",
            prop: "value" + i,
            hidden: true,
          });
        });
      }
      return tableSet;
    },
    backNavText(choice) {
      return {
        index: 0,
        num: false,
        border: true,
        choice: false,
        choiceRadio: choice,
        radioKey: "goodsId",
        addHide: true,
        tableHide: choice,
        dontNum: true,
        headShow: false,
        radioFixed: true,
        backFatherBtn: {
          status: false,
          title: "未定义",
        },
      };
    },
    getRowIndex() {
      for (let i = 0, len = this.specList.length; i < len - 1; i++) {
        this.rowIndexArr[i] = this.backIndex(i);
      }
    },
    backIndex(i) {
      let arr = [];
      let len = this.tableData.length;
      this.tableData.reduce((res, current, index) => {
        if (res == 0 || res != current["value" + i] || index == len - 1) {
          arr.push(index == len - 1 ? index + 1 : index);
        }
        return current["value" + i];
      }, 0);
      return arr;
    },
  },
  created() {
    this.getRowIndex();
  },
  components: { searchBoxNew, tableList, pagination },
};
</script>

<style lang="scss" scoped>
.configTable {
}
</style>
<style>
.fon_s {
  display: none;
}
</style>