<template>
  <div class="container">
    <!-- 查询配置 -->
    <div style="padding: 0px 20px">

      <div ref="lxTable" class="table-tree">
       <div style="padding: 15px;background-color: #fff;" class="form-sub-title">
          <el-link type="primary" style="font-size:18px" href="#/lawsfile/article">法律法规</el-link>
          <p class="no-redirect">浏览最近上传的法律法规</p>
        </div>
        <el-table :data="tableData" class="v-table" height="300px" style="width: 100%">
          <el-table-column :prop="column.field" :fixed="column.fixed" :align="column.align"
            v-for="(column,index) in lawcolumns" :label="column.title" :width="column.width">
            <template slot-scope="scope">
              <div v-if="column.type=='opt'">
                <Button ghost size="small" @click="show(scope.row)" type="primary"
                  style="margin-left: 10px;">查看</Button>
              </div>
              <div v-else-if="column.type=='menu'">
                  {{scope.row.menu?scope.row.menu.name:"无"}}
              </div>
              <div v-else>{{scope.row[column.field]}}</div>
            </template>
          </el-table-column>
        </el-table>
      </div>


     <el-dialog title="法律法规内容查看" :visible.sync="dialogLawViewVisible" fullscreen>
        <div class="dialogConcent" :style="{height:clientHeight+'px'}">
          <el-scrollbar style="flex: 1">
            <el-form :model="this.lawform" ref="lawform" label-position="right" :label-width="formLabelWidth">
              <el-form-item label="标题" prop="title">
                {{lawform.title}}
              </el-form-item>

              <el-form-item label="目录" prop="menu">
                <el-tag>{{lawform.menu?lawform.menu.name:"无"}}</el-tag>
              </el-form-item>

              <el-form-item label="内容" prop="content">
                <div style="width: 99.9%;" v-html="lawform.content">
                </div>
              </el-form-item>
              <el-form-item label="附件" prop="files">
                <el-link v-for="item in lawform.files" target="_blank" :href="item.url" type="primary">{{item.original_name}}</el-link>
              </el-form-item>
            </el-form>
          </el-scrollbar>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogLawViewVisible=false">关 闭</el-button>
        </div>
      </el-dialog>

      <div ref="lxTable" class="table-tree" style="margin-top:15px">
       <div style="padding: 15px;background-color: #fff;" class="form-sub-title">
          <el-link type="primary" href="#/lawsfile/articleview" style="font-size:18px">待办事项</el-link>
        </div>
        <el-table :data="dailytableData" class="v-table" height="300px" style="width: 100%">
          <el-table-column :prop="column.field" :fixed="column.fixed" :align="column.align"
            v-for="(column,index) in dailycolumns" :label="column.title" :width="column.width">
            <template slot-scope="scope">
              <div v-if="column.type=='opt'">
                <Button ghost size="small" @click="showdaily(scope.row)" type="primary"
                  style="margin-left: 10px;">查看</Button>
              </div>
              <div v-else-if="column.type=='status'">
                  {{scope.row.is_read===1?"已查看":"待阅读"}}
              </div>
              <div v-else>{{scope.row[column.field]}}</div>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <el-dialog title="待办事项内容查看" :visible.sync="dialogDailyViewVisible" fullscreen>
         <div class="dialogConcent" :style="{height:clientHeight+'px'}">
           <el-scrollbar style="flex: 1">
             <el-form :model="this.dailyform" ref="lawform" label-position="right" :label-width="formLabelWidth">
               <el-form-item label="标题" prop="title">
                 {{dailyform.title}}
               </el-form-item>
               <el-form-item label="开始时间" prop="start_date">
                 {{dailyform.start_date}}
               </el-form-item>
               <el-form-item label="结束时间" prop="end_date">
                 {{dailyform.end_date}}
               </el-form-item>
               <el-form-item label="内容" prop="content">
                 <div style="width: 99.9%;" v-html="dailyform.content">
                 </div>
               </el-form-item>
               <el-form-item label="附件" prop="files">
                 <el-link v-for="item in dailyform.files" target="_blank" :href="item.url" type="primary">{{item.original_name}}</el-link>
               </el-form-item>
             </el-form>
           </el-scrollbar>
         </div>
         <div slot="footer" class="dialog-footer">
           <el-button @click="dialogDailyViewVisible=false">关 闭</el-button>
         </div>
       </el-dialog>

    </div>




  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import {
  getToken
} from '@/utils/auth';
import LxHeader from "@/components/LxHeader/index.vue";
import Tinymce from '@/components/Tinymce';
import {
    listarticle,
    get
  } from "../../api/lawsfile/article.js";
import {
  getdaily,
  listtask
} from "../../api/daily/index.js";
export default {
  name: 'Dashboard',
  computed: {
    ...mapGetters([
      'name',
      'roles'
    ])
  },
  components: {
    LxHeader,
    Tinymce
  },
  data() {
      return {
        paginations: {
          page: 1,
          page_size: 5,
        },
        dialogLawViewVisible:false,
        dialogDailyViewVisible:false,
        tableHeight: 0,
        clientHeight: 0,
        tableData: [],
        dailytableData:[],
        formLabelWidth: "120px",
        lawform:{
          title:"",
          menu:"",
          content:"",
          files:""
        },
        dailyform: {
          title: "",
          content: "",
          file_list: "",
          start_date: "",
          end_date: "",
          department_list: [],
          daterange: null
        },
        lawcolumns: [{
            field: "created_at",
            title: "日期",
            type: "string",
            width: 200,
            align: "center"
          },
          {
            field: "menu",
            title: "栏目",
            type: "menu",
            width: 200,
            align: "center"
          },
          {
            field: "title",
            title: "标题",
            align: "left"
          },
          {
            field: "操作",
            title: "操作",
            width: 220,
            type: "opt",
          }
        ],
        dailycolumns: [
          {
            field: "start_date",
            title: "开始时间",
            type: "string",
            align: "center",
            width: 200,
          },
          {
            field: "end_date",
            title: "结束时间",
            align: "center",
            type:"string",
            width: 200,
          },
          {
              field: "title",
              title: "任务名称",
              type: "string",
              align: "left"
            },
          {
            field: "操作",
            title: "操作",
            width: 220,
            type: "opt",
          }
        ],
        uploadOther: {
          token: ""
        },
      }
    },
    created() {
      this.uploadOther.token = getToken();
      // this.initLoad();
      this.load();

    },
    methods: {
      initLoad() {
        var that = this;
        var clientHeight = document.documentElement.clientHeight
        var lxHeader_height = 96.5; //查询 头部
        var paginationHeight = 37; //分页的高度
        var topHeight = 50; //页面 头部
        let tableHeight = clientHeight - lxHeader_height - topHeight - paginationHeight - 20;
        that.tableHeight = tableHeight;
      },

      load() {
        listarticle({
          page: this.paginations.page,
          page_size: this.paginations.page_size
        }).then(res => {
          this.tableData = res.data;

        }).catch(error => {

        });
        listtask({
          page: this.paginations.page,
          page_size: this.paginations.page_size,
          show_self:1
        }).then(response => {
          this.dailytableData = response.data;

        }).catch(error => {
          console.log(error)
          reject(error)
        })
      },

      show(obj) {
        this.clientHeight = document.documentElement.clientHeight - 84 - 110;
        this.dialogDailyViewVisible = false;
        this.dialogLawViewVisible = true;
        this.info(obj);
      },

      showdaily(obj) {
        this.clientHeight = document.documentElement.clientHeight - 84 - 110;
        this.dialoglawViewVisible=false;
        this.dialogDailyViewVisible = true;
        this.infodaily(obj);
      },
      info(obj) {
        var that = this;
        get(obj.id).then(res => {
          let result = Object.assign(that.lawform, res);
          that.lawform = result;
          let _files = [];
          for (var mod of result.files) {
            let m = Object.assign({}, mod);
            m.name = mod.original_name;
            m.url = mod.url;
            _files.push(m);
          }
          that.lawform.files = _files;
        }).catch(error => {
          //reject(error)
        });
      },
      infodaily(obj) {
        var that = this;
        getdaily(obj.id).then(res => {
          let result = Object.assign(that.lawform, res);
          that.dailyform = result;
          let _files = [];
          for (var mod of result.files) {
            let m = Object.assign({}, mod);
            m.name = mod.original_name;
            m.url = mod.url;
            _files.push(m);
          }
          that.dailyform.files = _files;
        }).catch(error => {
          //reject(error)
        });
      },

    }
  }
</script>

<style lang="scss">
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
  .dialogConcent {
    overflow-y: auto;
  }
</style>
