<template>
  <div class="pk-box">
    <el-tabs v-model="editableTabsValue" type="card" editable @tab-click="getListByStatus" @tab-remove="removeTab">

      <el-tab-pane
        label="进行中"
        name="status1">
      </el-tab-pane>

      <el-tab-pane
        label="未开始"
        name="status3">
      </el-tab-pane>


      <el-tab-pane
        label="已结束"
        name="status2">
      </el-tab-pane>

      <el-tab-pane
        :key="item.name"
        v-for="(item, index) in editableTabs"
        :label="item.title"
        :name="item.name"
      >
      </el-tab-pane>
    </el-tabs>

    <div style=" background-color: #fff; padding:15px;" v-show="editableTabsValue != 'status1' && editableTabsValue != 'status2' && editableTabsValue != 'status3'">
      <PkDetail @getlistnew="getlistnew" ref="PkDetailCom" :pk_id="editableTabsValue"></PkDetail>
    </div>


    <div style=" background-color: #fff; padding:15px;" v-show="editableTabsValue == 'status1' || editableTabsValue == 'status2' || editableTabsValue == 'status3'">
      <div style="margin-top:2px; margin-bottom:15px;" class="inline-block-btn-list">

        <div class="gap-right-8" style="display:inline-block; width:310px;">
          <el-input
            placeholder="输入关键词查找"
            ref="search-bar"
            v-model="filter.keywords"
            class="input-with-select"
            width="200px"
            @keyup.enter.native="onFilterChanged">
            <el-button slot="append" icon="el-icon-search" @click="onFilterChanged"></el-button>
          </el-input>
        </div>
      </div>


      <el-table stripe
                v-loading="loading"
                ref="multipleTable"
                :data="tableData"
                tooltip-effect="dark"
                @filter-change="filterHandler"
                style="width: 100%">


        <el-table-column prop="name" label="名称"></el-table-column>
        <el-table-column prop="employees" label="参与人" :show-overflow-tooltip="true">
          <template slot-scope="scope">
             <span>{{scope.row.employees}}</span>
            <!-- <span style="" v-for="(item,idx) in scope.row.employees" :key="idx">{{item.name}}</span> -->
          </template>
        </el-table-column>
        <el-table-column label="开始时间">
           <template slot-scope="scope">
                <i class="el-icon-time"></i>
                <span>{{scope.row.start_time}}</span>
              </template>
        </el-table-column>

        <el-table-column label="结束时间">
           <template slot-scope="scope">
                <i class="el-icon-time"></i>
                <span>{{scope.row.end_time}}</span>
              </template>
        </el-table-column>




        <el-table-column label="操作">
          <template slot-scope="scope">
            <div>
              <el-button type="text" @click="addTab(scope.row.name, scope.row.id)">查看
              </el-button>



            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        layout="total,sizes, prev, pager, next"
        @size-change="handleSizeChange"
        :page-size="pageLimit"
        :page-sizes="[10, 20, 50, 100]"
        :total="totalCount"
        :current-page.sync="currentPage"
        @current-change="changePage">
      </el-pagination>


      <el-dialog :title="dialogTaskTitle" :visible.sync="dialogTaskVisible" width="600px" :close-on-click-modal="false">
        <el-scrollbar wrap-class="column-wrapper scrollable-items-container" :native="false" style="height: 300px;">
          <el-form :model="taskForm" ref="newTaskForm" :rules="taskFormRules" @submit.native.prevent
                   style="padding:0 30px;">

            <el-steps :active="createPKStepActive" simple finish-status="success">
              <el-step title="基本信息"></el-step>
              <el-step title="创建团队"></el-step>
              <el-step title="创建规则"></el-step>
            </el-steps>
            <div style="padding:50px 65px;" v-show="createPKStepActive==0">
              <el-form-item v-show="createPKStepActive==0" label="名称" prop="name" label-width="55px">
                <el-input v-model="taskForm.name" :value="taskForm.name" auto-complete="off"></el-input>
              </el-form-item>
              <el-form-item v-show="createPKStepActive==0" label="时间" prop="time_range[0]" label-width="55px">
                <el-date-picker
                  style="width:290px"
                  v-model="taskForm.time_range"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  :picker-options="instantPickerOptions">
                </el-date-picker>
              </el-form-item>
            </div>
            <el-card v-show="createPKStepActive==1" class="box-card card-box-item" shadow="hover"
                     v-for="(item,index) in taskForm.team" :key="index" style="margin-top:15px;">
              <div style="line-height: 3;">队名：{{item.name}}
                <el-button type="text" style="float:right;" @click="teamDelete(index)">删除</el-button>
                　　
                <el-button type="text" style="float:right;" @click="teamEdit(index)">修改</el-button>
              </div>


              <el-tag
                v-for="tag in item.member"
                :key="tag"
                :type="item.leader_id == tag?'warning':''">
                {{EmployeeMap[tag].name}}<span v-if="item.leader_id==tag">（队长）</span>
              </el-tag>
            </el-card>


            <div style="text-align:center; padding:15px;" v-show="createPKStepActive==1">
              <el-button @click="addTeam" type="primary" plain>创建团队</el-button>
            </div>



            <div style="text-align:center; padding:15px;" class="rules-list" v-show="createPKStepActive==2">


              <el-tag
                :key="tag"
                v-for="tag in taskForm.rules"
                closable
                :disable-transitions="false"
                @close="handleClose(tag)">
                {{tag}}
              </el-tag>
              <el-input
                class="input-new-tag"
                v-if="inputVisible"
                v-model="inputValue"
                ref="saveTagInput"
                @keyup.enter.native="handleInputConfirm"
                @blur="handleInputConfirm"
              >
              </el-input>
              <el-button v-else class="button-new-tag" @click="showInput" type="primary" plain>增加规则</el-button>



            </div>




          </el-form>
        </el-scrollbar>

        <span slot="footer" class="dialog-footer" v-show="createPKStepActive<2">

    <el-button @click="dialogTaskClose">取 消</el-button>


        <el-button @click="createPKStepActive--" v-show="createPKStepActive>0">上一步</el-button>
    <el-button type="primary" @click="setPKNext">下一步</el-button>
  </span>


        <span slot="footer" class="dialog-footer" v-show="createPKStepActive==2">

    <el-button @click="dialogTaskClose">取 消</el-button>

         <el-button @click="createPKStepActive--">上一步</el-button>

    <el-button type="primary" @click="dialogTaskSend">保 存</el-button>
  </span>


      </el-dialog>


      <el-dialog
        modal-append-to-body
        title="创建团队"
        top="40px"
        width="620px"
        :visible.sync="dialogAddteamVisible"
        :close-on-click-modal="false">
        <div style="padding:0 40px;">
          <el-form :model="teamInfo" ref="newTeamForm" :rules="teamFormRules" @submit.native.prevent>
            <el-steps :active="setTeamActive" finish-status="success" simple>
              <el-step title="团队名称"></el-step>
              <el-step title="选择成员"></el-step>
              <el-step title="设置队长"></el-step>
            </el-steps>
            <el-form-item v-show="setTeamActive==0" label="队名" prop="name" label-width="55px" style="padding:50px 100px">
              <el-input v-model="teamInfo.name" :value="teamInfo.name" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="队长" prop="name" label-width="55px" v-show="setTeamActive==2" style="padding:50px 100px">
              <el-select
                v-model="teamInfo.leader_id"
                filterable
                placeholder="选择队长">
                <el-option
                  v-for="item in teamInfo.member"
                  :key="item"
                  :label="EmployeeMap[item].name"
                  :value="item">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item v-show="setTeamActive==1" prop="member" label-width="0">


              <el-transfer v-show="setTeamActive==1"
                           style="padding-top:20px;"
                           v-model="teamInfo.member"
                           filterable
                           target-order="origin"
                           :titles="['员工列表', 'PK成员']"
                           :data="assignableList">
              </el-transfer>
            </el-form-item>

          </el-form>
        </div>

        <div slot="footer" class="dialog-footer" style="text-align:center;" v-show="setTeamActive!=2">
          <el-button @click="dialogAddteamVisible = false">取 消</el-button>
          <el-button @click="setTeamActive--" v-show="setTeamActive>0">上一步</el-button>
          <el-button type="primary" @click="setTeamNext" v-show="setTeamActive!=2">下一步</el-button>


        </div>

        <div slot="footer" class="dialog-footer" style="text-align:center;" v-show="setTeamActive==2">
          <el-button @click="dialogAddteamVisible = false">取 消</el-button>
          <el-button @click="setTeamActive--" v-show="setTeamActive==2">上一步</el-button>

          <el-button type="primary" @click="saveTeamInfo">确 定</el-button>
        </div>
      </el-dialog>


      <el-dialog
        modal-append-to-body
        title="为团队添加成员"
        width="660px"
        :visible.sync="dialogAssignManagerVisible"
        :close-on-click-modal="false">
        <div style="padding-left:60px; padding-bottom:10px;">
          <el-transfer
            v-model="teamTemplate.member"
            filterable
            target-order="origin"
            :titles="['员工列表', 'PK成员']"
            :data="assignableList">
          </el-transfer>
        </div>
        <div slot="footer" class="dialog-footer" style="text-align:center;">
          <el-button @click="dialogAssignManagerVisible = false">取 消</el-button>
          <el-button type="primary" @click="saveEmployeeAssigns">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
  import qs from 'qs'
  import {getToken} from '@/utils/auth'
  import PkDetail from './PkDetail'
  export default {
    components:{
      PkDetail
    },
    data() {
      //验证成员数据

      return {

        editableTabsValue: 'status1',
        editableTabs: [],
        tabIndex: 2,
        dialogAddteamVisible: false,
        teamInfo: {
          name: '',
          leader_id: 0,
          member: [],
        },
        inputVisible: false,
        inputValue: '',
        createPKStepActive: 0,
        Xtoken: {'X-Token': getToken()},
        files: [],
        instantPickerOptions: {},
        profile: this.$store.getters.user_info,
        filter: {
          status: '01',
          duty: 'waiting',
          keywords: ''
        },
        loading: false,
        status_list: [{text: '未领取', value: 0}, {text: '已领取', value: 1}, {text: '已完成', value: 2}, {
          text: '已取消',
          value: -1
        }],
        dialogTaskVisible: false,
        dialogAssignManagerVisible: false,
        dialogTaskTitle: '创建PK',
        totalCount: 0,
        currentPage: 1,
        pageLimit: 10,
        tableData: null,
        dialogCreateCategoryVisible: false,
        dialogEditCategoryVisible: false,
        taskFormApi: '/integral.php/task/add',
        isRequest: false,
        EmployeeMap: {},
        teamTemplate: {
          name: '',
          member: [],
          leader: 0
        },
        taskForm: {
          name: '',
          time_range: '',
          team: [],
          rules:[]
        },
        teamKey: -1,
        employeeOptions: [],
        taskFormRules: {
          name: [
            {required: true, message: '请输入PK名称', trigger: 'blur'},
            {min: 3, max: 50, message: '长度在 3 到 50 个字符', trigger: 'blur'}
          ],
          'time_range[0]': [
            {required: true, message: '请选择时间', trigger: 'blur'}
          ]

        },

        teamFormRules: {
          name: [
            {required: true, message: '请输入团队名称', trigger: 'blur'},
            {min: 3, max: 50, message: '长度在 3 到 50 个字符', trigger: 'blur'}
          ]
        },
        setTeamActive: 0,
        assignableList: [],
        accessEnabled: {
          add: 0,
          delete: 0,
          edit: 0
        }
      }
    },
    watch:{
      editableTabsValue:function () {
        //this.editableTabsValue = editableTabsValue
        setTimeout(() => {
          this.$refs['PkDetailCom'].loadPkDetail()
        })
      }
    },
    methods: {
      getlistnew() {
        this.loadTaskList();
      },
  //  status1  进行中  status3  未开始  status2 结束
      getListByStatus(tab, event){
        if(tab.name == 'status1'){
          this.filter.status = '1'
          this.filter.duty = 'running'
          this.loadTaskList()
        }else if(tab.name == 'status2'){
          this.filter.status = '2'
          this.filter.duty = 'end'
          this.loadTaskList()
        }else if(tab.name == 'status3'){
          this.filter.status = '0'
          this.filter.duty = 'waiting'
          this.loadTaskList()
        }else{
          //打开的是标签页
        }
      },

      addTab(name,id){
        const self = this
        let _editableTabs = true
        for(let i in this.editableTabs){
          if(this.editableTabs[i].name*1 == id){
            _editableTabs = false
          }
        }
        if(_editableTabs){
          this.editableTabs.push({title:name, name: id.toString()})
        }

        this.editableTabsValue = id.toString()
        this.$nextTick(() => {
          if(id > 0){
            self.$refs['PkDetailCom'].loadPkDetail()
          }
        })
      },

      removeTab(name){
        for(let i in this.editableTabs){
          if(this.editableTabs[i].name == name){

            if(this.editableTabs.length == 1){
              if(this.filter.status == '1'){
                this.editableTabsValue = 'status1'
              }else if(this.filter.status == '2'){
                this.editableTabsValue = 'status2'
              }else if(this.filter.status == '0'){
                this.editableTabsValue = 'status3'
              }
            }else{
              if(this.editableTabs.length > i*1+1){
                this.editableTabsValue = this.editableTabs[i*1+1].name
              }else{

                this.editableTabsValue = this.editableTabs[i*1-1].name

              }
            }
            this.editableTabs.splice(i,1)
            if (this.editableTabs.length == 0) {
              if (this.filter.status == "1") {
                this.editableTabsValue = "status1";
              } else if (this.filter.status == "2") {
                this.editableTabsValue = "status2";
              } else if (this.filter.status == "0") {
                this.editableTabsValue = "status3";
              }
            }
          }
        }
      },




      handleClose(tag) {
        this.taskForm.rules.splice(this.taskForm.rules.indexOf(tag), 1);
      },

      showInput() {
        this.inputVisible = true;
        this.$nextTick(_ => {
          this.$refs.saveTagInput.$refs.input.focus();
        });
      },

      handleInputConfirm() {
        let inputValue = this.inputValue;
        if (inputValue) {
          this.taskForm.rules.push(inputValue);
        }
        this.inputVisible = false;
        this.inputValue = '';
      },


      setTeamNext() {
        const self = this

        if (self.setTeamActive == 1 && this.teamInfo.member.length == 0) {
          this.$message({
            message: '最少要选择一个成员',
            type: 'warning'
          })
          return false
        }


        const form = this.$refs['newTeamForm']
        form.validate((valid) => {
          if (valid) {
            self.setTeamActive++
            if (self.setTeamActive == 2) {
              self.teamInfo.leader_id = self.teamInfo.member[0]
            }
          }
        })


      },


      setPKNext() {
        const self = this
        if (self.createPKStepActive == 1 && this.taskForm.team.length <= 1) {
          this.$message({
            message: '至少要创建两个团队',
            type: 'warning'
          })
          return false
        }
        const form = this.$refs['newTaskForm']
        form.validate((valid) => {
          if (valid) {
            self.createPKStepActive++
          }
        })

      },
      saveTeamInfo() {
        const self = this
        const form = this.$refs['newTeamForm']


        form.validate((valid) => {
          if (valid) {
            if (self.teamKey >= 0) {
              self.taskForm.team[self.teamKey] = self.teamInfo
            } else {
              self.taskForm.team.push(self.teamInfo)
            }
            const member = self.teamInfo.member
            self.teamKey = -1
            self.teamInfo = {
              name: '',
              leader_id: 0,
              member: [],
              rules:[]
            }
            const _assignableList = []
            for (let i in self.assignableList) {
              if (member.indexOf(self.assignableList[i].key) < 0) {
                _assignableList.push(self.assignableList[i])
              }
            }
            self.assignableList = _assignableList
            console.log(self.taskForm)
            self.setTeamActive = 0
            form.clearValidate()
            self.dialogAddteamVisible = false
          } else {
            return false
          }
        })
      },
      saveEmployeeAssigns() {
      },
      loadEmployeeList: function (managerType, deptId) {
        deptId = deptId || 0
        const params = {
          site_id: this.profile.site_id,
          manager_type: managerType
        }
        if (deptId > 0) {
          params.dept_id = deptId
        }
        var self = this
        this.$http('get','/integral.php/ajax_request_common/get_manager_transfer',params).then(function (response) {
          if (response.status == 200) {
            var jsonData = response.data
            try {
              const assignableList = []
              for (const employee in jsonData.assignable_list) {
                const value = jsonData.assignable_list[employee]
                const item = {
                  key: value.id,
                  label: value.name
                }
                if (value.id == jsonData.creator_id) {
                  item.disabled = true
                }
                assignableList.push(item)
              }
              console.log(assignableList)

              self.assignableList = assignableList
              // self.assignedValues = jsonData.assigned_values
              // self.dialogAssignManagerVisible = true
            } catch (err) {
              console.log(err)
            }
          }
        }).catch(function (error) {
          console.log(error)
        })
      },
      addTeam() {
        self.setTeamActive = 0
        this.dialogAddteamVisible = true
      },
      teamEdit(key) {

        self.setTeamActive = 0


        //把已经选择的员工信息加回左边列表
        this.teamKey = key
        this.teamInfo = this.taskForm.team[key]
        for (let i in this.teamInfo.member) {
          this.assignableList.push({
            key: this.teamInfo.member[i],
            label: this.EmployeeMap[this.teamInfo.member[i]].name
          })
        }

        this.dialogAddteamVisible = true
      },

      onFilePreView(file) {
        // 点击时查看文件
        const $ext_list = ['doc', 'docx', 'pptx', 'xls', 'xlsx', 'ppt', 'txt']
        const $ext_name = file.url.split('.')[1]
        if ($ext_list.indexOf($ext_name) >= 0) {
          console.log('https://view.officeapps.live.com/op/view.aspx?src=' + this.serverdomain + file.url)
          window.open('https://view.officeapps.live.com/op/view.aspx?src=' + this.serverdomain + file.url, '_blank')
        }
        const $ext_list1 =  ['jpg', 'png', 'bmp', 'jpeg','JPG','PNG']
        const $ext_name1 = url.split('.')[1]
        if ($ext_list1.indexOf($ext_name1) >= 0) {
          console.log(url)
          window.open(url, '_blank')
        }
      },

      onFileRemove(file, fileList) {
        this.taskForm.file_list = fileList
      },

      teamDelete(key){
        const self = this
        this.$confirm('确定要删除吗？', '删除团队', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          const member = self.taskForm.team[key].member
          for (let i in member) {
            self.assignableList.push({key:self.EmployeeMap[member[i]].id, label:self.EmployeeMap[member[i]].name})
          }
          self.taskForm.team.splice(key, 1)
        }).catch(() => {

        })
      },
      handleFilesSuccess(response, file, fileList) {
        this.taskForm.file_list = fileList
        console.log(this.taskForm.file_list)
      },
      beforeFilesUpload() {

      },
      handleSizeChange(val) {
        this.pageLimit = val
        this.onFilterChanged()
      },
      filterHandler: function (value) {
        if (typeof (value.status) !== 'undefined' && value.status.length == 0) {
          this.filter.status = []
        }
        if (typeof (value.status) !== 'undefined' && value.status.length > 0) {
          this.filter.status = value['status']
        }

        this.onFilterChanged()
      },

      dialogTaskClose: function () {
        const form = this.$refs['newTaskForm']
        form.clearValidate()
        this.dialogTaskVisible = false
      },

      dialogTaskOpen: function (title, id) {
        this.createPKStepActive = 0
        this.loadWidgetData()

        const self = this
        this.dialogTaskTitle = typeof (id) === 'undefined' ? '创建PK' : '修改任务'
        this.dialogTaskVisible = true
        if (typeof (id) !== 'undefined') {
          this.taskForm['id'] = id
          self.taskFormApi = '/integral.php/integral_pk/update'
          console.log('更换更新接口')
          this.loadTaskInfo(id)
        } else {
          this.taskForm = {
            name: '',
            time_range: [],
            team: [],
            rules:[]
          }
          self.taskFormApi = '/integral.php/integral_pk/add'
          console.log('更换增加数据接口')
        }
        this.$nextTick(() => {
          const form = this.$refs['newTaskForm']
          console.log(form)
          if (typeof (id) === 'undefined') {
            form.resetFields()
            form.clearValidate()
          }
        })
      },

      loadTaskInfo: function (id) {
        const self = this

        this.$http('get','/integral.php/integral_pk/get_pk_info',{id: id}).then(function (response) {
          if (response.status == 200) {
            var jsonData = response.data
            self.taskForm.name = jsonData.data.name
            self.taskForm.id = jsonData.data.id
            self.taskForm.time_range = jsonData.data.time_range
          }
        }).catch(function (error) {
          console.log(error)
        })
      },

      dialogTaskSend: function () {
        const self = this
        if (self.isRequest) {
          return
        }

        if(self.taskForm.rules.length == 0){
          this.$message({
            message: '至少要创建一条积分规则',
            type: 'warning'
          })
          return false
        }

        const form = this.$refs['newTaskForm']
        form.validate((valid) => {
          if (valid) {
            this.$http('post',self.taskFormApi,qs.stringify({row: this.taskForm}),
              // headers: {
              //   'Content-Type': 'application/x-www-form-urlencoded'
              // }
            ).then(function (response) {
              setTimeout(function () {
                self.isRequest = false
              }, 200)

              var message = ''
              var status = 0
              if (response.status == 200) {
                var data = response.data

                message = data.msg

                if (data.code == 1) {
                  self.$message({
                    message: message,
                    type: 'success'
                  })
                  self.dialogTaskClose()
                  self.loadTaskList()
                } else {
                  self.$message({
                    message: message,
                    type: 'error'
                  })
                }
              } else {
                message = '服务器太忙了'
              }
            }).catch(function (error) {
              console.log(error)
            })
          } else {
            return false
          }
        })
      },
      onFilterChanged: function () {
        this.currentPage = 1
        this.loadTaskList()
      },
      dateTimeFormatter: function (row, column, cellValue) {
        return cellValue ? this.$moment(cellValue * 1000).format('YYYY-MM-DD HH:mm:ss') : ''
      },
      taskStatusText: function (row, column, cellValue) {
        let text = ''
        switch (cellValue) {
          case 0:
            text = '未领取'
            break
          case 1:
            text = '已领取'
            break
          case 2:
            text = '已完成'
            break
          case -1:
            text = '已取消'
            break
        }
        if (row.expire_text != '') {
          return text + '-' + row.expire_text
        }
        return text
      },
      loadTaskList: function () {
        this.loading = true
        var self = this
        var params = {
          keyword: this.filter.keywords,
          type: 'myself', // 我的pk
          page: this.currentPage,
         // page: (this.currentPage == 1 ? 0 : this.currentPage - 1) * this.pageLimit,
          page_size: this.pageLimit,
          status: this.filter.duty
         // mine:1
        }
        // for (const item in this.filter) {
        //   const value = this.filter[item]
        //   if (item == 'status') {
        //     if (!value || value.length == 0) {
        //       continue
        //     }
        //     params[item] = value
        //   } else {
        //     const valueStr = value.toString()
        //     if (valueStr && valueStr.length > 0) {
        //       params[item] = valueStr
        //     }
        //   }
        // }

        this.$http('get','/api/integral/pk/list',params).then(function (res) {
          if(res.data.code == 1) {
            self.loading = false;
            let jsonData = res.data;
            self.totalCount = jsonData.data.list.total
            self.tableData = jsonData.data.list.list
          }
        }).catch(function (error) {
          console.log(error)
        })
      },
      changePage: function (current) {
        if (isNaN(current) || current < 1) {
          return false
        }
        this.loadTaskList()
      },
      onDismissCreateCategoryDialog: function () {
        var form = this.$refs['newCategoryForm']
        form.clearValidate()
        this.newCategoryForm = {
          name: '',
          pid: []
        }
      },
      onDismissEditCategoryDialog: function () {
        var form = this.$refs['categoryForm']
        form.clearValidate()
        this.categoryForm = {
          id: '',
          name: '',
          pid: []
        }
      },
      submitCreateCategoryForm: function (formName) {
        var form = this.$refs[formName]
        var self = this
        form.validate((valid) => {
          if (valid) {
            if (form) {
              self.sendCreateCategoryRequest()
            }
          } else {
            return false
          }
        })
      },
      submitEditCategoryForm: function (formName) {
        var form = this.$refs[formName]
        var self = this
        form.validate((valid) => {
          if (valid) {
            if (form) {
              self.submitEditCategoryForm(form)
            }
          } else {
            return false
          }
        })
      },

      confirmDelete: function (taskId) {
        this.$confirm('确定要删除此任务吗？', '删除任务', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.deleteTask(taskId)
        }).catch(() => {
        })
      },
      getTask: function (taskId) {
        if (!taskId) {
          return false
        }
        const params = {
          id: taskId
        }
        var self = this

        this.$http('get','/integral.php/integral_pk/get_pk_info',params,'','',
          {transformRequest: [(data) => {
            const paramArray = new Array()
            for (const it in data) {
              paramArray.push(encodeURIComponent(it) + '=' + encodeURIComponent(data[it]))
            }
            return paramArray.join('&')
          }]},
          // headers: {
          //   'Content-Type': 'application/x-www-form-urlencoded'
          // }
        ).then(function (response) {
          var message = ''
          var status = 0
          if (response.status == 200) {
            var data = response.data

            message = data.msg

            if (data.code == 1) {
              self.$message({
                message: message,
                type: 'success'
              })
              self.loadTaskList()
            } else {
              self.$message({
                message: message,
                type: 'error'
              })
            }
          } else {
            message = '服务器太忙了'
          }
        }).catch(function (error) {
          console.log(error)
        })
      },
      deleteTask: function (taskId) {
        if (!taskId) {
          return false
        }
        const params = {
          id: taskId
        }
        var self = this

        this.$http('post','/integral.php/integral_pk/delete',params,'','',
          {transformRequest: [(data) => {
            const paramArray = new Array()
            for (const it in data) {
              paramArray.push(encodeURIComponent(it) + '=' + encodeURIComponent(data[it]))
            }
            return paramArray.join('&')
          }]},
          // headers: {
          //   'Content-Type': 'application/x-www-form-urlencoded'
          // }
        ).then(function (response) {
          var message = ''
          var status = 0
          if (response.status == 200) {
            var data = response.data

            message = data.msg

            if (data.code == 1) {
              self.$message({
                message: message,
                type: 'success'
              })
              self.loadTaskList()
            } else {
              self.$message({
                message: message,
                type: 'error'
              })
            }
          } else {
            message = '服务器太忙了'
          }
        }).catch(function (error) {
          console.log(error)
        })
      },
       loadWidgetData: function() {
        var self = this
        self.loading = true
        let params = {
          page: this.currentPage,
          page_size: this.pageLimit,
          keyword: this.filter.keywords
        }
     
      this.$http('get','/api/employee/index',params)
        .then(function(response) {
          if (response.data.code == 1) {
            self.loading = false
            self.employeeOptions = response.data.data.list;
            console.log(self.employeeOptions)
              self.assignableList = [];
              for (const i in self.employeeOptions) {
                self.EmployeeMap[self.employeeOptions[i].id] =
                  self.employeeOptions[i];
                self.assignableList.push({
                  key: self.employeeOptions[i].id,
                  label: self.employeeOptions[i].name
                });
              }

           // self.totalCount = response.data.data.pageInfo.count;
           // var jsonData = response.data
          }
        })
        .catch(function(error) {
          console.log(error)
        })

        
      // var self = this;
      // this.$http
      //   .get("/integral.php/ajax_request_common/prepare_integral_options", {
      //     params: {
      //       id: this.profile.id,
      //       employee_list: 1
      //     }
      //   })
      //   .then(function(response) {
      //     if (response.status == 200) {
      //       var jsonData = response.data;
      //       try {
      //         self.employeeOptions = jsonData.employee_list;
      //         self.assignableList = [];
      //         for (const i in self.employeeOptions) {
      //           self.EmployeeMap[self.employeeOptions[i].id] =
      //             self.employeeOptions[i];
      //           self.assignableList.push({
      //             key: self.employeeOptions[i].id,
      //             label: self.employeeOptions[i].name
      //           });
      //         }
      //       } catch (err) {
      //         console.log(err);
      //       }
      //     }
      //   })
      //   .catch(function(error) {
      //     console.log(error);
      //   });
    }
    },
    created() {
      this.loadTaskList()

      this.loadWidgetData()
      if (this.profile.manager_type == 4) {
        this.accessEnabled = {
          add: 1,
          delete: 1,
          excel_import: 1,
          edit: 1
        }
      } else if (this.profile.manager_type > 1) {
        this.loadAccessItemFlag()
      }
    }
  }
</script>
<style>
  .el-pagination {
    text-align: center;
    margin-top: 15px;
  }

  .card-box-item .el-card__header {
    line-height: normal !important;
  }

  .card-box-item .el-tag + .el-tag {
    margin-left: 10px;
  }


  .rules-list .el-tag {
    background-color: rgba(64,158,255,.1);
    padding: 0 10px;
    height: auto;
    line-height: 30px;
    font-size: 12px;
    color: #409EFF;
    border-radius: 4px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border: 1px solid rgba(64,158,255,.2);
    white-space: normal;
    display: block;
    text-align: left;
    margin-bottom: 10px;
  }
  #tab-status1 .el-icon-close{display: none;}
  #tab-status2 .el-icon-close{display: none;}
  #tab-status3 .el-icon-close{display: none;}

  .el-tabs--card>.el-tabs__header #tab-status1.el-tabs__item.is-closable:hover {
    padding: 0 20px;
  }.el-tabs--card>.el-tabs__header #tab-status2.el-tabs__item.is-closable:hover {
     padding: 0 20px;
   }
  .el-tabs--card>.el-tabs__header #tab-status3.el-tabs__item.is-closable:hover {
    padding: 0 20px;
  }


  .pk-box .el-tabs__new-tab{display: none;}
  .pk-box .el-tabs__nav-scroll .el-tabs__item{font-size:16px;}
</style>

