<template>
  <div class="question-wrap">
    <bread-crumb :curmbFirst="curmbFirst" :curmbSecond="curmbSecond"/>
    <template>
      <div class="question-content screenSet" id="screenSet">
        <el-button type="primary" @click="exportFile" class="add-question">导出</el-button>

        <!-- <el-table
          :data="data"
          border
          style="width: 100%; flex:1; overflow: scroll;">
          <el-table-column label="问卷id" prop="id" align="center" width="120"></el-table-column>
          <el-table-column label="created_time(年月日时分秒)" prop="createdTime" align="center" width="240"></el-table-column>
          <el-table-column label="医生姓名" prop="name" align="center" width="120"></el-table-column>
          <el-table-column label="医生id" prop="doctorId" align="center" width="120"></el-table-column>
          <el-table-column label="手机号码" prop="mobilePhone" align="center" width="120"></el-table-column>
          <el-table-column label="业务职称" prop="title" align="center" width="120"></el-table-column>
          <el-table-column label="医院名称" prop="hospital" align="center" width="120"></el-table-column>
          <el-table-column label="医院等级" prop="hospitalClass" align="center" width="120"></el-table-column>
          <el-table-column label="医院标签" prop="levelGradeName" align="center" width="120"></el-table-column>
          <el-table-column label="省" prop="provinceName" align="center" width="120"></el-table-column>
          <el-table-column label="市" prop="cityName" align="center" width="120"></el-table-column>
          <el-table-column label="区县" prop="countyName" align="center" width="120"></el-table-column>

          <template
            v-if="data && data[0].questionAnswerAndImageList"
            v-for="subitem in data[0].questionAnswerAndImageList">
            <el-table-column
              :prop="subitem.answer"
              align="center"
              :label="subitem.question"
              show-overflow-tooltip
              width="240">
              <template slot-scope="scope">
                    <span>{{scope.row[scope.column.property]}}</span>
              </template>
              </el-table-column>              
          </template>

          <template
            v-if="data && data[0].questionAnswerAndImageList"
            v-for="item in data[0].questionAnswerAndImageList">
            <el-table-column :prop="item" :label="item.question" :value="item" align="center" width="240">
              <span>{{item.answer}}</span>
            </el-table-column>
          </template>v-if="data && data.outModels && data.outModels.length > 0"
        </el-table> -->

        <el-table
          v-if="data"
          ref="multipleTable"
          :data="data.outModels"
          border
          tooltip-effect="dark"
          style="width: 100%">
          <template
            v-if="data && data.columnList"
            v-for="item in data.columnList">
            <el-table-column
              :prop="item.key"
              align="center"
              :label="item.value"
              show-overflow-tooltip
            ></el-table-column>
          </template>
          <!-- <el-table-column
            v-if="data && data.columnList"
            prop="userName"
            align="center"
            label="数据查看人员"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column label="备注" prop="remark" align="center"></el-table-column> -->
        </el-table>
      </div>
    </template>
  </div>
</template>

<script>
import BreadCrumb from "../components/breadcrumb.vue";
import * as commonUtil from "../utils/utils";
import { getFilePath, doUpload } from "../utils/qiniu-util";
import { QUESTION_UPLOAD_TEMPLATE } from "../utils/constants";
let vm = null;
export default {
  components: {
    BreadCrumb
  },
  data() {
    return {
      curmbFirst: "组件",
      curmbSecond: "问卷管理",

      id:0,

      data: "",
    };
  },
  created() {
    vm = this;
    this.id = this.$route.query.id;
    vm.search();
  },
  // 挂载到Dom完成时
  mounted: function() {
    // commonUtil.resizeHeight();
  },
  methods: {
    // 查询
    search() {
      vm.GET("/campaign/questionnaire/getQuestionnaireList", {id: this.id}).then(
        res => {
          if (res.code == "000000") {
            vm.data = res.data;
          }
        }
      );
    },
    exportFile() {
      // const params = {
      //   projectType: vm.ruleForm.accountData,
      //   type: vm.ruleForm.dataType,
      // };
      commonUtil.openLoading(vm)
      vm.GET('/campaign/questionnaire/export/' + vm.id, null).then(res => {
        commonUtil.closeLoading(vm)
        if(res && res.code == '000000'){
          this.$message({ message: '导出成功', type: 'success' });
          // this.showExport = true;
          console.log("exportFile() : res.data = " + res.data)
          window.location.href = res.data;
        } else {
          this.$message({ message: res.message, type: 'warning' });
        }
      });
    },
    // exportRecords() {
    //     api.exportsRecords({}, {urlSuffix: `/${this.searchData.questionnaireId}`}).then((res) => {
    //       if(res.status === 200 && res.data && res.data.data) {
    //         window.location.href = res.data.data;
    //       }
    //     });
    //   },
  }
};
</script>

<style lang="scss" scoped>
.question-wrap {
  .question-content {
    background: #fff;

    .add-question {
      float: right;
      margin: 10px;
    }

    .table-empty {
      img {
        width: 100px;
      }

      p {
        margin-top: -50px;
      }
    }
  }

  .export {
    float: right;
    margin-bottom: 10px;
  }

  .submit-btn {
    display: inline-block;
    overflow: hidden;

    p {
      font-size: 12px;
    }

    .avatar-uploader {
      float: right;

      .el-button {
        margin-left: 10px;
      }

      .head-btn {
        margin-top: 48px !important;
      }
    }

    .uploat-content {
      float: left;

      .bg-img {
        width: 150px;
        height: 30px;
      }

      .head-bg-img {
        width: 80px;
        height: 80px;
      }
    }
  }

  .login-auth {
    width: 400px;

    .el-checkbox {
      display: inline-block;
      width: 150px;
      text-align: left;
    }
  }
}
</style>
<style>
  .spe-label-require .el-form-item__label:before{
    content: '*';
    color: #F56C6C;
    margin-right: 4px;
  }
</style>