<template>
  <div class="app-container">
    <div style="margin: 0px 0px 10px 0px">
      <el-alert
        title="根据C头文件自动生成EVM模块注册代码"
        type="success"
      ></el-alert>
    </div>
    <el-tabs v-model="activeName" type="border-card">
      <el-tab-pane label="解析文件" name="first">
        <div style="margin: 10px 0px">
          <el-form>
            <el-form-item>
              <el-upload
                name="binfile"
                drag
                multiple
                ref="upload"
                action="null"
                :auto-upload="false"
                :http-request="handleUploadFile"
                :on-remove="handleUploadRemove"
              >
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">
                  将文件拖到此处，或<em>点击上传</em>
                </div>
                <div class="el-upload__tip" slot="tip">请选择C头文件</div>
              </el-upload>
            </el-form-item>
            <el-form-item>
              <el-button @click="uploadFile">开始上传</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-tab-pane>
      <el-tab-pane label="类型管理" name="second">
        <el-table :data="markType" size="medium" style="width: 50%">
          <el-table-column prop="key" label="typedef类型" min-width="180">
          </el-table-column>
          <el-table-column prop="value" label="实际类型" min-width="180">
            <template slot-scope="scope">
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-select
                    v-model="scope.row.value"
                    placeholder="请选择C的实际类型"
                  >
                    <el-option
                      v-for="item in baseType"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-col>
                <el-col :span="12">
                  <el-button
                    type="primaey"
                    size="medium"
                    @click="updateMarkType(scope.row)"
                    >更新值</el-button
                  >
                </el-col>
              </el-row>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>

    <el-dialog title="提示" width="50%" :visible.sync="dialogVisible">
      <el-table :data="error_tips">
        <el-table-column
          property="file"
          label="文件"
          min-width="300"
        ></el-table-column>
        <el-table-column
          property="line"
          label="行数"
          min-width="50"
        ></el-table-column>
        <el-table-column
          property="func"
          label="函数"
          min-width="100"
        ></el-table-column>
        <el-table-column
          property="type"
          label="类型"
          min-width="80"
        ></el-table-column>
        <el-table-column label="类型标记" min-width="280">
          <template slot-scope="scope">
            <el-select
              v-model="scope.row.mark"
              placeholder="请选择该类型在C语言中所属的基本类型"
            >
              <el-option
                v-for="(item, index) in baseType"
                :key="index"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="processParse">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  postCHeaderFile,
  processCHeaderFile,
  getMarkType,
  updateMarkType,
} from "@/api/store";

export default {
  name: "EvmModule",
  data() {
    return {
      activeName: "first",
      fileList: [],
      page: "evm-module-tool.vue",
      dir: null,
      baseType: [
        { label: "整型", value: "int" },
        { label: "单精度浮点型", value: "float" },
        { label: "双精度浮点型", value: "double" },
        { label: "字符串", value: "char *" },
        { label: "指针", value: "void *" },
        { label: "void", value: "void" },
      ],
      undefined_type: [],
      error_tips: [],
      dialogVisible: false,
      markType: [],
    };
  },
  methods: {
    createFile(content, filename) {
      const a = document.createElement("a");
      const blob = new Blob([content]);
      const url = window.URL.createObjectURL(blob);
      a.href = url;
      a.download = filename;
      a.click();
      window.URL.revokeObjectURL(url);
    },
    handleUploaded(response) {
      if (response.code === 200) {
        this.downloadFile(response);
      } else {
        this.$message.warning(response.message);
      }
    },
    handleUploadFile(file) {
      this.fileList.push(file);
    },
    handleUploadRemove(file, fileList) {
      console.log(fileList);
      for (let i = 0; i < this.fileList.length; i++) {
        if (this.fileList[i].uid == file.uid) {
          this.fileList.splice(i, 1);
          break;
        }
      }
    },
    downloadFile(result) {
      const a = document.createElement("a");
      a.download = result.data.filename;
      a.href = result.data.url;
      a.target = "";
      a.click();
    },
    updateMarkType(row) {
      updateMarkType(row)
        .then((res) => {
          this.$message.success(res.message);
        })
        .catch((err) => {
          this.$message.error(err.message);
        });
    },
    getMarkType() {
      getMarkType()
        .then((res) => {
          Object.keys(res.data).forEach((k) => {
            this.markType.push({ key: k, value: res.data[k] });
          });
        })
        .catch((err) => {
          this.$message.error(err.message);
        });
    },
    uploadFile() {
      this.$refs.upload.submit();
      let formData = new FormData();
      this.fileList.forEach((item) => {
        formData.append("binfile", item.file);
      });
      postCHeaderFile(formData)
        .then((res) => {
          this.downloadFile(res);
        })
        .catch((err) => {
          if (err.code == 400) {
            this.dir = err.data.dir;
            this.undefined_type = err.data.undefined_type;
            this.error_tips = err.message;
            this.dialogVisible = true;
          } else {
            this.$message.error(err.message);
          }
        })
        .finally(() => {
          this.fileList = [];
          this.$refs.upload.clearFiles();
        });
    },
    processParse() {
      let types = {};
      this.error_tips.forEach((item) => {
        types[item.type] = item.mark;
      });

      processCHeaderFile({ dir: this.dir, type: types })
        .then((res) => {
          this.downloadFile(res);
        })
        .catch((err) => {
          if (err.code == 400) {
            this.dir = err.data.dir;
            this.undefined_type = err.data.undefined_type;
            this.error_tips = err.message;
            this.dialogVisible = true;
          } else {
            this.$message.error(err.message);
          }
        })
        .finally(() => {
          this.fileList = [];
          this.$refs.upload.clearFiles();
        });
    },
  },
  mounted() {},
  created() {
    this.getMarkType();
  },
};
</script>
<style lang="scss" scoped>
.app-container {
  & > div.page-wrapper {
    margin: 10px 0px;
  }
}
</style>