<template>
  <div class="max-big-box">
    <div v-show="newModifyPageType&&detailsType!=1&&detailsType!=2&&detailsType!=3" class="big-max-box">
      <!--操作按钮-->
      <div class="top-box">
        <div class="input-box">
          <input class="search-input" type="text" v-model="inputData" placeholder="请输入任务名称/任务执行地点关键字进行查询">
          <div class="dropdown-box" v-for="(item,index) in downList" :key="index">
            <p class="dropdown-left-title">{{item.name}}：</p>
            <div class="dropdown-right-box cursor_pointer"
                 @mouseenter="dropdownClickOpen(index,'1')" @mouseleave="dropdownClickOpen(index,'2')">
              <p class="dropdown-text">{{downList[index].downText}}</p>
              <div class="dropdown-for-max" v-if="downList[index].downType">
                <p v-for="(item,indexTwo) in downList[index].list" :key="indexTwo"
                   :class="{'color-A':downList[index].mouseColor == item}"
                   @mouseenter="colorTypeEnter(index,item)" @mouseleave="colorTypeLeave(index)"
                   @click="dropdownClick(index,item)">{{item}}</p>
              </div>
            </div>
          </div>
          <div class="time-box">
            <p>创建时间：</p>
            <p class="cursor_pointer" @click="openTimeBox('1')">{{playTime}}</p>
            <p>-</p>
            <p class="cursor_pointer" @click="openTimeBox('2')">{{endTime}}</p>
          </div>
          <div class="button-box cursor_pointer" @click="clickQuery">
            <img src="~@/assets/images/icon_27.png">
            <p class="cursor_pointer">查询</p>
          </div>
        </div>
        <div class="top-right-box">
          <p class="add-button cursor_pointer" @click="clickPageType" v-if="userPermsData.indexOf('business:taskInfo:add')!=-1">发布任务</p>
          <p class="check-button cursor_pointer" @click="choosePlanClick" v-if="userPermsData.indexOf('business:planFormulation:list')!=-1">选择预案</p>
          <p class="del-button cursor_pointer" @click="allDel" v-if="userPermsData.indexOf('business:taskInfo:remove')!=-1">批量删除</p>
          <p class="text-p">已选择{{tableNum}}条</p>
        </div>
      </div>
      <!--表格-->
      <div class="table-box">
        <el-table
          ref="multipleTable"
          :row-key="getRowKey"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          @select-all="handleSelectionChange"
          @select="handleSelectionChange">
          <el-table-column
            :reserve-selection="true"
            type="selection"
            width="54">
          </el-table-column>
          <el-table-column
            type="index"
            :index="indexMethod"
            label="序号"
            width="66">
          </el-table-column>
          <el-table-column
            prop="taskName"
            label="任务名称"
            width="291">
          </el-table-column>
          <el-table-column
            prop="planType"
            label="类型"
            width="146">
            <template slot-scope="scope">
              {{scope.row.planType==1?"应急支援":(scope.row.planType==2?"战备拉动":(scope.row.planType==3?"训练考核任务":""))}}
            </template>
          </el-table-column>
          <el-table-column
            prop="organizationName"
            label="单位名称"
            width="152">
          </el-table-column>
          <el-table-column
            prop="medicalName"
            label="医疗队名称"
            width="157">
          </el-table-column>
          <el-table-column
            prop="carryingEquipment"
            label="携运行物资装备(对应基数单位及数量)"
            width="279">
          </el-table-column>
          <el-table-column
            label="任务执行时间"
            width="222">
            <template slot-scope="scope">
              {{scope.row.startTime}} 至 {{scope.row.endTime}}
            </template>
          </el-table-column>
          <el-table-column
            prop="taskPlace"
            label="任务执行地点"
            width="177">
          </el-table-column>
          <el-table-column
            prop="taskContent"
            label="任务内容"
            width="226">
          </el-table-column>
          <el-table-column
            prop="taskStatus"
            label="任务状态"
            width="235">
            <template slot-scope="scope">
              <div class="type-box">
                <p :class="{'colorA':scope.row.taskStatus==1,'color2':scope.row.taskStatus==2,'color3':scope.row.taskStatus==3,'color4':scope.row.taskStatus==4,'color5':scope.row.taskStatus==5,'color6':scope.row.taskStatus==6,'color7':scope.row.taskStatus==7,'color8':scope.row.taskStatus==8}">
                  {{scope.row.taskStatus==1?taskNameList[0]:(scope.row.taskStatus==2?taskNameList[1]:(scope.row.taskStatus==3?taskNameList[2]:(scope.row.taskStatus==4?taskNameList[3]:(scope.row.taskStatus==5?taskNameList[4]:(scope.row.taskStatus==6?taskNameList[5]:(scope.row.taskStatus==7?taskNameList[6]:(scope.row.taskStatus==8?taskNameList[7]:"")))))))}}
                </p>
                <p class="cursor_pointer" @click="typeClick(scope.$index, scope.row)">状态监控</p>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="createUser"
            label="任务发布人"
            width="160">
          </el-table-column>
          <el-table-column
            prop="pushType"
            label="任务发布形式"
            width="178">
            <template slot-scope="scope">
              <p :class="{'colorA':scope.row.pushType==1}">{{scope.row.pushType==1?"直接发布":(scope.row.pushType==2?"选择预案":"")}}</p>
            </template>
          </el-table-column>
          <el-table-column
            prop="createTime"
            label="发布时间"
            width="196">
          </el-table-column>
          <el-table-column
            label="生成功能"
            width="200">
            <template slot-scope="scope">
              <div class="table-button-max-display-box">
                <p class="cursor_pointer" @click="deriveword(scope.$index, scope.row)">生成word</p>
                <p class="cursor_pointer" @click="pdfClick(scope.$index, scope.row)">生成pdf</p>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            width="237">
            <template slot-scope="scope">
              <div class="table-min-button" :class="{'table-min-button-1':scope.row.taskStatus==0,'table-min-button-2':scope.row.taskStatus==7,'table-min-button-3':scope.row.taskStatus!=1&&scope.row.taskStatus!=7}">
                <div class="table-min-button-box-one cursor_pointer" @click="handleInfo(scope.$index, scope.row)">
                  <img src="~@/assets/images/icon_36.png">
                  <p>详情</p>
                </div>
                <div class="table-min-button-box-two cursor_pointer" @click="handleEdit(scope.$index, scope.row)"
                   v-if="scope.row.taskStatus==1&&userPermsData.indexOf('business:taskInfo:edit')!=-1">
                  <img src="~@/assets/images/icon_37.png">
                  <p>编辑</p>
                </div>
                <div class="table-min-button-box-three cursor_pointer" @click="handleDelete(scope.$index, scope.row)"
                   v-if="(scope.row.taskStatus==1||scope.row.taskStatus==7)&&(userPermsData.indexOf('business:taskInfo:remove')!=-1)">
                  <img src="~@/assets/images/icon_38.png">
                  <p>删除</p>
                </div>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-pagination
        background
        @current-change="handleCurrentChange"
        layout="prev, pager, next"
        :current-page="currentPage"
        :page-size="pagesize"
        :total="total">
      </el-pagination>
      <!--时间日历-->
      <div class="time-max-big-box" v-if="timeType!=0">
        <div class="time-big-box">
          <el-calendar class="time-min-box" v-model="timeValue">
          </el-calendar>
          <div class="button-box">
            <p class="cursor_pointer" @click="openTimeBox('0')">返回</p>
            <p class="cursor_pointer" @click="clearTimeData">清除</p>
            <p class="cursor_pointer" @click="setTimeData">确定</p>
          </div>
        </div>
      </div>
    </div>
    <new-modify
      v-if="!newModifyPageType&&detailsType!=1"
      :newModifyData="newModifyData"
      @newModifyLeftClick="newModifyLeftClick"
      @newModifyRightClick="newModifyRightClick"
    ></new-modify>
    <interactive-window
      v-if="windowType"
      :windowData="windowData"
      @windowLeftClick="windowLeftClick"
      @windowRightClick="windowRightClick"
    ></interactive-window>
    <details-page
      v-if="detailsType==1"
      :dataInfo="dataInfo">
    </details-page>
    <taskStatus-monitoring
      v-if="detailsType==2"
      :processingId="processingId"
      :taskNameList="taskNameList">
    </taskStatus-monitoring>
    <choose-plan
      v-if="detailsType==3">
    </choose-plan>
    <div class="pdf-max-box" v-show="pdfType">
      <div id="pdf-box">
        <p class="pdf-title">发布任务</p>
        <div>
          <p>任务名称：</p>
          <p>{{pdfData.taskName}}</p>
        </div>
        <div>
          <p>任务类型：</p>
          <p>{{pdfData.planType}}</p>
        </div>
        <div>
          <p>单位名称：</p>
          <p>{{pdfData.organizationName}}</p>
        </div>
        <div>
          <p>医疗队名称：</p>
          <p>{{pdfData.medicalName}}</p>
        </div>
        <div>
          <p>携运行物资装备：</p>
          <p>{{pdfData.carryingEquipment}}</p>
        </div>
        <div>
          <p>任务执行时间：</p>
          <p>{{pdfData.startTime}}至{{pdfData.endTime}}</p>
        </div>
        <div>
          <p>任务执行地点：</p>
          <p>{{pdfData.taskPlace}}</p>
        </div>
        <div>
          <p>任务内容：</p>
          <p>{{pdfData.taskContent}}</p>
        </div>
        <div>
          <p>任务状态：</p>
          <p>{{pdfData.taskStatus}}</p>
        </div>
        <div>
          <p>任务发布人：</p>
          <p>{{pdfData.createUser}}</p>
        </div>
        <div>
          <p>任务发布形式：</p>
          <p>{{pdfData.pushType}}</p>
        </div>
        <div>
          <p>发布时间：</p>
          <p>{{pdfData.createTime}}</p>
        </div>
      </div>
      <div class="pdf-button-box">
        <p @click="pdfOut">返回</p>
        <p @click="pdfDownload">生成pdf</p>
      </div>
    </div>
  </div>
</template>

<script>
  import { taskInfoList,medicalCorpsListData,taskInfoDel,statusInfoList,baseUnitDownList,taskInfoAdd,taskInfoEditor } from '@/api/userApi'
  import docxtemplater from 'docxtemplater'
  import PizZip from 'pizzip'
  import JSZipUtils from 'jszip-utils'
  import {saveAs} from 'file-saver'
  import html2Canvas from 'html2canvas';
  import JsPDF from 'jspdf';
  export default {
    name: "intelligentOrganizationAndCommand",//智能化组织指挥
    components:{
      detailsPage: resolve => {require(['@/components/detailsPage'], resolve)},//详情组件
      newModify: resolve => {require(['@/components/newModify'], resolve)},//新建-修改组件
      interactiveWindow: resolve => {require(['@/components/interactiveWindow'], resolve)},//提示弹窗
      taskStatusMonitoring: resolve => {require(['@/components/directorateDecisionSupport/intelligentOrganizationAndCommandView/taskStatusMonitoring'], resolve)},//提示弹窗
      choosePlan: resolve => {require(['@/components/directorateDecisionSupport/intelligentOrganizationAndCommandView/choosePlan'], resolve)},//选择预案
    },
    data () {
      return {
        userPermsData:localStorage.getItem('userPerms'),
        inputData:"",
        pdfType:false,
        //传输用数据
        transmissionData:{},
        //下拉框
        downList:[
          {
            name:"类型",
            downType:false,
            downText:"全部",
            mouseColor:"",
            list:["全部","应急支援","战备拉动","训练考核任务"],
            idType:["","1","2","3"]
          },
          {
            name:"医疗队名称",
            downType:false,
            downText:"全部",
            mouseColor:"",
            list:[],
            idType:[]
          },
          {
            name:"任务状态",
            downType:false,
            downText:"全部",
            mouseColor:"",
            list:[],
            idType:[]
          },
        ],
        //对应任务状态数据
        taskNameList:[],
        //详情ID
        processingId:"",
        //表格限制
        pagesize: 7,
        currentPage:1,
        //列表总数
        total:0,
        /*数据*/
        tableData:[],
        //选中数据
        multipleSelection:[],
        // 弹窗状态
        windowType:false,
        //弹窗组件数据
        windowData:{},
        //勾选数量
        tableNum:0,
        // 新增-修改页面状态
        newModifyPageType:true,
        //新增-修改页面数据
        newModifyData:{},
        //搜索时间
        playTime:"请选择时间",
        endTime:"请选择时间",
        //日历时间
        timeValue: new Date(),
        timeType:0,
        // 详情页状态
        detailsType:0,
        //给组件传参数据
        dataInfo:[],
        //基数列表
        baseUnitList:[],
        //pdf导出数据
        pdfData:{
          taskName:"",
          planType:"",
          organizationName:"",
          medicalName:"",
          carryingEquipment:"",
          startTime:"",
          endTime:"",
          taskPlace:"",
          taskContent:"",
          taskStatus:"",
          createUser:"",
          pushType:"",
          createTime:"",
        }
      }
    },

    created(){

    },
    mounted() {
      this.statusInfoList();
      this.baseUnitDownList();
    },
    methods: {
      //导出PDF
      pdfClick(index,row) {
        let self = this;
        console.log(row.planType==1?"应急支援":(row.planType==2?"战备拉动":(row.planType==3?"训练考核任务":"")))
        this.pdfData.taskName = row.taskName;
        this.pdfData.planType = row.planType==1?"应急支援":(row.planType==2?"战备拉动":(row.planType==3?"训练考核任务":""));
        this.pdfData.organizationName = row.organizationName;
        this.pdfData.medicalName = row.medicalName;
        this.pdfData.carryingEquipment = row.carryingEquipment;
        this.pdfData.startTime = row.startTime;
        this.pdfData.endTime = row.endTime;
        this.pdfData.taskPlace = row.taskPlace;
        this.pdfData.taskContent = row.taskContent;
        this.pdfData.taskStatus = row.taskStatus==1?self.taskNameList[0]:(row.taskStatus==2?self.taskNameList[1]:(row.taskStatus==3?self.taskNameList[2]:(row.taskStatus==4?self.taskNameList[3]:(row.taskStatus==5?self.taskNameList[4]:(row.taskStatus==6?self.taskNameList[5]:(row.taskStatus==7?self.taskNameList[6]:(row.taskStatus==8?self.taskNameList[7]:"")))))));
        this.pdfData.createUser = row.createUser;
        this.pdfData.pushType = row.pushType==1?"直接发布":"选择预案";
        this.pdfData.createTime = row.createTime;
        this.pdfType = !this.pdfType;
      },
      pdfOut(){
        this.pdfType = !this.pdfType;
      },
      pdfDownload(){
        let self = this;
        html2Canvas(document.querySelector('#pdf-box'), {
          dpi: 144, // 导出pdf清晰度
          //    scale: 2,
          allowTaint: true
        }).then(function (canvas) {
          /**jspdf将html转为pdf一页显示不截断，整体思路：
           * 1. 获取DOM
           * 2. 将DOM转换为canvas
           * 3. 获取canvas的宽度、高度（稍微大一点）
           * 4. 将pdf的宽高设置为canvas的宽高
           * 5. 将canvas转为图片
           * 6. 实例化jspdf，将内容图片放在pdf中（因为内容宽高和pdf宽高一样，就只需要一页，也防止内容截断问题）
           */
            // 得到canvas画布的单位是px 像素单位
          let contentHeight = 642;
          let contentWidth = 595;
          // 将canvas转为base64图片
          let pageData = canvas.toDataURL('image/jpeg', 1.0)

          // 设置pdf的尺寸，pdf要使用pt单位 已知 1pt/1px = 0.75   pt = (px/scale)* 0.75
          // 2为上面的scale 缩放了2倍
          // let pdfX = (contentWidth + 100) /2  * 0.75
          // let pdfY = (contentHeight + 100) /2  * 0.75 // 500为底部留白
          let pdfX = contentWidth  * 0.75
          let pdfY = contentHeight  * 0.75 // 500为底部留白

          // 设置内容图片的尺寸，img是pt单位
          let imgX = pdfX;
          let imgY = pdfY; //内容图片这里不需要留白的距离

          // 初始化jspdf 第一个参数方向：默认''时为纵向，第二个参数设置pdf内容图片使用的长度单位为pt，第三个参数为PDF的大小，单位是pt
          let PDF = new JsPDF('', 'pt', [pdfX,pdfY])

          // 将内容图片添加到pdf中，因为内容宽高和pdf宽高一样，就只需要一页，位置就是 0,0
          PDF.addImage(pageData, 'JPEG', 0, 0, pdfX, pdfY)
          PDF.save('发布任务.pdf');
          self.pdfType = !self.pdfType;
          self.windowData = {
            type:"2",
            title:"提示",
            text:"操作成功",
          };
          self.windowType = !self.windowType;
        })
      },
      //保存word
      deriveword(index,row) {
        let self = this;
        let docxsrc = "static/intelligentOrganizationAndCommand.docx";        //模板文件的位置
        let docxname = "发布任务.docx";        //导出文件的名字
        // 读取并获得模板文件的二进制内容
        JSZipUtils.getBinaryContent(docxsrc, function(error, content) {
          // docxsrc是模板。我们在导出的时候，会根据此模板来导出对应的数据
          // 抛出异常
          if (error) {
            throw error;
          }
          // 创建一个PizZip实例，内容为模板的内容
          let zip = new PizZip(content);
          // 创建并加载docx templater实例对象
          let doc = new docxtemplater().loadZip(zip);
          // 设置模板变量的值
          doc.setData({
            taskName:row.taskName,
            planType:row.planType==1?"应急支援":(row.planType==2?"战备拉动":(row.planType==3?"训练考核任务":"")),
            organizationName:row.organizationName,
            medicalName:row.medicalName,
            carryingEquipment:row.carryingEquipment,
            startTime:row.startTime,
            endTime:row.endTime,
            taskPlace:row.taskPlace,
            taskContent:row.taskContent,
            taskStatus:row.taskStatus==1?self.taskNameList[0]:(row.taskStatus==2?self.taskNameList[1]:(row.taskStatus==3?self.taskNameList[2]:(row.taskStatus==4?self.taskNameList[3]:(row.taskStatus==5?self.taskNameList[4]:(row.taskStatus==6?self.taskNameList[5]:(row.taskStatus==7?self.taskNameList[6]:(row.taskStatus==8?self.taskNameList[7]:""))))))),
            createUser:row.createUser,
            pushType:row.pushType==1?"直接发布":"选择预案",
            createTime:row.createTime,
          });
          try {
            // 用模板变量的值替换所有模板变量
            doc.render();
          } catch (error) {
            // 抛出异常
            let e = {
              message: error.message,
              name: error.name,
              stack: error.stack,
              properties: error.properties
            };
            console.log(JSON.stringify({ error: e }));
            throw error;
          }

          // 生成一个代表docxtemplater对象的zip文件（不是一个真实的文件，而是在内存中的表示）
          let out = doc.getZip().generate({
            type: "blob",
            mimeType: "application/vnd.openxmlformats-officedocument.wordprocessingml.document"
          });
          // 将目标文件对象保存为目标类型的文件，并命名
          saveAs(out, docxname);
          self.windowData = {
            type:"2",
            title:"提示",
            text:"操作成功",
          };
          self.windowType = !self.windowType;
        });
      },
      //基数下拉菜单
      async baseUnitDownList () {
        const { data } = await baseUnitDownList();
        if(data.code==200){
          this.baseUnitList = data.data;
        }
      },
      //点击查询
      clickQuery(){
        this.currentPage = 1;
        this.taskInfoList();
      },
      //任务状态列表下拉菜单
      async statusInfoList () {
        let self = this;
        const { data } = await statusInfoList();
        if(data.code==200){
          let taskList = [];
          let list = [];
          let idType = [];
          list.push("全部");
          idType.push("");
          for(let i=0;i<data.rows.length;i++){
            list.push(data.rows[i].taskName);
            taskList.push(data.rows[i].taskName);
            idType.push(data.rows[i].id);
          }
          self.downList[2].list = list;
          self.downList[2].idType = idType;
          self.taskNameList = taskList;
          self.medicalCorpsListData();
        }
      },
      // 单独删除
      async taskInfoDelTwo(id){
        let ids = [];
        ids.push(id)
        const { data } = await taskInfoDel(ids);
        if(data.code==200){
          this.windowData = {
            type:"2",
            title:"提示",
            text:"操作成功",
          };
          this.windowType = !this.windowType;
          this.$refs.multipleTable.clearSelection();
          this.taskInfoList();
        }
      },
      //批量删除
      async taskInfoDel () {
        let self = this;
        let ids = [];
        for(let i=0;i<self.multipleSelection.length;i++){
          ids.push(self.multipleSelection[i].id)
        }
        const { data } = await taskInfoDel(ids);
        if(data.code==200){
          this.windowData = {
            type:"2",
            title:"提示",
            text:"操作成功",
          };
          this.windowType = !this.windowType;
          this.$refs.multipleTable.clearSelection();
        }
      },
      //获取医疗队下拉菜单
      async medicalCorpsListData () {
        let self = this;
        const { data } = await medicalCorpsListData();
        if(data.code==200){
          let list = [];
          let idType = [];
          list.push("全部");
          idType.push("");
          for(let i=0;i<data.data.length;i++){
            list.push(data.data[i].medical_corps);
            idType.push(data.data[i].id);
          }
          self.downList[1].list = list;
          self.downList[1].idType = idType;
          this.taskInfoList();
        }
      },
      //获取列表
      async taskInfoList () {
        let self = this;
        let obj={
          medicalId:"",
          beginTime:self.playTime,
          endTime:self.endTime,
          planType:"",
          searchValue:self.inputData,
          taskStatus:"",
          pageSize:self.pagesize,
          pageNum:self.currentPage,
          "params[beginTime]":self.playTime=="请选择时间"?"":self.playTime,
          "params[endTime]":self.endTime=="请选择时间"?"":self.endTime,
        };
        //医疗队id
        for(let i=0;i<self.downList[1].list.length;i++){
          if(self.downList[1].downText==self.downList[1].list[i]){
            obj.medicalId = self.downList[1].idType[i];
          }
        }
        //任务类型
        for(let i=0;i<self.downList[0].list.length;i++){
          if(self.downList[0].downText==self.downList[0].list[i]){
            obj.planType = self.downList[0].idType[i];
          }
        }
        //数量
        obj.pageSize = self.pagesize;
        //页码
        obj.pageNum = self.currentPage;
        //任务状态
        for(let i=0;i<self.downList[2].list.length;i++){
          if(self.downList[2].downText==self.downList[2].list[i]){
            obj.taskStatus = self.downList[2].idType[i];
          }
        }
        const { data } = await taskInfoList(obj);
        if(data.code==200){
          this.tableData = data.rows;
          this.total = data.total;
          this.tableNum = 0;
          this.$forceUpdate();
        }
      },
      //状态监控按钮
      typeClick(index,row){
        this.processingId = row.id;
        this.detailsType = 2;
      },
      //时间选择事件
      openTimeBox(type){
        this.timeType=type
      },
      setTimeData(){
        let year = this.timeValue.getFullYear();
        let month = this.timeValue.getMonth()+1;
        let day = this.timeValue.getDate();
        if(this.timeType==1){
          this.playTime = year+'-'+month+'-'+day;
        }else if(this.timeType==2){
          this.endTime = year+'-'+month+'-'+day;
        }
        this.timeType = 0;
      },
      clearTimeData(){
        if(this.timeType==1){
          this.playTime = "请选择时间";
        }else if(this.timeType==2){
          this.endTime = "请选择时间";
        }
        this.timeType = 0;
      },
      //下拉菜单进入悬浮状态
      colorTypeEnter(type,item){
        this.downList[type].mouseColor=item;
      },
      //下拉菜单离开悬浮状态
      colorTypeLeave(type){
        this.downList[type].mouseColor = "";
      },
      // 下拉菜单选项悬浮事件
      dropdownClickOpen(type,state){
        if(state==1){
          this.downList[type].downType = true
        }else if(state==2){
          this.downList[type].downType = false
        }
      },
      // 下拉菜单点击事件
      dropdownClick(type,item){
        this.downList[type].downText = item;
        this.downList[type].downType = false;
      },
      //选择预案
      choosePlanClick(){
        this.detailsType = 3;
      },
      //新建组件状态切换
      clickPageType(){
        let self = this;
        let newData = {
          title:"请录入任务信息",
          type:"1",
          list:[
            {
              name:"任务名称",
              value:"",
            },
            {
              name:"任务类型",
              value:"请选择",
              list:["应急支援","战备拉动","训练考核任务"]
            },
            {
              name:"任务内容",
              value:"",
              textArea:true,
            },
            {
              name:"执行时间",
              valueOne:"请选择",
              valueTwo:"请选择",
              doubleTimeType:true,
            },
            {
              name:"任务执行地点",
              value:"",
            },
            {
              name:"医疗队名称",
              value:"请选择",
              list:[]
            },
            {
              name:"携运行装备物资",
              tableList:[],
            },
          ]
        };
        for(let i=1;i<self.downList[1].list.length;i++){
          newData.list[5].list.push(self.downList[1].list[i])
        }
        for(let i=0;i<self.baseUnitList.length;i++){
          newData.list[6].tableList.push(self.baseUnitList[i].unitName)
        }
        this.newModifyData = {...newData};
        this.newModifyPageType = !this.newModifyPageType;
      },
      // 批量删除
      allDel(){
        if(this.multipleSelection[0]){
          this.windowData = {
            type:"1",
            title:"提示",
            text:"确定要批量删除这些信息吗?",
            leftButton:"取消",
            rightButton:"确定",
            cType:"1",
          };
          this.windowType = !this.windowType;
        }else{
          this.windowData = {
            type:"3",
            title:"提示",
            text:"您没有勾选任何数据!",
          };
          this.windowType = !this.windowType;
        }
      },
      //表格绑定ID
      getRowKey (row) {
        return row.id
      },
      indexMethod(index) {
        return (this.currentPage-1)*this.pagesize+index+1;
      },
      //翻页
      handleCurrentChange(val) {
        console.log(`当前页: `,val);
        this.currentPage = val;
        this.taskInfoList();
      },
      handleInfo(index, row){
        let self = this;
        this.dataInfo =[
          {
            name:"任务名称",
            value:row.taskName,
          },
          {
            name:"任务类型",
            value:row.planType==1?"应急支援":(row.planType==2?"战备拉动":(row.planType==3?"训练考核任务":""))
          },
          {
            name:"单位名称",
            value:row.organizationName,
          },
          {
            name:"医疗队名称",
            value:row.medicalName,
          },
          {
            name:"基数单位及数量",
            value:row.carryingEquipment,
          },
          {
            name:"任务执行时间",
            value:row.startTime+'至'+row.endTime,
          },
          {
            name:"任务执行地点",
            value:row.taskPlace,
          },
          {
            name:"任务内容",
            value:row.taskContent,
          },
          {
            name:"任务状态",
          },
          {
            name:"任务发布人",
            value:row.createUser,
          },
          {
            name:"任务发布形式",
            value:row.pushType==1?"直接发布":(row.pushType==2?"选择预案":"")
          },
          {
            name:"发布时间",
            value:row.createTime,
          }
        ]
        for(let i=0;i<self.taskNameList.length;i++){
          if(row.taskStatus==i){
            self.dataInfo[8].value = self.taskNameList[i-1]
          }
        }
        this.detailsType = 1;
      },
      //编辑
      handleEdit(index, row) {
        let self = this;
        let newData = {
          title:"编辑",
          type:"2",
          id:row.id,
          list:[
            {
              name:"任务名称",
              value:row.taskName,
            },
            {
              name:"类型",
              value:row.planType==1?"战备拉动":(row.planType==2?"应急支援":(row.planType==3?"训练考核任务":"")),
              list:["战备拉动","应急支援","训练考核任务"]
            },
            {
              name:"医疗队名称",
              value:row.medicalName,
              list:[]
            },
            {
              name:"执行时间",
              valueOne:row.startTime,
              valueTwo:row.endTime,
              doubleTimeType:true,
            },
            {
              name:"任务执行地点",
              value:row.taskPlace,
            },
            {
              name:"任务内容",
              value:row.taskContent,
            },
            {
              name:"携运行物资装备",
              newList:[],
              tableList:[],
            },
          ]
        };
        for(let i=1;i<self.downList[1].list.length;i++){
          newData.list[2].list.push(self.downList[1].list[i])
        }
        for(let i=0;i<self.baseUnitList.length;i++){
          newData.list[6].tableList.push(self.baseUnitList[i].unitName)
        }
        for(let i=0;i<row.taskInfoUnitList.length;i++){
          let obj = {
            value:row.taskInfoUnitList[i].unitName,
            num:row.taskInfoUnitList[i].unitNumber,
          };
          newData.list[6].newList.push(obj)
        }
        this.newModifyData = {...newData};
        this.newModifyPageType = !this.newModifyPageType;
      },
      // 删除
      handleDelete(index, row) {
        this.windowData = {
          type:"1",
          title:"提示",
          text:"确定要删除这条信息吗?",
          leftButton:"取消",
          rightButton:"确定",
          cType:"2",
          newId:row.id
        };
        this.windowType = !this.windowType;
      },
      //勾选
      handleSelectionChange(val) {
        this.multipleSelection = val;
        this.tableNum = this.multipleSelection.length
      },
      //弹窗组件左侧按钮方法-对应取消方法
      windowLeftClick(){
        this.windowType = !this.windowType;
      },
      //弹窗组件右侧按钮方法
      windowRightClick(data){
        console.log(data)
        this.windowType = false;
        if(data.cType==1){
          this.taskInfoDel();
        }else if(data.cType==2){
          this.taskInfoDelTwo(data.newId);
        }
      },
      //新增-修改组件内左侧按钮事件
      newModifyLeftClick(){
        this.newModifyPageType = !this.newModifyPageType;
      },
      //新增-修改组件内左侧按钮事件
      newModifyRightClick(data){
        if(!data.list[0].value){
          this.windowData = {
            type:"3",
            title:"提示",
            text:"请输入任务名称",
          };
          this.windowType = !this.windowType;
          return
        }
        if(data.list[1].value == "请选择"){
          this.windowData = {
            type:"3",
            title:"提示",
            text:"请选择任务类型",
          };
          this.windowType = !this.windowType;
          return
        }
        if(!data.list[2].value){
          this.windowData = {
            type:"3",
            title:"提示",
            text:"请输入任务内容",
          };
          this.windowType = !this.windowType;
          return
        }
        if(data.list[3].valueOne == "请选择"){
          this.windowData = {
            type:"3",
            title:"提示",
            text:"请选择任务开始时间",
          };
          this.windowType = !this.windowType;
          return
        }
        if(data.list[3].valueTwo == "请选择"){
          this.windowData = {
            type:"3",
            title:"提示",
            text:"请选择任务结束时间",
          };
          this.windowType = !this.windowType;
          return
        }
        if(!data.list[4].value){
          this.windowData = {
            type:"3",
            title:"提示",
            text:"请输入任务执行地点",
          };
          this.windowType = !this.windowType;
          return
        }
        if(data.list[5].value == "请选择"){
          this.windowData = {
            type:"3",
            title:"提示",
            text:"请选择医疗队",
          };
          this.windowType = !this.windowType;
          return
        }
        for(let i=0;i<data.list[6].newList.length;i++){
          if(data.list[6].newList[i].value == "请选择"){
            this.windowData = {
              type:"3",
              title:"提示",
              text:"请选择携运行装备物资",
            };
            this.windowType = !this.windowType;
            return
          }
        }
        if(data.type == "1"){
          this.taskInfoAdd(data);
        }else if(data.type == "2"){
          this.taskInfoEditor(data);
        }
        // this.newModifyPageType = !this.newModifyPageType;
        // console.log("右键传值",data);
        // this.windowData = {
        //   type:"2",
        //   title:"提示",
        //   text:"操作成功",
        //   leftButton:"取消",
        //   rightButton:"确定",
        // };
        // this.windowType = !this.windowType;
      },
      //新建
      async taskInfoAdd (item) {
        let self = this;
        let obj={
          pushType:"1",
          taskName:item.list[0].value,
          planType:"",
          taskContent:item.list[2].value,
          startTime:item.list[3].valueOne=="请选择时间"?"":item.list[3].valueOne,
          endTime:item.list[3].valueTwo=="请选择时间"?"":item.list[3].valueTwo,
          taskPlace:item.list[4].value,
          medicalId:"",
          taskInfoUnitList:[],
        };
        //类型
        for(let i=0;i<self.downList[0].list.length;i++){
          if(item.list[1].value==self.downList[0].list[i]){
            obj.planType = self.downList[0].idType[i];
          }
        }
        //医疗队ID
        for(let i=0;i<self.downList[1].list.length;i++){
          if(item.list[5].value==self.downList[1].list[i]){
            obj.medicalId = self.downList[1].idType[i];
          }
        }
        for(let i=0;i<item.list[6].newList.length;i++){
          for(let k=0;k<self.baseUnitList.length;k++){
            if(item.list[6].newList[i].value == self.baseUnitList[k].unitName){
              let newObj = {
                unitId:self.baseUnitList[k].id,
                carryingEquipment:self.baseUnitList[k].unitName,
                unitNumber:item.list[6].newList[i].num,
              };
              obj.taskInfoUnitList.push(newObj)
            }
          }
        }
        const { data } = await taskInfoAdd(obj);
        if(data.code==200){
          this.newModifyPageType = !this.newModifyPageType;
          this.taskInfoList();
          this.windowData = {
            type:"2",
            title:"提示",
            text:"发布成功",
          };
          this.windowType = !this.windowType;
        }
      },
      //编辑预案
      async taskInfoEditor (item) {
        let self = this;
        let obj={
          id:item.id,
          taskName:item.list[0].value,
          planType:"",
          taskContent:item.list[2].value,
          startTime:item.list[3].valueOne=="请选择时间"?"":item.list[3].valueOne,
          endTime:item.list[3].valueTwo=="请选择时间"?"":item.list[3].valueTwo,
          taskPlace:item.list[4].value,
          medicalId:"",
          taskInfoUnitList:[],
        };
        //类型
        for(let i=0;i<self.downList[0].list.length;i++){
          if(item.list[1].value==self.downList[0].list[i]){
            obj.planType = self.downList[0].idType[i];
          }
        }
        //医疗队ID
        for(let i=0;i<self.downList[1].list.length;i++){
          if(item.list[5].value==self.downList[1].list[i]){
            obj.medicalId = self.downList[1].idType[i];
          }
        }
        for(let i=0;i<item.list[6].newList.length;i++){
          for(let k=0;k<self.baseUnitList.length;k++){
            if(item.list[6].newList[i].value == self.baseUnitList[k].unitName){
              let newObj = {
                unitId:self.baseUnitList[k].id,
                carryingEquipment:self.baseUnitList[k].unitName,
                unitNumber:item.list[6].newList[i].num,
              };
              obj.taskInfoUnitList.push(newObj)
            }
          }
        }
        const { data } = await taskInfoEditor(obj);
        if(data.code==200){
          this.newModifyPageType = !this.newModifyPageType;
          this.taskInfoList();
          this.windowData = {
            type:"2",
            title:"提示",
            text:"编辑成功",
          };
          this.windowType = !this.windowType;
        }
      },
      //供子组件调用方法
      outPage(){
        this.detailsType = 0;
      },
      outPageOne(){
        this.detailsType = 0;
        this.taskInfoList();
        this.windowData = {
          type:"2",
          title:"提示",
          text:"发布成功",
        };
        this.windowType = !this.windowType;
      }
    }
  }
</script>

<style scoped lang="stylus">
  .max-big-box
    display flex
    flex-direction column
    flex:1;
    .big-max-box
      display flex
      flex-direction column
      flex:1;
      //搜索与操作按钮
      .top-box
        height:80px;
        .input-box
          width:1670px;
          height:30px;
          display flex
          margin-left:105px;
          .search-input
            height:28px;
            width:290px;
            border:1px solid $theme;
            padding-left:10px;
          .dropdown-box
            display flex
            color:$color_ff;
            z-index:1;
            margin-left:30px;
            .dropdown-left-title
              line-height:30px;
              font-size:$font_14;
            .dropdown-right-box
              font-size:$font_12;
              .dropdown-text
                width:160px;
                height:30px;
                line-height:30px;
                background:url("~@/assets/images/button_15.png");
                background-size:100% 100%;
              .dropdown-for-max
                background:$backColor1;
                border-bottom-right-radius 4px
                border-bottom-left-radius 4px
                p
                  width:160px;
                  height:30px;
                  line-height:30px;
                .color-A
                  /*
                  background:$backColor2 !important;
                  color:$color_ff !important;
                  */
                  color:$theme !important;
                  border-bottom-right-radius 4px
                  border-bottom-left-radius 4px
          .time-box
            width:380px;
            display flex
            margin-left:20px;
            p
              color:$color_ff;
            p:nth-child(1)
              width:100px;
              line-height:30px;
              font-size:$font_14;
            p:nth-child(2)
              width:120px;
              height:30px;
              background url("~@/assets/images/button_08.png")
              background-size 100% 100%
              font-size:$font_12;
              line-height:30px;
            p:nth-child(3)
              width:27px;
              line-height:30px;
            p:nth-child(4)
              width:120px;
              height:30px;
              background url("~@/assets/images/button_08.png")
              background-size 100% 100%
              line-height:30px;
              font-size:$font_12;
          .button-box
            margin-left:32px;
            display flex
            height:30px;
            width:80px;
            background:url("~@/assets/images/button_03.png");
            background-size:100% 100%;
            img
              display block
              height:20px;
              width:20px;
              margin:5px 6px 0 13px;
            p
              line-height:30px;
              font-size:$font_12;
              color:$color_ff;
        .top-right-box
          display flex
          margin-top: 20px;
          margin-left: 1330px;
          .add-button
            width:110px;
            height:30px;
            background:url("~@/assets/images/button_06_1.png");
            background-size:100% 100%;
            line-height:30px
            color:$color_ff;
            font-size:$font_12;
            padding-left:44px;
            text-align left
          .check-button
            width:110px;
            height:30px;
            background:url("~@/assets/images/button_06_2.png");
            background-size:100% 100%;
            line-height:30px
            color:$color_ff;
            font-size:$font_12;
            padding-left:44px;
            text-align left
            margin-left:30px;
          .del-button
            margin-left:30px;
            width:110px;
            height:30px;
            background:url("~@/assets/images/button_05_1.png");
            background-size:100% 100%;
            line-height:30px
            color:$color_ff;
            font-size:$font_12;
            padding-left:41px;
            text-align left
          .text-p
            width:90px;
            color:$color_ff;
            line-height:30px
            font-size:$font_12;
      //表格
      .table-box
        width:1710px !important;
        margin:20px 105px;
        text-align center !important
        //状态监控
        .type-box
          display flex
          p:nth-child(1)
            width:100px;
          p:nth-child(2)
            margin-left:20px;
            height:26px;
            line-height:26px;
            width:70px;
            background url("~@/assets/images/button_14.png")
            background-size 100% 100%
            color:#333;
            font-size:12px;
        /*点击详情*/
        .table-info-p-one
          display inline-block
        .table-info-p-two
          display inline-block
          width:60px;
          height:20px;
          color:$color_33;
          font-size:$font_12;
          background url("~@/assets/images/button_14.png")
          background-size 100% 100%
          border-radius:4px;
        .colorA
          color:$theme3;
        .color2
          color:#4fd1f3;
        .color3
          color:#72c9d0;
        .color4
          color:#68a4a5;
        .color5
          color:#e9ffce;
        .color6
          color:#f4db87;
        .color7
          color:#ec9e4b;
        .color8
          color:#7ce030;
        .table-min-button-1
          width:210px;
        .table-min-button-2
          width:145px;
        .table-min-button-3
          width:65px;
        .table-min-button
          margin:0 auto;
          display flex
          .table-min-button-box-one
            height:20px;
            width:60px;
            font-size:$font_14;
            color:$theme;
            display flex
            margin-right:11px;
            img
              display block
              height:20px;
              width:20px;
              margin-right:4px;
          .table-min-button-box-two
            height:20px;
            width:60px;
            font-size:$font_14;
            color:$theme;
            display flex
            margin-right:11px;
            img
              display block
              height:20px;
              width:20px;
              margin-right:4px;
          .table-min-button-box-three
            height:20px;
            width:70px;
            font-size:$font_14;
            color:$theme3;
            display flex
            img
              display block
              height:20px;
              width:20px;
              margin-right:4px;
      //时间日历
      .time-max-big-box
        z-index 6
        height:100%;
        width:100%;
        position: absolute
        top:0;
        left:0;
        background:rgba(0,0,0,0.3);
        .time-big-box
          z-index 6
          height:750px;
          width:660px;
          position: absolute
          top:50%;
          left:50%;
          transform :translate3d(-50%,-50%,0)
          margin:auto;
          background $color_ff
          border-radius:8px;
          border:4px solid $theme;
          .button-box
            display flex
            color:$color_ff;
            width:390px;
            margin:20px auto;
            p:nth-child(1)
              height:30px;
              line-height:30px;
              width:120px;
              background:url("~@/assets/images/button_10.png");
              background-size 100% 100%
            p:nth-child(2)
              margin-left:20px;
              height:30px;
              line-height:30px;
              width:120px;
              background:url("~@/assets/images/button_05.png");
              background-size 100% 100%
            p:nth-child(3)
              margin-left:20px;
              height:30px;
              line-height:30px;
              width:120px;
              background:url("~@/assets/images/button_02.png");
              background-size 100% 100%

    .pdf-max-box
      position absolute
      left:0;
      top:0;
      width:100%;
      height:100%;
      background:rgba(0,0,0,0.7);
      z-index:20;
      #pdf-box
        height:642px;
        width:595px
        background:$color_ff;
        margin:140px auto 0;
        .pdf-title
          text-align:center;
          font-size:20px;
          line-height:100px;
        div
          margin:0 80px;
          display flex
          p:nth-child(2)
            flex:1;
          p
            text-align:left;
            font-size:16px;
            line-height:18px;
            padding:11px 0;
      .pdf-button-box
        display flex
        width 200px
        margin:20px auto;
        p
          width:92px;
          height:30px;
          color:$color_ff;
          font-size:14px;
          text-align center
          line-height:30px;
          cursor:pointer
        p:nth-child(1)
          background:url("~@/assets/images/button_10.png");
          margin-right:16px;
        p:nth-child(2)
          background:url("~@/assets/images/button_09.png");
    //修改日期选择样式
    /*
    .el-calendar
      background $color_ff
    */
    //修改table表格样式
    .el-table
      background rgba(6,177,240,0.2)
    .el-table /deep/ .el-table__empty-text
      width: 100%;
      text-align left
      margin-left:825px;
    .el-table /deep/ .el-table__body-wrapper::-webkit-scrollbar
      width: 4px;     /*高宽分别对应横竖滚动条的尺寸*/
      height: 4px;
    .el-table /deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb
      border-radius: 5px;
      -webkit-box-shadow: inset 0 0 5px $theme;
      background: $theme;
    .el-table /deep/ .el-table__body-wrapper::-webkit-scrollbar-track
      -webkit-box-shadow: inset 0 0 5px rgba(255,255,255,0);
      border-radius: 0;
      background: rgba(255,255,255,0);
    .el-table /deep/ tr
    .el-table /deep/ th
      background rgba(6,177,240,0)
    .el-table::before
      height:0;
    .el-table /deep/ .cell
      max-height:46px;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
    .el-table /deep/ td
    .el-table /deep/ th.is-leaf
      border-bottom:0!important;
    .el-table /deep/ .el-checkbox__inner
      //background rgba(6,177,240,0.2)
      border 1px solid #216f93 !important
    .el-table /deep/ thead
      color:$color_ff;
    .el-table
      color:$color_a1
    .el-table /deep/ th
      text-align-last: center;
    .el-table /deep/ td
      text-align-last: center;
    .el-table /deep/ tbody tr:hover > td
      background rgba(6,177,240,0.2)
      color:$theme;
    .el-table /deep/ .el-checkbox
      width:14px;
      margin:0 auto;
      display block
    //修改动作条样式
    .el-pagination.is-background /deep/ .btn-next
    .el-pagination.is-background /deep/ .btn-prev
    .el-pagination.is-background /deep/ .el-pager li
      background:url("~@/assets/images/button_13.png");
      color:$color_ff;
    .el-pagination.is-background /deep/ .el-pager li:not(.disabled).active
      background:url("~@/assets/images/button_14.png");
      color:$color_ff;
    .colorA
      color :$theme;
    ::-webkit-input-placeholder
      color: $border_1;
    ::-moz-placeholder
      color: $border_1;
    ::-ms-input-placeholder
      color: $border_1;

</style>
