
<template>
  <div class="app-container">
    <h3>通行证申请——学习考试</h3>
    <div class="flex border height40">
      <span class="one">通行区域</span>
      <span class="two">学习内容</span>
      <span class="three">考试试卷</span>
    </div>
    <div class="flex" v-for="(item, index) in list" :key="index">
      <span class="one height">{{ item.areaName }}</span>
      <div
        class="two background height"
        v-if="item.stStudyContentNameList.length > 0"
        @click="bindingFun(item, '学习内容')"
      >
        <span
          v-for="(item1, index1) in item.stStudyContentNameList"
          :key="index1"
          >{{ item1 }}{{item.stStudyContentNameList.length-1==index1?'':'，'}}</span
        >
      </div>
      <span
        v-else
        class="two background height"
        @click="bindingFun(item, '学习内容')"
        >绑定学习内容</span
      >
      <div
        class="three background height"
        v-if="item.stPaperNameList.length > 0"
        @click="bindingFun(item, '考试试卷')"
      >
        <span v-for="(item1, index1) in item.stPaperNameList" :key="index1"
          >{{ item1 }}{{item.stPaperNameList.length-1==index1?'':'，'}}</span
        >
      </div>
      <span
        v-else
        class="three background height"
        @click="bindingFun(item, '考试试卷')"
        >绑定考试</span
      >
    </div>
    <!--对话框-->
    <el-dialog
      :title="dialogTit"
      :visible.sync="dialogVisible"
      width="700px"
      :close-on-click-modal="false"
    >
      <el-form
        :model="form"
        :rules="rules"
        ref="form"
        label-width="120px"
        label-position="left"
      >
        <el-form-item
          label="绑定学习内容"
          class="form-item-style"
          prop="stStudyContentIdList"
          v-if="dialogTit.indexOf('学习内容') > -1"
        >
          <el-select
            filterable
            clearable
            multiple
            v-model="form.stStudyContentIdList"
            placeholder="请选择学习内容"
            style="width: 100%"
          >
            <el-option
              v-for="item in studyList"
              :key="item.stStudyContentId"
              :label="item.title"
              :value="item.stStudyContentId"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="绑定考试试卷"
          class="form-item-style"
          prop="stPaperIdList"
          v-if="dialogTit.indexOf('考试试卷') > -1"
        >
          <el-select
            filterable
            clearable
            multiple
            v-model="form.stPaperIdList"
            placeholder="请选择考试试卷"
            style="width: 100%"
          >
            <el-option
              v-for="item in examinationList"
              :key="item.stPaperId"
              :label="item.title"
              :value="item.stPaperId"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false"> 取消 </el-button>
        <el-button type="primary" @click="addOrUpdate"> 确定 </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  stareaGetList,
  stareaBingdingPaper,
  stareaBingdingStudy,
  stareaPaperList,
  stareaStudyList,
} from "@/api/examination";
export default {
  components: {},
  filters: {},
  computed: {},
  data() {
    return {
      // 主表格&主表格加载状态
      list: [],
      listLoading: true,
      // 是否显示对话框
      dialogVisible: false,
      dialogTit: "",
      studyList: [], //学习内容列表
      examinationList: [],
      // 添加角色参数
      form: {
        stStudyContentIdList: null,
        stPaperIdList: null,
      },
      // 验证规则
      rules: {
        stStudyContentIdList: [
          { required: true, message: "请选择", trigger: "change" },
        ],
        stPaperIdList: [
          { required: true, message: "请选择", trigger: "change" },
        ],
      },
    };
  },
  created() {
    this.fetchData();
    this.getStareaStudyList();
    this.getStareaPaperList();
  },
  watch: {},
  methods: {
    // 获取列表数据
    fetchData() {
      this.listLoading = true;
      stareaGetList(this.page).then((res) => {
        this.list = res.data;
        this.listLoading = false;
      });
    },
    // 获取学习内容列表
    getStareaStudyList() {
      stareaStudyList().then((res) => {
        this.studyList = res.data;
      });
    },
    // 获取试卷列表
    getStareaPaperList() {
      stareaPaperList().then((res) => {
        this.examinationList = res.data;
      });
    },
    bindingFun(item, type) {
      this.form = Object.assign(this.form, item);
      this.dialogTit = item.areaName + "-" + type;
      this.dialogVisible = true;
      this.$nextTick(() => {
        this.$refs["form"].clearValidate();
      });
    },
    // 确定添加/编辑
    addOrUpdate() {
      this.$refs["form"].validate(async (valid) => {
        if (valid) {
          let res;
          if (this.dialogTit.indexOf("考试试卷") > -1) {
            res = await stareaBingdingPaper(this.form);
          } else {
            res = await stareaBingdingStudy(this.form);
          }
          if (res.code == 200) {
            this.dialogVisible = false;
            this.fetchData();
            this.$message({
              type: "success",
              message: "操作成功!",
            });
          }
        }
      });
    },
  },
};
</script>
<style scoped lang="scss">
.flex {
  text-align: center;
  margin-bottom: 29px;
  width: 1629px;
}
.height40 {
  height: 40px;
  margin-top: 29px;
}
.border {
  border-bottom: 2px solid #e7ebf4;
}
.background {
  background: #7482a0;
  border-radius: 8px;
  color: #fff;
}
.one {
  width: 200px;
}
.two {
  width: 30%;
  margin: 0 64px;
}
.three {
  width: 30%;
}
.height {
  height: 60px;
  line-height: 60px;
  overflow: auto;
  // margin-bottom: 24px;
  // margin-top: 0;
  cursor: pointer;
}
</style>
