<template>
  <div class="info">
    <div class="info-header">学习内容详情</div>
    <div class="info-container">
      <div class="info-wrapper">
        <el-collapse v-model="activeNames" @change="handleChange">
          <el-collapse-item title="审核意见" name="1">
            <el-form
              class="demo-form-inline"
              :inline="true"
              :model="checkForm"
              label-position="top"
            >
              <el-form-item label="审核层级" class="w100">
                <span class="w50 l-float">
                  <strong>初审</strong> {{checkForm.firstTime}}
                </span>
                <span class="w50">
                  <strong>复审</strong> {{checkForm.secondTime}}
                </span>
              </el-form-item>
              <el-form-item label="审核结果" class="w50">
                <span v-if="checkForm.status === 'TBC'">待初审</span>
                <span v-else-if="checkForm.status === 'TBCA'">待复审</span>
                <span v-else-if="checkForm.status === 'REFUSED'">驳回</span>
                 <span v-else-if="checkForm.status === 'APPROVED_FINAL'">通过</span>
              </el-form-item>
              <el-form-item
                label="驳回原因"
                class="w100"
              >
              {{checkForm.firstRemarks}}
              {{checkForm.secondRemarks}}
              </el-form-item>
            </el-form>
          </el-collapse-item>
          <el-collapse-item title="学习内容" name="2">
            <el-form
              class="demo-form-inline"
              :inline="true"
              :model="formInline"
              label-position="top"
            >
              <el-form-item label="学习内容名称" class="w50">{{ruleForm.name}}</el-form-item>
              <el-form-item label="学习内容宣传图" class="w50">
                <img class="imgSize" :src="ruleForm.cover" alt />
              </el-form-item>
            </el-form>
          </el-collapse-item>
          <el-collapse-item title="展板列表" name="3">
              <!-- {{tableData}} -->
            <div class="party-table">
              <el-table
                border
                style="width: 100%;height:100%"
                height="100%"
                ref="multipleTable"
                :data="tableData"
              >
                <el-table-column type="index" width="120" label="序号"></el-table-column>
                <el-table-column show-overflow-tooltip label="版权方名称" prop="name"></el-table-column>
                <el-table-column label="操作">
                  <template slot-scope="scope">
                    <el-button
                      type="text"
                      style="padding:0"
                      :disabled="scope.$index == 0"
                      @click="moveUpward(scope.row, scope.$index)"
                    >上移</el-button>
                    <el-button
                      type="text"
                      style="padding:0"
                      :disabled="(scope.$index + 1) == tableData.length"
                      @click="moveDown(scope.row, scope.$index)"
                    >下移</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-collapse-item>
        </el-collapse>
      </div>
    </div>
    <div class="info-footer">
      <div class="btn-group">
        <!-- 确定、取消 -->
        <el-button size="mini" type="primary" class="btn_form_search" @click="close">关闭</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      checkForm:{
        firstTime:"",
        secondTime:"",
        status:"",

      },
      ruleForm:{

      },
      tableData: [
        {
          id: "1",
          name: "1"
        },
        {
          id: "2",
          name: "2"
        },
        {
          id: "3",
          name: "3"
        }
      ],
      activeNames: ["1","2","3"],
      formInline: {
        user: "",
        region: ""
      }
    };
  },
  mounted(){
    this.init()
  },
  methods: {
    init() {
        this.getInfo(this.$route.query.id);
        // this.getLearnContentBoard()
        this.getCheckInfo(this.$route.query.id)
    },
    // 获取审核详情
     getCheckInfo(id) {
      let vm = this;
      vm.$https(
        {
          url: "audit/getById",
          method: "get",
          authType: this.backToken
        },
        {id:id,
          type:"LEARNING_CONTENT"}
        // this.$qs.stringify({
        //   id:id,
        //   type:"LEARNING_CONTENT"
        // })
      )
        .then(res => {
          let data = res.data.data;
          this.checkForm = data;
          
        })
        .catch(function(err) {
          console.log(err);
        });
    },
      //  获取学习内容详情
    getInfo(id) {
      let vm = this;
      vm.$https(
        {
          url: "learningContent/get/" + id,
          method: "get",
          authType: this.backToken
        }
        // param
      )
        .then(res => {
          let data = res.data.data;
          this.ruleForm = data;
          console.log(this.ruleForm)
          // this.ruleForm = {
          //   name :data.name,
          //   applicableScope:data.applicableScope,
          //   copyrightOwnerIdList:data.copyrightOwnerIdList,
          //   cover:data.cover,
          //   learningProjectId:data.learningProjectId,
          //   exhibitionBoardCatIdList:data.exhibitionBoardCatIdList,
          //   id:data.id,
          //   exhibitionBoardIdList:data.exhibitionBoardIdList,
          // }
          this.tableData = data.exhibitionBoardList
          // this.multipleSelection = data.exhibitionBoardList
          
        })
        .catch(function(err) {
          console.log(err);
        });
    },
    // 获取获取学习内容展板全部列表
    getLearnContentBoard(){
      let vm = this;
      vm.$https({
        url: "learningContentBoard/getList",
        method: "get",
        authType: this.backToken
      },
      {learningContentId:this.$route.query.id}
      )
        .then(res => {
          let data = res.data.data;
          console.log(data)
          this.tableData = data
          // this.multipleSelection = data
        })
        .catch(function(err) {
          console.log(err);
        });
    },
    close() {
      history.go(-1);
    },
    handleChange(val) {
      console.log(val);
    },
    moveUpward(row, index) {
      if (index > 0) {
        let upData = this.tableData[index - 1];
        this.tableData.splice(index - 1, 1);
        this.tableData.splice(index, 0, upData);
      } else {
        this.$message({
          message: "已经是第一条，上移失败",
          type: "warning"
        });
      }
    },
    moveDown(row, index) {
      if (index + 1 == this.tableData.length) {
        this.$message({
          message: "已经是最后一条，下移失败",
          type: "warning"
        });
      } else {
        let downData = this.tableData[index + 1];
        this.tableData.splice(index + 1, 1);
        this.tableData.splice(index, 0, downData);
      }
    }
  }
};
</script>

<style lang="less">
</style>