<template>
  <div class="app-container">
    <div class="seetingsDiv" style="">
      <el-button type="primary" @click="dialogAddTestPaperVIsible=true">添加试卷
      </el-button>
    </div>
    <el-table :data="testpaperlist" id="QuestionTable" border
      style="width: 100%;border-radius: 5px;box-shadow: 0 0 10px #efefef;margin-top: 10px;" :stripe='true'>
      <el-table-column prop="date" label="ID" width="50">
        <template slot-scope="scope">
          <span>{{ scope.row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="date" label="试卷标题" width="350">
        <template slot-scope="scope">
          <span>{{ scope.row.TestPaperTitle }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="date" label="试卷总分" width="80" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.TotalScore }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="date" label="单选题数量" width="100" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.SingleNumber }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="date" label="多选题数量" width="100" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.MultipleNumber }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="date" label="主观题数量" width="100" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.SubjectiveNumber }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="TestPaperClassId" label="分类" width="180" align="center">
        <template slot-scope="scope">
          <span>{{scope.row.ParentTitle}} / {{ scope.row.TestPaperClassId | typeFilters}}</span>
        </template>
      </el-table-column>
      <!-- <el-table-column prop="name" label="原价" width="80" v-show="false">
        <template slot-scope="scope">
          <span>{{ scope.row.OriginalPrice/100 }}</span>
        </template>
      </el-table-column> -->
      <el-table-column prop="name" label="现价/元" width="80">
        <template slot-scope="scope">
          <span>{{ scope.row.PresentPrice }}</span>
        </template>
      </el-table-column>

      <el-table-column prop="name" label="试卷说明" min-width="180" :show-overflow-tooltip='true'>
        <template slot-scope="scope">
          <span>{{ scope.row.Describe }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="状态" width="100" align="center">
        <template slot-scope="scope">
          <el-button type="info" size="small" v-if="scope.row.State==2">暂存</el-button>
          <el-button type="success" size="small" v-if="scope.row.State==1">已上架</el-button>
        </template>
      </el-table-column>
      <el-table-column fixed="right" width="100" align="center">
        <template slot-scope="scope">
          <el-dropdown @command="(e)=>{handleCommand(e,scope.row)}">
            <span class="el-dropdown-link">
              操作<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="addquestion">题目维护</el-dropdown-item>
                <el-dropdown-item command="update">编辑</el-dropdown-item>
                <el-dropdown-item command="add" v-if="scope.row.State==2">上架</el-dropdown-item>
                <el-dropdown-item command="del">删除</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination background @current-change="currentchange"
      style="position:static;bottom: 3px;text-align: center;margin-top: 5px;" :page-size="this.parameter.pageSize"
      layout="total,prev, pager, next" :total="Count">
    </el-pagination>
    <el-dialog :title="title" :visible.sync="dialogAddTestPaperVIsible" @close="closeClassDialog" width="600px"
      :close-on-click-modal="false">
      <div class="grid-content bg-purple">
        <el-form ref="form" class="testPaper-manager" :model="TestPaper" label-width="100px">
          <el-form-item label="试卷名称:" class="el-form-item-custom">
            <el-input v-model="TestPaper.TestPaperTitle" placeholder="请输入试卷标题"></el-input>
          </el-form-item>
          <el-form-item label="分类" class="el-form-item-custom">
            <el-cascader class="testpaper-input" v-model="TestPaper.TestPaperClassId " style="width:400px;"
              :props="{emitPath:false}" :clearable='true' :options="treeData" @change="handleChange">
            </el-cascader>
          </el-form-item>
          <el-form-item label="板块分类" class="el-form-item-custom">
            <el-select v-model="TestPaper.PlateClass" :disabled="true" placeholder="请选择板块分类">
              <el-option label="章节练习" value="1"></el-option>
              <el-option label="历年真题" value="2"></el-option>
              <el-option label="模拟试卷" value="3"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="试卷原价:" prop="OriginalPrice" v-show="false">
            <el-input class="testpaper-input" oninput="value=value.replace(/[^0-9.]/g,'')"
              v-model="TestPaper.OriginalPrice" :precision="0">
              <template slot="append">元</template>
            </el-input>
          </el-form-item>
          <el-form-item label="试卷价格:" prop="PresentPrice">
            <el-input class="testpaper-input" oninput="value=value.replace(/[^0-9.]/g,'')"
              v-model="TestPaper.PresentPrice">
              <template slot="append">元</template>
            </el-input>
          </el-form-item>
          <el-form-item label="会员价:" prop="MembershipPrice" v-show="false">
            <el-input class="testpaper-input" oninput="value=value.replace(/[^0-9.]/g,'')"
              v-model="TestPaper.MembershipPrice">
              <template slot="append">元</template>
            </el-input>
          </el-form-item>
          <el-form-item label="试卷简介:">
            <el-input class="testpaper-input" :rows="10" type="textarea" v-model="TestPaper.Describe">
            </el-input>
          </el-form-item>
          <el-button type="primary" style="float: right;" @click="SubmitTestPaper">保存
          </el-button>
          <div style="clear: both;"></div>
        </el-form>
      </div>
    </el-dialog>
    <el-dialog>

    </el-dialog>
  </div>
</template>

<script>
  import {
    getTestPaperList,
    GetToplevel,
    EditTestPaper,
    GetTestPaperListByPlateClass,
    AddTestPaperInfo,
    getTestPaperClassList,
    TestPaperUpdate,
    DeleteTestPaper,
    ReleaseTestPaper,
  } from '@/api/TestPaper'
  let that
  export default {

    data() {
      return {
        title: '添加试卷基本信息',
        parameter: {
          pageIndex: 1,
          pageSize: 12,
          PlateClass: 1,
          QuestionClassId: 0,
        },
        Count: 0,
        testpaperlist: [],
        dialogAddTestPaperVIsible: false,
        dialogQuestionVlsible: false,
        QuestionClass: [],
        TestPaper: {
          TestPaperTitle: "",
          PlateClass: "1",
          TestPaperClassId: 0,
          TotalScore: 0,
          Describe: "",
          SingleNumber: 0,
          MultipleNumber: 0,
          SubjectiveNumber: 0,
          OriginalPrice: "0",
          PresentPrice: "0",
          MembershipPrice: "0",
          QuestionBankIds: []
        },
        treeData: [],
        list: [],
        value: ''
      }
    },
    computed: {

    },
    created() {
      let parameter = {
        pageIndex: 1,
        pageSize: 10000,
        sort: "id",
        sortOrder: 1,
        keyword: ""
      }
      getTestPaperClassList(parameter).then(res => {
        this.list = res.data.data;
      });

    },
    filters: {
      typeFilters(val) {
        const data = that.list.filter(t => t.id == val)[0]
        if (data) {
          return data.ClassTitle
        } else {
          return '未知'
        }
      }
    },
    beforeCreate() {
      that = this
    },
    mounted() {
      let ContentAreaHight = window.innerHeight - document.getElementById("QuestionTable").offsetTop;
      let lineNumber = ContentAreaHight - 50 - 40;
      this.parameter.pageSize = Math.floor(lineNumber / 49)
      this.getTestPaperListHeadler();
      this.getQuestionClassListHeadler();
    },
    methods: {
      handleChange(value){
        console.log(value)
      },
      closeClassDialog() {
        this.title = '添加试卷基本信息'
        this.dialogAddTestPaperVIsible = false
        this.value = ''
        this.getTestPaperListHeadler();
        this.TestPaper = {
          TestPaperTitle: "",
          PlateClass: "1",
          TestPaperClassId: 0,
          TotalScore: 0,
          Describe: "",
          SingleNumber: 0,
          MultipleNumber: 0,
          SubjectiveNumber: 0,
          OriginalPrice: "0",
          PresentPrice: "0",
          MembershipPrice: "0",
          QuestionBankIds: []
        }
      },
      //添加试卷基本信息
      SubmitTestPaper() {

        if (this.value == '') {

          AddTestPaperInfo(this.TestPaper).then(res => {
            if (res.data.code == 200) {
              this.$confirm('添加试卷基本信息成功！', '消息');
              this.getTestPaperListHeadler();
              this.dialogAddTestPaperVIsible = false
            } else {
              this.$confirm('添加试卷基本信息失败！', '消息')
            }
          });
        } else if (this.value == 'update') {
          this.TestPaper.PresentPrice = this.TestPaper.PresentPrice * 100
          TestPaperUpdate(this.TestPaper).then(res => {
            if (res.data.code == 200) {
              this.$confirm('编辑试卷基本信息成功！', '消息');
              this.getTestPaperListHeadler();
              this.dialogAddTestPaperVIsible = false
            } else {
              this.$confirm('编辑试卷基本信息失败！', '消息')
            }
          })
        }

      },
      getTestPaperListHeadler() {
        GetTestPaperListByPlateClass(this.parameter).then(res => {
          this.testpaperlist = res.data.data.rows.map(t=>{
            t.PresentPrice=t.PresentPrice/100
            return t
          });
          this.Count = res.data.data.total;
        });
      },
      currentchange(page) {
        this.parameter.pageIndex = page;
        this.getTestPaperListHeadler();
      },
      getQuestionClassListHeadler() {
        let _this = this;
        getTestPaperClassList({
          pageIndex: 1,
          pageSize: 100000,
        }).then(res => {
          var gettree = function(titem) {
            titem.children = []
            let childrenList = res.data.data.filter(u => u.ParentId == titem.value);
            if (childrenList.length == 0)
              titem.children = undefined;
            res.data.data.filter(u => u.ParentId == titem.value).forEach((item, i) => {
              var model = {
                value: item.id,
                label: item.ClassTitle
              };
              gettree(model);
              titem.children.push(model);
            })
          }
          res.data.data.filter(u => u.ParentId == 0).forEach((item, i) => {
            var model = {
              value: item.id,
              label: item.ClassTitle
            };
            gettree(model);
            _this.QuestionClass.push(model);
            _this.treeData.push(model)
            console.log(model)
          })
        });
      },
      handleCommand(value, val) {
        this.value = value
        if (value == 'addquestion') {
          console.log(val)
          this.$router.push({
            path: '/moduleIndex/index',
            query: {
              val: val.id
            }
          })
        } else if (value == 'update') {
          this.title = '编辑试卷基本信息'
          this.dialogAddTestPaperVIsible = true
          this.TestPaper = val
          // this.TestPaper.PresentPrice = this.TestPaper.PresentPrice * 0.01
          this.TestPaper.PlateClass = '1'
        } else if (value == 'del') {
          this.$confirm('确定删除该卷子？', '消息', {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            callback: (action) => {
              if (action == "confirm") {
                DeleteTestPaper(val.id).then(res => {
                  if (res.data.code == 200) {
                    this.$confirm(res.data.message, '消息')
                    this.getTestPaperListHeadler();
                  }
                });
              }
            },
          })
        } else if (value == 'add') {
          this.$confirm('确定将该卷子上架？', '消息', {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            callback: (action) => {
              if (action == "confirm") {
                ReleaseTestPaper(val.id).then(res => {
                  if (res.data.code == 200) {
                    this.$confirm(res.data.message, '消息')
                    this.getTestPaperListHeadler();
                  }
                });
              }
            },
          })
        }
      }
    }
  }
</script>

<style>
  .seetingsDiv {
    width: 100%;
    height: 60px;
    background: #efefef;
    line-height: 60px;
    border-radius: 5px;
    box-shadow: 0 0 5px #cdcdcd;
  }

  .seetingsDiv button {
    background-color: #304156;
    border: 0px;
    margin-left: 10px;
    box-shadow: 0 0 5px #cdcdcd;
    float: right;
    margin-top: 12px;
    margin-right: 10px;
  }
</style>
