<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item :label="$t('年份')" prop="year">
        <el-date-picker clearable size="small" style="width: 200px" @change="handleQuery"
                        v-model="queryParams.year"
                        type="year"
                        value-format="yyyy"
                        :placeholder="$t('请选择')+$t('年份')">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">{{ $t('搜索') }}</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">{{ $t('重置') }}</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="success"
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['plant:targetreview:edit']"
        >{{ $t('修改') }}</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['plant:targetreview:remove']"
        >{{ $t('删除') }}</el-button>
      </el-col>
<!--      <el-col :span="1.5">-->
<!--        <el-button-->
<!--          type="info"-->
<!--          icon="el-icon-upload2"-->
<!--          size="mini"-->
<!--          @click="handleImport"-->
<!--          v-hasPermi="['plant:targetreview:edit']"-->
<!--        >{{ $t('导入') }}</el-button>-->
<!--      </el-col>-->
      <!--<el-col :span="1.5">
        <el-button
          type="warning"
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['plant:targetreview:export']"
        >{{ $t('导出') }}</el-button>
      </el-col>-->
      <!--<el-col :span="1.5">
        <el-button
          type="warning"
          icon="el-icon-download"
          size="mini"
          @click="handleDownload"
          v-hasPermi="['plant:targetreview:export']"
        >{{ $t('导出') }}</el-button>
      </el-col>-->
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="targetreviewList" :span-method="mergeMethod" @selection-change="handleSelectionChange" :cell-class-name="tableCellClassName" :height="clientHeight" border>
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column :label="$t('年份')" align="center" prop="year" width="50" :show-overflow-tooltip="true"/>
      <el-table-column label="ITEM" align="center" prop="item" width="80" :show-overflow-tooltip="true"/>
      <el-table-column :label="$t('内容')" align="center" prop="description" width="400" :show-overflow-tooltip="true"/>
      <el-table-column :label="$t('目标')" align="center" prop="targets" width="200"/>
      <el-table-column :label="$t('当前累积量')" align="center" prop="total" width="200">
        <template slot-scope="scope" v-if="scope.row.total != null">
          <el-dropdown placement="bottom" trigger="click">
            <span class="el-dropdown-link">
              <span>{{scope.row.total}}</span>
              <i class="el-icon-caret-bottom"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="statusFinish(0, scope.row)">{{ $t('已完成') }}</el-dropdown-item>
              <el-dropdown-item @click.native="statusCare(0, scope.row)">{{ $t('注意') }}</el-dropdown-item>
              <el-dropdown-item @click.native="statusUrgent(0, scope.row)">{{ $t('紧急') }}</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
      <el-table-column :label="$t('一季度')" align="center" prop="firstquarter" width="200">
        <template slot-scope="scope" v-if="scope.row.firstquarter != null">
          <el-dropdown placement="bottom" trigger="click">
            <span class="el-dropdown-link">
              <span>{{scope.row.firstquarter}}</span>
              <i class="el-icon-caret-bottom"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="statusFinish(1, scope.row)">{{ $t('已完成') }}</el-dropdown-item>
              <el-dropdown-item @click.native="statusCare(1, scope.row)">{{ $t('注意') }}</el-dropdown-item>
              <el-dropdown-item @click.native="statusUrgent(1, scope.row)">{{ $t('紧急') }}</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
      <el-table-column :label="$t('二季度')" align="center" prop="halfyear" width="200">
        <template slot-scope="scope" v-if="scope.row.halfyear != null">
          <el-dropdown placement="bottom" trigger="click">
            <span class="el-dropdown-link">
              <span>{{scope.row.halfyear}}</span>
              <i class="el-icon-caret-bottom"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="statusFinish(2, scope.row)">{{ $t('已完成') }}</el-dropdown-item>
              <el-dropdown-item @click.native="statusCare(2, scope.row)">{{ $t('注意') }}</el-dropdown-item>
              <el-dropdown-item @click.native="statusUrgent(2, scope.row)">{{ $t('紧急') }}</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
      <el-table-column :label="$t('三季度')" align="center" prop="threequarter" width="200">
        <template slot-scope="scope" v-if="scope.row.threequarter != null">
          <el-dropdown placement="bottom" trigger="click">
            <span class="el-dropdown-link">
              <span>{{scope.row.threequarter}}</span>
              <i class="el-icon-caret-bottom"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="statusFinish(3, scope.row)">{{ $t('已完成') }}</el-dropdown-item>
              <el-dropdown-item @click.native="statusCare(3, scope.row)">{{ $t('注意') }}</el-dropdown-item>
              <el-dropdown-item @click.native="statusUrgent(3, scope.row)">{{ $t('紧急') }}</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
      <el-table-column :label="$t('四季度')" align="center" prop="annual" width="200">
        <template slot-scope="scope" v-if="scope.row.annual != null">
          <el-dropdown placement="bottom" trigger="click">
            <span class="el-dropdown-link">
              <span>{{scope.row.annual}}</span>
              <i class="el-icon-caret-bottom"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="statusFinish(4, scope.row)">{{ $t('已完成') }}</el-dropdown-item>
              <el-dropdown-item @click.native="statusCare(4, scope.row)">{{ $t('注意') }}</el-dropdown-item>
              <el-dropdown-item @click.native="statusUrgent(4, scope.row)">{{ $t('紧急') }}</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
      <el-table-column :label="$t('偏差说明')" align="center" prop="deviationInfo" :show-overflow-tooltip="true"/>
      <el-table-column :label="$t('行动项')" align="center" prop="actionItem" width="400" :show-overflow-tooltip="true"/>
      <el-table-column :label="$t('负责人')" align="center" prop="principalName" width="100" :show-overflow-tooltip="true"/>
      <el-table-column :label="$t('计划完成时间')" align="center" prop="expectedDate" width="100">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.expectedDate, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('完成时间')" align="center" prop="completionDate" width="100">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.completionDate, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('备注')" align="center" prop="remarks" :show-overflow-tooltip="true"/>
      <el-table-column :label="$t('操作')" align="center" fixed="right" width="180" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['plant:targetreview:edit']"
          >{{ $t('修改') }}</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-document"
            @click="handleAction(scope.row)"
            v-hasPermi="['plant:targetreview:edit']"
          >{{ $t('行动项') }}</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['plant:targetreview:remove']"
          >{{ $t('删除') }}</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改目标回顾对话框 -->
    <el-dialog  :close-on-click-modal="false" v-dialogDrag :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item :label="$t('年份')" prop="year">
          <el-input v-model="form.year" :placeholder="$t('请输入') + $t('年份')" />
        </el-form-item>
        <el-form-item label="ITEM" prop="item">
          <el-input v-model="form.item" :placeholder="$t('请输入') + 'ITEM'" />
        </el-form-item>
        <el-form-item :label="$t('内容')" prop="description">
          <el-input v-model="form.description" :placeholder="$t('请输入') + $t('内容')" />
        </el-form-item>
        <el-form-item :label="$t('目标')" prop="targets">
          <el-input v-model="form.targets" :placeholder="$t('请输入') + $t('目标')" />
        </el-form-item>
        <el-form-item :label="$t('当前累积量')" prop="total">
          <el-input v-model="form.total" :placeholder="$t('请输入') + $t('当前累积量')" />
        </el-form-item>
        <el-form-item :label="$t('一季度')" prop="firstquarter">
          <el-input v-model="form.firstquarter" :placeholder="$t('请输入') + $t('一季度')" />
        </el-form-item>
        <el-form-item :label="$t('二季度')" prop="halfyear">
          <el-input v-model="form.halfyear" :placeholder="$t('请输入') + $t('二季度')" />
        </el-form-item>
        <el-form-item :label="$t('三季度')" prop="threequarter">
          <el-input v-model="form.threequarter" :placeholder="$t('请输入') + $t('三季度')" />
        </el-form-item>
        <el-form-item :label="$t('四季度')" prop="annual">
          <el-input v-model="form.annual" :placeholder="$t('请输入') + $t('四季度')" />
        </el-form-item>
        <el-form-item :label="$t('偏差说明')" prop="deviationInfo">
          <el-input v-model="form.deviationInfo" :placeholder="$t('请输入') + $t('偏差说明')" />
        </el-form-item>
        <el-form-item :label="$t('备注')" prop="remarks">
          <el-input v-model="form.remarks" :placeholder="$t('请输入') + $t('备注')" />
        </el-form-item>
        <el-form-item :label="$t('归属部门')" prop="deptId">
          <treeselect v-model="form.deptId" :options="deptOptions" :show-count="true" :placeholder="$t('请选择') + $t('归属部门')" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">{{ $t('确 定') }}</el-button>
        <el-button @click="cancel">{{ $t('取 消') }}</el-button>
      </div>
    </el-dialog>
    <!-- 用户导入对话框 -->
    <el-dialog  :close-on-click-modal="false" v-dialogDrag :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
      <el-upload
        ref="upload"
        :limit="1"
        accept=".xlsx, .xls"
        :headers="upload.headers"
        :action="upload.url"
        :disabled="upload.isUploading"
        :on-progress="handleFileUploadProgress"
        :on-success="handleFileSuccess"
        :auto-upload="false"
        drag
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">
          {{ $t('将文件拖到此处，或') }}
          <em>{{ $t('点击上传') }}</em>
        </div>
        <div class="el-upload__tip" slot="tip">
          <!--<el-checkbox v-model="upload.updateSupport" />是否更新已经存在的用户数据-->
          <el-link type="info" style="font-size:12px" @click="importTemplate">{{ $t('下载模板') }}</el-link>
        </div>
        <form ref="downloadFileForm" :action="upload.downloadAction" target="FORMSUBMIT">
          <input name="type" :value="upload.type" hidden />
        </form>
        <div class="el-upload__tip" style="color:red" slot="tip">{{ $t('提示：仅允许导入“xls”或“xlsx”格式文件！') }}</div>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFileForm">{{ $t('确 定') }}</el-button>
        <el-button @click="upload.open = false">{{ $t('取 消') }}</el-button>
      </div>
    </el-dialog>

    <!-- 行动项对话框 -->
    <el-dialog  :close-on-click-modal="false" v-dialogDrag :title="actionTitle" :visible.sync="actionOpen" width="1000px" append-to-body>
      <el-form :inline="true" :model="actionQueryParams">
        <el-form-item>
          <el-button v-hasPermi="['plant:targetaction:add']" type="primary" @click="addAction()">{{ $t('新增') }}</el-button>
        </el-form-item>
      </el-form>
      <el-table v-loading="actionLoading" :data="targetactionList" border>
        <el-table-column :label="$t('行动项')" align="center" header-align="center" prop="actionItem">
          <template slot-scope="scope">
            <el-input v-if="scope.row.isEdit" v-model="scope.row.actionItem" :placeholder="$t('请输入') + $t('行动项')" />
            <span v-else>{{ scope.row.actionItem }}</span>
          </template>
        </el-table-column>
        <el-table-column :label="$t('负责人')" align="center" header-align="center" prop="principal">
          <template slot-scope="scope">
            <el-select v-if="scope.row.isEdit" v-model="scope.row.principal" filterable multiple :placeholder="$t('请选择') + $t('人员')">
              <el-option
                v-for="dict in principalOptions"
                :key="dict.staffid"
                :label="dict.name"
                :value="dict.staffid">
                <span style="float: left">{{ dict.name }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px">{{ dict.staffid }}</span>
              </el-option>
            </el-select>
            <span v-else>{{ scope.row.principalName }}</span>
          </template>
        </el-table-column>
        <el-table-column :label="$t('计划完成时间')" align="center" header-align="center" prop="expectedDate">
          <template slot-scope="scope">
            <el-date-picker
              v-if="scope.row.isEdit"
              v-model="scope.row.expectedDate"
              type="date"
              value-format="yyyy-MM-dd"
              :placeholder="$t('请选择') + $t('计划完成时间')">
            </el-date-picker>
            <span v-else>{{ parseTime(scope.row.expectedDate, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column :label="$t('完成时间')" align="center" header-align="center" prop="completionDate">
          <template slot-scope="scope">
            <el-date-picker
              v-if="scope.row.isEdit"
              v-model="scope.row.completionDate"
              type="date"
              value-format="yyyy-MM-dd"
              :placeholder="$t('请选择') + $t('完成时间')">
            </el-date-picker>
            <span v-else>{{ parseTime(scope.row.completionDate, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column :label="$t('操作')" align="center" fixed="right" width="120" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button v-hasPermi="['plant:targetaction:edit']" type="text" size="small" v-if="scope.row.isEdit" @click="saveAction(scope.row)">{{ $t('保存') }}</el-button>
            <el-button type="text" size="small" v-if="scope.row.isEdit" @click="cancelAction(scope.row, scope.$index)">{{ $t('取消') }}</el-button>
            <el-button v-hasPermi="['plant:targetaction:edit']" v-if="!scope.row.isEdit" @click="editAction(scope.row)" type="text" size="mini">{{ $t('编辑') }}</el-button>
            <el-button v-hasPermi="['plant:targetaction:edit']" v-if="!scope.row.isEdit" type="text" size="small" @click="deleteAction(scope.row)">{{ $t('删除') }}</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

    <!-- 下载对话框 -->
    <el-dialog  :close-on-click-modal="false" v-dialogDrag :title="download.title" :visible.sync="download.open" width="400px" append-to-body>
      <el-form :model="queryParams" ref="queryForm" label-width="68px">
        <el-form-item :label="$t('年份')" prop="year">
          <el-date-picker clearable size="small" style="width: 200px"
                          v-model="queryParams.year"
                          type="year"
                          value-format="yyyy"
                          :placeholder="$t('请选择') + $t('年份')">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="cyan" icon="el-icon-download" size="mini" @click="downloadOperate">{{ $t('下载') }}</el-button>
        </el-form-item>
      </el-form>
      <form ref="downloadForm" :action="downloadAction" target="FORMSUBMIT">
        <input name="year" v-model="downloadForm.year"  hidden  />
      </form>
    </el-dialog>
  </div>
</template>

<script>
  import { listTargetreview, getTargetreview, delTargetreview, addTargetreview, updateTargetreview, exportTargetreview } from "@/api/plant/targetreview";
  import { listTargetaction, getTargetaction, delTargetaction, addTargetaction, updateTargetaction} from "@/api/plant/targetaction";
  import { listStaffmgr } from "@/api/plant/staffmgr";
  import { treeselect } from "@/api/system/dept";
  import { getToken } from "@/utils/auth";
  import Treeselect from "@riophae/vue-treeselect";
  import "@riophae/vue-treeselect/dist/vue-treeselect.css";

  export default {
    name: "Targetreview",
    components: { Treeselect },
    data() {
      return {
        // 遮罩层
        loading: true,
        actionLoading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: false,
        // 总条数
        total: 0,
        // 目标回顾表格数据
        targetreviewList: [],
        //行动项表格数据
        targetactionList: [],
        // 弹出层标题
        title: "",
        actionTitle: "",
        // 部门树选项
        deptOptions: undefined,
        clientHeight:300,
        // 是否显示弹出层
        open: false,
        actionOpen: false,
        // 人员字典
        principalOptions: [],
        // 装置名称字典
        plantCodeOptions: [],
        // 用户导入参数
        upload: {
          downloadAction: process.env.VUE_APP_BASE_API + '/common/template',
          //下载模板类型
          type: "targetreview",
          // 是否显示弹出层（用户导入）
          open: false,
          // 弹出层标题（用户导入）
          title: "",
          // 是否禁用上传
          isUploading: false,
          // 是否更新已经存在的用户数据
          updateSupport: 0,
          // 设置上传的请求头部
          headers: { Authorization: "Bearer " + getToken() },
          // 上传的地址
          url: process.env.VUE_APP_BASE_API + "/plant/targetreview/importData"
        },
        //下载按钮参数
        download: {
          // 是否显示弹出层（用户导入）
          open: false,
          // 弹出层标题（用户导入）
          title: "",
        },
        //下载参数
        downloadForm: {
          year: '',
        },
        downloadAction: process.env.VUE_APP_BASE_API +'/plant/targetreview/exportPDF',
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 20,
          item: null,
          year: null,
          firstquarterStatus: null,
          halfyearStatus: null,
          threequarterStatus: null,
          annualStatus: null
        },
        //人员表查询参数
        staffmgrQueryParams: {
          actualposts: null
        },
        actionQueryParams: {
          pageNum: 1,
          pageSize: 20,
          targetreviewId: null,
        },
        // 表单参数
        form: {},
        // 表单校验
        rules: {
          item: [
            { required: true, message: this.$t('序号') + this.$t('不能为空'), trigger: "blur" }
          ],
        }
      };
    },
    watch: {
      // 根据名称筛选部门树
      deptName(val) {
        this.$refs.tree.filter(val);
      }
    },
    created() {
      //设置表格高度对应屏幕高度
      this.$nextTick(() => {
        this.clientHeight = (document.body.clientHeight - 80) * 0.8
      })
      this.getList();
      this.getPrincipal();
      this.getTreeselect();
      this.getDicts("PLANT_DIVIDE").then(response => {
        this.plantCodeOptions = response.data;
      });
    },
    methods: {
      /** 查询目标回顾列表 */
      getList() {
        this.loading = true;
        listTargetreview(this.queryParams).then(response => {
          this.targetreviewList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      },
      getPrincipal() {
        listStaffmgr(this.staffmgrQueryParams).then(response => {
          this.principalOptions = response.rows;
        });
      },
      //根据分数显示颜色提示
      tableCellClassName({ row, column, rowIndex, columnIndex }) {
        if (columnIndex == 5){
          return this.changeColor(row.totalStatus)
        }
        if (columnIndex == 6){
          return this.changeColor(row.firstquarterStatus)
        }
        if (columnIndex == 7){
          return this.changeColor(row.halfyearStatus)
        }
        if (columnIndex == 8){
          return this.changeColor(row.threequarterStatus)
        }
        if (columnIndex == 9){
          return this.changeColor(row.annualStatus)
        }
      },
      changeColor (value) {
        if (value == 1){
          return 'cellFinish'
        }else if( value == 2) {
          return 'cellCare'
        }else if( value == 3) {
          return 'cellUrgent'
        }
      },
      /** 查询部门下拉树结构 */
      getTreeselect() {
        treeselect().then(response => {
          this.deptOptions = response.data;
        });
      },
      // 装置名称字典翻译
      plantCodeFormat(row, column) {
        return this.selectDictLabel(this.plantCodeOptions, row.plantCode);
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      //变换季度状态
      statusFinish (index, row) {
        this.form = row;
        if (index == 0) {
          this.form.totalStatus = 1;
        }else if (index == 1) {
          this.form.firstquarterStatus = 1;
        }else if (index == 2) {
          this.form.halfyearStatus = 1;
        }else if (index == 3) {
          this.form.threequarterStatus = 1;
        }else if (index == 4) {
          this.form.annualStatus = 1;
        }
        updateTargetreview(this.form).then(response => {
          this.msgSuccess(this.$t('修改成功'));
          this.open = false;
          this.getList();
        });
      },
      statusCare (index, row) {
        this.form = row;
        if (index == 0) {
          this.form.totalStatus = 2;
        }else if (index == 1) {
          this.form.firstquarterStatus = 2;
        }else if (index == 2) {
          this.form.halfyearStatus = 2;
        }else if (index == 3) {
          this.form.threequarterStatus = 2;
        }else if (index == 4) {
          this.form.annualStatus = 2;
        }
        updateTargetreview(this.form).then(response => {
          this.msgSuccess(this.$t('修改成功'));
          this.open = false;
          this.getList();
        });
      },
      statusUrgent (index, row) {
        this.form = row;
        if (index == 0) {
          this.form.totalStatus = 3;
        }else if (index == 1) {
          this.form.firstquarterStatus = 3;
        }else if (index == 2) {
          this.form.halfyearStatus = 3;
        }else if (index == 3) {
          this.form.threequarterStatus = 3;
        }else if (index == 4) {
          this.form.annualStatus = 3;
        }
        updateTargetreview(this.form).then(response => {
          this.msgSuccess(this.$t('修改成功'));
          this.open = false;
          this.getList();
        });
      },
      // 表单重置
      reset() {
        this.form = {
          id: null,
          plantCode: null,
          item: null,
          description: null,
          targets: null,
          total: null,
          firstquarter: null,
          halfyear: null,
          threequarter: null,
          annual: null,
          year: null,
          delFlag: null,
          createrCode: null,
          createdate: null,
          updaterCode: null,
          updatedate: null,
          deptId: null,
          remarks: null,
          firstquarterStatus: null,
          halfyearStatus: null,
          threequarterStatus: null,
          annualStatus: null,
          totalStatus: null,
          deviationInfo: null
        };
        this.resetForm("form");
      },
      //行动项表单重置
      actionReset() {
        this.actionForm = {
          id: null,
          targetreviewId: null,
          actionItem: null,
          principal: null,
          principalName: null,
          expectedDate: null,
          completionDate: null,
          delFlag: null,
          createrCode: null,
          createdate: null,
          updaterCode: null,
          updatedate: null,
        };
        this.resetForm("actionForm");
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.id)
        this.single = selection.length!==1
        this.multiple = !selection.length
      },
      /** 导出按钮操作 */
      handleDownload() {
        this.reset();
        this.download.open = true;
        this.download.title =this.$t('导出')+' '+this.$t('目标回顾') ;
      },
      /** 下载按钮操作 */
      downloadOperate() {
        if (this.queryParams.year == null) {
          this.msgError(this.$t('请选择')+this.$t('年份'));
        }else {
          this.downloadForm.year = this.queryParams.year;
          this.$nextTick(() => {
            this.$refs['downloadForm'].submit()
            this.resetForm("queryForm");
          })
        }
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        this.reset();
        const id = row.id || this.ids
        getTargetreview(id).then(response => {
          this.form = response.data;
          this.open = true;
          this.title = this.$t('修改')  + this.$t('目标回顾');
        });
      },
      /** 提交按钮 */
      submitForm() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            if (this.form.id != null) {
              updateTargetreview(this.form).then(response => {
                this.msgSuccess(this.$t('修改成功'));
                this.open = false;
                this.getList();
              });
            } else {
              addTargetreview(this.form).then(response => {
                this.msgSuccess(this.$t('新增成功'));
                this.open = false;
                this.getList();
              });
            }
          }
        });
      },
      /** 行动项按钮操作 */
      handleAction(row) {
        let _this = this
        this.actionReset();
        this.actionLoading = true;
        this.actionQueryParams.targetreviewId = row.id
        listTargetaction(this.actionQueryParams).then(response => {
          response.rows.forEach(element => {
            element["isEdit"] = false
          });
          response.rows.forEach(element => {
            element["isAdd"] = false
          });
          this.targetactionList = response.rows;
          this.targetactionList.forEach(function (value,key,arr) {
            let principal = null;
            let principalName = null;
            if (value.principal != null) {
              principal = value.principal.split(",");
              principal.forEach(function (id, index) {
                _this.principalOptions.forEach(function (item) {
                  if (item.staffid === id) {
                    if (index === 0) {
                      principalName = item.name
                    }else {
                      principalName = principalName + "," + item.name
                    }
                  }
                });
              });
            }
            _this.targetactionList[key].principal = principal;
            _this.targetactionList[key].principalName = principalName;
          })
          this.actionLoading = false;
          this.actionOpen = true;
          this.actionTitle = this.$t('行动项');
        });
      },
      /** 新增行动项按钮操作 */
      addAction() {
        this.targetactionList.push({
          targetreviewId: this.actionQueryParams.targetreviewId,
          actionItem: '',
          expectedDate: '',
          completionDate: '',
          isEdit: true,
          isAdd: true
        });
      },
      /** 保存行动项按钮操作 */
      saveAction(row) {
        row.isEdit = false;
        var that = this;
        that.actionLoading = true;
        this.actionForm = row;
        this.actionForm.targetreviewId = this.actionQueryParams.targetreviewId;
        var principal = null;
        this.actionForm.principal.forEach(function (value,key,arr) {
          if (key != 0) {
            principal = principal + "," + value;
          }else if (key == 0) {
            principal = value;
          }
        })
        this.actionForm.principal = principal;
        if (row.isAdd == true) {
          addTargetaction(this.actionForm).then(response => {
            this.msgSuccess(this.$t('新增成功'));
            this.actionOpen = false;
            this.getList();
          });
        }else {
          updateTargetaction(this.actionForm).then(response => {
            this.msgSuccess(this.$t('修改成功'));
            this.actionOpen = false;
            this.getList();
          });
        }
      },
      /** 取消行动项按钮操作 */
      cancelAction(row, index) {
        // 如果是新增的数据
        if (row.isAdd) {
          this.targetactionList.splice(index, 1)
        } else {
          // 不是新增的数据  还原数据
          for (const i in row.oldRow) {
            row[i] = row.oldRow[i]
          }
          row.isEdit = false
        }
      },
      /** 修改行动项按钮操作 */
      editAction(row) {
        // 备份原始数据
        row['oldRow'] = JSON.parse(JSON.stringify(row));
        this.$nextTick(() => {
          row.isEdit = true;
        })
      },
      /** 删除行动项按钮操作 */
      deleteAction(row) {
        const ids = row.id || this.ids;
        this.$confirm(this.$t('是否确认删除?'), this.$t('警告'), {
          confirmButtonText: this.$t('确定'),
          cancelButtonText: this.$t('取消'),
          type: "warning"
        }).then(function() {
          return delTargetaction(ids);
        }).then(() => {
          this.getList();
          this.actionOpen = false;
          this.msgSuccess(this.$t('删除成功'));
        })
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        const ids = row.id || this.ids;
        this.$confirm(this.$t('是否确认删除目标回顾编号为"') + ids + this.$t('"的数据项?'), this.$t('警告'), {
          confirmButtonText: this.$t('确定'),
          cancelButtonText: this.$t('取消'),
          type: "warning"
        }).then(function() {
          return delTargetreview(ids);
        }).then(() => {
          this.getList();
          this.msgSuccess(this.$t('删除成功'));
        })
      },
      /** 导入按钮操作 */
      handleImport() {
        this.upload.title = this.$t('用户导入');
        this.upload.open = true;
      },
      /** 下载模板操作 */
      importTemplate() {
        this.$refs['downloadFileForm'].submit()
      },
      // 文件上传中处理
      handleFileUploadProgress(event, file, fileList) {
        this.upload.isUploading = true;
      },
      // 文件上传成功处理
      handleFileSuccess(response, file, fileList) {
        this.upload.open = false;
        this.upload.isUploading = false;
        this.$refs.upload.clearFiles();
        if (response.data[0] != null) {
          this.$alert(this.$t('成功导入') + response.msg + this.$t('条数据') + "，" + this.$t('第') + response.data + this.$t('行数据出现错误导入失败')+"。", this.$t('导入结果'), { dangerouslyUseHTMLString: true });
        }else {
          this.$alert(this.$t('成功导入') + response.msg + this.$t('条数据'), this.$t('导入结果'), { dangerouslyUseHTMLString: true });
        }
        this.getList();
      },
      // 提交上传文件
      submitFileForm() {
        this.$refs.upload.submit();
      },
      //合并单元格
      mergeMethod({ row, column, rowIndex, columnIndex }) {
        if (columnIndex === 0) {
          const _row = this.setTable(this.targetreviewList).merge[rowIndex];
          const _col = _row > 0 ? 1 : 0;
          return {
            rowspan: _row,
            colspan: _col
          };
        }
        if (columnIndex === 1) {
          const _row = this.setTable(this.targetreviewList).merge[rowIndex];
          const _col = _row > 0 ? 1 : 0;
          return {
            rowspan: _row,
            colspan: _col
          };
        }
        if (columnIndex === 2) {
          const _row = this.setTable(this.targetreviewList).merge[rowIndex];
          const _col = _row > 0 ? 1 : 0;
          return {
            rowspan: _row,
            colspan: _col
          };
        }
        if (columnIndex === 3 ) {
          const _row = this.setTable(this.targetreviewList).merge[rowIndex];
          const _col = _row > 0 ? 1 : 0;
          return {
            rowspan: _row,
            colspan: _col
          };
        }
        if (columnIndex === 4 ) {
          const _row = this.setTable(this.targetreviewList).merge[rowIndex];
          const _col = _row > 0 ? 1 : 0;
          return {
            rowspan: _row,
            colspan: _col
          };
        }
        if (columnIndex === 5 ) {
          const _row = this.setTable(this.targetreviewList).merge[rowIndex];
          const _col = _row > 0 ? 1 : 0;
          return {
            rowspan: _row,
            colspan: _col
          };
        }
        if (columnIndex === 6 ) {
          const _row = this.setTable(this.targetreviewList).merge[rowIndex];
          const _col = _row > 0 ? 1 : 0;
          return {
            rowspan: _row,
            colspan: _col
          };
        }
        if (columnIndex === 7 ) {
          const _row = this.setTable(this.targetreviewList).merge[rowIndex];
          const _col = _row > 0 ? 1 : 0;
          return {
            rowspan: _row,
            colspan: _col
          };
        }
        if (columnIndex === 8 ) {
          const _row = this.setTable(this.targetreviewList).merge[rowIndex];
          const _col = _row > 0 ? 1 : 0;
          return {
            rowspan: _row,
            colspan: _col
          };
        }
        if (columnIndex === 9 ) {
          const _row = this.setTable(this.targetreviewList).merge[rowIndex];
          const _col = _row > 0 ? 1 : 0;
          return {
            rowspan: _row,
            colspan: _col
          };
        }
        if (columnIndex === 10 ) {
          const _row = this.setTable(this.targetreviewList).merge[rowIndex];
          const _col = _row > 0 ? 1 : 0;
          return {
            rowspan: _row,
            colspan: _col
          };
        }
        if (columnIndex === 15 ) {
          const _row = this.setTable(this.targetreviewList).merge[rowIndex];
          const _col = _row > 0 ? 1 : 0;
          return {
            rowspan: _row,
            colspan: _col
          };
        }
        if (columnIndex === 16 ) {
          const _row = this.setTable(this.targetreviewList).merge[rowIndex];
          const _col = _row > 0 ? 1 : 0;
          return {
            rowspan: _row,
            colspan: _col
          };
        }
      },
      setTable(tableData) {
        let spanArr = [],
          concat = 0;
        tableData.forEach((item, index) => {
          if (index === 0) {
            spanArr.push(1);
          } else {
            if (item.item === tableData[index - 1].item) {
              //第一列需合并相同内容的判断条件
              spanArr[concat] += 1;
              spanArr.push(0);
            } else {
              spanArr.push(1);
              concat = index;
            }
          }
        });
        return {
          merge: spanArr
        };
      },
    }
  };
</script>

<style>

  .el-checkbox, .el-dropdown {
    color: #606266 !important;
  }
</style>
