<template>
  <div class="content">
    <div class="top-box">
      <div class="flex-row">
        <h3 class="font-size-16 color-1">信息台</h3>
        <el-select v-model="period_value" placeholder="请选择">
          <el-option
              v-for="item in period_list"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
      </div>
      <div class="mt15 d-flex">
        <el-button type="primary" @click="createNew">
          <span class="d-in-block v-mid el-icon-plus font-size-16"></span>
          <span class="d-in-block v-mid font-size-16">新建文件收集</span>
        </el-button>
        <div class="flex-1 d-flex pl50">
          <div class="flex-1">
            <h3 class="font-size-14 color-1">合计</h3>
            <h4 class="mt5 font-size-28 color-1">{{totalData.xxt.hj}}</h4>
          </div>
          <div class="flex-1">
            <h3 class="font-size-14 color-1">我发起的</h3>
            <h4 class="mt5 font-size-28 color-1">{{totalData.xxt.wfqd}}</h4>
          </div>
          <div class="flex-1">
            <h3 class="font-size-14 color-1">我提交的</h3>
            <h4 class="mt5 font-size-28 color-1">{{totalData.xxt.wtjd}}</h4>
          </div>
          <div class="flex-1">
            <h3 class="font-size-14 color-1">待我提交的</h3>
            <h4 class="mt5 font-size-28 color-1">{{totalData.xxt.dwtjd}}</h4>
          </div>
          <div class="flex-1">
            <h3 class="font-size-14 color-1">超期提醒</h3>
            <h4 class="mt5 font-size-28 color-1">{{totalData.xxt.cqtx}}</h4>
          </div>
        </div>
      </div>

    </div>
    <div class="mt10 d-flex">
      <div class="flex-1 info-box">
        <div class="flex-row ph15 border-grey-bottom">
          <h3 class="font-size-16 lh40">我的审核</h3>
          <a href="javascript:;" class="lh40" @click="toDetail(1)">
            <span class="font-size-14 color-2">更多</span>
            <span class="ml3 el-icon-more font-size-15 icon-more text-light"></span>
          </a>
        </div>
        <ul class="ph15 info-list">
          <li v-for="item in totalData.wdsh">
            <div class="flex-row">
              <h3 class="flex-1 font-size-14 text-overflow">{{item.bt}}</h3>
              <h4 class="font-size-14 color-4">{{item.zt}}</h4>
            </div>
            <h5 class="mt10 font-size-14 color-4">{{item.cjr}}&nbsp;&nbsp;&nbsp;{{item.sj}}</h5>
          </li>
        </ul>
      </div>
      <div class="ml10 flex-1 info-box">
        <div class="flex-row ph15 border-grey-bottom">
          <h3 class="font-size-16 lh40">超期提醒</h3>
          <a href="javascript:;" class="lh40" @click="toDetail(2)">
            <span class="font-size-14 color-2">更多</span>
            <span class="ml3 el-icon-more font-size-15 icon-more text-light"></span>
          </a>
        </div>
        <ul class="ph15 info-list">
          <li v-for="item in totalData.cqtx">
            <div class="flex-row">
              <div class="flex-1">
                <h3 class="font-size-14 text-overflow">{{item.bt}}</h3>
                <div class="mt10 d-flex">
                  <h3 class="font-size-14 color-5">截止日期{{item.jzrq}}</h3>
                  <div class="ml15 flex-1 v-mid">
                    <el-progress :percentage="Number(item.jd)" color="#4351FF"></el-progress>
                  </div>
                </div>
              </div>
              <el-button type="primary" size="mini" @click="toRemind">
                <span class="d-in-block v-mid icon-info-message mr5"></span>
                <span class="d-in-block v-mid font-size-14">提醒</span>
              </el-button>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <el-dialog title="新建文件收集" :visible.sync="dialogFormVisible" width="750px">
      <el-form :model="dialogForm" label-width="100px">
        <el-form-item label="文件标题" prop="title">
          <el-input v-model="dialogForm.title"></el-input>
        </el-form-item>
        <el-form-item label="内容" prop="content">
          <Tinymce v-if="dialogFormVisible" v-model="dialogForm.content" :key="timestamp" :height="300"></Tinymce>
        </el-form-item>
        <el-form-item label="截止时间" prop="time">
          <el-date-picker style="width: 100%"
              v-model="dialogForm.time"
              type="date" value-format="yyyy-MM-dd"
              placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="发起人" prop="fqr">
          <el-input v-model="dialogForm.fqr"></el-input>
        </el-form-item>
        <el-form-item label="进度" prop="jd">
          <el-input v-model="dialogForm.jd"></el-input>
        </el-form-item>
        <el-form-item label="收集对象" prop="sjdx">
          <el-cascader style="width: 100%;" v-model="dialogForm.sjdx"
              :options="defaultData"
              :props="props" :show-all-levels="false"
              clearable></el-cascader>
        </el-form-item>
        <el-form-item label="其他附件">
          <FileUpload :limit="5" :full.sync="dialogForm.qtfj" :key="timestamp" multiple>
            <div slot="tip" class="el-upload__tip">
              支持文件类型:doc(.docx)、.ppt(.pptx)、.xls(.xlsx)、.pps、.wps、.pdf、.txt文件格式。
            </div>
          </FileUpload>
        </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>
    <el-dialog title="超期提醒" :visible.sync="remindFormVisible" width="750px">
      <el-form :model="remindForm" label-width="100px">
        <el-form-item label="收集对象" prop="sjdx">
          <el-cascader style="width: 100%;" v-model="remindForm.sjdx"
                       :options="defaultData"
                       :props="props" :show-all-levels="false"
                       clearable></el-cascader>
        </el-form-item>
        <el-form-item label="附加消息" prop="content">
          <Tinymce v-if="remindFormVisible" v-model="remindForm.fjxx" :key="timestamp" :height="300"></Tinymce>
        </el-form-item>


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

<script>
import {wjgzt,wj_add,remind_add,org_list_tree} from "./api";
import Tinymce from "@/components/TinymceVue/index.vue";
import FileUpload from "@/components/FileUpload/index.vue";
import { useUserStore } from "@/stores/user";
const { real_name,dept_ids } = useUserStore();
export default {
  name: "index",
  components:{
    Tinymce,
    FileUpload
  },
  data() {
    return {
      totalData:{
        xxt:{
          cqtx: "",
          dwtjd: "",
          hj: "",
          wfqd: "",
          wtjd: ""
        },
        wdsh:[],
        cqtx:[]
      },
      period_value: '',
      period_list: [{
        label:'全部',
        value: '0'
      },{
        label:'近一个月',
        value: '1'
      },{
        label:'近三个月',
        value: '2'
      },{
        label:'近半年',
        value: '3'
      }],
      dialogFormVisible: false,
      dialogForm:{
        title:'',
        content:'',
        time:'',
        fqr:'',
        zt:'',
        jd:'',
        sjdx:'',
        qtfj:''
      },
      sjdxList:[{
        label:'元和小学',
        value:'1'
      },{
        label:'陆慕小学',
        value:'2'
      },{
        label:'相城实验小学',
        value:'3'
      },{
        label:'苏州中学',
        value:'4'
      },{
        label:'苏州外国语学校',
        value:'5'
      },{
        label:'文征明实验小学',
        value:'6'
      },{
        label:'相城第二中学',
        value:'7'
      }],
      props: {
        multiple: true,
        value:'id',
        label:'label',
        checkStrictly: true,
        expandTrigger: 'hover'
      },
      defaultData:[],
      remindFormVisible:false,
      remindForm:{
        sjdx:[],
        fjxx:''
      },
      timestamp: Date.now(),
    }
  },
  methods:{
    getTotalData() {
      wjgzt({}).then(res=>{
        if(res.code == 1) {
          this.totalData = res.data.content_json;
        }
      })
    },
    createNew() {
      this.dialogForm = {
        title:'',
        content:'',
        time:'',
        fqr:'',
        zt:'',
        jd:'',
        sjdx:'',
        qtfj:''
      };
      this.dialogFormVisible = true;
    },
    formSubmit() {
      let data = {
        wwj_title:this.dialogForm.title,
        wwj_content:this.dialogForm.content,
        wwj_fqr:this.dialogForm.fqr,
        www_jzsj:this.dialogForm.time,
        wwj_zt:1,
        wwj_jd:this.dialogForm.jd,
        wwj_sjdx_json: JSON.stringify(this.dialogForm.sjdx),
        wwj_qtfj_json: JSON.stringify(this.dialogForm.qtfj)
      }
      wj_add(data).then(res =>{
        if(res.code == 1) {
          this.$message({
            message: "文件添加成功！",
            type: "success",
          });

          this.dialogFormVisible = false;
          this.getTotalData();
        }
      })
    },
    toDetail(type) {
      switch (type) {
        case 1:
          this.$router.push({name:'wjsj_wtjd'});
          break;
        case 2:
          this.$router.push({name:'wjsj_wfqd'});
          break;
      }
    },
    toRemind() {
      this.remindFormVisible = true;
      this.remindForm.sjdx = '';
      this.remindForm.fjxx = '';
    },
    remindSubmit() {
      let data = {
        jsdx:this.remindForm.sjdx,
        content:this.remindForm.fjxx
      }
      remind_add(data).then(res =>{
        if(res.code == 1) {
          this.$message({
            message: "提醒发送成功！",
            type: "success",
          });
          this.remindFormVisible = false;
        }
      })
    },
    getOrgTree() {
      let data = {}
      org_list_tree(data).then(res => {
        if (res.code == 1) {
          this.defaultData = res.data.one_info;
        }
      })
    },
  },
  mounted() {
    this.getOrgTree();
    this.getTotalData();
  }
}
</script>

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

.top-box {
  box-sizing: border-box;
  width: 100%;
  padding: 20px;
  background: #fff;
  border-radius: 6px;
}
.info-box{
  border: 1px solid #E0E0E0;
  background: #fff;
  border-radius: 6px;
}
.icon-more{
  transform: rotate(90deg);
}
.info-list {
  margin: 0;
  padding: 0 15px;
  li{
    cursor: pointer;
    padding:15px 0;
    &+li{
      border-top: 1px solid #EBEEF5;
    }
  }
}
.icon-info-message{
  width: 13px;
  height: 16px;
  background: url("@/assets/icon-message.png") center no-repeat;
  background-size: 13px 16px;
}
</style>
