<template>
  <div class="root_container">

    <!-- 编辑模块对话框 -->
    <el-dialog :title="'编辑模块'" :visible.sync="dialogEditModule">
      <div style="padding-left: 16px;
      padding-right: 16px;">
        <el-table border :data="moduleList" max-height=600>
          <el-table-column type="index" width="40">
          </el-table-column>
          <el-table-column property="module" label="模块名称"></el-table-column>
          <el-table-column property="name" label="可用状态" width="80">
            <template slot-scope="scope">
              <el-switch v-model="scope.row.enable">
              </el-switch>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogEditModule = false">取 消</el-button>
        <el-button type="primary" size="small" @click="confirmModule" :loading="moduleEditFlag">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 新建项目 -->
    <el-dialog :title="editProjectFlag ? '编辑项目' : '新建项目'" :visible.sync="dialogCreateProject">
      <el-form :model="projectForm" style="margin-right: 20px;margin-top: 10px;">
        <el-form-item label="项目名称" :label-width="formLabelWidth">
          <el-input v-model="projectForm.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="项目描述" :label-width="formLabelWidth">
          <el-input v-model="projectForm.desc" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="项目平台" :label-width="formLabelWidth">
          <el-select v-model="projectForm.platform" placeholder="请选择项目平台" :disabled="editProjectFlag">
            <el-option label="Android" value="android"></el-option>
            <el-option label="iOS" value="ios"></el-option>
            <el-option label="后端PHP-laravel" value="server-php-laravel"></el-option>
            <el-option label="前端vue-i18n" value="web-vue-i18n"></el-option>
            <el-option label="前端小程序" value="web-mini" disabled></el-option>
            <el-option label="Flutter-i18n" value="flutter-i18n"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogCreateProject = false">取 消</el-button>
        <el-button type="primary" @click="createProject" >确 定</el-button>
      </div>
    </el-dialog>

    <!-- 设置别名 -->
    <el-dialog title="设置语言别名" :visible.sync="dialogRenameVisible">
      <div style="padding: 16px;">
        <el-table :data="channelsNameList" maxHeight="400px" border>
          <el-table-column property="channel" label="语言"></el-table-column>
          <el-table-column property="name" label="别名">
            <template slot-scope="scope">
              <el-input type="textarea" class="hasContent" placeholder="请设置语言别名" :autosize="{ minRows: 1, maxRows: 10 }"
                resize="none" v-model="scope.row.name">
              </el-input>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogRenameVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmChannelName">确 定</el-button>
      </div>
    </el-dialog>

    <div class="header">
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item>
          <el-button type="primary" size="small" @click="onCreateProject">新建项目</el-button>
          <el-button type="primary" size="small" plain @click="refreshData">刷新</el-button>
        </el-form-item>
        <el-form-item>
          <span style="color:#606266;font-size:12px">共 {{ formData.length }} 条数据</span>
        </el-form-item>
      </el-form>
    </div>
    <div class="table_container">
      <el-table :data="tableDatas" :height="tableHeight" :style="{ width: '100%' }" border>
        <el-table-column type="index" label="编号" width=50>
        </el-table-column>
        <el-table-column prop="appId" label="APPID" width=80>
        </el-table-column>
        <el-table-column prop="appName" label="项目名称">
        </el-table-column>
        <el-table-column prop="appDesc" label="项目描述">
        </el-table-column>
        <el-table-column prop="appPlatform" label="项目平台">
        </el-table-column>
        <el-table-column prop="appMainChannel" label="应用主要语言">
        </el-table-column>
        <el-table-column prop="appChannelCount" label="语言种类数量" width="160px">
          <template slot-scope="scope">
            <div style="display: flex;">
              <div style="flex: 1;padding-top: 5px;">{{ scope.row.appChannelCount }}</div>
              <el-button v-if="scope.row.appChannelCount > 0" size="small" type="info" plain
                @click="configChannelName(scope.row)">设置语言别名</el-button>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="appChannelCount" label="应用模块" width="160px">
          <template slot-scope="scope">
            <div style="display: flex;">
              <div style="flex: 1;padding-top: 5px;">{{ scope.row.appModuleConfig.length }}</div>
              <el-button v-if="scope.row.appModuleConfig.length > 0" size="small" type="info" plain
                @click="configModule(scope.row)">配置应用模块</el-button>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="lastUploadTime" label="终端最近上传" width="155">
        </el-table-column>
        <el-table-column prop="lastEditTime" label="最近提交翻译" width="155">
        </el-table-column>
        <el-table-column prop="addTime" label="创建时间" width="155">
        </el-table-column>
        <el-table-column prop="addTime" label="操作" width="200">
          <template slot-scope="scope">
            <div>
              <el-button size="small" type="primary" plain @click="editProjectInfo(scope.row)">编辑</el-button>
              <el-button size="small" type="primary" plain @click="onOpenTranslate(scope.row.appId)">进入翻译系统</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
import { projectList, projectCreate, channelListUpdate, moduleConfig } from "./../../api/log/translate_v2";
import { Message } from "element-ui";
export default {
  data() {
    return {
      formData: {
        length: "0",
      },
      tableDatas: [],

      //新建项目
      dialogCreateProject: false,
      formLabelWidth: '90px',
      projectForm: {
        name: "",
        desc: "",
        platform: "android",
        appId: -1
      },

      //编辑模块
      dialogEditModule: false,
      moduleList: [],
      moduleEditFlag: false,

      //编辑
      editProjectFlag: false,

      //设置别名
      channelsNameList: [],
      dialogRenameVisible: false,
      currentProjectId: 0,

      //记录高度
      tableHeight: "-1",
    };
  },
  watch: {
    "$store.state.screenHeight": function (val) {
      this.tableHeight = val - 98 - 50;

    },
  },
  mounted: function () {
    this.tableHeight = this.$store.state.screenHeight - 98 - 50;
    console.log("Xxx", this.tableHeight);
    //获取数据
    this.obtainAppList();
  },
  methods: {

    //获取app列表
    obtainAppList() {
      projectList()
        .then((result) => {
          console.log(result);
          this.tableDatas = result.data.data;
          this.formData.length = this.tableDatas.length;
        })
        .catch((err) => { });
    },
    confirmModule() {
      this.moduleEditFlag = true;
      moduleConfig(this.currentProjectId, this.moduleList).then(res => {
        this.currentProjectId = -1
        this.moduleList = []
        this.dialogEditModule = false;
        this.moduleEditFlag = false;
        Message.success("配置成功")
      }).catch(e => {
        this.moduleEditFlag = false;
      })
    },
    configModule(data) {
      this.dialogEditModule = true;
      this.moduleList = data.appModuleConfig;
      this.currentProjectId = data.appId;
    },
    refreshData() {
      this.obtainAppList();
    },
    //新建项目
    onCreateProject() {
      this.dialogCreateProject = true;
    },

    //编辑项目
    editProjectInfo(data) {
      this.editProjectFlag = true;
      this.dialogCreateProject = true;

      this.projectForm.name = data.appName;
      this.projectForm.desc = data.appDesc;
      this.projectForm.platform = data.appPlatformKey;
      this.projectForm.appId = data.appId;
    },

    //设置语言别名
    configChannelName(data) {
      this.dialogRenameVisible = true;
      this.channelsNameList = data.channelsName;
      this.currentProjectId = data.appId;
    },

    //提交语言别名
    confirmChannelName() {
      channelListUpdate(this.currentProjectId, this.channelsNameList).then(res => {
        Message.success("设置成功")
        this.obtainAppList()
        this.dialogRenameVisible = false
      }).catch(e => { })
    },

    onOpenTranslate(id) {
      this.$router.push({ path: "/translate/details?id=" + id });
    },

    //创建项目
    createProject() {
      if (!this.projectForm.name) {
        Message.warning("请输入项目名称")
        return
      }
      if (!this.projectForm.desc) {
        Message.warning("请输入项目描述")
        return
      }
      projectCreate(this.projectForm.name, this.projectForm.desc, this.projectForm.platform, this.projectForm.appId).then(res => {
        Message.success("创建成功")
        this.obtainAppList()
        this.dialogCreateProject = false
        this.editProjectFlag = false;
        this.projectForm.name = "";
        this.projectForm.desc = "";
        this.projectForm.platform = "android";
        this.projectForm.appId = -1;
      }).catch(e => { })
    },
    //查看详情
    onOpenDetails(pro_id) {

    },
    //停用项目
    onStopProject(pro_id) {
      this.dialogCreateProject = true
    },
  },
};
</script>
<style lang="scss" scoped>
.root_container {
  position: relative;
}

.header {
  margin-left: 18px;
  margin-top: 18px;
}

.table_container {
  margin-left: 18px;
  margin-right: 18px;
}
</style>