<template>
  <div class="content">
    <div class="d-flex">
      <div class="flex-1 info-box">
        <h3 class="font-size-16 h-40 lh40 ph15 border-grey-bottom">数据统计</h3>
        <div class="d-flex ph15 pv30" style="align-items: flex-start">
          <el-button type="primary" size="medium" @click="createNew"><span class="font-size-18">新建考核</span></el-button>
          <div class="line ml20 mr30"></div>
          <div>
            <h3 class="font-size-18 lh50">考核总数<span class="ml20 font-size-28 color-2">{{totalData.khzs}}</span></h3>
            <h3 class="font-size-18 lh50">进行中<span class="ml20 font-size-28 color-2">{{totalData.jxz}}</span></h3>
          </div>
        </div>
      </div>
      <div class="flex-1 info-box ml10">
        <div class="font-size-16 h-40 lh40 ph15 border-grey-bottom flex-row">
          <span>同时在线测评人数</span>
          <span class="color-2">1小时内</span>
        </div>
        <h3 class="pl15 pv30 font-size-28 color-2 lh50">{{totalData.tszxcprs}}</h3>
        <h4 class="pl15 font-size-18 text-light">累计测评人数：{{totalData.ljcprs}}</h4>
      </div>
      <div class="flex-1 info-box ml10">
        <div class="font-size-16 h-40 lh40 ph15 border-grey-bottom flex-row">
          <span>系统公告</span>
<!--          <span class="color-2">更多</span>-->
        </div>
        <ul class="ph15 pt10">
          <li class="d-flex lh30 hand" v-for="item in totalData.xtgg">
            <h3 class="flex-1 font-size-14 text-light text-overflow">{{ item.ggmc }}</h3>
            <h4 class="font-size-14 text-light">{{ item.sj }}</h4>
          </li>
        </ul>
      </div>
    </div>
    <div class="info-box mt10 pb20">
      <div class="flex-row ph15 lh30">
        <h3 class="font-size-14 title">2022年领导班子和领导人员综合考评</h3>
<!--        <h4 class="hand font-size-14 color-2">切换当前考核</h4>-->
      </div>
      <div class="mt20 d-flex ph15">
        <div class="flex-1 d-flex">
          <div class="qr-code">
            <img src="http://jnjymf_api.bozedu.top/data/upload/month_202207/202207131144095719_w0Ht.png" alt="">
          </div>
          <div class="flex-1 ml15 pr20 pt15">
            <h3 class="font-size-12">复制下面的链接并分享</h3>
            <el-input class="mt10" v-model="totalData.ldryzhkp.lj" size="small" :readonly="true">
            </el-input>
            <el-button class="mt10" type="primary" size="small" @click='handleCopy(totalData.ldryzhkp.lj,$event)'>点击复制链接</el-button>
          </div>
          <div class="flex-1 d-flex">
            <div class="flex-1 box">
              <h3 class="font-size-14 color-2 mb25">打分测评</h3>
              <h4 class="font-size-14 text-lightgrey1">已提交：{{totalData.ldryzhkp.dfcp.ytj}}</h4>
              <h4 class="mt5 font-size-14 text-lightgrey1">匿名提交：{{totalData.ldryzhkp.dfcp.nmtj}}</h4>
            </div>
            <div class="ml20 flex-1 box">
              <h3 class="font-size-14 color-2 mb25">投票推荐</h3>
              <h4 class="font-size-14 text-lightgrey1">已提交：{{totalData.ldryzhkp.tptj.ytj}}</h4>
              <h4 class="mt5 font-size-14 text-lightgrey1">匿名提交：{{totalData.ldryzhkp.tptj.nmtj}}</h4>
            </div>
            <div class="ml20 flex-1 box">
              <h3 class="font-size-14 color-2 mb25">问卷评价</h3>
              <h4 class="font-size-14 text-lightgrey1">已提交：{{totalData.ldryzhkp.wjpj.ytj}}</h4>
              <h4 class="mt5 font-size-14 text-lightgrey1">匿名提交：{{totalData.ldryzhkp.wjpj.nmtj}}</h4>
            </div>
          </div>
        </div>
      </div>
<!--      <div class="mt30 text-center">-->
<!--        <h3 class="d-in-block font-size-14 color-2 hand">查看更多>></h3>-->
<!--      </div>-->
    </div>
    <div class="info-box pt30 mt10">
      <div id="boxChart" style="height: 400px"></div>
    </div>
    <el-dialog title="新建考核" :visible.sync="dialogFormVisible" width="750px">
      <el-form :model="dialogForm" label-width="100px">
        <el-form-item label="考核名称：" prop="pjkh_title">
          <el-input v-model="dialogForm.pjkh_title" placeholder="请输入标题"></el-input>
        </el-form-item>

        <el-form-item label="考核类型：" prop="pjkh_khlx">
          <el-input v-model="dialogForm.pjkh_khlx" placeholder="请输入考核类型"></el-input>
        </el-form-item>
        <el-form-item label="创建日期：" prop="pjkh_cjsj">
          <el-date-picker
              style="width: 610px"
              v-model="dialogForm.pjkh_cjsj"
              type="date"
              placeholder="选择日期"
              value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="测评开始：" prop="pjkh_cpkssj">
          <el-date-picker
              style="width: 610px"
              v-model="dialogForm.pjkh_cpkssj"
              type="date"
              placeholder="选择日期"
              value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="测评结束：" prop="pjkh_cpjssj">
          <el-date-picker
              style="width: 610px"
              v-model="dialogForm.pjkh_cpjssj"
              type="date"
              placeholder="选择日期"
              value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="考核须知：" prop="pjkh_content">
          <Tinymce :key="timestamp" v-if="dialogFormVisible" v-model="dialogForm.pjkh_content" :height="300"></Tinymce>
        </el-form-item>
        <el-form-item label="考核项目：">
          <el-radio-group v-model="dialogForm.pjkh_khxm">
            <el-radio v-for="item in xmList" :label="item.value">{{ item.label }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="考核组成员：">
          <el-input v-model="dialogForm.pjkh_khzcy" placeholder="请输入考核组成员"></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="formSubmit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {sjgl} from "./api";
import * as echarts from 'echarts';
import clip from '@/utils/clipboard';
import {pjkh_add} from "../pjkh/api";
import Tinymce from "@/components/TinymceVue/index.vue";
export default {
  name: "index",
  components: {
    Tinymce
  },
  data() {
    return {
      totalData: {
        khzs: 0,
        jxz: 0,
        tszxcprs: 0,
        ljcprs: 0,
        xtgg: [],
        ldryzhkp: {
          ewm: "",
          lj: "",
          dfcp: {
            ytj: 0,
            nmtj: 0
          },
          tptj: {
            ytj: 0,
            nmtj: 0
          },
          wjpj: {
            ytj: 0,
            nmtj: 0
          },
          jyykpqk: {
            dateData: [],
            valueData: []
          }
        }
      },
      inputData: 'https://github.com/PanJiaChen/vue-element-admin',
      title: '新建考核',
      dialogFormVisible: false,
      dialogForm: {
        pjkh_id: '',
        pjkh_title: '',
        pjkh_content: '',
        pjkh_khlx: '',
        pjkh_cjsj: '',
        pjkh_cpkssj: '',
        pjkh_cpjssj: '',
        pjkh_ytjfs: '',
        pjkh_khxm: '',
        pjkh_khzcy: ''
      },
      xmList: [{
        label: '打分测评',
        value: '1'
      }, {
        label: '投票调查',
        value: '2'
      }, {
        label: '问卷评价',
        value: '3'
      }],
      cyList: [
        {
          label: '周静',
          value: '1'
        }, {
          label: '王源',
          value: '2'
        }, {
          label: '李昊',
          value: '3'
        }, {
          label: '王刚',
          value: '4'
      }],
      timestamp: Date.now()
    }
  },
  methods: {
    getTotalData() {
      sjgl({}).then(res => {
        if (res.code == 1) {
          this.totalData = res.data.content_json;
          this.$nextTick(() => {
            this.boxChart();
          })
        }
      })
    },
    boxChart() {
      var chartDom = document.getElementById('boxChart');
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        title: {
          text: '近一月的考评情况',
          left: 'center'
        },
        grid: {
          left: '1%',
          right: '1%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: this.totalData.ldryzhkp.jyykpqk.dateData
        },
        yAxis: {
          type: 'value',
          name: '数量'
        },
        series: [
          {
            data: this.totalData.ldryzhkp.jyykpqk.valueData,
            type: 'line',
            smooth: true
          }
        ]
      };

      option && myChart.setOption(option);

    },
    handleCopy(text, event) {
      clip(text, event)
    },
    createNew() {
      this.dialogForm = {
        pjkh_title: '',
        pjkh_content: '',
        pjkh_khlx: '',
        pjkh_cjsj: '',
        pjkh_cpkssj: '',
        pjkh_cpjssj: '',
        pjkh_ytjfs: '',
        pjkh_khxm:'',
        pjkh_khzcy:''
      }
      this.dialogFormVisible = true;
    },
    editData(item) {
      this.isEdit = true;
      this.title = '编辑考核';
      this.dialogForm = {
        pjkh_id: item.pjkh_id,
        pjkh_title: item.pjkh_title,
        pjkh_content: item.pjkh_content,
        pjkh_khlx: item.pjkh_khlx,
        pjkh_cjsj: item.pjkh_cjsj,
        pjkh_cpkssj: item.pjkh_cpkssj,
        pjkh_cpjssj: item.pjkh_cpjssj,
        pjkh_ytjfs: item.pjkh_ytjfs,
        pjkh_khxm:item.pjkh_khxm,
        pjkh_khzcy:item.pjkh_khzcy
      };
      this.timestamp = Date.now();
      this.dialogFormVisible = true;
    },
    formSubmit() {
      let data = {
        pjkh_title: this.dialogForm.pjkh_title,
        pjkh_content: this.dialogForm.pjkh_content,
        pjkh_khlx: this.dialogForm.pjkh_khlx,
        pjkh_cjsj: this.dialogForm.pjkh_cjsj,
        pjkh_cpkssj: this.dialogForm.pjkh_cpkssj,
        pjkh_cpjssj: this.dialogForm.pjkh_cpjssj,
        pjkh_ytjfs: this.dialogForm.pjkh_ytjfs,
        pjkh_khxm:this.dialogForm.pjkh_khxm,
        pjkh_khzcy:this.dialogForm.pjkh_khzcy
      }
      pjkh_add(data).then(res => {
        if (res.code == 1) {
          this.$message({
            message: "考核新建成功！",
            type: "success",
          });
          this.dialogFormVisible = false;
        } else {
          this.$message({
            message: res.msg,
            type: "error",
          });
        }
      })

    },

  },
  mounted() {
    this.getTotalData();
  }
}
</script>

<style lang="scss" scoped>
.content {
  background: #F2F6FC;
  height: 100%;
  width: 100%;
  margin: -10px;
  padding-right: 20px;
  padding-bottom: 20px;
}

.info-box {
  border: 1px solid #E0E0E0;
  background: #fff;
  border-radius: 6px;
}

.line {
  width: 1px;
  height: 105px;
  opacity: 0.18;
  background: #707070;
}

.title {
  border-top: 3px solid #265CD4;
}

.qr-code {
  width: 128px;
  height: 128px;

  img {
    width: 100%;
  }
}

.box {
  height: 90px;
  background: #f5f5f5;
  border-radius: 6px;
  padding: 20px;
}
</style>
