<template>
  <div class="app-container">
    <el-card class="box-card">
  <div class="text item">
    <H1  style="margin-left: 45%; width: 50%;display: flex;  align-items: center;">{{title}}问卷调查</H1>
    <el-main style="margin-left:25%;margin-right: 25%; width: 50%;">
      <el-form ref="form" v-for="data in rows" :key="data.id" :model="form" :rules="rules" label-width="80px">
        <!-- 单选 -->
        <el-form-item v-if="data.compType == '0'" :label="data.title" :prop="data.fieldName">
          <el-radio-group v-model="form[data.id]" size="medium">
            <el-radio v-for="(item, index) in data.optionalValues" :key="item.key" :label="item.key">{{ item.value
              }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- 多选 -->
        <el-form-item v-if="data.compType == '1'" :label="data.title" :prop="data.fieldName">
          <el-checkbox-group v-model="form[data.id]" size="medium">
            <el-checkbox v-for="(item, index) in data.optionalValues" :key="item.key" :label="item.key">{{ item.value
              }}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <!-- 单行 -->
        <el-form-item v-if="data.compType == '2'" :label="data.title" :prop="data.fieldName">
          <el-input v-model="form[data.id]" :placeholder="data.placPrompt" clearable :style="{ width: '100%' }">
          </el-input>
        </el-form-item>
        <!-- 多行 -->
        <el-form-item v-if="data.compType == '3'" :label="data.title" :prop="data.fieldName">
          <el-input v-model="form[data.id]" type="textarea" :placeholder="data.placPrompt"
            :autosize="{ minRows: 4, maxRows: 4 }" :style="{ width: '100%' }"></el-input>
        </el-form-item>
        <!-- 密码 -->
        <el-form-item v-if="data.compType == '4'" :label="data.title" :prop="data.fieldName">
          <el-input v-model="form[data.id]" :placeholder="data.placPrompt" clearable show-password
            :style="{ width: '100%' }"></el-input>
        </el-form-item>
        <!-- 计数器 -->
        <el-form-item v-if="data.compType == '5'" :label="data.title" :prop="data.fieldName">
          <el-input-number v-model="form[data.id]" :placeholder="data.placPrompt"></el-input-number>
        </el-form-item>
        <!-- 下拉 -->
        <el-form-item v-if="data.compType == '6'" :label="data.title" :prop="data.fieldName">
          <el-select v-model="form[data.id]" :placeholder="data.placPrompt" clearable :style="{ width: '100%' }">
            <el-option v-for="(item, index) in data.optionalValues" :key="item.key" :label="item.value"
              :value="item.key"></el-option>
          </el-select>
        </el-form-item>
        <!-- 开关 -->
        <el-form-item v-if="data.compType == '7'" :label="data.title" :prop="data.fieldName" required>
          <el-switch v-model="form[data.id]"></el-switch>
        </el-form-item>
        <!-- 时间选择 -->
        <el-form-item v-if="data.compType == '8'" :label="data.title" :prop="data.fieldName">
          <el-time-picker v-model="form[data.id]" format="HH:mm:ss" value-format="HH:mm:ss"
            :picker-options='{ "selectableRange": "00:00:00-23:59:59" }' :style="{ width: '100%' }"
            :placeholder="data.placPrompt" clearable></el-time-picker>
        </el-form-item>
        <!-- 时间范围 -->
        <el-form-item v-if="data.compType == '9'" :label="data.title" :prop="data.fieldName">
          <el-time-picker v-model="form[data.id]" is-range format="HH:mm:ss" value-format="HH:mm:ss"
            :style="{ width: '100%' }" start-placeholder="开始时间" end-placeholder="结束时间" range-separator="至"
            clearable></el-time-picker>
        </el-form-item>
      </el-form>
    </el-main>
    <div  style="margin-left: 45%; width: 50%;display: flex;  align-items: center;" slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">提交</el-button>
    </div>
  </div>
</el-card>
    
    
  </div>
</template>

<script>
import {listBySurveyId } from "@/api/business/survey";

import { addList, } from "@/api/business/templatePropValue";

export default {
  name: "Template",
  dicts: ['open'],
  data() {
    return {
      rows: null,
      check: [],
      // 表单参数
      form: {},
      // 表单校验
      rules: {
      },
      queryParams: {},
      surveyId: null,
      title: null,

    };
  },
  created() {
    console.log("query", this.$route.query.id);
    this.surveyId = this.$route.query.id
    this.title = this.$route.query.title
    this.getList();
  },
  methods: {
    /** 查询模版管理列表 */
    getList() {
      this.loading = true;
      console.log("surveyId", this.surveyId);
      listBySurveyId(this.surveyId).then(response => {
        console.log("response", response);
        this.rows = response.data;
        console.log("response.form", response.form);
        this.form = response.form;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        title: null,
        context: null,
        open: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        deleted: null,
        remark: null
      };
      this.resetForm("form");
    },
    /** 提交按钮 */
    submitForm() {
      console.log("this.form", this.form);
      this.form.surveyId = this.surveyId;
      addList(this.form).then(response => {
        this.$modal.msgSuccess("提交成功");
        this.$router.push({ path: '/questionnaire/survey'  });
        
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal.confirm('是否确认删除模版管理编号为"' + ids + '"的数据项？').then(function () {
        return delTemplate(ids);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => { });
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('business/template/export', {
        ...this.queryParams
      }, `template_${new Date().getTime()}.xlsx`)
    }
  }
};
</script>
