<template>
  <div>
    <el-row>
      <el-col :span="12" :offset="6">
        <div>以下为python代码生成动画</div>
        <div>
          <el-input v-model="input" placeholder="请输入画布名称"></el-input>
          <el-select v-model="value" placeholder="请选择画质">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <el-input
            type="textarea"
            :autosize="{ minRows: 6, maxRows: 20 }"
            placeholder="请输入代码"
            v-model="textarea"
            class="Style1"
          >
          </el-input>
          <el-button type="primary" @click.native="submit">提交</el-button>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [
        {
          value: "w",
          label: "2560*1440",
        },
        {
          value: "h",
          label: "1920*1080",
        },
        {
          value: "m",
          label: "1280*720",
        },
        {
          value: "l",
          label: "854*480",
        },
      ],
      value: "",
      textarea: "",
      input: "",
      ID:"",
    };
  },
  methods: {
    submit() {
      var that = this;
      var final_submit = {
        username: "",
        scene_name: "",
        quality: "",
        mode: "",
        codes: "",
      };
      console.log(that.ID);
      final_submit.username = this.ID;
      final_submit.scene_name = that.input;
      final_submit.quality = that.value;
      final_submit.mode = "python";
      final_submit.codes = this.textarea;
      console.log(final_submit.codes);
      this.axios({
        method: "POST",
        url: "/generate",
        data: final_submit,
      }).then((res) => {
        console.log(res);
        if (res.data.status == "successful") {
          this.$message({
            message: "动画生成成功",
            type: "success",
          }
          );
          var pos =
            "/video?username=" +
            final_submit.username +
            "&scene_name=" +
            final_submit.scene_name +
            "&quality=" +
            final_submit.quality;
          console.log(pos);
          window.location.href = pos;
        } else {
          this.$message({
            message: "选择错误，动画生成失败",
            type: "error",
          });
        }
      });
    },
  },
  mounted:function(){
    this.ID=this.$route.query.userID;
    console.log(this.ID);
  },
};
</script>

<style scoped>
.Style1 {
  text-align: center;
}
</style>