<template>
  <div class="app-container">
    <el-row :gutter="10">
    <el-col :span="6">
      <el-card :style="{height:leftHeight+'px'}" class="leftCard">
        <h5>任务列表</h5>
        <el-select
          v-model="listQuery.belong_dept"
          placeholder="报送部门"
          @change="handleFilter"
        >
          <el-option
            v-for="item in orgData"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
        <el-table :data="dataList.results" @row-click="itemClick">
          <el-table-column type="expand" >
            <template slot-scope="props"  v-if="props.row.task2_&&props.row.task2_.type==20">
              <el-form label-position="left" inline class="demo-table-expand">
                <el-form-item label="应发报告">
                  <span>{{ props.row.num_expect }}</span>
                </el-form-item>
                <el-form-item label="已发报告">
                  <span>{{ props.row.num_issue }}</span>
                </el-form-item>
                <el-form-item label="重大事故">
                  <span>{{ props.row.num_acc }}</span>
                </el-form-item>
                <el-form-item label="风险识别">
                  <span>{{ props.row.num_risk }}</span>
                </el-form-item>
                <el-form-item label="不准确报告">
                  <span>{{ props.row.num_error }}</span>
                </el-form-item>
                <el-form-item label="超期报告">
                  <span>{{ props.row.num_overdue }}</span>
                </el-form-item>
                <el-form-item label="能力验证结果">
                  <span>{{ props.row.num_pt }}</span>
                </el-form-item>
                <el-form-item label="验证结果满意">
                  <span>{{ props.row.num_pt_10 }}</span>
                </el-form-item>
                <el-form-item label="客户投诉">
                  <span>{{ props.row.num_complaint }}</span>
                </el-form-item>
                <el-form-item label="客户投诉结果">
                  <span>{{ props.row.num_complaint_10 }}</span>
                </el-form-item>
                <el-form-item label="外部监督检查">
                  <span>{{ props.row.num_oinspect }}</span>
                </el-form-item>
               
              </el-form>
            </template>
          </el-table-column>
          <el-table-column label="类型" align="center">
            <template slot-scope="scope" v-if="scope.row.task2_">
              <span v-if="scope.row.task2_.type=='10'" type="warning">目标制定</span>
              <span v-else type="primary">日常监督</span>
            </template>
          </el-table-column>
          <el-table-column label="年份" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.task2_">{{ scope.row.task2_.year }}</span>
            </template>
          </el-table-column>
          <el-table-column label="周期" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.task2_">{{ cycleList[scope.row.task2_.cycle] }}</span>
            </template>
          </el-table-column>
          <el-table-column label="状态" align="center">
            <template slot-scope="scope" v-if="scope.row.task2_">
              <el-tag v-if="scope.row.task2_.state=='10'" type="warning">创建中</el-tag>
              <el-tag v-else-if="scope.row.task2_.state=='20'" type="primary">进行中</el-tag>
              <el-tag v-else type="success">已关闭</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="应提交" prop="count_all" align="center"></el-table-column>
          <el-table-column label="已提交" prop="count_up" align="center"></el-table-column>
        </el-table>
        <pagination
        style="position:absolute;bottom:10px"
            v-show="dataList.count > 0"
            :background = false
            :total="dataList.count"
            :page.sync="listQuery.page"
            :limit.sync="listQuery.page_size"
            @pagination="getList"
          />
      </el-card>
    </el-col>
    <el-col :span="18" :style="{height:leftHeight+'px','overflow-y': 'scroll'}">
      <div v-if="type==10">
        <el-card>
          <div style="display: flex;justify-content: space-between;">
            <span style="font-weight: bold;margin-top: px;">{{deptName}} {{task2Item.task2_.year}}年目标制定</span>
            <el-button type="primary" @click="addNewGoal">添加新目标</el-button>
          </div>
          <div>
            <span>指导文件:</span>
            <div v-if="task.pgoal_1_file_!==null">
              <el-link :href="task.pgoal_1_file_.path" target="_blank" type="primary">{{task.pgoal_1_file_.name}}</el-link>
            </div>
            <div v-if="task.pgoal_2_file_!==null">
              <el-link :href="task.pgoal_2_file_.path" target="_blank" type="primary">{{task.pgoal_2_file_.name}}</el-link>
            </div>
            <div v-if="task.pgoal_3_file_!==null">
              <el-link :href="task.pgoal_3_file_.path" target="_blank" type="primary">{{task.pgoal_3_file_.name}}</el-link>
            </div>
            <div v-if="task.pgoal_4_file_!==null">
              <el-link :href="task.pgoal_4_file_.path" target="_blank" type="primary">{{task.pgoal_4_file_.name}}</el-link>
            </div>
            <div v-if="task.pgoal_5_file_!==null">  
              <el-link :href="task.pgoal_5_file_.path" target="_blank" type="primary">{{task.pgoal_5_file_.name}}</el-link>
            </div>
          </div>
        </el-card>
        <el-row >
          <el-col style="margin-top:10px" v-for="(item,$index) in subData">
            <el-card>
              <div style="padding:10px 20px 5px 10px">
                <div v-if="item.goal_key" style="font-size:18px;height: 25px;">
                  {{item.goal_name}}
                  <span  v-if="item.goal_name=='重大质量事故'">(件)</span>
                  <span  v-else-if="item.goal_key!=''&&item.goal_key!=='other'">(%)</span>
                  <span  v-else-if="item.goal_key==''||item.goal_key==='other'"></span>
                  
                  <div class="tabType" v-if="item.goal_key==''||item.goal_key=='other'">自定义目标</div>
                  <div class="tabType tabTypeBasic" v-else>基础目标</div>
                </div>
                <div v-else style="font-size:18px;height: 25px;">新增目标</div>
                <el-row style="height:165px">
                  <div  v-if="!item.goal_key" style="font-size:18px">目标名称：
                    <el-input v-model="item.goal_name" style="width:60%"/>
                  </div>
                  <el-col>
                    <div v-if="item.goal_key&&item.goal_key!=''&&item.goal_key!='other'"
                    >
                      集团目标值：{{ item. goal_value_a}}
                    </div>
                  </el-col>
                  <el-col :span="12">
                    <p>公司目标：
                      <el-input-number v-if="item.goal_name=='重大质量事故'" style="width:120px" v-model="item.goal_value_b" :precision="0" :min="0" :max="100" controls-position="right" size="large"/>
                      <el-input-number v-else style="width:120px" v-model="item.goal_value_b" :precision="1" :min="0" :max="100" controls-position="right" size="large"/>
                      <!-- <el-input v-model="item.goal_value_b" type="number" style="width:100px"/> -->
                    </p>
                  </el-col>
                  <el-col :span="24">
                    <div style="display:flex;position:relative">
                      <span style="display: inline-block;line-height: 33px;">相应实施细则：</span>
                      <el-upload
                        ref="upload1"
                        :action="upUrl"
                        class="taskUpload"
                        :on-preview="handlePreview"
                        :on-success="(response, file, fileList)=>{return handleUpSuccess(response, file, fileList,$index)}"
                        :on-remove="(file, fileList)=>{return handleRemove(file, fileList, $index)}"
                        :headers="upHeaders"
                        :file-list="item.fileLists"
                        :limit="1"
                        accept=".doc,.docx,.xls,.xlsx,.ppt,.pptx,.pdf"
                      >
                        <el-button size="small" type="primary">上传文件</el-button>
                      </el-upload>
                    </div>
                  </el-col>
                  <el-button size="small" @click="historyFiles(item)" 
                      style="margin-left:10px;height:32px;position: absolute;right: 0px;top:-25px">历史文件</el-button>
                </el-row>
                <div style="text-align:right;" v-if="task2Item.task2_.state!==30">
                  <el-button v-if="!item.goal_key||item.goal_key==''||item.goal_key=='other'" size="small" type="warning" @click="delGoal(item,$index)">删除</el-button>
                  <el-button size="small" type="primary" v-loading="saveLoading" @click="saveGoal(item)">保存</el-button>
                </div>
              </div>
              <el-dialog title="历史文件" :visible.sync="historyFile">
                  <div
                    class="recordfiles"
                    v-for="(item, index) in fileList"
                    v-bind:key="item.id"
                  >
                  <p>
                    <el-link :href="item.path" target="_blank" type="primary">
                      {{item.name}}
                    </el-link>
                  </p>
                  </div>
                  <div style="text-align: right">
                      <el-button type="danger" @click="historyFile = false">关闭</el-button>
                  </div>
              </el-dialog>
            </el-card>
          </el-col>
        </el-row>
      </div>
      <div v-else-if="type==20">
        <el-card id="numCard">
          <span style="font-weight: bold;margin-bottom: 10px;display: inline-block;">{{deptName}}{{task2Item.task2_.year}}年{{ cycleList[task2Item.task2_.cycle] }}日常监督</span>
          <div style="display:flex;justify-content:space-between;">
            <el-form
            ref="Form"
            :model="numbers"
            label-width="115px"
            label-position="right"
            :rules="rule"
            >
              <el-col :lg="8"  :md="12" :sm="24">
                <el-form-item label="重大事故：" prop="num_acc">
                <el-input v-model="numbers.num_acc" type="number" style="width:150px"/>
                <span class="danwei">件</span>
               </el-form-item>
              </el-col>
              <el-col :lg="8"  :md="12" :sm="24">
                <el-form-item label="应发报告：" prop="num_expect">
                <el-input v-model="numbers.num_expect" type="number" style="width:150px"/>
                <span class="danwei">件</span>
               </el-form-item>
              </el-col>
              <el-col :lg="8"  :md="12" :sm="24">
                <el-form-item label="已发放报告：" prop="num_issue">
                <el-input v-model="numbers.num_issue" type="number" style="width:150px"/>
                <span class="danwei">件</span>
               </el-form-item>
              </el-col>
            </el-form>
            <div style="position: absolute; right: 50px; top: 5px;">
                <el-button type="primary" size="mini" @click="numsConfirm('Form')">确认</el-button>
            </div>
          </div>
        </el-card>
        <el-row >
          <!-- 1\外部监督检查信息 -->
          <el-col style="margin-top:10px">
            <el-card >
              <div class="cardHead">
                <span class="cardTitle">外部监督检查信息</span>
                <div>
                  <el-button v-if="oinspectList.length==0" size="mini" type="primary" @click="handleNoNum('oinspect')">无记录</el-button>
                  <el-button type="primary" size="mini" @click="handleImport('oinspect')">导入</el-button>
                  <el-button type="primary" size="mini" icon="el-icon-plus"  @click="handleCreate('oinspect')"></el-button>
                  <el-button type="primary" size="mini" @click="exportTableExcel('oinspect','外部监督检查信息')">导出</el-button>
                </div>
              </div>
              <el-table
                  :data="oinspectList"
                  fit
                  stripe
                  highlight-current-row
                  max-height="300"
                >
                <el-table-column label="序号" type="index" width="50" />
                <el-table-column label="检查类型">
                  <template slot-scope="scope">
                      <span>{{ cateOptions[scope.row.cate] }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="检查机构" prop="checker"></el-table-column>
                <el-table-column label="检查日期" prop="date_inspect"></el-table-column>
                <el-table-column label="检查结果" prop="result"></el-table-column>
                <el-table-column
                    align="center"
                    label="操作"
                    width="80px"
                >
                  <template slot-scope="scope">
                      <el-link
                      v-if="checkPermission(['task2do'])"
                      type="primary"
                      @click="handleEdit('oinspect',scope.row)"
                      >编辑</el-link>
                      <el-link
                      v-if="checkPermission(['task2do'])"
                      type="danger"
                      @click="handleDelete('oinspect',scope.row)"
                      >删除</el-link>
                  </template>
                </el-table-column>
              </el-table>
              <el-table
                  :data="oinspectList"
                  fit
                  stripe
                  highlight-current-row
                  id="oinspect"
                  style="display: none;"
                >
                <el-table-column label="序号" type="index" width="50" />
                <el-table-column label="检查类型">
                  <template slot-scope="scope">
                      <span>{{ cateOptions[scope.row.cate] }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="检查机构" prop="checker"></el-table-column>
                <el-table-column label="检查日期" prop="date_inspect"></el-table-column>
                <el-table-column label="检查结果" prop="result"></el-table-column>
              </el-table>
            </el-card>
            <saveoin-dialog
              v-if="dialogOin"
              ref="saveOinDialog"
              @success="oinSaveSuccess"
              @closed="dialogOin = false"
            >
            </saveoin-dialog>
          </el-col>
          <!-- 2\不准确报告/证书 -->
          <el-col  style="margin-top:10px">
            <el-card >
              <div class="cardHead">
                <span class="cardTitle">不准确报告/证书</span>
                <div>
                  <el-button v-if="rcList.length==0" size="mini" type="primary" @click="handleNoNum('rc')">无记录</el-button>
                  <el-button type="primary" size="mini" @click="handleImport('rc')">导入</el-button>
                  <el-button type="primary" size="mini" icon="el-icon-plus"  @click="handleCreate('rc')"></el-button>
                  <el-button type="primary" size="mini" @click="exportTableExcel('rcList','不准确报告/证书')">导出</el-button>
                </div>
              </div>
              <el-table
                  :data="rcList"
                  fit
                  stripe
                  highlight-current-row
                  max-height="300"
                >
                <el-table-column label="序号" type="index" width="50" />
                <el-table-column label="报告/证书编号" prop="number"></el-table-column>
                <el-table-column label="更改后报告/证书编号" prop="number_correct"></el-table-column>
                <el-table-column label="出错原因" prop="reason_error"></el-table-column>
                <el-table-column label="更改报告/证书发放日期" prop="date_issue"></el-table-column>
                <el-table-column
                    align="center"
                    label="操作"
                    width="80px"
                >
                  <template slot-scope="scope">
                      <el-link
                      v-if="checkPermission(['task2do'])"
                      type="primary"
                      @click="handleEdit('rc',scope.row)"
                      >编辑</el-link>
                      <el-link
                      v-if="checkPermission(['task2do'])"
                      type="danger"
                      @click="handleDelete('rc',scope.row)"
                      >删除</el-link>
                  </template>
                </el-table-column>
              </el-table>
              <el-table
                  :data="rcList"
                  fit
                  stripe
                  highlight-current-row
                  :height="tableHeight"
                  id="rcList"
                  style="display: none;"
                >
                <el-table-column label="序号" type="index" width="50" />
                <el-table-column label="报告/证书编号" prop="number"></el-table-column>
                <el-table-column label="更改后报告/证书编号" prop="number_correct"></el-table-column>
                <el-table-column label="出错原因" prop="reason_error"></el-table-column>
                <el-table-column label="更改报告/证书发放日期" prop="date_issue"></el-table-column>
              </el-table>
            </el-card>
          </el-col>
          <!-- 3\超期报告/证书 -->
          <el-col  style="margin-top:10px">
            <el-card >
              <div class="cardHead">
                <span class="cardTitle">超期报告/证书</span>
                <div>
                  <el-button v-if="rc2List.length==0" size="mini" type="primary" @click="handleNoNum('rc2')">无记录</el-button>
                  <el-button type="primary" size="mini" @click="handleImport('rc2')">导入</el-button>
                  <el-button type="primary" size="mini" icon="el-icon-plus"  @click="handleCreate('rc2')"></el-button>
                  <el-button type="primary" size="mini" @click="exportTableExcel('rc2','超期报告/证书')">导出</el-button>
                </div>
              </div>
              <el-table
                  :data="rc2List"
                  fit
                  stripe
                  highlight-current-row
                  max-height="300"
                >
                <el-table-column label="序号" type="index" width="50" />
                <el-table-column label="超期报告/证书编号" prop="number"></el-table-column>
                <el-table-column label="业务受理日期" prop="date_accept"></el-table-column>
                <el-table-column label="报告/证书应发日期" prop="date_expect"></el-table-column>
                <el-table-column label="报告/证书实际发放日期" prop="date_issue"></el-table-column>
                <el-table-column
                    align="center"
                    label="操作"
                    width="80px"
                >
                  <template slot-scope="scope">
                      <el-link
                      v-if="checkPermission(['task2do'])"
                      type="primary"
                      @click="handleEdit('rc',scope.row)"
                      >编辑</el-link>
                      <el-link
                      v-if="checkPermission(['task2do'])"
                      type="danger"
                      @click="handleDelete('rc',scope.row)"
                      >删除</el-link>
                  </template>
                </el-table-column>
              </el-table>
              <el-table
                  :data="rc2List"
                  fit
                  stripe
                  highlight-current-row
                  :height="tableHeight"
                  id="rc2"
                  style="display: none;"
                >
                <el-table-column label="序号" type="index" width="50" />
                <el-table-column label="超期报告/证书编号" prop="number"></el-table-column>
                <el-table-column label="业务受理日期" prop="date_accept"></el-table-column>
                <el-table-column label="报告/证书应发日期" prop="date_expect"></el-table-column>
                <el-table-column label="报告/证书实际发放日期" prop="date_issue"></el-table-column>
              </el-table>
            </el-card>
            <saverc-dialog
              v-if="dialogRc"
              ref="saveRcDialog"
              @success="rcSaveSuccess"
              @closed="dialogRc = false"
            >
            </saverc-dialog>
          </el-col>
          <!-- 4\能力验证结果 -->
          <el-col style="margin-top:10px">
            <el-card >
              <div class="cardHead">
                <span class="cardTitle">能力验证结果</span>
                <div>
                  <el-button v-if="ptList.length==0" size="mini" type="primary" @click="handleNoNum('pt')">无记录</el-button>
                  <el-button type="primary" size="mini" @click="handleImport('pt')">导入</el-button>
                  <el-button type="primary" size="mini" icon="el-icon-plus"  @click="handleCreate('pt')"></el-button>
                  <el-button type="primary" size="mini" @click="exportTableExcel('ptList','能力验证结果')">导出</el-button>
                </div>
              </div>
              <el-table
                  :data="ptList"
                  fit
                  stripe
                  highlight-current-row
                  max-height="300"
                >
                <el-table-column label="序号" type="index" width="50" />
                <el-table-column label="能力验证名称" prop="name"></el-table-column>
                <el-table-column label="项目编号" prop="number"></el-table-column>
                <el-table-column label="组织方" prop="organizer"></el-table-column>
                <el-table-column label="参加参数名称" prop="params"></el-table-column>
                <el-table-column label="结果">
                  <template slot-scope="scope">
                      <span>{{ resultsOptions[scope.row.result] }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="结果处理状况">
                  <template slot-scope="scope">
                      <span>{{ handleOptions[scope.row.handle_result] }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    align="center"
                    label="操作"
                    width="80px"
                >
                  <template slot-scope="scope">
                      <el-link
                      v-if="checkPermission(['task2do'])"
                      type="primary"
                      @click="handleEdit('pt',scope.row)"
                      >编辑</el-link>
                      <el-link
                      v-if="checkPermission(['task2do'])"
                      type="danger"
                      @click="handleDelete('pt',scope.row)"
                      >删除</el-link>
                  </template>
                </el-table-column>
              </el-table>
              <el-table
                  :data="ptList"
                  fit
                  stripe
                  highlight-current-row
                  :height="tableHeight"
                  id="ptList"
                  style="display: none;"
                >
                <el-table-column label="序号" type="index" width="50" />
                <el-table-column label="能力验证名称" prop="name"></el-table-column>
                <el-table-column label="项目编号" prop="number"></el-table-column>
                <el-table-column label="组织方" prop="organizer"></el-table-column>
                <el-table-column label="参加参数名称" prop="params"></el-table-column>
                <el-table-column label="结果">
                  <template slot-scope="scope">
                      <span>{{ resultsOptions[scope.row.result] }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="结果处理状况">
                  <template slot-scope="scope">
                      <span>{{ handleOptions[scope.row.handle_result] }}</span>
                    </template>
                </el-table-column>
              </el-table>
            </el-card>
            <savept-dialog
              v-if="dialogPt"
              ref="savePtDialog"
              @success="ptSaveSuccess"
              @closed="dialogPt = false"
            >
            </savept-dialog>
          </el-col>
           <!-- 5\客户投诉信息 -->
          <el-col style="margin-top:10px">
            <el-card >
              <div class="cardHead">
                <span class="cardTitle">客户投诉信息</span>
                <div>
                  <el-button v-if="complaintList.length==0" size="mini" type="primary" @click="handleNoNum('complaint')">无记录</el-button>
                  <el-button type="primary" size="mini" @click="handleImport('complaint')">导入</el-button>
                  <el-button type="primary" size="mini" icon="el-icon-plus"  @click="handleCreate('complaint')"></el-button>
                  <el-button type="primary" size="mini" @click="exportTableExcel('complaint','客户投诉信息')">导出</el-button>
                </div>
              </div>
              <el-table
                  :data="complaintList"
                  fit
                  stripe
                  highlight-current-row
                  max-height="300"
                >
                <el-table-column label="序号" type="index" width="50" />
                <el-table-column label="投诉人/机构" prop="complainant"></el-table-column>
                <el-table-column label="投诉内容" prop="content"></el-table-column>
                <el-table-column label="投诉日期" prop="date_occurrence"></el-table-column>
                <el-table-column label="处理结果反馈日期" prop="date_feedback"></el-table-column>
                <el-table-column label="客户是否满意">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.is_satisfied" type="primary">满意</el-tag>
                        <el-tag v-else type="warning">不满意</el-tag>
                    </template>
                </el-table-column>
                <el-table-column
                    align="center"
                    label="操作"
                    width="80px"
                >
                  <template slot-scope="scope">
                      <el-link
                      v-if="checkPermission(['task2do'])"
                      type="primary"
                      @click="handleEdit('complaint',scope.row)"
                      >编辑</el-link>
                      <el-link
                      v-if="checkPermission(['task2do'])"
                      type="danger"
                      @click="handleDelete('complaint',scope.row)"
                      >删除</el-link>
                  </template>
                </el-table-column>
              </el-table>
              <el-table
                  :data="complaintList"
                  fit
                  stripe
                  highlight-current-row
                  :height="tableHeight"
                  id="complaint"
                  style="display: none;"
                >
                <el-table-column label="序号" type="index" width="50" />
                <el-table-column label="投诉人/机构" prop="complainant"></el-table-column>
                <el-table-column label="投诉内容" prop="content"></el-table-column>
                <el-table-column label="投诉日期" prop="date_occurrence"></el-table-column>
                <el-table-column label="处理结果反馈日期" prop="date_feedback"></el-table-column>
                <el-table-column label="客户是否满意">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.is_satisfied" type="primary">满意</el-tag>
                        <el-tag v-else type="warning">不满意</el-tag>
                    </template>
                </el-table-column>
              </el-table>
            </el-card>
            <savecom-dialog
              v-if="dialogCom"
              ref="saveComDialog"
              @success="comSaveSuccess"
              @closed="dialogCom = false"
            >
            </savecom-dialog>
          </el-col>
          <!-- 6\风险识别信息 -->
          <el-col style="margin-top:10px">
            <el-card >
              <div class="cardHead">
                <span class="cardTitle">风险识别信息</span>
                <div>
                  <el-button v-if="riskList.length==0" size="mini" type="primary" @click="handleNoNum('risk')">无记录</el-button>
                  <el-button type="primary" size="mini" @click="handleImport('risk')">导入</el-button>
                  <el-button type="primary" size="mini" icon="el-icon-plus"  @click="handleCreate('risk')"></el-button>
                  <el-button type="primary" size="mini" @click="exportTableExcel('risk','风险识别信息')">导出</el-button>
                </div>
              </div>
              <el-table
                  :data="riskList"
                  fit
                  stripe
                  highlight-current-row
                  max-height="300"
                >
                <el-table-column label="序号" type="index" width="50" />
                <el-table-column label="风险事实描述" prop="content"></el-table-column>
                <el-table-column label="风险类别">
                  <template slot-scope="scope">
                      <span>{{ levelOptions[scope.row.level] }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="风险代码" prop="code"></el-table-column>
                <el-table-column label="整改情况">
                  <template slot-scope="scope">
                      <span>{{ codeOptions[scope.row.state] }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    align="center"
                    label="操作"
                    width="80px"
                >
                  <template slot-scope="scope">
                      <el-link
                      v-if="checkPermission(['task2do'])"
                      type="primary"
                      @click="handleEdit('risk',scope.row)"
                      >编辑</el-link>
                      <el-link
                      v-if="checkPermission(['task2do'])"
                      type="danger"
                      @click="handleDelete('risk',scope.row)"
                      >删除</el-link>
                  </template>
                </el-table-column>
              </el-table>
              <el-table
                  :data="riskList"
                  fit
                  stripe
                  highlight-current-row
                  :height="tableHeight"
                  id="risk"
                  style="display: none;"
                >
                <el-table-column label="序号" type="index" width="50" />
                <el-table-column label="风险事实描述" prop="content"></el-table-column>
                <el-table-column label="风险类别">
                  <template slot-scope="scope">
                      <span>{{ levelOptions[scope.row.level] }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="风险代码" prop="code"></el-table-column>
                <el-table-column label="整改情况">
                  <template slot-scope="scope">
                      <span>{{ codeOptions[scope.row.state] }}</span>
                    </template>
                </el-table-column>
              </el-table>
            </el-card>
            <saverisk-dialog
              v-if="dialogRisk"
              ref="saveRiskDialog"
              @success="riskSaveSuccess"
              @closed="dialogRisk = false"
            >
            </saverisk-dialog>
          </el-col>
          
        </el-row>
        <el-dialog
            :visible.sync="impDialogVisible"
            title="导入"
        >
          <el-form
            ref="Form"
            label-width="80px"
            label-position="right"
            :rules="rule"
            >
            <el-form-item label="下载模板" prop="path">
              <a :href="downloadUrl">点击下载模板</a>
            </el-form-item>
            <el-form-item label="导入文件" prop="path">
              <el-upload
                ref="upload1"
                :action="upUrl"
                :on-preview="handlePreview"
                :on-success="handleSuccessImp"
                :on-remove="handleRemoveImp"
                :headers="upHeaders"
                :limit="1"
                accept=".xls,.xlsx"
              >
                <el-button size="small" type="primary">上传文件</el-button>
              </el-upload>
            </el-form-item>
          </el-form>
          <div style="text-align: right">
            <el-button type="danger" @click="impDialogVisible = false">取消</el-button>
            <el-button type="primary" @click="imporCconfirm()">确认</el-button>
          </div>
        </el-dialog>
      </div>
    </el-col>
  </el-row>
  </div>
</template>
<script>
  import { getMyTask2Do,getPgoalDeptList,createPgoalDept,updatePgoalDept,noNum,
    deletePgoalDept,saveNum,getPtList,deletePt,getRcList,deleteRc,getRiskList,
    deleteRisk,getComplaintList,deleteComplaint,getOinspectList,deleteOinspect,
    impPt,impRc,impOverdue,impRisk,impComplaint,impOinspect,getPgoalList} from "@/api/task";
    import { getOrgList, getSubOrgList } from "@/api/org";
  import checkPermission from "@/utils/permission";
  import Pagination from "@/components/Pagination"; 
  import { upUrl, upHeaders } from "@/api/file";
  import savercDialog from "./rc_form.vue";
  import saveptDialog from "./pt_form.vue";
  import saveriskDialog from "./risk_form.vue";
  import savecomDialog from "./complaint_form.vue";
  import saveoinDialog from "./oinspect_form.vue";
  import FileSaver from "file-saver";
  import * as XLSX from "xlsx";
  import user from "@/store/modules/user";
  const defaulttask = {
      year: "",
      cycle: "",
      type: 10,
  };
  export default {
      components:{Pagination,savercDialog,saveptDialog,
        saveriskDialog,savecomDialog,saveoinDialog},
      data(){
          return{
              downloadUrl: process.env.VUE_APP_BASE_API, 
              leftHeight:null,
              tableHeight:null,
              upHeaders: upHeaders(),
              upUrl: upUrl(),
              dialogType:"new",
              orgData:[],
              subData:[],
              fileList:[],
              task2do:'',
              taskYear:'',
              deptName:'',
              numbers:{
                num_issue:null,//已发放报告数量
                num_expect:null,//应发报告数
                num_acc:0,
              },
              task2Item:{},
              task:{},
              historyFile:false,
              saveLoading:false,
              listLoading:false,
              dialogVisible:false,
              impDialogVisible:false,
              dataList:{
                  results:[],
                  count:0,
              },
              listQuery:{
                  page: 1,
                  belong_dept:null,
                  page_size: 20,
              },
              typeOptions:{
                  10:"目标制定",
                  20:"日常监督"
              },
              type:null,
              cycleList:["年","1-2月","3-4月","5-6月","7-8月","9-10月","11-12月"],
              rule: {
                num_expect: [{ required: true, message: "请填写", trigger: "blur" }],
                num_issue: [{ required: true, message: "请填写", trigger: "blur" }],
                num_acc: [{ required: true, message: "请填写", trigger: "blur" }],
                path: [{ required: true, message: "请选择文件", trigger: "blur" }],
              },
              impForm:{
                path:'',
                task2do:''
              },
              rcList:[],//报告证书{应发/超期}
              rc2List:[],
              dialogRc:false,
              ptList:[],//能力验证
              dialogPt:false,
              riskList:[],//风险
              dialogRisk:false,
              complaintList:[],//投诉
              dialogCom:false,
              oinspectList:[],//外部监查
              dialogOin:false,
              resultsOptions:{
                10:'满意',
                20:'有问题',
                30:'不满意'
              },
              handleOptions:{
                10:'已整改',
                20:'被暂停',
                30:'已被撤销认可资格',
              },
              levelOptions:{
                10:'主要风险',
                20:'严重风险',
                30:'重大风险'
              },
              codeOptions:{
                10:'未整改',
                20:'整改中',
                30:'整改完成'
              },
              cateOptions:{
                10:'市场监管部门检查',
                20:'行业主管部门检查',
                30:'其他检查'
              },
          };
      },
      mounted(){
        let height1 = document.getElementsByClassName('app-main')[0].clientHeight;
        this.leftHeight = height1-25;
        this.listQuery.belong_dept =this.$store.getters.dept;
        this.getOrgList();
        this.getList();
      },
      methods:{
        exportTableExcel (id,name) {
          let filename = name+'.xlsx';
            var wb = XLSX.utils.table_to_book(document.getElementById(id),{row:true})
            // console.log(wb.Sheets)
            // console.log(wb.Sheets.Sheet1)
            // console.log(wb.Sheets.Sheet1['!cols'])//undefined
            // wb.Sheets.Sheet1['!cols'][0]={hidden:true}
            // if(id=='ptList'){
            //   wb.Sheets.Sheet1['!cols'][7]={hidden:true}
            // }else if(id=='complaint'){
            //   wb.Sheets.Sheet1['!cols'][6]={hidden:true}
            // }else{
            //   wb.Sheets.Sheet1.F1 = {hidden:true}
            //   wb.Sheets.Sheet1['!cols'][5]={hidden:true}
            // }
            var wbout = XLSX.write(wb, {  bookType: 'xlsx', bookSST: true, type: 'array' })
            try { 
                FileSaver.saveAs(new Blob([wbout], {  type: 'application/octet-stream' }), filename)
            } catch (e) {  if (typeof console !== 'undefined') console.log(e, wbout)}
            return wbout
        },
        checkPermission,
        getOrgList() {
          let that = this;
          if (that.checkPermission(["record_confirm"])) {
            getOrgList({ can_supervision: true }).then((res) => {
              that.orgData = res.data;
              that.orgData.filter(item=>{
                if(item.id==that.listQuery.belong_dept){
                  that.deptName = item.name;
                }
              })
            });
          } else {
            getSubOrgList().then((res) => {
              that.orgData = res.data;
              that.orgData.filter(item=>{
                if(item.id==that.listQuery.belong_dept){
                  that.deptName = item.name;
                }
              })
            });
          }
        },
        getList(){
            this.listLoading = true;
            this.dataList.results =[];
            this.dataList.count =0;
            getMyTask2Do(this.listQuery).then((response) => {
                if (response.data) {
                  this.dataList = response.data;
                }
                this.listLoading = false;
            });
        },
        handleFilter() {
          let that = this;
          that.subData = [];
          that.rcList=[],//报告证书{应发/超期}
          that.rc2List=[]
          that.ptList=[],//能力验证
          that.riskList=[],//风险
          that.complaintList=[],//投诉
          that.oinspectList=[],//外部监查
          that.numbers.num_acc = '';
          that.numbers.num_expect = '';
          that.numbers.num_issue = '';
          that.listQuery.page = 1;
          that.orgData.filter(item=>{
            if(item.id==that.listQuery.belong_dept){
              that.deptName = item.name;
            }
          })
          that.getList();
        },
        resetFilter() {
            this.listQuery = {
                page: 1,
                belong_dept:'',
                page_size: 20,
            }
            this.getList();
        },
        itemClick(item){
          // console.log(item);
          let that = this;
          that.task2Item = item;
          that.task2do = item.id;
          that.type = item.task2_.type;
          if(item.task2_.type==10){
            that.taskYear = item.task2_.year;
            //获取任务目标值
            getPgoalDeptList({task2do:item.id}).then(res=>{
              let data = res.data.results;
              that.subData = [];
              data.forEach(item => {
                let obj = item;
                let goal_value_a = item.goal_value_a+'';
                if(item.goal_name=='重大质量事故'){
                }else{
                  if(goal_value_a.indexOf('.')>-1){}else{
                    goal_value_a = goal_value_a+'.0';
                    obj.goal_value_a = goal_value_a;
                  }
                }
                obj.fileLists = [];
                if(item.goal_file!==null){
                  let file = {};
                  file.name = item.goal_file_.name;
                  file.value = item.goal_file_.path;
                  obj.fileLists.push(file);
                  that.subData.push(obj);
                }else{
                  that.subData.push(obj);
                }
              });
            })
            //获取集团指导文件
            getPgoalList({year:item.task2_.year,page:0}).then(resp=>{
              that.task= resp.data[0];
              // console.log(that.task)
              // debugger;
            })
          }else{//日常监督
            this.numbers.num_expect = item.num_expect;
            this.numbers.num_issue = item.num_issue;
           this.$nextTick(re=>{
            let height1 = document.getElementsByClassName('app-main')[0].clientHeight;
            let height2 = document.getElementById('numCard').clientHeight;
            let height3 = (height1 - height2 - 200) / 4;
            this.tableHeight = height3;
           })
                //获取6个列表
            this.getPtList();
            this.getRcList();
            this.getRiskList();
            this.getComplaintList();
            this.getOinspectList();
          }
        },
        getRcList(){
          let that = this;
          getRcList({task2do:that.task2do,etype:10,page:0}).then((res) => {
            if (res.code >= 200) {
              that.rcList =res.data;
            }
          });
          getRcList({task2do:that.task2do,etype:20,page:0}).then((res) => {
            if (res.code >= 200) {
              that.rc2List =res.data;
            }
          });
        },
        getPtList(){
          let that = this;
          getPtList({task2do:that.task2do,page:0}).then((res) => {
            if (res.code >= 200) {
              that.ptList=res.data;
            }
          });
        },
        getRiskList(){
          let that = this;
          getRiskList({task2do:that.task2do,page:0}).then((res) => {
            if (res.code >= 200) {
              that.riskList = res.data;
            }
          });
        },
        getComplaintList(){
          let that = this;
          getComplaintList({task2do:that.task2do,page:0}).then((res) => {
            if (res.code >= 200) {
              that.complaintList = res.data;
            }
          });
        },
        getOinspectList(){
          let that = this;
          getOinspectList({task2do:that.task2do,page:0}).then((res) => {
            if (res.code >= 200) {
              that.oinspectList=res.data;
            }
          });
        },
        historyFiles(item){
          this.historyFile = true;
          this.fileList = item.goal_files_;
        },
        addNewGoal(){
          this.subData.push({goal_name:'',goal_file:'',goal_value_b:0,year:this.taskYear});
        },
        delGoal(item,index){
          if(item.id){
            deletePgoalDept(item.id).then(res=>{
              // console.log(res)
              if(res.code>=200){
                this.subData.splice(index,1)
                this.$message.success('删除成功')
              }
            })
          }else{
            this.subData.splice(index,1)
          }
        },
        saveGoal(item){          
          this.saveLoading = true;
          let obj = {};
          obj.year = item.year;
          obj.task2do = this.task2do;
          obj.goal_name = item.goal_name;
          obj.goal_file = item.goal_file;
          obj.goal_value_b = item.goal_value_b;
          if(item.goal_file!==null&&item.goal_file!==''){
            if(item.id){
              updatePgoalDept(item.id,obj).then(res=>{
                this.saveLoading = false;
                if(res.code>=200){
                  this.$message.success('保存成功')
                }
              }).catch(()=>{
                this.saveLoading = false;
              })
            }else{
              createPgoalDept(obj).then(res=>{
                this.saveLoading = false;
                if(res.code>=200){
                  this.$message.success('保存成功')
                }
              }).catch(()=>{
                this.saveLoading = false;
              })
            }
          }else{
            this.$message.warning('请上传实施细则文件')
          }
        },
        handlePreview(file) {
          if ("response" in file) {
            window.open(file.response.data.path);
          } else {
            window.open(file.value); 
          }
        },
        handleUpSuccess(res, file, fileList,index) {
          this.subData[index].goal_file = res.data.id;
        },
        handleRemove(file, fileList, index){
          this.subData[index].goal_file = null;
        },
        handleSuccessImp(res, file, fileList){
          this.impForm.path = res.data.path;
        },
        handleRemoveImp(file, fileList){
          this.impForm.path = '';
        },
        numsConfirm(form){
          this.$refs[form].validate((valid) => {
            if (valid) {
              saveNum(this.task2do,this.numbers).then((res) => {
                if (res.code >= 200) {
                  this.$message.success("成功");
                  this.getList();
                }
              });
            } else {
                return false;
            }
          });
        },
        //添加
        handleCreate(type){
          if(type=='rc'){
            this.dialogRc = true;
            this.$nextTick(() => {
              this.$refs.saveRcDialog.open("add",this.task2do);
            });
          }else if(type=='rc2'){
            this.dialogRc = true;
            this.$nextTick(() => {
              this.$refs.saveRcDialog.open("add2",this.task2do);
            });
          }else if(type=='pt'){
            this.dialogPt = true;
            this.$nextTick(() => {
              this.$refs.savePtDialog.open("add",this.task2do);
            });
          }else if(type=='risk'){
            this.dialogRisk = true;
            this.$nextTick(() => {
              this.$refs.saveRiskDialog.open("add",this.task2do);
            });
          }else if(type=='complaint'){
            this.dialogCom = true;
            this.$nextTick(() => {
              this.$refs.saveComDialog.open("add",this.task2do);
            });
          }else if(type=='oinspect'){
            this.dialogOin = true;
            this.$nextTick(() => {
              this.$refs.saveOinDialog.open("add",this.task2do);
            });
          }
        },
        handleEdit(type,item){
          if(type=='rc'){
            this.dialogRc = true;
            this.$nextTick(() => {
              this.$refs.saveRcDialog.open("edit").setData(item);
            });
          }else if(type=='rc2'){
            this.dialogRc = true;
            this.$nextTick(() => {
              this.$refs.saveRcDialog.open("edit2").setData(item);
            });
          }else if(type=='pt'){
            this.dialogPt = true;
            this.$nextTick(() => {
              this.$refs.savePtDialog.open("edit").setData(item);
            })
          }else if(type=='risk'){
            this.dialogRisk = true;
            this.$nextTick(() => {
              this.$refs.saveRiskDialog.open("edit").setData(item);
            })
          }else if(type=='complaint'){
            this.dialogCom = true;
            this.$nextTick(() => {
              this.$refs.saveComDialog.open("edit").setData(item);
            })
          }else if(type=='oinspect'){
            this.dialogOin = true;
            this.$nextTick(() => {
              this.$refs.saveOinDialog.open("edit").setData(item);
            })
          }
        },
        handleDelete(type,item){
          if(type=='rc'){
            deleteRc(item.id).then(res=>{
              this.getRcList();
            })
          }else if(type=='pt'){
            deletePt(item.id).then(res=>{
              this.getPtList();
            })
          }else if(type=='risk'){
            deleteRisk(item.id).then(res=>{
              this.getRiskList();
            })
          }else if(type=='complaint'){
            deleteComplaint(item.id).then(res=>{
              this.getComplaintList();
            })
          }else if(type=='oinspect'){
            deleteOinspect(item.id).then(res=>{
              this.getOinspectList();
            })
          }
        },
        handleImport(type){
          this.impDialogVisible = true;
          this.impType = type;
          let file_url = '';
          if(type=='rc'){
            file_url = "media/default/模板-不准确报告证书登记表.xlsx";
          }else if(type=='rc2'){
            file_url = "media/default/模板-超期报告证书登记表.xlsx";
          }else if(type=='pt'){
            file_url = "media/default/模板-能力验证结果汇总表.xlsx";
          }else if(type=='risk'){
            file_url = "media/default/模板-风险识别信息登记表.xlsx";
          }else if(type=='complaint'){
            file_url = "media/default/模板-客户投诉信息登记表.xlsx";
          }else if(type=='oinspect'){
            file_url = "media/default/模板-外部监督检查信息登记表.xlsx";
          }
          let base_url = this.downloadUrl.substr(0, this.downloadUrl.length - 3);
          this.downloadUrl = base_url+file_url;
        },
        imporCconfirm(){
          this.impForm.task2do =this.task2do;
          if(this.impType=='rc'){
            impRc(this.impForm).then(res=>{
              if(res.code>=200){
                this.impDialogVisible = false;
                this.$message.success("提交成功");
                this.getRcList();
              }else{
                this.$message.warning(res.msg);
              }
            })
          }else if(this.impType=='rc2'){
            impOverdue(this.impForm).then(res=>{
              if(res.code>=200){
                this.impDialogVisible = false;
                this.$message.success("提交成功");
                this.getRcList();
              }else{
                this.$message.warning(res.msg);
              }
            })
          }else if(this.impType=='pt'){
            impPt(this.impForm).then(res=>{
              if(res.code>=200){
                this.impDialogVisible = false;
                this.$message.success("提交成功");
                this.getPtList();
              }else{
                this.$message.warning(res.msg);
              }
            })
          }else if(this.impType=='risk'){
            impRisk(this.impForm).then(res=>{
              if(res.code>=200){
                this.impDialogVisible = false;
                this.$message.success("提交成功");
                this.getRiskList();
              }else{
                this.$message.warning(res.msg);
              }
            })
          }else if(this.impType=='complaint'){
            impComplaint(this.impForm).then(res=>{
              if(res.code>=200){
                this.impDialogVisible = false;
                this.$message.success("提交成功");
                this.getComplaintList();
              }else{
                this.$message.warning(res.msg);
              }
            })
          }else if(this.impType=='oinspect'){
            impOinspect(this.impForm).then(res=>{
              if(res.code>=200){
                this.impDialogVisible = false;
                this.$message.success("提交成功");
                this.getOinspectList();
              }else{
                this.$message.warning(res.msg);
              }
            })
          }
        },
        handleNoNum(type){
          this.$confirm("确认没有该报送记录？", "警告", {
              confirmButtonText: "确认",
              cancelButtonText: "取消",
              type: "error",
          })
          .then(async () => {
            let form = {
              key : ''
            };
            if(type=='rc'){
              form.key = "num_error";
            }else if(type=='rc2'){
              form.key = "num_overdue"
            }else if(type=='pt'){
              form.key = "num_pt"
            }else if(type=='risk'){
              form.key = "num_risk"
            }else if(type=='complaint'){
              form.key = "num_complaint"
            }else if(type=='oinspect'){
              form.key = "num_oinspect"
            }
            noNum(this.task2do,form).then(res=>{
              if(res.code>=200){
                this.$message.success("提交成功");
                this.getList();
              }else{}
            })

          })
          .catch((err) => {
          });
          
        },
        rcSaveSuccess(){
          this.dialogRc = false;
          this.getRcList();
          this.getList();
        },
        ptSaveSuccess(){
          this.dialogPt = false;
          this.getPtList();
          this.getList();
        },
        comSaveSuccess(){
          this.dialogCom = false;
          this.getComplaintList();
          this.getList();
        },
        riskSaveSuccess(){
          this.dialogRisk = false;
          this.getRiskList();
          this.getList();
        },
        oinSaveSuccess(){
          this.dialogOin = false;
          this.getOinspectList();
          this.getList();
        },
        downloads() {
          let a = document.createElement('a')
          a.href =this.downloadFile;
          a.click();
        }
      },
  };
</script>

<style>
.leftCard{
  position:relative;
}
.taskItem{
  display: flex;
}
.cardHead{
  display:flex;
  justify-content:space-between;
  align-items: center;
}
.cardTitle{
  font-weight:bold;
  color:#606266;
  margin-right:50px
}

.tabType{
  font-size: 12px;
  color: orange;
  padding: 5px 10px;
  display: inline-block;
  border-radius: 10px;
  border: 1px solid orange;
}
.tabTypeBasic{
  color: #409eff;
  border: 1px solid #409eff;
}
.demo-table-expand {
    font-size: 0;
    padding-left:20px
  }
  .el-form--label-left .el-form-item__label{
    text-align: right;
  }
  .demo-table-expand label {
    width: 100px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 200px
  }
.danwei{
  position: absolute;
}

.taskUpload>.el-upload-list{
  /* position:relative; */
}
.taskUpload>.el-upload-list>.el-upload-list__item:first-child{
  /* margin-top: 0; */
  /* font-size:12px; */
    /* 
    position: absolute;
    width: 100%; */
}
</style>
