<template>
  <div style="height:calc(100% - 1.92rem);">
    <div style="width:100%; height: 100%;">
      <header>
        <van-tabs v-model="active" swipeable>
          <van-tab v-for="(item, index) in minFormactive" :title="item.name + '（' + item.age + '）'"
            :key="index"></van-tab>
        </van-tabs>
      </header>

      <div class="batch-operate">
        <van-checkbox v-model="isAllChecked" shape="square" icon-size="18px" @change="toggleAllCheck"
          style="margin: 0 0.24rem;"></van-checkbox>
        <button class="footcolButno" @click="openBatchOperation(1)"
          style="width: 2rem; height: 0.5rem; font-size: 0.28rem; margin-right: 0.24rem;"
          :class="!(selectList && selectList.length) > 0 ? 'disabled' : ''">结果值</button>
        <button class="footcolButno" @click="openBatchOperation(2)"
          style="width: 2rem; height: 0.5rem;  font-size: 0.28rem; margin-right: 0.24rem;"
          :class="!(selectList && selectList.length) > 0 ? 'disabled' : ''">图片</button>
        <!-- <div style="color: #FF9600;">支持批量录入结果值和图片</div> -->
        <span @click.stop="openText2()"><van-icon name="question" class="fontColorC" /></span>
      </div>

      <div style="width:100%; height:calc(100% - 1.8rem);display: flex; flex-direction: column;">
        <scroller :isNeed="isNeed" ref="work_bench_scroller" class="all">
          <div style="padding-bottom:2.65rem;" v-if="rvenotList.length > 0">
            <div v-for="(item, index) in rvenotList" :key="index"
              style="margin:.2rem 0;padding:0.24rem;background-color:#fff;">
              <div class="flex-box-ce" style="border-bottom: 1px dashed #f3f3f3; padding-bottom: .25rem;">
                <van-checkbox v-model="item.isChecked" shape="square" style="margin-right: 0.24rem;" icon-size="18px"
                  @change="updateAllCheckStatus"></van-checkbox>
                <userImage class="about-me__avatar" :id="item.employee_id" :user_name="item.employee_name"
                  fontSize=".28" width="0.6rem" height="0.6rem"></userImage>
                <div style="font-size:.3rem; padding: 0rem 0px 0px 0.18rem; box-sizing: border-box;">
                  {{ item.employee_name }}
                </div>
                <div class="font-flex-word fontColorC flex-1" style="padding-right: 0.2rem;">
                  <span v-for="(depts, keys) in item.dept_list" :key="keys"
                    style="font-size:.25rem;padding: 0rem 0px 0px 0.15rem;display: inline-block;">
                    {{ depts.dept_name }}
                    <span v-if="item.dept_list.length - keys > 1">,</span>
                  </span>
                </div>
                <template v-if="active == 1">
                  <div style="font-size:.3rem" class="fontColorC" v-if="!item.isUpdate" @click="openText(item)">
                    <van-icon name="info-o" />不可调整
                  </div>
                </template>
              </div>
              <div>
                <div style="font-size:.32rem;margin: 0.2rem 0;">{{ item.index_name }}</div>
                <div class="flex-box" style="margin-bottom: 0.14rem;" v-for="(arr, att) in item.dil" :key="att"
                  v-if="arr.prop">
                  <div style="color:#929292;font-size:.27rem; width: 1.6rem;">{{ arr.lab }}：</div>
                  <div class="flex-1" style="font-size:.28rem;">{{ arr.prop }}</div>
                </div>

                <div style="border:1px solid #e4e4e4;margin: .2rem 0 0 0;" v-if="active == 0">
                  <div class="flex-box-ce"
                    style="justify-content: space-between; padding: 0 0.32rem 0 0; box-sizing: border-box;"
                    v-if="item.index_type==1">
                    <van-field v-model="item.result_cache" placeholder="请输入结果值" style="width: 5rem;" />
                    <div class="fontColorC">{{item.unit}}</div>
                  </div>
                  <van-cell>
                    <Uploader v-model="item.result_file.imgs" :max-count="3" :beforeRead="beforeRead"
                      :accept="accept" />
                  </van-cell>
                  <van-cell v-if="item.result_file.append.length>0">
                    <template>
                      <div style="font-size: 0.24rem;" class="orange">文件仅支持在PC上‘上传’、‘删除’</div>
                      <div class="blue" style="padding-top: 5px;font-size: 0.28rem;"
                        v-for="(e,index2) in item.result_file.append" :key="index2" @click="downWgt(e.url,e.name)">
                        {{e.name}}
                      </div>
                    </template>
                  </van-cell>
                </div>
                <template v-else>
                  <div style="border:1px solid #e4e4e4;margin: .2rem 0 0 0;" v-if="item.isUpdate">
                    <div class="flex-box-ce"
                      style="justify-content: space-between; padding: 0 0.32rem 0 0; box-sizing: border-box;"
                      v-if="item.index_type==1">
                      <van-field v-model="item.result_cache" placeholder="请输入结果值" style="width: 5rem;" />
                      <div class="fontColorC">{{item.unit}}</div>
                    </div>
                    <van-cell>
                      <Uploader v-model="item.result_file.imgs" :max-count="3" :beforeRead="beforeRead"
                        :accept="accept" />
                    </van-cell>
                    <van-cell v-if="item.result_file.append.length>0">
                      <template>
                        <div style="font-size: 0.24rem;" class="orange">文件仅支持在PC上‘上传’、‘删除’</div>
                        <div class="blue" style="padding-top: 5px;font-size: 0.28rem;"
                          v-for="(e,index2) in item.result_file.append" :key="index2" @click="downWgt(e.url,e.name)">
                          {{e.name}}
                        </div>
                      </template>
                    </van-cell>
                  </div>
                  <div v-else>
                    <span style="color:#929292;font-size:.27rem;width: 1.4rem;display: inline-block;">结果值：</span>
                    <span style="font-size:.28rem;position: relative;left: -4px;" class="orange"
                      v-if="item.index_type==1">{{ item.result_cache }} {{ item.unit }}</span>
                    <template v-if="item.result_file.images">
                      <div class="flex-box-ce" style="margin: 10px 0;" v-if="item.result_file.images.length>0">
                        <van-image @click="openImg(item.result_file.images,index2)"
                          v-for="(e,index2) in item.result_file.images" :key="index2"
                          style="border-radius: 3px;margin-right: 10px;" width="100" height="100" :src="e.url" />
                      </div>
                    </template>
                    <template v-if="item.result_file.append.length>0">
                      <div style="font-size: 0.24rem;" class="orange">文件仅支持在PC上‘上传’、‘删除’</div>
                      <div class="blue" style="padding-top: 5px;font-size: 0.28rem;"
                        v-for="(e,index2) in item.result_file.append" :key="index2" @click="downWgt(e.url,e.name)">
                        {{e.name}}
                      </div>
                    </template>
                  </div>
                </template>
              </div>

            </div>
          </div>
          <van-empty description="暂无结果值录入" v-else />
        </scroller>
        <footer v-if="active == 0 && rvenotList.length > 0 && selectList && selectList.length > 0" v-isKeyboard>
          <van-row class="footfoot">
            <van-col span="14" class="footcol" @click="save(1)">
              <div style="width:1rem;margin: auto;">
                <icon name="save" style="width: 0.5rem;height: 0.5rem;"></icon>
                <div style="font-size: .24rem;color:#8a8a8a;">暂存</div>
              </div>
            </van-col>
            <van-col span="10" class="footBut">
              <button class="footcolButno" @click="rveno">取消</button>
              <button class="footcolButok" @click="save(0)">提交</button>
            </van-col>
          </van-row>
        </footer>
        <footer v-if="active == 1 && rvenotList.length > 0 && returnIsShow && selectList && selectList.length > 0"
          v-isKeyboard>
          <van-row class="footfoot">
            <van-col span="14" class="footcol"></van-col>
            <van-col span="10" class="footBut">
              <button class="footcolButno" @click="rveno">取消</button>
              <button class="footcolButok" @click="save(3)">提交</button>
            </van-col>
          </van-row>
        </footer>
      </div>

    </div>


    <van-popup v-model="isFilterShow" position="bottom" :style="popStyle">
      <div class="popup-title">
        {{ title }}
      </div>
      <div class="filter-options-box">
        <scroller style="height: 5rem; border-top: 0.01rem solid #f5f7fa;">
          <div class="dropdown-item-title" style="margin-top: 10px;">选择人员</div>
          <div class="dropdown-item-content-list">
            <div class="dropdown-item-content" v-for="(item, index) in user_list" :key="index"
              @click="chooseOptions(item, 'user_name')" :class="selectOptions.includes(item) ? 'active' : ''">
              {{ item }}
            </div>
          </div>
          <div class="dropdown-item-title">指标名称</div>
          <div class="dropdown-item-content-list">
            <div class="dropdown-item-content" v-for="(item, index) in index_name_list" :key="index"
              @click="chooseOptions(item, 'index_name')" :class="selectOptions.includes(item) ? 'active' : ''">
              {{ item }}
            </div>
          </div>
          <div class="dropdown-item-title">考核标准</div>
          <div class="dropdown-item-content-list">
            <div class="dropdown-item-content" v-for="(item, index) in index_standard_list" :key="index"
              style="flex: 0 0 100%; margin-right: 0;" @click="chooseOptions(item, 'index_standard')"
              :class="selectOptions.includes(item) ? 'active' : ''" s>
              {{ item }}
            </div>
          </div>

          <div class="dropdown-item-title">目标值</div>
          <div class="dropdown-item-content-list">
            <template v-if="target_list && target_list.length > 0">
              <div class="dropdown-item-content" v-for="(item, index) in target_list" :key="index"
                @click="chooseOptions(item, 'target')" :class="select_target_list.includes(item) ? 'active' : ''">
                {{ item }}
              </div>
            </template>
          </div>

          <div class="dropdown-item-title">权重%</div>
          <div class="dropdown-item-content-list">
            <template v-if="index_weight_list && index_weight_list.length > 0">
              <div class="dropdown-item-content" v-for="(item, index) in index_weight_list" :key="index"
                @click="chooseOptions(item, 'weight')" :class="select_index_weight_list.includes(item) ? 'active' : ''">
                {{ item }}
              </div>
            </template>
          </div>

          <div style="height: 1.2rem;"></div>

        </scroller>
        <div class="btn-container">
          <button class="footcolButno" style="width: 96%; height: 0.8rem;" @click="clearFilters()">重置</button>
        </div>
      </div>
    </van-popup>

    <van-popup v-model:show="isResult" round>
      <div style="width: 7rem;padding: 0.24rem;box-sizing: border-box;">
        <div style="font-size: 0.28rem;margin-bottom: 0.24rem;">提交结果</div>
        <van-progress :percentage="percentage" stroke-width="8" />
        <div style="margin-top: 16px;border: 1px solid #f1f1f1;max-height: 500px;overflow-y: auto;" class="scroll-bar">
          <div class="flex-box-ce results" style="font-weight: 600;">
            <div style="border-right: 1px solid #f1f1f1;width: 40px;">序号</div>
            <div class="flex-1" style="border-right: 1px solid #f1f1f1;">姓名</div>
            <div class="flex-2" style="border-right: 1px solid #f1f1f1;">指标名称</div>
            <div class="flex-2">提交结果</div>
          </div>
          <div class="flex-box-ce results" v-for="(item, index) in results" :key="index">
            <div style="border-right: 1px solid #f1f1f1;width: 40px;">{{ results.length - index }}</div>
            <div class="flex-1" style="border-right: 1px solid #f1f1f1;">{{ item.info.employee_name }}</div>
            <div class="flex-2" style="border-right: 1px solid #f1f1f1;">{{ item.info.index_name }}</div>
            <div class="flex-2 red" v-if="item.msg">{{item.msg}}</div>
            <div class="flex-2 green" v-else>提交成功</div>
          </div>
        </div>
        <span slot="footer">
          <div class="flex-box-end" style="margin-top: 12px;">
            <van-button type="primary" @click="closeIsResult" size="small">确 定</van-button>
          </div>
        </span>
      </div>
    </van-popup>

    <van-popup v-model:show="isBatchOperation" round>
      <div style="width: 7rem; padding: 0.24rem; box-sizing: border-box;">
        <div>
          <div style="font-weight: 600; text-align: center;">
            批量录入数据
          </div>
          <div style="color: #FF9600; padding: 0.24rem 0.32rem; box-sizing: border-box;">选择的数据将会录入同一结果值和图片</div>
          <div class="flex-box-ce" v-if="showType == 1">
            <van-field label="结果值" v-model="batch_result_cache" placeholder="请输入结果值" border />
            <!-- <div style="padding-right: 0.32rem;" class="fontColorC">{{item.unit}}</div> -->
          </div>

          <div style="padding: 0.24rem 0.32rem; box-sizing: border-box;" v-if="showType == 2">
            <div style="color: #646566; margin-bottom: 0.24rem;">请上传图片</div>
            <Uploader v-model="batch_result_imgs" :max-count="3" :beforeRead="beforeRead" :accept="accept" />
          </div>
        </div>

        <span slot="footer">
          <div class="flex-box-end" style="margin-top: 12px;">
            <button class="footcolButno" @click="cancelBatchOperation()" style="height: 0.6rem;">取消</button>
            <button class="footcolButok" @click="confirmBatchOperation()" style="height: 0.6rem;">确定</button>
          </div>
        </span>
      </div>
    </van-popup>

  </div>
</template>

<script>
  import Vue from 'vue';
  import VanSkeleton from '@/performance/components/public/VanSkeleton';
  import EmployeeSelector from '@/components/EmployeeSelector';
  import Uploader from '@/components/OssUploader';
  import DeptSelectorDropdown from '@/components/DeptSelectorDropdown'
  import {
    Tab,
    Tabs,
    ImagePreview,
    Popup,
    Progress,
    DropdownMenu,
    DropdownItem,
    Icon
  } from 'vant';
  Vue.use(Tab).use(Tabs).use(ImagePreview).use(Popup).use(Progress).use(DropdownMenu).use(DropdownItem).use(Icon);
  export default {
    props: {
      peIds: {
        type: String,
        default: ''
      },
      isUpdate: {
        type: Boolean,
        default: false
      },
    },
    data() {
      return {
        popStyle: {
          width: '100%',
          height: '9rem',
          padding: '10px',
          boxSizing: 'border-box',
          borderRadius: '10px',
          position: 'relation'
        },
        showType: 1,
        isFilterShow: false,
        title: '未录入',
        isAllChecked: false,
        batch_result_cache: "",
        batch_result_imgs: [],
        isBatchOperation: false,
        isNeed: !this.$getCache('isAndroid'),
        skeletonLoad: true, // 骨架屏
        rvenotList: [],
        minFormactive: [{
          name: '未录入',
          age: 0
        }, {
          name: '已录入',
          age: 0
        }],
        active: 0,
        noStatusListAll: [],
        noStatusListDx: [],
        noStatusList: [], // 未录入指标
        statusList: [], // 已录入指标
        bootBool: false, // 防止多次请求
        isIos: this.$getCache('iPhone'),
        user_list: [],
        index_name_list: [],
        index_standard_list: [],
        target_list: [],
        index_weight_list: [],
        select_user_name_list: [],
        select_index_name_list: [], // 筛选指标名称列表
        select_index_standard_list: [], // 筛选指标标准列表
        select_target_list: [], // 筛选指标名称列表
        select_index_weight_list: [], // 筛选指标名称列表
        // 上传图标与附件
        img_fileList: [], // 图片附件
        images: [],
        accept: 'image/jpeg,image/png,image/jpg',

        // 长连接结果
        results: [], //提交的返回结果集合
        isResult: false,
        percentage: 0,
        resultList: [], //要发送数据的集合
        resultIndex: 0,

        userName: '全部人员',
        selectUser: false,
        employee_list: [],
        selected_data: {
          dept: [],
          employee: []
        }, //传入已选部门
        paiXu: false,
        selectOptions: []
      };
    },
    components: {
      VanSkeleton,
      Uploader,
      EmployeeSelector
    },
    computed: {
      returnIsShow() {
        let is = false
        this.statusList.forEach(item => {
          if (item.isUpdate) {
            is = true;
          }
        })
        return is
      },
      selectList() {
        return this.rvenotList.filter(item => item.isChecked)
      }
    },
    watch: {

      paiXu(val) {
        if (val) {
          this.rvenotList = JSON.parse(JSON.stringify(this.noStatusListDx));
        } else {
          this.rvenotList = JSON.parse(JSON.stringify(this.noStatusList));
        }
      },
      isResult(val) {
        if (!val) {
          this.results = []; //提交的返回结果集合
          this.isResult = false;
          this.percentage = 0;
          this.resultList = []; //要发送数据的集合
          this.resultIndex = 0;
          this.getPackageDtail();
        }
      },
      active(val) {
        if (val == 0) this.title = '未录入'
        else this.title = '已录入'
        this.clearFilters();
        this.initFilterData();
      },
      selectOptions(val) {
        if (this.active == 0) this.rvenotList = this.filterFn(this.noStatusList);
        else this.rvenotList = this.filterFn(this.statusList);
      },
      peIds() {
        this.getPackageDtail();
      }
    },

    methods: {
      openFilterBox(type) {
        if (type == 1) this.active = 0
        else this.active = 1
        this.isFilterShow = true;
      },
      clearFilters() {
        this.selectOptions = [];
        this.select_user_name_list = [];
        this.select_index_name_list = [];
        this.select_index_standard_list = [];
        this.select_target_list = [];
        this.select_index_weight_list = [];
        if (this.active == 0) this.rvenotList = this.noStatusList;
        else this.rvenotList = this.statusList;
      },



      filterFn(data) {

        let result = [];
        let flag0 = 0
        let flag1 = 0
        let flag2 = 0
        let flag3 = 0
        let flag4 = 0
        // 筛选条件对象
        let filterCriteria = {
          // employee_name: [],
          // index_name: [],
          // index_standard: [],
          // target: [],
          // index_weight: []
        };


        // 按照用户名称过滤数据
        if (this.select_user_name_list && this.select_user_name_list.length > 0) {
          flag0 = true;
          filterCriteria.employee_name = this.select_user_name_list
        }

        // 按照指标名称过滤数据
        if (this.select_index_name_list && this.select_index_name_list.length > 0) {
          flag1 = true;
          filterCriteria.index_name = this.select_index_name_list
        }

        // 按照指标标准过滤数据
        if (this.select_index_standard_list && this.select_index_standard_list.length > 0) {
          flag2 = true;
          filterCriteria.index_standard = this.select_index_standard_list
        }

        // 按照目标值过滤数据
        if (this.select_target_list && this.select_target_list.length > 0) {
          flag3 = true;
          filterCriteria.target = this.select_target_list
        }

        // 按照权重过滤数据
        if (this.select_index_weight_list && this.select_index_weight_list.length > 0) {
          flag4 = true;
          filterCriteria.index_weight = this.select_index_weight_list
        }


        if(!flag0 && !flag1 && !flag2 && !flag3 && !flag4) result = data


        // 根据条件对象筛选数组
        result = data.filter(user => {
          return Object.keys(filterCriteria).every(key => {
            if (Array.isArray(filterCriteria[key])) {
              // 如果条件值是数组，则检查属性值是否包含在数组中
              return filterCriteria[key] && filterCriteria[key].includes(user[key]);
            }
          });
        });
        return result

      },


      chooseOptions(item, type) {
        // 所有的过滤条件
        if (!this.selectOptions.includes(item)) this.selectOptions.push(item);
        else {
          let select_option_index = 0
          this.selectOptions.forEach((select, index) => {
            if (select == item) {
              select_option_index = index
            }
          })
          this.selectOptions.splice(select_option_index, 1)
        }

        // 用户名称
        if (type == 'user_name') {
          if (!this.select_user_name_list.includes(item)) this.select_user_name_list.push(item);
          else {
            let select_index = 0
            this.select_user_name_list.forEach((select, index) => {
              if (select == item) {
                select_index = index
              }
            })
            this.select_user_name_list.splice(select_index, 1)
          }
        }

        // 指标名称
        if (type == 'index_name') {
          if (!this.select_index_name_list.includes(item)) this.select_index_name_list.push(item);
          else {
            let select_index = 0
            this.select_index_name_list.forEach((select, index) => {
              if (select == item) {
                select_index = index
              }
            })
            this.select_index_name_list.splice(select_index, 1)
          }
        }

        // 考核标准
        if (type == 'index_standard') {
          if (!this.select_index_standard_list.includes(item)) this.select_index_standard_list.push(item);
          else {
            let select_index = 0
            this.select_index_standard_list.forEach((select, index) => {
              if (select == item) {
                select_index = index
              }
            })
            this.select_index_standard_list.splice(select_index, 1)
          }
        }

        // 目标值
        if (type == 'target') {
          if (!this.select_target_list.includes(item)) this.select_target_list.push(item);
          else {
            let select_index = 0
            this.select_target_list.forEach((select, index) => {
              if (select == item) {
                select_index = index
              }
            })
            this.select_target_list.splice(select_index, 1)
          }
        }

        // 权重
        if (type == 'weight') {
          if (!this.select_index_weight_list.includes(item)) this.select_index_weight_list.push(item);
          else {
            let select_index = 0
            this.select_index_weight_list.forEach((select, index) => {
              if (select == item) {
                select_index = index
              }
            })
            this.select_index_weight_list.splice(select_index, 1)
          }
        }

      },
      toggleAllCheck() {
        this.rvenotList.forEach(item => {
          item.isChecked = this.isAllChecked;
        });
      },
      updateAllCheckStatus() {
        this.isAllChecked = this.rvenotList.every(item => item.isChecked);
      },
      cancelBatchOperation() {
        this.isBatchOperation = false
      },
      confirmBatchOperation() {
        if (this.batch_result_imgs && this.batch_result_imgs.length > 0) {
          this.rvenotList.forEach(item => {
            if (item.isChecked) {
              item.result_file.imgs = this.batch_result_imgs
            }
          })
        }
        if (this.batch_result_cache !== '' && this.batch_result_cache !== null) {
          this.rvenotList.forEach(item => {
            if (item.isChecked) {
              if (item.index_type == 1) item.result_cache = this.batch_result_cache
            }
          })
        }
        this.isBatchOperation = false
      },
      openBatchOperation(type) {
        if (this.selectList && this.selectList.length > 0) {
          this.showType = type
          this.isBatchOperation = true
        }
      },

      closeIsResult() {
        this.isResult = false;
        this.batch_result_cache = "";
        this.batch_result_imgs = [];
        this.selectOptions = [];
        this.select_user_name_list = [];
        this.select_index_name_list = [];
        this.select_index_standard_list = [];
        this.select_target_list = [];
        this.select_index_weight_list = [];
      },

      openText2(index) {
        this.$dialog.alert({
          message: '支持多条件筛选，批量录入结果值及图片',
        }).then(() => {});
      },
      openText(item) {
        let message = `${item.employee_name}的考核指标已评分，不可调整结果值；如需调整，请联系绩效管理员`;
        this.$dialog.alert({
          message: message,
        }).then(() => {});
      },
      confirmCreator(data) {
        let userName = '';
        this.userName = "全部人员"
        this.employee_list = [];
        if (data.employee !== null && data.employee.length != 0) {
          data.employee.forEach(item => {
            this.employee_list.push(item.id);
            userName += (item.name + ',')
          })
          this.userName = userName;
        }
        this.selected_data = data;
        this.selectUser = false;
        this.getPackageDtail();
      },
      downWgt(url, name) {
        let self = this
        if (!window.plus) {
          window.open(url, '_blank');
          return false
        }
        plus.downloader.createDownload(encodeURI(url), {
            filename: '_doc/update/'
          },
          function(d, status) {
            if (status == 200) {
              plus.runtime.openFile(d.filename, {}, (err) => {
                // console.log(JSON.stringify(err))
              });
            } else {
              self.$toast.clear()
              Notify({
                type: 'danger',
                message: '下载失败，请稍后重试',
                duration: 1000
              })
            }
          }
        ).start()
      },
      openImg(imgs, index) {
        let imgArr = imgs.map(item => {
          return item.url
        })
        ImagePreview({
          images: imgArr,
          startPosition: index,
        });
      },
      // 返回布尔值
      beforeRead(file) {
        const isJPG = /^image\/(jpeg|png|jpg)$/.test(file.type);
        // const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isJPG) {
          this.$toast('上传图片只能是 jpeg|png|jpg 格式!');
        }
        // if (!isLt2M) {
        //   this.$toast('上传图片大小不能超过 2MB!');
        // }
        return isJPG;
      },
      // 返回上一页
      routerBak() {
        this.$route_back();
      },
      rveno() {
        // 取消
        this.$route_back();
      },
      // 提交
      save(num) {
        let isLr = false;
        let parameterArr = [];
        let isPost = true;
        let str = '';
        this.selectList.some(item => {
          let images = []; //图片
          let result_info = [];
          if (item.result_file.imgs) {
            item.result_file.imgs.forEach(imgItem => {
              let name = imgItem.split('/');
              let obj = {
                name: name[name.length - 1],
                url: imgItem,
              }
              images.push(obj)
            })
          }
          item.result_file.images = images;

          result_info.push({
            dimension_key: item.dimension_id, //维度索引
            index_key: item.index_key, //指标索引
            index_id: item.index_id, //指标ID
            result_file: item.result_file
          });
          if (item.index_type == 1) {
            result_info[0].result = item.result_cache
          }
          let data = {
            id: item.pe_id, //个人考核包ID
            cache: num == 1 ? 1 : 0, // 是否暂存 1 是 0 否（提交）
            info: item,
            result_info: JSON.stringify(result_info),
            sub: num == 3 ? 0 : 1
          };

          if (num == 3) {
            if (item.isUpdate) {
              if (item.index_type == 1) {
                if (!item.result_cache) {
                  isPost = false;
                  str = item.index_name + ': 请输入结果值'
                  return true
                }
                parameterArr.push(data);
              } else {
                if (item.result_file.append.length == 0 && item.result_file.images.length == 0) {
                  isPost = false;
                  str = item.index_name + ': 至少添加一份附件'
                  return true
                }
                parameterArr.push(data);
              }
            }
          } else {
            if (item.index_type == 1 && item.result_cache !== null && item.result_cache !== '') {
              parameterArr.push(data);
            }
            if (item.index_type != 1 && (item.result_file.append.length > 0 || item.result_file.images.length >
                0)) {
              parameterArr.push(data);
            }
          }
        });
        if (num == 3) {
          if (!isPost) {
            this.$toast(str);
            return false;
          }
        } else {
          if (parameterArr.length == 0) {
            this.$toast.fail('至少输入一项结果值或非量化指标添加一份附件');
            return false;
          }
        }
        this.webSocket(parameterArr);
      },
      webSocket(data) {
        this.resultList = data;
        this.resultIndex = 0;
        this.percentage = 0;
        this.results = [];
        this.isResult = true;
        this.opneWebSocket();
      },
      opneWebSocket() {
        let wsData = this.resultList;
        if (wsData[this.resultIndex]) {
          this.$axiosUser('post', '/api/pro/per/package/record_result', wsData[this.resultIndex]).then(res => {
            this.onmessageWS(wsData[this.resultIndex], true);
          }).catch(e => {
            let data = wsData[this.resultIndex];
            data.msg = e.data.msg;
            this.onmessageWS(data, false);
          });

        }
      },
      onmessageWS(data, isJx) {
        this.results.unshift(data);
        this.resultIndex++;
        if (!isJx) {
          return false
        }
        this.opneWebSocket();
        // 进度条
        let lng = this.resultList.length;
        this.percentage += Math.floor(100 / lng);
        if (lng == this.results.length) {
          this.percentage = 100;
        }
      },
      getPackageDtail() {
        this.$axiosUser('get', '/api/pro/per/package/result_job_list', {
            pe_ids: this.peIds,
            page: 1,
            page_size: 2000,
            employee_ids: JSON.stringify(this.employee_list)
          }).then(res => {
            let list = res.data.data.list;
            let pe_flows = res.data.data.pe_flows;
            let statusList = []; // 已录入指标
            let noStatusList = []; // 未录入指标

            list.forEach(item => {
              let imgs = [];
              if (item.result_file) {
                item.result_file.images.forEach(img => {
                  imgs.push(img.url);
                })
                item.result_file.imgs = imgs;
              }
              item.isChecked = false;
              item.dept_list = this.$getEmployeeMapItem(item.employee_id).employee_detail.dept_list;
              let target = item.target ? item.target + ' ' + item.unit : null;
              item.dil = [{
                  lab: '考核标准',
                  prop: item.index_standard ? item.index_standard : null
                },
                {
                  lab: '权重%',
                  prop: item.index_weight ? item.index_weight : null
                },
                {
                  lab: '备注',
                  prop: item.index_remark ? item.index_remark : null
                },
                {
                  lab: '目标值',
                  prop: target
                },
              ];

              if (item.index_result_status == 1) {
                noStatusList.push(item);
              }
              if (item.index_result_status == 2) {
                item.isUpdate = true;
                pe_flows.forEach(e => {
                  if (e.pe_id == item.pe_id) {
                    item.isUpdate = this.returnIs(e.flow);
                  }
                })
                statusList.push(item);
              }
            });


            this.statusList = statusList;
            this.noStatusList = noStatusList;

            if (this.active == 0) {
              this.rvenotList = JSON.parse(JSON.stringify(noStatusList));
            } else if (this.active == 1) {
              this.rvenotList = this.statusList;
            }


            let obj = {},
              arr = [];
            noStatusList.forEach(item => {
              if (obj[item.index_name]) {
                obj[item.index_name].push(item)
              } else {
                obj[item.index_name] = [item]
              }
            })
            for (let key in obj) {
              arr.push(obj[key]);
            }
            arr.sort(function(a, b) {
              return b.length - a.length
            });
            let noStatusListDx = [];
            arr.forEach(item => {
              noStatusListDx.push(...item);
            })

            this.noStatusListDx = noStatusListDx
            this.title1 = '未录入' + '(' + noStatusList.length + ')'
            this.title2 = '已录入' + '(' + statusList.length + ')'
            this.minFormactive[0].age = noStatusList.length; // 未
            this.minFormactive[1].age = statusList.length; // 已
            if (this.isUpdate) {
              this.active = 1
            }
            this.initFilterData();
          })
          .finally(() => {
            this.skeletonLoad = false;
          });
      },
      uniqueArray(arr) {
        return [...new Set(arr.map(item => JSON.stringify(item)))].map(item => JSON.parse(item));
      },

      initFilterData() {
        if(this.rvenotList && this.rvenotList.length > 0) {
          this.user_list = [];
          this.index_name_list = [];
          this.index_standard_list = [];
          this.target_list = [];
          this.index_weight_list = [];
          this.rvenotList.forEach(item => {
            this.user_list.push(item.employee_name);
            this.index_name_list.push(item.index_name);
            this.index_standard_list.push(item.index_standard);
            this.target_list.push(item.target);
            this.index_weight_list.push(item.index_weight);
          })
          this.user_list = this.uniqueArray(this.user_list);
          this.index_name_list = this.uniqueArray(this.index_name_list);
          this.index_standard_list = this.uniqueArray(this.index_standard_list);
          this.target_list = this.uniqueArray(this.target_list);
          this.index_weight_list = this.uniqueArray(this.index_weight_list);
        }
      },
      //判断评分节点是否有人评了分
      returnIs(list) {
        let is = true;
        list.forEach(item => {
          if (item.code == 'score_supervisor' || item.code == 'special_scorer') {
            item.target.forEach(e => {
              if (e.status == 2) {
                is = false;
              }
            })
          }
        })
        return is
      },
    },
    created() {
      if (this.peIds) {
        this.getPackageDtail();
      }

    },
  };
</script>

<style scoped lang="less">
  .userName {
    position: absolute;
    left: 0%;
    height: 50px;
    width: 100%;
    opacity: 0;
  }

  .results {
    border-bottom: 1px solid #f1f1f1;
    text-align: center;
    font-size: 0.24rem;
  }

  .results div {
    padding: 10px;
  }

  .line-feed {
    white-space: pre-wrap;
  }

  .all {
    flex: 1;
    position: relative !important;
    background-color: #f5f7fa;
    padding-bottom: 0.3rem;
    overflow-y: scroll;
  }

  header {
    width: 100%;
    height: 0.8rem;
    font-size: 0.3rem;
    z-index: 1;
  }

  .isIos {
    height: calc(100% - 3.6rem);
  }

  footer {
    width: 100%;
    background-color: #fff;
    border-top: 1px solid #e2e2e2;
    padding: 0.1rem;

    .footfoot {
      .footcol {
        text-align: center;
      }

      .footBut {
        display: flex;
      }

    }
  }

  .footcolButno {
    border: 1px solid #42a8ff;
    width: 1.4rem;
    height: 0.8rem;
    font-size: 0.28rem;
    color: #2f9eff;
    background-color: #ffffff;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
  }

  .footcolButok {
    border: 0;
    width: 1.4rem;
    height: 0.8rem;
    font-size: 0.28rem;
    color: #fff;
    background-color: #42a8ff;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
  }

  .tab-box {
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 0.01rem solid #f5f7fa;
    font-size: 0.28rem;

    .tab-item {
      flex: 1;
      height: 0.8rem;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }



  .popup-title {
    width: 100%;
    height: 0.6rem;
    line-height: 0.6rem;
    font-weight: 600;
    font-size: 0.28rem;
    margin-bottom: 10px;
    text-align: center;
  }

  .filter-options-box {
    width: 100%;
    height: 8rem;
    background-color: white;
    position: absolute;
    top: 1rem;
    left: 0;
  }

  .batch-operate {
    width: 100%;
    background-color: white;
    height: 1rem;
    font-size: 0.28rem;
    color: rgb(146, 146, 146);
    display: flex;
    align-items: center;
    box-sizing: border-box;
  }


  .dropdown-item-title {
    margin-bottom: 10px;
    padding: 0 0 0 10px;
    color: rgb(146, 146, 146);
    font-size: 0.27rem;
  }

  .dropdown-item-content-list {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding: 0 10px;
    margin-bottom: 10px;
    box-sizing: border-box;

    .dropdown-item-content {
      flex: 0 0 calc((100% - 10px)/3);
      height: 0.48rem;
      line-height: 0.48rem;
      background: #F5F7FA;
      border-radius: 0.28rem;
      color: rgb(146, 146, 146);
      font-size: 0.27rem;
      text-align: center;
      margin: 0 5px 5px 0;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      transition: 0.3s;
      padding: 0 0.24rem;
      box-sizing: border-box;

      &.active {
        background: #42a8ff;
        color: white;
      }

      &:nth-child(3n) {
        /* 去除第3n个的margin-right */
        margin-right: 0;
      }
    }
  }

  .van-dropdown-item {
    position: relative;
  }

  .btn-container {
    width: 100%;
    background-color: #fff;
    display: flex;
    justify-content: space-around;
    border-top: 0.01rem solid #f5f7fa;
    padding: 10px 0;
    box-sizing: border-box;
    z-index: 10;
    position: absolute;
    bottom: 0;
    left: 0;
  }

  .disabled {
    color: #bbb;
    border-color: #bbb;
  }
</style>
