<template>
  <div class="container mc-box">
    <fullscreen :fullscreen.sync="fullscreen" class="container-box">
      <div class="titbox">
        <h2>用户投诉分析</h2>
      </div>
      <el-col :span="12">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
          style="width: 100%; margin-top: 30px"
        >
          <el-form-item label="手机号码" prop="phone">
            <el-input style="width: 100%" v-model="ruleForm.phone"></el-input>
          </el-form-item>
          <el-form-item label="投诉内容" prop="region">
            <el-input
              type="textarea"
              rows="8"
              show-word-limit
              maxlength="200"
              style="width: 100%"
              v-model="ruleForm.region"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')"
              >分析</el-button
            >
          </el-form-item>
          <el-form-item>
            <div v-show="flag">
              <el-tag size="medium" type="success">标签二</el-tag>
              <el-tag size="medium" type="info">标签三</el-tag>
              <el-tag size="medium" type="warning">标签四</el-tag>
              <el-tag size="medium" type="danger">标签五</el-tag>
              <el-tag size="medium" type="info">标签三</el-tag>
              <el-tag size="medium" type="warning">标签四</el-tag>
              <el-tag size="medium" type="danger">标签五</el-tag>
            </div>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="12">
        <div id="radarCharts" class="echarts-style"></div>
      </el-col>
    </fullscreen>
  </div>
</template>
<script>
import echarts from "echarts";
export default {
  data() {
    return {
      flag: false,
      fullscreen: false,
      loading: false,
      ruleForm: {
        phone: "",
        region: "",
      },
      rules: {
        phone: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          { min: 11, max: 11, message: "长度在 11 个字符", trigger: "blur" },
        ],
        region: [
          { required: true, message: "请输入投诉内容", trigger: "change" },
        ],
      },
    };
  },
  methods: {
    echartInit() {
      let myChart = echarts.init(document.getElementById("radarCharts"));
      var option = {
        tooltip: {},
        legend: {
          data: ["预算分配（Allocated Budget）", "实际开销（Actual Spending）"],
        },
        radar: {
          // shape: 'circle',
          name: {
            textStyle: {
              color: "#fff",
              backgroundColor: "#999",
              borderRadius: 3,
              padding: [3, 5],
            },
          },
          indicator: [
            { name: "标签1", max: 6500 },
            { name: "标签2", max: 16000 },
            { name: "标签3", max: 30000 },
            { name: "标签4", max: 38000 },
            { name: "标签5", max: 52000 },
            { name: "标签6", max: 25000 },
          ],
        },
        series: [
          {
            name: "预算 vs 开销",
            type: "radar",
            // areaStyle: {normal: {}},
            data: [
              {
                value: [4300, 10000, 28000, 35000, 50000, 19000],
                name: "预算分配",
              },
              {
                value: [5000, 14000, 28000, 31000, 42000, 21000],
                name: "实际开销",
              },
            ],
          },
        ],
      };
      myChart.setOption(option);
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
          this.flag = true;
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    //功能栏
    iconCli(v) {
      if (v === 1) {
        this.getList(this.params, this.pageSize);
      }
      if (v === 2) {
        this.fullscreen = !this.fullscreen;
      }
    },
  },
  mounted() {
    this.echartInit();
  },
};
</script>
<style>
.echarts-style {
  width: 100%;
  height: 500px;
}
.el-tag--medium {
  height: 50px;
  line-height: 50px;
  padding: 0 30px;
  margin: 5px;
}
.el-upload-list {
  float: right;
}
.el-input__suffix {
  cursor: pointer;
}
.mc-box .el-upload {
  text-align: right;
}
</style>
<style scoped lang="scss">
.btn-default {
  display: inline;
  margin-left: 10px;
}
.titbox {
  div {
    float: right;

    i {
      font-size: 22px;
      margin-left: 20px;
      cursor: pointer;
    }
  }
}

.tabbox {
  margin-top: 15px;
}

.pageBox {
  text-align: right;
  margin-top: 10px;
}
</style>
