<template>
  <div class="obpm-dataSource height100" :style="{'height':tableHeight}">
    <!-- 固定导航栏 -->
    <div class="obpm-title">
      <div class="d-inline-block">
        <el-tabs v-model="activeName">
          <el-tab-pane :label="$t('chart.basic')" name="basic"></el-tab-pane>
        </el-tabs>
      </div>
      <div class="bar d-inline-block float-right">
        <el-button type="primary" size="small" @click="applySample">{{$t('btns.apply')}}</el-button>
        <el-button type="primary" size="small" @click="save('form')" :loading="btnLoading">{{$t("btns.save")}}</el-button>
        <el-button size="small" @click="logout">{{$t("btns.exit")}}</el-button>
      </div>
    </div>
    <!-- 主体内容 -->
    <div class="contentMainDiv" v-loading="loading">
      <div>
        <el-form ref="form" :model="form" label-width="50px" label-position="top" :rules="rules">
          <el-row>
            <el-col :span="8">
              <el-form-item :label="$t('chart.name')" prop="name" class="padding0Label">
                <el-input v-model="form.name" size="mini" class="width-360"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8" :offset="4">
              <el-form-item :label="$t('chart.click_jump')" class="padding0Label">
                <el-select v-model="form.viewId" size="mini" class="width-360">
                  <el-option v-for="item in viewList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item :label="$t('chart.search_form')" label-width="80px" class="padding0Label">
                <el-select v-model="form.searchFormId" size="mini" class="width-360">
                  <el-option label="" value=""></el-option>
                  <el-option v-for="item in formList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="8" :offset="4">
              <el-form-item :label="$t('chart.remark')" prop="note" class="padding0InlineLabel">
                <el-input type="textarea" v-model="form.note" :rows="2" resize="none" size="mini" class="width-360"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="summary-graph height100 border-top">
        <el-row>
          <!-- 在线编辑器 -->
          <el-col :span="16">
            <div class="scriptDivJS border-right">
              <!-- 头部 -->
              <div class="scriptEditorHeader pl-4">
                <el-button plain size="small" @click="preStep" class="pt-0 pb-0 verta-m" title="pre"><i class="undo"></i></el-button>
                <el-button plain size="small" @click="nextStep" class="pt-0 pb-0 verta-m" title="next"><i class="redo"></i></el-button>
                <span class="selectForm pl-4">
                  <span>{{$t('chart.font')}}：</span>
                  <el-select v-model="form.fontSize" class="fontSelect">
                    <el-option label="12" value="12"></el-option>
                    <el-option label="13" value="13"></el-option>
                    <el-option label="14" value="14"></el-option>
                    <el-option label="15" value="15"></el-option>
                    <el-option label="16" value="16"></el-option>
                    <el-option label="17" value="17"></el-option>
                    <el-option label="18" value="18"></el-option>
                    <el-option label="19" value="19"></el-option>
                    <el-option label="20" value="20"></el-option>
                    <el-option label="21" value="21"></el-option>
                    <el-option label="22" value="22"></el-option>
                    <el-option label="23" value="23"></el-option>
                    <el-option label="24" value="24"></el-option>
                    <el-option label="25" value="25"></el-option>
                    <el-option label="26" value="26"></el-option>
                  </el-select>
                </span>
              </div>
              <div class="scriptContent">
                <CodeMirror
                  :fontSize="form.fontSize"
                  :code="chartObj.scripttext"
                  ref="codemirror"
                  :typeChart="typeChart"
                  @setEditor="setEditor"
                  :editorHeight="'auto'"
                />
              </div>
            </div>
          </el-col>
          <!-- 选择样例 -->
          <el-col :span="8">
            <div class="scriptDivDemo">
              <div class="scriptDivDemoH5">
                <h5 class="scriptDivDemoH5">{{$t('chart.choose_simple')}}</h5>
              </div>
              <div class="summary-graph-con">
                <el-radio-group v-model="typeChart">
                  <el-row>
                    <el-col :span="12">
                      <section class="scriptDivDemoConSec">
                        <img src="../../assets/images/lineChart.png" class="scriptDivDemoImg" />
                        <el-radio label="lineChart">{{$t('chart.lineChart')}}</el-radio>
                      </section>
                    </el-col>
                    <el-col :span="12">
                      <section class="scriptDivDemoConSec">
                        <img src="../../assets/images/barChart.png" class="scriptDivDemoImg" />
                        <el-radio label="barChart">{{$t('chart.barChart')}}</el-radio>
                      </section>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="12">
                      <section class="scriptDivDemoConSec">
                        <img src="../../assets/images/pieChart.png" class="scriptDivDemoImg" />
                        <el-radio label="pieChart">{{$t('chart.pieChart')}}</el-radio>
                      </section>
                    </el-col>
                    <el-col :span="12">
                      <section class="scriptDivDemoConSec">
                        <img src="../../assets/images/funnelChart.png" class="scriptDivDemoImg" />
                        <el-radio label="funnelChart">{{$t('chart.funnelChart')}}</el-radio>
                      </section>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="12">
                      <section class="scriptDivDemoConSec">
                        <img src="../../assets/images/stepChart.png" class="scriptDivDemoImg" />
                        <el-radio label="stepChart">{{$t('chart.stepChart')}}</el-radio>
                      </section>
                    </el-col>
                    <el-col :span="12">
                      <section class="scriptDivDemoConSec">
                        <img src="../../assets/images/stackedBarChart.png" class="scriptDivDemoImg" />
                        <el-radio label="stackedBarChart">{{$t('chart.stackedBarChart')}}</el-radio>
                      </section>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="12">
                      <section class="scriptDivDemoConSec">
                        <img src="../../assets/images/ringChart.png" class="scriptDivDemoImg" />
                        <el-radio label="ringChart">{{$t('chart.ringChart')}}</el-radio>
                      </section>
                    </el-col>
                    <el-col :span="12">
                      <section class="scriptDivDemoConSec">
                        <img src="../../assets/images/rectangleChart.png" class="scriptDivDemoImg" />
                        <el-radio label="rectangleChart">{{$t('chart.rectangleChart')}}</el-radio>
                      </section>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="12">
                      <section class="scriptDivDemoConSec">
                        <img src="../../assets/images/basicAreaChart.png" class="scriptDivDemoImg" />
                        <el-radio label="basicAreaChart">{{$t('chart.basicAreaChart')}}</el-radio>
                      </section>
                    </el-col>
                    <el-col :span="12">
                      <section class="scriptDivDemoConSec">
                        <img
                          src="../../assets/images/stackedAreaChart.png"
                          class="scriptDivDemoImg"
                        />
                        <el-radio label="stackedAreaChart">{{$t('chart.stackedAreaChart')}}</el-radio>
                      </section>
                    </el-col>
                  </el-row>
                </el-radio-group>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>
<script>
import {
  reqChartsDetail,
  reqUpdateChartsDetail,
  reqAddCharts,
} from "@/service/ModulesApi.js";
import { getModuleViewList } from "@/service/ViewApi.js";
import { getModuleFormList } from "@/service/FormApi.js";
import CodeMirror from "@/components/Common/CodeMirror";
import { nameCheck,descCheck } from "@/utils/utils.js";
import {delMsg} from '@/utils/elementui'
export default {
  name: "chartsdetial",
  data() {
    return {
      params:{
        id:"", // 当前选中的id
      },
      rules: {
        name: [
          { required: true, message: this.$t('placeholder.name'), trigger: 'blur' },
          { validator: nameCheck, trigger: "blur" },
        ],
        note: [
          { validator: descCheck, trigger: "blur" },
        ],
      },
      activeName: "basic",
      form: {
        name: "", // 名称
        viewId: "", // 查询表单
        searchFormId: "", // 点击跳转视图
        note: "", // 备注
        fontSize: "12", // 字体大小
      },
      typeChart: "", // 表格类型
      chartObj: {},
      viewList: [], // 查询表单数据
      formList: [], // 跳转视图数据
      tableHeight:'200px',
      loading: true, // 加载
      btnLoading: false, // 保存按钮加载状态
    };
  },
  methods: {
    /**
     * 动态计算页面table高度
     */
    getScollerHeight() {
      setTimeout(() => {
        let clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
        //60 头部， 32 面包屑， 41 第一层页签， 50 列表标题， 71 查询， 20 父组件外边距, 40分页
        this.tableHeight = (clientHeight - 60 - 32 - 41 -
            10) + 'px'
      }, 100)
    },
    handleClick(row) {
      console.log(row);
    },
    async applySample() {
      // 判断有没有选择再应用样例
      if(this.typeChart){
        try{
          await delMsg(this.$t('msg.choose'), this.$t('msg.tip'))
          this.$refs.codemirror.setEditor();
          this.$refs.codemirror.refresh();
        }catch(e){
          console.log(e)
        }
      }else{
        return this.$message.error(this.$t('msg.select_sample'))
      }
    },
    save(formName) {
      // 编辑
      if (this.params.id) {
        this.$refs[formName].validate(async (valid) => {
          if (valid) {
            this.btnLoading = true
            let params = {
              ...this.form,
              id: this.params.id,
              appId: sessionStorage.getItem("appId"),
              parentId: this.$route.query.moduleId,
              scripttext: this.$refs.codemirror.getEditor(),
              fontSize: Number(this.form.fontSize),
              chartName: this.typeChart,
            }
            let result = await reqUpdateChartsDetail(params)
            if(result.data.errcode == 0)
              this.$message.success(this.$t('msg.update_ss'));
            this.btnLoading = false
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      } else {
        this.$refs[formName].validate(async (valid) => {
          if (valid) {
            this.btnLoading = true
            let response = await reqAddCharts(
              {
                appId: sessionStorage.getItem("appId"),
                moduleId: this.$route.query.moduleId,
              },
              {
                ...this.form,
                scripttext: this.$refs.codemirror.getEditor(),
                chartName: this.typeChart,
                fontSize: Number(this.form.fontSize),
              });
            if (response.data.errcode == 0) {
              this.$message.success(this.$t('msg.created_ss'));
              this.params.id = response.data.data.id
            }
            this.btnLoading = false
          } else {
            console.log('error submit!!');
            return false;
          }
        });
        
      }
    },
    logout() {
      this.$router.push({
        path: "/home/softwaresdetails/chartslist",
        query: { 
          edit: true, 
          moduleId: this.$route.query.moduleId },
      });
    },
    preStep() {
      this.$refs.codemirror.undo();
    },
    nextStep() {
      this.$refs.codemirror.redo();
    },
    // 选择样例后更新code的内容
    setEditor(codeData) {
      this.chartObj.scripttext = codeData;
    },
    // 请求统计图详情
    async getChartDetail() {
      this.loading = true
      const response = await reqChartsDetail(this.$route.query.id);
      if (response.data.errcode == 0) {
        this.loading = false
        this.chartObj = response.data.data;
        this.typeChart = this.chartObj.chartName;
        this.form = {
          name: this.chartObj.name,
          viewId: this.chartObj.viewId ? this.chartObj.viewId : "", // 点击跳转视图
          searchFormId: this.chartObj.searchFormId ? this.chartObj.searchFormId : "", // 查询表单
          note: this.chartObj.note ? this.chartObj.note : "", // 备注
          fontSize: String(this.chartObj.fontSize) // 字体大小
        }
        this.getViewList()
        this.getFromList()
      }
    },

    /**
     * 请求查询表单的数据
     */
    getViewList() {
      let params = {
        searchword: "",
        pageNo: 1,
        linesPerPage: 100000,
        appId: sessionStorage.getItem("appId"),
        moduleId: this.$route.query.moduleId,
      }
      this.loading = true
      getModuleViewList(params, {
        onSucess: (response) => {
          if (response.data.errcode == 0) {
            this.loading = false
            this.viewList = response.data.data.datas;
            if(this.form.viewId){
              let have=false;
              for(let i=0;i<this.viewList.length;i++){
                if(this.viewList[i].id==this.form.viewId){
                  have=true;
                  break;
                }
              }
              if(!have){
                this.form.viewId="";
              }
            }
          }
        },
      });
    },

    /**
     * 请求跳转视图的数据
     */
    getFromList(){
      let params = {
        name: "",
        description: "",
        type: 256,
        pageNo: 1,
        linesPerPage: 100000,
        appId: sessionStorage.getItem("appId"),
        moduleId: this.$route.query.moduleId,
      }
      this.loading = true
      getModuleFormList(params, {
        onSucess: response => {
          if (response.data.errcode == 0) {
            this.formList = response.data.data;
            this.loading = false
            if(this.form.searchFormId){
              let have=false;
              for(let i=0;i<this.formList.length;i++){
                if(this.formList[i].id==this.form.searchFormId){
                  have=true;
                  break;
                }
              }
              if(!have){
                this.form.searchFormId="";
              }
            }
          }
        }
      })
    },
  },
  created() {
    // 有params是编辑
    if (this.$route.query.edit == true || this.$route.query.edit == 'true') {
      this.getChartDetail();
      this.params.id = this.$route.query.id
    }
    this.getScollerHeight();
    // 判断如果不是编辑页面就获取完数据详情再请求
    if(this.$route.query.edit == false || this.$route.query.edit == 'false'){
      this.getViewList()
      this.getFromList()
    }
  },
  components: {
    CodeMirror,
  },
};
</script>
<style lang="scss"></style>
