<template>
  <div>
    <div class="button-box clearflex fr p20">
      <el-button @click="dialogFormVisible = true" type="primary"
        >新增课程</el-button
      >
    </div>

    <div class="search-term">
      <el-form :inline="true" :model="searchInfo" class="demo-form-inline">
        <el-form-item label="课程名字" prop="name">
          <el-input
            placeholder="请输入课程名字"
            v-model="searchInfo.name"
            type="text"
            class="user-form-item"
            clearable
          ></el-input>
        </el-form-item>

        <el-form-item label="年度" prop="nd">
          <el-input
            placeholder="请输入年度"
            v-model="searchInfo.nd"
            type="text"
            class="user-form-item"
            clearable
          ></el-input>
        </el-form-item>

        <el-form-item label="课程分类" prop="type">
            <drop-search
              :info="searchInfo.type"
              type="type"
              class="user-form-item"
              @select="okSearchType"
            />
        </el-form-item>
      </el-form>
    </div>

    <el-table :data="tableData" border stripe>
      <el-table-column label="序号" width="70" prop="courseId">
      </el-table-column>
      <el-table-column label="岗位名称" prop="name">
        <template slot-scope="{ row }">
          <el-input
            v-if="row.edit"
            class="edit-input"
            size="small"
            v-model="row.name"
            clearable
          />
          <span v-else>{{ row.name }}</span>
        </template>
      </el-table-column>

      <el-table-column label="岗位编码" prop="courseCode">
        <template slot-scope="{ row }">
          <el-input
            v-if="row.edit"
            type="text"
            size="small"
            v-model="row.courseCode"
            clearable
          />
          <span v-else>{{ row.courseCode }}</span>
        </template>
      </el-table-column>

      <el-table-column label="课程类型" prop="marks">
        <template slot-scope="{ row }">
          <DropSearch
            v-if="row.edit"
            :info="row.type"
            type="type"
            @select="row.select"
          ></DropSearch>
          <span v-else>{{ row.type }}</span>
        </template>
      </el-table-column>

      <el-table-column label="学习年度" prop="marks">
        <template slot-scope="{ row }">
          <el-input
            v-if="row.edit"
            type="text"
            size="small"
            v-model="row.nd"
            clearable
          />
          <span v-else>{{ row.nd }}</span>
        </template>
      </el-table-column>

      <el-table-column label="课程学时" prop="marks">
        <template slot-scope="{ row }">
          <el-input
            v-if="row.edit"
            type="text"
            size="small"
            v-model="row.xs"
            clearable
          />
          <span v-else>{{ row.xs / 10 }}</span>
        </template>
      </el-table-column>

      <el-table-column label="课程费用" prop="marks">
        <template slot-scope="{ row }">
          <el-input
            v-if="row.edit"
            type="text"
            size="small"
            v-model="row.fee"
            clearable
          />
          <span v-else>{{ row.fee ? row.fee / 100 + "元" : "免费" }}</span>
        </template>
      </el-table-column>

      <el-table-column label="是否发布" prop="isPublish">
        <template slot-scope="{ row }">
          <el-switch
            v-if="row.edit"
            v-model="row.isPublish"
            :active-value="1"
            :inactive-value="0"
          >
          </el-switch>

          <span v-else>{{ row.isPublish ? "是" : "否" }}</span>
        </template>
      </el-table-column>
	  
	  <el-table-column label="可以购买" prop="isPublish">
	    <template slot-scope="{ row }">
	      <el-switch
	        v-if="row.edit"
	        v-model="row.canBuy"
	        :active-value="1"
	        :inactive-value="0"
	      >
	      </el-switch>
	  
	      <span v-else>{{ row.canBuy ? "是" : "否" }}</span>
	    </template>
	  </el-table-column>

      <el-table-column label="学时模板" prop="marks">
        <template slot-scope="{ row }">
          <div v-if="row.edit">
            <el-radio
              v-for="(item, index) in typeList"
              v-model="row.tplId"
              :key="index"
              :label="+index"
              >{{ item }}</el-radio
            >
          </div>
          <span v-else>{{ typeList[row.tplId] || "--" }}</span>
        </template>
      </el-table-column>
	  
	  <el-table-column label="考试题组" prop="marks">
	    <template slot-scope="{ row }">
	      <div v-if="row.edit">
	        <el-radio
	          v-for="(item, index) in examList"
	          v-model="row.examGroupId"
	          :key="index"
	          :label="+index"
	          >{{ item }}</el-radio
	        >
	      </div>
	      <span v-else>{{ examList[row.examGroupId] || "--" }}</span>
	    </template>
	  </el-table-column>

      <el-table-column label="展示图片" prop="invoice_img">
        <template slot-scope="{ row }">
          <UploadImg
            v-if="row.edit"
            v-model="row.tb"
            placeholder="课程图片"
            @rmImage="row.tb = ''"
          ></UploadImg>
          <PreviewImg v-else :src="row.tb" title="查看图片" />
        </template>
      </el-table-column>

      <el-table-column
        align="center"
        width="160px"
        label="操作"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="{ row, $index }">
          <el-button
            v-if="row.edit"
            type="success"
            size="small"
            icon="el-icon-circle-check"
            @click="confirmEdit(row, $index)"
            >提交</el-button
          >
          <el-button
            v-if="row.edit"
            class="cancel-btn"
            size="small"
            icon="el-icon-refresh"
            type="warning"
            @click="cancelEdit(row, $index)"
            >取消</el-button
          >
          <el-button
            v-if="!row.edit"
            type="primary"
            size="small"
            icon="el-icon-edit"
            @click="initEdit(row, $index)"
            >编辑</el-button
          >

          <el-button
            v-if="!row.edit"
            type="primary"
            size="small"
            icon="el-icon-edit"
            @click="editMedia(row, $index)"
            >管理</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      :current-page="page"
      :page-size="size"
      :page-sizes="[10, 30, 50, 100]"
      :style="{ float: 'right', padding: '20px' }"
      :total="total"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
      layout="total, sizes, prev, pager, next, jumper"
    ></el-pagination>

    <el-dialog title="新增课程" center :visible.sync="dialogFormVisible">
      <el-form :model="form" :rules="rules" label-width="120px" ref="elForm">
        <el-form-item label="岗位名称" prop="name">
          <el-input
            v-model="form.name"
            type="text"
            class="user-form-item"
            clearable
          ></el-input>
        </el-form-item>

        <el-form-item label="岗位编码" prop="courseCode">
          <el-input
            v-model="form.courseCode"
            type="text"
            class="user-form-item"
            clearable
          ></el-input>
        </el-form-item>

        <el-form-item label="课程类型" prop="type">
          <drop-search
            :info="form.type"
            type="type"
            class="user-form-item"
            @select="okType"
          />
        </el-form-item>

        <el-form-item label="学习年度" prop="xs">
          <el-input
            v-model="form.nd"
            type="number"
            class="user-form-item"
            clearable
          ></el-input>
        </el-form-item>

        <el-form-item label="课程总学时" prop="xs">
          <el-input
            v-model="form.xs"
            type="number"
            class="user-form-item"
            clearable
          ></el-input>
        </el-form-item>

        <el-form-item label="课程费用" prop="xs">
          <el-input
            v-model="form.fee"
            type="number"
            class="user-form-item"
            clearable
          ></el-input>
        </el-form-item>
		
		<el-form-item label="是否发布" prop="xs">
		  <el-switch
		    v-model="form.isPublish"
		    :active-value="1"
		    :inactive-value="0"
		  >
		  </el-switch>
		</el-form-item>
		
		
		<el-form-item label="在线购买" prop="xs">
		  <el-switch
		    v-model="form.canBuy"
		    :active-value="1"
		    :inactive-value="0"
		  >
		  </el-switch>
		</el-form-item>
		


        <el-form-item label="课程图片" prop="xs">
          <UploadImg
            v-model="form.tb"
            placeholder="课程图片"
            @rmImage="form.tb = ''"
          ></UploadImg>
        </el-form-item>
      </el-form>
      <div class="dialog-footer" slot="footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button @click="addCourse" type="primary">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getcourseList, addCourse } from "@/api/course.js";
import { toDatetime } from "@/utils/date";
import infoList from "@/mixins/infoList";
import { time2str, str2time } from "@/utils/index.js";
import {searchApi} from '@/api/search.js'
import DropSearch from "@/components/select/DropSearch.vue";
import PreviewImg from "@/components/customPic/previewImg.vue";
import UploadImg from "@/components/upload/image.vue";
import rules from "@/utils/rules";

export default {
  name: "Api",
  data() {
    return {
      listApi: getcourseList,
      dialogFormVisible: false,
      dialogMediaVisible: false,
      dialogTitle: "新增广告",
      boolVal: [0, 1],
      typeList: {
        4: "继续教育",
		6:'新培',
		7:'三类人员',
		8:'特种工'
      },
	  examList:{
		0:"无需考试",
		34:"三类人员",
		35:	"劳务员",
		36:"机械员",
		37:	"土建施工员",
		38:"装饰装修施工员",
		39:	"设备安装施工员",
		40:"土建质量员",
		41:"装饰装修质量员",
		42:"设备安装质量员",
		43:"市政质量员",
		44:"材料员",
		45:"标准员",
		81:"资料员",
		46:"市政施工员"
		
	  },
      form: {
        type: "",
        xs: 0,
		canBuy:0,
		isPublish:0,
        name: "",
        tb: "",
        courseCode: "",
      },
      tableData: [],
      rules: {
        name: rules.defaultFun("请输入课程名字"),
        type: rules.defaultFun("请输入课程分类"),
        courseCode: rules.defaultFun("请输入作者"),
        xs: rules.defaultNum("请输入学时"),
      },
    };
  },
  watch:{
    "searchInfo.name"(val){
      this.page = 1
      this.getTableData()
    },
    "searchInfo.nd"(val){
      this.page = 1
      this.getTableData()
    }
  },
  components: { DropSearch, PreviewImg, UploadImg },
  mixins: [infoList],
  methods: {
	 loadExamList(){
		searchApi( {type:'examGroup'}).then(res=>{
		    if( res.code == 200){
				for (let i in res.data){
					this.examList[ res.data[i].id] = res.data[i].name
				}
		    }
		})
	 },
    //条件搜索前端看此方法
    onSubmit() {
      this.page = 1;
      this.size = 10;
      this.getTableData();
    },
    editMedia(row, index) {
      this.$router.push({ name: "course_info", query: { id: row.courseId } });
    },
    cancelEdit(row, index) {
      row = Object.assign(row, row.temp);
      row.edit = false;
      delete row["temp"];
    },
    initEdit(row, index) {
      let form = Object.assign({}, row);
      row.edit = true;
      row.xs = row.xs / 10;
      row.fee = row.fee / 100;
      row.select = (item) => {
        row.type = item.name;
      };
      row.temp = form;
    },
    confirmEdit(row) {
      let param = Object.assign({}, row);
      param.xs = parseInt(param.xs * 10);
      param.fee = parseInt(param.fee * 100);
	  delete param["temp"]
      addCourse(param).then((res) => {
        if (res.code == 200) {
          Object.assign(row, param);
          row.edit = false;
          delete row["temp"];
          this.$message.successMsg("编辑成功", 1);
        }
      });
    },
    okType(item) {
      this.form.type = item.name;
    },
    okSearchType(item){
      this.searchInfo.type = item.name
      this.page = 1
      this.getTableData()
    },
    addCourse() {
      this.$refs["elForm"].validate((valid) => {
        if (!valid) return;
        let param = Object.assign({}, this.form);
        param.xs = parseInt(10 * param.xs);
        param.fee = parseInt(param.fee * 100);
        addCourse(param).then((res) => {
          if (res.code == 200) {
            this.dialogFormVisible = false;
            this.$message.successMsg("新增成功", 1);
            this.getTableData();
          }
        });
      });
    },
  },
  filters: {
    toDatetime,
  },
  created() {
	this.loadExamList()
    this.getTableData();
  },
};
</script>
<style scoped lang="scss">
.el-tag--mini {
  margin-left: 5px;
}
.warning {
  color: #dc143c;
}
</style>
